Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Profile Card Component

P

@duncanwhyte

Desktop design screenshot for the Profile card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


How can I make the profile image overlap the two divs ?

Community feedback

P
ApplePieGiraffe 30,565

@ApplePieGiraffe

Posted

Greetings, duncanwhyte! 👋

Good effort on this challenge! 👍

You could use the transform property to move the profile image around, but I think using negative margin (as gfontorbe suggested) would a better call for this situation.

I'd like to suggest using the font provided in the original design to improve the overall look of the text in the solution. Also, I think leaving the background shapes at their original size and mostly positioning them using viewport units would help them remain their same size and in their place across screen sizes. 😉

Keep coding (and happy coding, too)! 😁

1

@gfontorbe

Posted

One way to do it would be to set a negative margin-top for your image

1

P

@duncanwhyte

Posted

@gfontorbe Thank you I wasn't sure how negative margins worked but it looks a lot better now.

0

Please log in to post a comment

Log in with GitHub
Discord logo

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