Skip to content
Submitted almost 3 years ago

Profile card challenge with GRID use

Francis•260
@FrancisKhaledKhodja
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 begin to learn and I use it grid to place my elements on the screen.

My difficulty was to compute the row's GRID of the card and to place correctly the svg background: when I change the size of the screen the position of the svg must not move relative to the card.

Community feedback

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

    Hi, @FrancisKhaledKhodja ~

    Congratulate on your solution to the challenge on FM platform. I have studied your work carefully and learned a lot from it.

    Here are some of the tips I like to provide.

    1. Your work's body area goes over screen, and that's because of background image element. I think use css background-image property or pseudo elements like ::before would solve this issue.
    2. On smaller devices, it doesn't look good. You can add viewport meta data to html head to solve this.
    3. Try BEM structure on the project. It really fits on this project.

    https://www.frontendmentor.io/solutions/profile-card-solution-m-cH4D2Lp

    Here is my solution to this challenge, and if it can help you even a bit, it would be happy to me.

    Cheers ~

    Marked as helpful
    1

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