Skip to content
Submitted almost 4 years ago

Profile card component solution using grid and flexbox

FAYEMI BOLUWATIFE•60
@BOVAGE
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

For the top section of the profile card where bg-pattern-card image is, I used the bg-pattern-card image as the background image - I set it not to cover the whole container so as to have white background for the profile image and used margin-top to push the profile image down. I want to know if there are other ways to this.

Community feedback

  • Web Frog•1,840
    @MasterDev333Posted almost 4 years ago

    Great work. In my humble opinion, it would be great if you add background-size to body to make top, bottom circles responsive. You used background-image for bg-pattern-card image, and I think it's right way. Border top color for profile-summary is different, but overall, it's good job. Happy coding~

    1
    FAYEMI BOLUWATIFE•60
    @BOVAGEPosted almost 4 years ago

    Thanks for the feedback. I'll change the border-top color.

    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