Skip to content
Submitted over 2 years ago

Manage Landing Page

Hanna K•30
@hannakozak
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Manage landing page
  • HTML
  • CSS
  • JS
3intermediate

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•160
    @felipe-miranda-marreirosPosted over 2 years ago

    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

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