Skip to content
Submitted about 1 year ago

Profile-card-preview

Haarith•150
@HaarithBinSabur
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 need help with the actual profile image itself, I was trying to make it go overtop the background image but couldn't figure that out so instead I used position: absolute; and used top:; and left:; I don't think it's the perfect way to go about it, so if anyone has some tips please drop a comment I really do appreciate it^-^.

Community feedback

  • Rajaul Islam Ratul•1,250
    @ratul0407Posted about 1 year ago

    @HaarithBinSabur congratulations on completing this challenge🎉🎉

    ON to your question, to make the profile image aligned perfectly according to the design just do this

    .image__victor {
transform: translateY(-3rem)
};

    Remove the position: absolute and the top and left properties from .image__victor and also remove margin-top : 70px from .image__name and you are all set to go.

    I hope it was helpful for you👍👍 Have a nice day and happy coding my friend🙂🙂

    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