diff --git a/README.md b/README.md index 7daeb89..89a1e6f 100755 --- 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) +
+![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 index 3e692bb..cc25e46 100755 --- a/solution/index.html +++ b/solution/index.html @@ -1,27 +1,106 @@ + - - + + - + + + + Profile card component - - - Eric Smith - 26 - Lodon - 8K - Github - - 3K - FreeCodeCamp - - 1.2K - Duolingo + +
+
+
+ +
+
+ +
+
+
+

Eric Smith

+ 26 +

London

+
+ +
+
+
+ +
+
+ +
+
+
+

Eric Smith

+ 26 +

London

+
+ +
+
+
+ +
+
+ +
+
+
+

Eric Smith

+ 26 +

London

+
+ +
+
- + + \ No newline at end of file diff --git a/solution/styles.css b/solution/styles.css new file mode 100644 index 0000000..a209dac --- /dev/null +++ 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; + } +} \ No newline at end of file