This is a solution to the Profile card component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
- Build out the project to the designs provided
- Solution URL: GitHub
- Live Site URL: GitHub Live
- Semantic HTML5 markup / Not semantic only the all page wrapped in
main
tag - CSS custom properties
- Flexbox
Make border thinner with opacity. Border doesn't get smaller than 1px
To see how you can add code snippets, see below:
border-top: 0.1px solid hsla(0, 0%, 59%, .3);
Placing background images (the circle one) was a bit challenging. I'm not happy with the result when resizing window. Circles acts weird. My be fixed with js.
- Website - Mustafa Yatagan
- Frontend Mentor - @mstytn