This was an exercise on making a profile card. It was my first time using BEM, which I found to be extremely useful, especially when paired with SASS. I think the final code turned out to be very well-organized and readable.
The only thing that gave me trouble here was the positioning of the SVG image. At first I tried to put the image in the HTML, but it took up space in an odd way and caused positioning problems in the mobile display. It worked better as a background image in the CSS, which also helped to clean up my HTML code.
Your challenge is to build out this profile card component and get it looking as close to the design as possible. You can use any tools you like to help you complete the challenge. So if you've got something you'd like to practice, feel free to give it a go.
The designs were created to the following widths:
- Mobile: 375px
- Desktop: 1440px
Dark cyan: hsl(185, 75%, 39%)
- rgb(25, 162, 174) Very dark desaturated blue: hsl(229, 23%, 23%)
- rgb(45, 50, 72) Dark grayish blue: hsl(227, 10%, 46%)
- rgb(106, 111, 129)
Dark gray: hsl(0, 0%, 59%)
- Font size (name and stats): 18px
- Family: Kumbh Sans
- Weights: 400, 700