dcTeam23 · jmtannus · Jul 28, 2023 · Jul 28, 2023 · Jul 28, 2023 · Aug 23, 2023
diff --git a/README.md b/README.md
@@ -1,4 +1,5 @@
 # Profile card component solution
+*"Nós nunca descobriremos o que vem depois da escolha se não tomarmos uma decisão. Por isso, entenda os seus medos, mas jamais deixe que eles sufoquem os seus sonhos."*
 
 > Please, complete this file with [CONTRIBUTING.md](./CONTRIBUTING.md) instructions
 > Click here to access [solution file](./solution) 
@@ -25,20 +26,14 @@
 
 - Build out the project to the designs provided
 
-### Screenshot
+### [Screenshot](https://fantastic-bassoon-xp7grxqx64ghvv9p-5500.app.github.dev/solution/)
 
-![](./solution/screenshot.jpg)
-
-Add a screenshot of your solution here.  
-
-Then crop/optimize/edit your image however you like, add it to your project, and update the file path in the image above.
-
-**Note: Delete this note and the paragraphs above when you add your screenshot. If you prefer not to add a screenshot, feel free to remove this entire section.**
+![image](https://github.com/jmtannus/profile_card_challenge/assets/61756665/3a3b5d42-9250-4998-8f94-0f05605078b7)
 
 ### Links
 
-- Solution URL: [Add solution URL here](https://github.com/your-repo-name)
-- Live Site URL: [Add live site URL here](https://your-repo-name.github.io)
+- [Solution URL](https://fantastic-bassoon-xp7grxqx64ghvv9p-5500.app.github.dev/solution/) 👈
+- [Live Site URL](https://jmtannus.github.io) 👈
 
 ## My process
 
@@ -93,14 +88,13 @@ Use this section to outline areas that you want to continue focusing on in futur
 
 ## Author
 
-- Website - [Add your name here](https://www.your-site.com)
-- FreeCodeCamp - [@yourusername](https://freecodecamp.org/profile/yourusername)
-- Github - [@yourusername](https://github.com/yourusername)
+- Linkedin - [Janaina Tannus](https://www.linkedin.com/in/janaina-teixeira-58b32229/)
+- FreeCodeCamp - [@jmtannus](https://www.freecodecamp.org/jmtannus)
+- Github - [@jmtannus](https://github.com/jmtannus)
+- Blog - [Blog-DC23](https://jmtannus.github.io/Blog-DC23/)
 
-**Note: Delete this note and add/remove/edit lines above based on what links you'd like to share.**
 
 ## Acknowledgments
 
-This is where you can give a hat tip to anyone who helped you out on this project. Perhaps you worked in a team or got some inspiration from someone else's solution. This is the perfect place to give them some credit.
+Agradeço ao meu tutor [@AbraaoAlves](https://github.com/AbraaoAlves), aos meus amigos [@RodrigoNet0](https://github.com/RodrigoNet0) , [@MansuetoPaiva](https://github.com/MansuetoPaiva), [@thiagobduarte](https://github.com/thiagobduarte) e [@rodolfobertini](https://github.com/rodolfobertini) por me ajudarem neste desafio. 👏 💙
 
-**Note: Delete this note and edit this section's content as necessary. If you completed this challenge by yourself, feel free to delete this section entirely.**
diff --git a/solution/images/image-jana.png b/solution/images/image-jana.png
diff --git a/solution/index.html b/solution/index.html
@@ -1,27 +1,66 @@
 <!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <!-- displays site properly based on user's device -->
-  <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
+<html lang="pt-br">
 
-  <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
-
-  <title>Profile card component</title>
+<head>
+    <meta charset="UTF-8" />
+    <!-- displays site properly based on user's device -->
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link rel="stylesheet" href="./styles.css">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght@400;700&display=swap" />
+    <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png" />
+    <title>Profile card component</title>
 </head>
+<style type="text/css"></style>
+
 <body>
-  <!-- write your html structure here -->
-  Eric Smith
-  26
-  Lodon
+    <!-- write your html structure here -->
+    <div class="ovaltop"></div>
+
+    <div class="profilecard">
+        <div class="profiletop"></div>
+        <div class="foto"></div>
+        <div class="nomePais">
+            <div class="nomestatus">
+                <a href="http://instagram.com/janamadeiratannus" target="_blank">Janaína Tannus</a>
+            </div>
+            <div class="país">
+                Brasil
+            </div>
+        </div>
 
-  8K
-  Github
+        <div class="cidade">
+            Fortaleza
+        </div>
 
-  3K
-  FreeCodeCamp
+        <div class="linha"></div>
 
-  1.2K
-  Duolingo
+        <div class="socialblock">
+            <div class="social">
+                <div class="nomestatus">246</div>
+                <div class="redes">
+                    <a href="https://github.com/jmtannus" target="_blank">Github</a>
+                </div>
+            </div>
+
+            <div class="social">
+                <div class="nomestatus">481</div>
+                <div class="redes">
+                    <a href="https://www.freecodecamp.org/jmtannus" target="_blank">FreeCodeCamp</a>
+                </div>
+            </div>
+
+            <div class="social">
+                <div class="nomestatus">11848</div>
+                <div class="redes">
+                    <a href="https://www.duolingo.com/profile/jmtannus" target="_blank">Duolingo</a>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="ovalbottom"></div>
 </body>
-</html>
+
+</html>
diff --git a/solution/styles.css b/solution/styles.css
@@ -0,0 +1,220 @@
+body {
+  background: #19a1ae;
+  position: relative;
+  max-width: 1440px;
+  min-widht: 375px;
+  height: 720px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  margin: 0;
+  background: hsl(185, 75%, 39%);
+  overflow: hidden;
+}
+
+a,
+a:visited,
+a:hover,
+a:active,
+a:link {
+  text-decoration: none;
+  color: inherit;
+}
+
+.ovaltop {
+  position: relative;
+  left: 0;
+  top: 0;
+  flex-shrink: 0;
+  margin-top: -712px;
+  margin-left: -487px;
+  width: 978px;
+  height: 976px;
+  z-index: -1;
+  background-image: url(images/bg-pattern-top.svg);
+  background-size: contain;
+  background-repeat: no-repeat;
+}
+
+.profilecard {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  margin-left: -175px;
+  margin-top: -187px;
+  display: flex;
+  justify-content: center;
+  width: 350px;
+  height: 374px;
+  border-radius: 15px;
+  background: #ffffff;
+  box-shadow: 0px 50px 100px -20px rgba(8, 70, 94, 0.5);
+  overflow: hidden;
+}
+
+.profiletop {
+  position: absolute;
+  width: 100%;
+  height: 140px;
+  flex-shrink: 0;
+  border-radius: 15px 15px 0px 0px;
+  background-image: url(images/bg-pattern-card.svg);
+  background-size: cover;
+  background-repeat: no-repeat;
+}
+
+/** Estilo foto redonda com borda "branca" **/
+.foto {
+  top: 92px;
+  display: flex;
+  justify-content: center;
+  position: absolute;
+  z-index: 2;
+  width: 86px;
+  height: 86px; //96px
+  background: #fff, lightgray 50% / cover no-repeat;
+  background-image: url(images/image-jana.png);
+  background-size: cover;
+  background-repeat: no-repeat;
+  flex-shrink: 0;
+  border: 5px solid #fff;
+  border-radius: 96px;
+  padding: 127px, 127px, 234px, 140px;
+}
+
+.foto:hover {
+  animation: giragira 5000ms infinite forwards;
+}
+
+.nomePais {
+  top: 212px;
+  display: flex;
+  justify-content: center;
+  position: absolute;
+  padding: 0px 0.5px 1px 9px;
+  justify-content: flex-end;
+  align-items: flex-start;
+  gap: 16.5px;
+}
+
+.nomestatus {
+  font-family: Kumbh Sans;
+  font-size: 18px;
+  font-weight: 700;
+}
+
+.país {
+  font-family: Kumbh Sans;
+  font-size: 18px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
+
+.cidade {
+  top: 243px;
+  display: flex;
+  justify-content: center;
+  position: absolute;
+  font-family: Kumbh Sans;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  color: #6b7082;
+  text-align: center;
+}
+
+.linha {
+  top: 285px;
+  position: absolute;
+  width: 100%;
+  height: 1px;
+  flex-shrink: 0;
+}
+
+.socialblock {
+  display: flex;
+  top: 310px;
+  justify-content: space-evenly;
+  position: absolute;
+  width: 80%;
+  height: 42px;
+}
+
+.social {
+  display: inline-flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 5px;
+}
+
+.redes {
+  font-family: Kumbh Sans;
+  font-size: 10px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  letter-spacing: 1.5px;
+}
+
+.ovalbottom {
+  position: relative;
+  right: 0;
+  bottom: 0;
+  flex-shrink: 0;
+  margin-right: -432px;
+  margin-bottom: -853px;
+  width: 978px;
+  height: 976px;
+  z-index: -1;
+  background-image: url(images/bg-pattern-bottom.svg);
+  background-size: contain;
+  background-repeat: no-repeat;
+}
+
+@keyframes giragira {
+  0% {
+    transform: scale(90%);
+  }
+
+  25% {
+    transform: scale(110%);
+  }
+
+  50% {
+    transform: scale(90%) rotate(360deg);
+  }
+
+  75% {
+    transform: scale(110%) rotate(360deg);
+  }
+
+  100% {
+    transform: scale(90%) rotate(360deg);
+  }
+}
+
+@media screen and (max-width: 375px) {
+  .profilecard {
+    width: 326px;
+    margin-left: -163px;
+  }
+}
+
+/* cores */
+.namestats {
+  color: hsl(229, 23%, 23%);
+}
+.país.cidade,
+.redes {
+  color: hsl(227, 10%, 46%);
+}
+.profiletop {
+  background: hsl(183, 62%, 54%);
+}
+.linha {
+  background: hsl(228, 9%, 92%);
+}