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

Profile Card Component

@alberthgrande

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


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?

Community feedback

P
ApplePieGiraffe 30,545

@ApplePieGiraffe

Posted

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

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