Skip to content
Submitted over 4 years ago

Responsive Profile Card using native CSS & HTML

Hoophelie•110
@HOOPhelie
A solution to the Profile card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hello ! I'm not sure how messy my code is😅 Does anybody have some suggestion about the circle patterns in the background? I tried to make them as close as possible to the given designs, but it just doesn't look pretty when reducing or increasing the screen width...

Thank you in advance!

Code

Please log in to post a comment

Log in

Community feedback

  • ApplePieGiraffe•30,525
    @ApplePieGiraffe

    Hey there, Hoophelie! 👋

    Congratulations on completing your first Frontend Mentor challenge! 🎉 Nice job on this one! 👏

    Those background images can definitely be pretty tricky to position nicely! 😉 I suggest using viewport units to position them because then they'll more or less remain in their place when the screen is resized. I tried positioning the background images in my solution for this challenge using this method and it seemed to work out pretty okay! 😄

    Also, this is a tiny suggestion, but I think an <article> tag would work better here for the card component (rather than a <section> tag) since the component is more like a self-contained item rather than a section of something else. 😉

    Keep coding (and happy coding, too)! 😁

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