Skip to content
Submitted almost 4 years ago

Profile Card using HTML and CSS - Isnt 100%

Mariana Fonseca•10
@mariana-fs
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

My main issue here is after i did a translateY on the profile picture theres a big gap between the name and age information and the profile picture

Community feedback

  • Elizabeth•460
    @gelizabethPosted almost 4 years ago

    Hi! Great job! To fix that gap issue try putting your card-header class to position:relative, and picture class to position: absolute and play around with top and left properties instead of transform. I don't know if it's a correct way to fix that, but I use that trick a lot. Have a nice day!

    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