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

CSS flexbox solution for profile card

@NebiyouErsabo

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


Howdy there, This is the third challenge I have attempted. I found it a lot harder than I thought. I just learnt about CSS transform/translate function and implemented them on the page. Any suggestions and comments are very welcome. Thanks!

Community feedback

P
Grace 27,710

@grace-snow

Posted

Hi

This looks OK, just needs the shadow adjusting a bit to get closer to the design.

Here are recommendations for the code

  • remove the h3s from the stats (numbers don't make sense as headings) and change the element wrapping each number and word to something meaningful, like a list item or paragraph
  • you don't need a divider div. If you want a divider in the html, use a HR. If not use a border bottom on the content or border top on the stats
  • looking at css I can't work out why you're using so many transforms or quite a few things tbh... For example margins and paddings seem to be being applied inconsistently
  • font sizes must never be in px, use rem/em
  • line height should be unitless like 1.5
  • you shouldn't need widths and heights on the card. Just max-width and a min-height on the card header. The rest of the sizes can be controlled by the content

I hope you try these things out and they help you

2

@NebiyouErsabo

Posted

@grace-snow Great feedback, I'll look more into the code and try to improve the issues you mentioned. Thank you, Grace!

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