Skip to content
Submitted almost 4 years ago

Profile card component using basic HTML and CSS

Victoria•10
@vjwalsh
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

Complete beginner practising the HTML and CSS I've been learning. Any feedback or pointers massively appreciated.

Some of the background image colour is showing through in between the profile picture edge and white border - I'm not sure why this is or how to remove it?

Community feedback

  • isimeri•250
    @isimeriPosted almost 4 years ago

    Hello. Your project looks pretty good overall, but it could be better, of course. Here are a couple of things i want to mention:

    • Make the <body> take up the entire height of the screen at least, because it takes up only as much as it's content does, if no height or min-height is specified. It can look ugly if there is not enough content to fill the entire screen height.
    • I'd rather use absolute positioning for those background image rings, so they adjust to the screen width.
    • Change the font color of your .credit, because it is very hard to see and read, and i would use absolute positioning here as well, to fix it to the page's bottom. If you reduce the width of your screen, you can see how it goes to heaven along with the profile card, but that's also due to the <body>'s height shrinking too much.
    • I'd place all those 3 .stats inside a container <div> and use display: flex; with justify-content: space-evenly(or space-around, doesn't matter too much), instead of bothering to pinpoint all the margins to make them look nice and evenly-spaced(but hey, if you like trying a bunch of margins until you find a good one, nobody can stop you :D ).

    As i mentioned earlier, looks good overall, and taking into account that you are a complete beginner, you did a majestic job. Keep improving and have a good time!

    0
    Victoria•10
    @vjwalshPosted almost 4 years ago

    @isimeri Super helpful, thank you!

    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