Skip to content
Submitted almost 3 years ago

Profile Card Component

Bilal•130
@BilalMr
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 still did not get how to place the two images, one at the top left and the other at the bottom right of the body.

Community feedback

  • Web Wizard•5,690
    @rsrclabPosted almost 3 years ago

    Hi, @BilalMr! Congratulations on your great work ~ I have studied your work, and learned a lot from this one. Here are some opinions that I think about your work.

    1. I totally agree we can use divs for background circle images, but why don't you try to use pseudo elements like ::before and ::after? I think that could lead to smarter way.
    2. About card elements, I think card-header, card-body, card-footer classes could be more appropriate than current ones. Top and bottom are usually used on css styles, not on html elements.
    3. Try to use BEM class naming. http://getbem.com/naming/
    4. On the view of responsive side, lower than 475px background image looks odd.

    Happy coding ~

    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