dcTeam23 · GustavoSantoz · Jul 31, 2023 · Jul 31, 2023 · Aug 1, 2023 · Aug 1, 2023
diff --git a/README.md b/README.md
@@ -27,18 +27,15 @@
 
 ### Screenshot
 
-![](./solution/screenshot.jpg)
+![image](https://github.com/Gustavo-S-Nascimento/profile_card_challenge/assets/74427958/e8f374cd-f7c7-443d-8245-54b0126c669a)
+<br>
+![image](https://github.com/Gustavo-S-Nascimento/profile_card_challenge/assets/74427958/15762cba-57eb-4a80-9c16-fccdaac71f9e)
 
-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.**
 
 ### 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: [solution URL](https://github.com/Gustavo-S-Nascimento/profile_card_challenge/tree/challenge_solution/solution)
+- Live Site URL: [live site](https://gustavo-s-nascimento.github.io/profile_card_challenge/solution/)
 
 ## My process
 
@@ -93,9 +90,9 @@ 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)
+- Website - [Gustavo](https://gustavo-s-nascimento.github.io)
+- FreeCodeCamp - [Gustavo-S](https://www.freecodecamp.org/Gustavo-S)
+- Github - [Gustavo-S-Nascimento](https://github.com/Gustavo-S-Nascimento)
 
 **Note: Delete this note and add/remove/edit lines above based on what links you'd like to share.**
 

diff --git a/solution/index.html b/solution/index.html
@@ -1,27 +1,106 @@
 <!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"> 
-
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link href="styles.css" rel="stylesheet" />
   <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
-
+  <link rel="preconnect" href="https://fonts.googleapis.com%22%3E/">
+  <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght@400;700&display=swap" rel="stylesheet">
+
   <title>Profile card component</title>
 </head>
-<body>
-  <!-- write your html structure here -->
-  Eric Smith
-  26
-  Lodon
 
-  8K
-  Github
-
-  3K
-  FreeCodeCamp
-
-  1.2K
-  Duolingo
+<body>
+  <div class="main">
+    <div class="card">
+      <div class="img-fundo">
+        <img src="./images/bg-pattern-card.svg">
+      </div>
+      <div class="imgbx">
+        <img src="./images/image-victor.jpg">
+      </div>
+      <section class="conteiner">
+        <div class="principal">
+          <h3 id="nome">Eric Smith</h2>
+            <span id="idade">26</span>
+            <p>London</p>
+        </div>
+        <section class="social-media">
+          <section class="github">
+            <h3>8K</h3>
+            <p>GitHub</p>
+          </section>
+          <section class="freecodecamp">
+            <h3>3K</h3>
+            <p>FreeCodeCamp</p>
+          </section>
+          <section class="duolingo">
+            <h3>1.2K</h3>
+            <p>Duolingo</p>
+          </section>
+        </section>
+    </div>
+    <div class="card">
+      <div class="img-fundo">
+        <img src="./images/bg-pattern-card.svg">
+      </div>
+      <div class="imgbx">
+        <img src="./images/image-victor.jpg">
+      </div>
+      <section class="conteiner">
+        <div class="principal">
+          <h3 id="nome">Eric Smith</h2>
+            <span id="idade">26</span>
+            <p>London</p>
+        </div>
+        <section class="social-media">
+          <section class="github">
+            <h3>8K</h3>
+            <p>GitHub</p>
+          </section>
+          <section class="freecodecamp">
+            <h3>3K</h3>
+            <p>FreeCodeCamp</p>
+          </section>
+          <section class="duolingo">
+            <h3>1.2K</h3>
+            <p>Duolingo</p>
+          </section>
+        </section>
+    </div>
+    <div class="card">
+      <div class="img-fundo">
+        <img src="./images/bg-pattern-card.svg">
+      </div>
+      <div class="imgbx">
+        <img src="./images/image-victor.jpg">
+      </div>
+      <section class="conteiner">
+        <div class="principal">
+          <h3 id="nome">Eric Smith</h2>
+            <span id="idade">26</span>
+            <p>London</p>
+        </div>
+        <section class="social-media">
+          <section class="github">
+            <h3>8K</h3>
+            <p>GitHub</p>
+          </section>
+          <section class="freecodecamp">
+            <h3>3K</h3>
+            <p>FreeCodeCamp</p>
+          </section>
+          <section class="duolingo">
+            <h3>1.2K</h3>
+            <p>Duolingo</p>
+          </section>
+        </section>
+    </div>
+  </div>
 </body>
-</html>
+
+</html>
diff --git a/solution/styles.css b/solution/styles.css
@@ -0,0 +1,143 @@
+@import url('https://fonts.cdnfonts.com/css/kumbh-sans');
+
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
+:root {
+    --dark-cyan: hsl(185, 75%, 39%);
+    --verydark-desaturatedblue: hsl(229, 23%, 23%);
+    --darkgrayish-blue: hsl(227, 10%, 46%);
+    --dark-gray: hsl(0, 0%, 59%);
+}
+
+body {
+    background-color: #19A1AE;
+    font-family: 'Kumbh Sans', sans-serif;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    font-size: 8px;
+    margin-top: 33vh;
+}
+
+.card {
+    margin: 20px;
+    background-color: #FFF;
+    width: 300px;
+    height: 300px;
+    justify-content: center;
+    align-items: center;
+    border-radius: 15px;
+    overflow: hidden;
+    display: inline-flex;
+}
+
+.img-fundo {
+    justify-content: flex-start;
+    align-self: center;
+    position: relative;
+    bottom: 8rem;
+    left: 12rem;
+    width: fit-content;
+}
+
+.imgbx {
+    overflow: hidden;
+    display: flex;
+    width: 96px;
+    height: 96px;
+    box-sizing: border-box;
+    flex-shrink: 0;
+    border-radius: 96px;
+    border: 5px solid #FFF;
+    justify-content: center;
+    right: 2.5rem;
+    bottom: 4rem;
+    position: relative;
+}
+
+.conteiner {
+    text-align: center;
+    position: relative;
+    right: 15rem;
+    top: 9rem;
+}
+
+.principal {
+    position: relative;
+    bottom: 6rem;
+}
+
+.conteiner h2 {
+    font-size: 18px;
+    color: var(--verydark-desaturatedblue);
+    font-weight: bold;
+    padding-bottom: 15px;
+}
+
+.conteiner span {
+    font-size: 18px;
+    color: var(--dark-gray);
+    position: relative;
+}
+
+.conteiner p {
+    font-size: 14px;
+    color: var(--dark-gray);
+    position: relative;
+}
+
+.social-media {
+    border-top: solid #E8E9EC;
+    border-width: 2px 0 0 0;
+    display: flex;
+    text-align: center;
+    align-items: center;
+    height: 3rem;
+    position: relative;
+    bottom: 4rem;
+    right: 1rem;
+    gap: 60px;
+}
+
+.social-media h3 {
+    color: var(--verydark-desaturatedblue);
+    font-size: 18px;
+    padding-top: 25px;
+    padding-bottom: 5px;
+}
+
+.social-media p {
+    color: var(--dark-gray);
+    font-size: 10px;
+}
+
+#nome {
+    position: relative;
+    top: 24px;
+    padding-right: 25px;
+    font-size: 18px;
+    font-weight: 700;
+}
+
+#idade {
+    position: relative;
+    left: 4rem;
+    top: 0rem;
+}
+
+@media (max-width: 1016px) {
+
+    body {
+        margin-top: 0;
+    }
+
+    .card {
+        display: flex;
+    }
+}