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 design

@AbdullahiAA

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


It was a nice experience for me working on this project.

The question I have is that: how can I position the two circles on the background so that it stays at a particular side relative to the view-port?

Community feedback

@steventoben

Posted

For your question: for the top left img style it with left: 0; top: 0; transform: translate(-50%,-50%); and do the similar thing for the bottom right one, right: 0; bottom: 0; transform: translate(50%, 50%); make sure they're both absolute positioned and that should lock their centers at the corners of the viewport. Make sure you add overflow: hidden; to the body or wrapper so you don't have the images hanging off the page causing it to scroll.

1

@AbdullahiAA

Posted

@steventoben Wow! This works... I really appreciate your reply. Thank you so much.

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