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 component solution using grid and flexbox

@BOVAGE

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


For the top section of the profile card where bg-pattern-card image is, I used the bg-pattern-card image as the background image - I set it not to cover the whole container so as to have white background for the profile image and used margin-top to push the profile image down. I want to know if there are other ways to this.

Community feedback

Web Frog 1,840

@MasterDev333

Posted

Great work. In my humble opinion, it would be great if you add background-size to body to make top, bottom circles responsive. You used background-image for bg-pattern-card image, and I think it's right way. Border top color for profile-summary is different, but overall, it's good job. Happy coding~

1

@BOVAGE

Posted

Thanks for the feedback. I'll change the border-top color.

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