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

Sunnyside Landingpage with Grid

@zambobence

Desktop design screenshot for the Agency landing page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


I could not figure it out how to position the image in the header in desktop mode, and how to position the header of the texts which are on the greater images.

Any feedback and correction is welcome.

Community feedback

Jaheem Prevost• 80

@jaheemprevost

Posted

The approach I used for the image in the header is by nesting(placing both in a div that acts as a container) both the header and hero-section(the hero section being the area with the picture of the text, the orange, and the arrow) and using the background-image property to set a background image on the container div.

I'm going to assume that what you mean by greater images, are the graphic-design and photography sections. I positioned the text and the bottom by setting a display of flex on both of them, a flex-direction of column, and a justify content of flex-end to position them at the bottom.

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