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

Profile card using html and css

@alexiscenriquez

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


Feedback appreciated

Community feedback

darryncodes 6,430

@darryncodes

Posted

Hi Alexis,

Great effort, almost an exact match!

  • you should add background-repeat: no-repeat; to your <header> it seems to be repeating on larger viewports
  • generally working with fixed heights should be avoided, it messes up a great design on some devices. Remove height: 60vh; from your #card styles. Then add some padding: 20px; to your .stats class

Happy coding 🤙

1

@alexiscenriquez

Posted

@darryncodes Thank you, great advice :D

0

@FahimMahmudJoy

Posted

Hi Alexis, You may want to make the card look a bit more square in the large screen. On small screen, it looks fine.

0

@alexiscenriquez

Posted

@FahimMahmudJoy Okay, thank you Fahim

0

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