Skip to content
Submitted almost 4 years ago

Profile Card Component with Flexbox

jjjayed•270
@jjjayed
A solution to the Profile card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Any feedback is welcome! I wonder how I can position the background elements better? Right now, they're kinda wonky.

Code

Please log in to post a comment

Log in

Community feedback

  • darryncodes•6,350
    @darryncodes

    Hi Jane,

    • your images seem to be overlapping your content, try using z-index: -1; on them to place their stacking order below the content
    • i find placing background images in a responsive manner quite challenging, the background-position attribute is much more sophisticated than i expected - this article could help
    • your .stats border-top feels a little harsh, you could lower the black colours opacity to get closer to the design: border-top: 1px solid rgba(0,0,0, .2);

    All the best!

    Marked as helpful
  • jjjayed•270
    @jjjayed

    Thank you for your feedback! I have fixed all the things you have mentioned, except the background images. It was way harder to understand than I thought. I will come back to it some time. Thanks again!

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