Skip to content
Submitted almost 4 years ago

Profile card component

Darsh•10
@DarshBhanushali
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 have just stated with web design, so any suggestion or feedback is valuable to me.

My background image is going out of the main body and it does not look good. and I could not figure our how to do it? If you can hep out that would be great;

Community feedback

  • Grace•31,270
    @grace-snowPosted almost 4 years ago

    Hi there, This is really hard for me to see as I'm on mobile and it's not responsive yet. So next step is to learn media queries ☺

    I would never recommend positioning things using margin and padding only. Maybe margin-left and - right auto for horizontal centering but that's all really. If you make a wrapper component be min-height 100vh, give it a little padding like 1rem, and make it a flex container (display flex, align-items center, justify-content center) your card would always stay central on the screen.

    So maybe flexbox is the next thing to learn

    1
    Grace•31,270
    @grace-snowPosted almost 4 years ago

    One change I think you need in the html is to put each of those stats in one html element. It doesn't make sense having a title (heading) that just says "80K" for example.

    If you had each stat in one paragraph (or list item) , you could nest spans inside that wrap around the number and the label text separately with classes on those spans to control their appearance

    1
    Grace•31,270
    @grace-snowPosted almost 4 years ago

    Ps. I'm going to do this challenge soon and will share how to do the bg images on slack then, so don't worry about that for now and keep an eye out

    1
    Darsh•10
    @DarshBhanushaliPosted almost 4 years ago

    @grace-snow Thank you so much 😊. I am looking forward for your solution and definitely look into your suggestions.

    0
  • Tiass•295
    @TiasstiassPosted almost 4 years ago

    Good job 👍 few things i’ve noticed:

    • Try using margin and padding instead of position to place elements.
    • A good practice is to use em and rem instead of pixels for sizes.
    • Also look for media queries to make you website responsive to different screen sizes since one design cannot apply to all of them

    Keep up the good work! 💪

    1
    Darsh•10
    @DarshBhanushaliPosted almost 4 years ago

    @Tiasstiass Thank you for your suggestions😊. I will surely look into it.

    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