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
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Mobile-first workflow
I leaarned about image absolute position & responsive design in this challenge.
To see how you can add code snippets, see below:
.card .card-image {
border: 5px solid white;
border-radius: 50%;
position: absolute;
left: 0;
right: 0;
top: 27%;
margin: 0 auto;
}