Skip to content
Submitted over 1 year ago

Profile Card Component - HTML + CSS, Responsive

jcastro•270
@romzcastro
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

I can't properly apply the background and make it fluid, they're moving around. feedback and suggestions are greatly appreciated!

Community feedback

  • Vanza Setia•27,775
    @vanzasetiaPosted over 1 year ago

    Hi, jcastro! 👋

    For the fluid position of those circles, I recommend showing them as pseudo-elements. You can see Grace's solution for your reference.

    Frontend Mentor | Profile card with pseudo backgrounds and accessible list coding challenge solution

    I have some suggestions to improve your solution.

    • Use <div>: Do not use <article> or <section> for all content. Use <article> for an article such as blog post content. It is okay to use <div> to separate content for styling purposes. Also, those two elements have no meaning if they are not labeled properly using the ARIA attribute—WebAIM: HTML Semantics and Accessibility Cheat Sheet.
    • Use a list element: Use <ul> for the statistic. Also, the number should not be a heading.
    • No extra element: Use the <main> element as the wrapper instead of using <section class="wrapper">.
    • Do not specify default styling: Remove width: 100% from the <body> styling. It is already the default styling.

    I hope this helps. Happy coding! 👍

    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