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

#sass/scss

@jhonGriGi

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


I had some problems with the dev tools and the responsive option, so I don't know if the responsive is right :c

Community feedback

P

@Miculino

Posted

Hey @jhonGriGi, thanks for sharing your solution with us!

I had a look at your final solution and here are my suggestions:

  • Reduce the card's dimension just a tiny bit

  • Add a box-shadow as the one shown in the original design

  • Consider using background-image property for the two images or you can also use ::after and ::before pseudo-classes

  • Use Flexbox display to vertically and horizontally center your design display: flex; align-items: center justify-content: center min-height: 100vh should all be applied to the body element

  • There's a huge amount of space on smaller screen sizes that creates horizontal and vertical scrolling. That's due to how the current layout is setup. You have to make some changes to how you position and align items in your page to make sure your design is also responsive

Hope these suggestions will be useful. Keep up the good work!

Marked as helpful

1

@jhonGriGi

Posted

@Remus432 Thanks for your comment, I'll keep that in mind in the next challenges :3

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