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

Favour 2,140

@Nadine-Green

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


Hey guys, I would like some assistance on the background image as I had trouble positioning it, if you have a solution, don't hesitate to help or give any other feedback.

Community feedback

@Mirna-Latif

Posted

Hello, Nadine

Good job in this project.

About the background images, i put the two images in separate div in HTML before the main content, then i positioned them in CSS using absolute position for each image after i set position:relative; to the body.

.bg-image .top{ position: absolute; top: -90%; left: -20%; z-index: -1; } .bg-image .bottom{ position: absolute; bottom: -100%; right: -20%; z-index: -1; }

Another tip, you should put the attribution class in a footer .

I hope it is helps.

1

Favour 2,140

@Nadine-Green

Posted

@Mirna-Latif Thanks for the feedback, I will try to implement your technique.

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