Skip to content
Submitted almost 3 years ago

Profile Card using HTML, CSS and Flexbox

Victor Albenor•60
@victoralbenor
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

Learning a lot from this one! Three major points to improve on:

  • Dealing with block sizes. How to remove extra spacing to move text upward?
  • How to draw horizontal line with <hr>?
  • Is this the best way to position the background svgs?

Appreciate any feedback and tips on these topics or any other!

Community feedback

  • Rio Cantre•9,690
    @RioCantrePosted almost 3 years ago

    Hello there! Nice work with this one. Viewing at your solution, I would suggest the following for you...

    • Remove height: 360px; in .profile-card rule set
    • Add position: relative; and top: -1rem; in the .profile-name rule set
    • Add position: relative;,top: -0.1rem; and font-size: 16px; in .profile-location rule set
    • In hr.solid, replace border-top: 3px solid #bbb; into border: 0.5px solid #bbb; and add width: 100%; and margin-top: 1.5rem;
    • Add margin: 0; and font-size: 14px; in .info p rule set
    • Adjust padding into padding: 1.2rem 1.5rem; in .info rule set

    Overall, you did well. Hope this helps and Keep it up!

    Marked as helpful
    1
    Victor Albenor•60
    @victoralbenorPosted almost 3 years ago

    @RioCantre That helped a lot! Now I just need to add some shadows and figure out why is there so much space between the location and the <hr>

    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