Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Mobile-First Profile Card

Logan 50

@afewfirstnames

Desktop design screenshot for the Profile card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hello!

This project was a challenge for me. It took me a while to figure out how to place the profile photo on top of the card header and body. Using a negative margin worked well in the end. I also struggled placing two background images in the appropriate place. I started by using pixel values until I realized I needed to use VH and VW so the background can grow and shrink properly with the view-port.

Community feedback

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord