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

Manage Landing Page

Hanna K• 30

@hannakozak

Desktop design screenshot for the Manage landing page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
3intermediate
View challenge

Design comparison


SolutionDesign

Solution retrospective


I made the Managing Landing Page challenge to repeat and learn how to make responsive pages. I struggled with placing the background image like it is in the given design. I would be glad to receive any feedback about my solution.

Community feedback

@felipe-miranda-marreiros

Posted

I think you can use relative/absolute positions with an img element. Then use z-index to make it behind the sections. You can also experiment CSS's background-image with background-position property. Maybe you can set the background-image in the body since you can use it as many as you like.

I also think you can use pseudo elements, for example, in the hero section and set the position according to the design.

You can play around with background-position using DevTools.

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