Skip to content
Submitted 9 days ago

Responsive Profile Card

Mia.O•160
@miaxoc
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Profile card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

What specific areas of your project would you like help with?

I struggled with the placement of the two background images. I decided to manually position them for both the mobile version and the desktop version. Is there a better way to do this? Thanks

Community feedback

  • Account deleted

    Well done! on completing the challenge, you did fine. My observation though, I noticed your non usage of semantic HTML such as (main, section, article etc) Using divs is quite okay but using semantic HTML is good code practice and best structures your code well for easy readability and understanding. Don't always neglect using semantic HTML to properly define the structure of your web pages/projects. Secondly, here's my solution tip for your project for you to significantly place the elements (circles: top left and bottom right), Make use of CSS positioning techniques which includes absolute, relative, z-index and transform properties.

    Marked as helpful
    0

Please log in to post a comment

Log in with GitHub

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