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

HTML, CSS, and Flexbox Profile Card

Melissa U 145

@melissaugrai

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


My first page after taking a bit of a break over the holidays. Took a few tries to get the HTML structure to look right and figure out the CSS to go with it. I found the background really difficult to get in the correct position and tried my best to get it close as possible. Any feedback would be great.

Community feedback

P
Grace 27,890

@grace-snow

Posted

Hi,

Overall this looks really good 👍

I'd recommend you just take another look at the semantics of your html. You've tried to use headings in order, which is great, but try to really think about what makes sense as a heading.. . Eg what would you expect content to be under a heading of "803k"? Would that make sense on a contents page? Probably not. So it shouldn't be a heading. I think you only need one heading max on this, and the stats should be combined into a single meaningful tag like a paragraph or list item (using spans inside to style the number and word respectively)

Only other issue I see is that I can't see your footer on mobile portrait, or some of the card on mobile landscape. If you changed it to min-height 100vh on the body element it would allow the body to grow when needed (although I'm not sure if that would affect bg circles for you)

Have a look at my solution if youd like to see how I approached it.

Hope all that is helpful

1

@adluders

Posted

Background positioning is always tough, specially when you have to include negative values but I think you did you did a pretty good job.

1

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