Skip to content
Submitted over 2 years ago

Profile Card Component

Alberth Ruado•650
@alberthgrande
A solution to the Profile card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Profile Card Component Challenge Code Solution I'll update it later because there are so many things that need updating, including the responsiveness.

My experience while building this challenge was that it was responsive when you ran it into the Mozilla browser developer's live server, but when you ran it into another browser, the design was broken.

Can I get some feedback on how to make the background bubble responsive?

Code

Please log in to post a comment

Log in

Community feedback

  • ApplePieGiraffe•30,525
    @ApplePieGiraffe

    Hi, Alberth Ruado! 👋

    Well done on this challenge! 👍

    The background circles in this challenge can be tricky to position! 😅 I think using CSS background images is a good method for adding them to the page. That's what I did in my solution to this challenge, I experimented with using percentages and viewport units to position the circles so that they more or less remain in their place when the screen is resized.

    If you'd like to learn more about CSS background images and how to use them, this article from MDN is a good place to start.

    Besides that, a tip I have for you to make your HTML more semantic is to use a ul element for the list of statistics at the bottom of the page. Also, even though the statistic figures are larger in size and have a heavier font weight, they are not actually headings, so there is no need to use a heading tag for them. 😉

    Hope you find these tips helpful. 😊

    Keep coding (and happy coding, too)! 😁

    Marked as helpful

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