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 Landing Page

J 330

@littledragonshrimp

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 got stuck a few times on this one:

  • I'm having issues with moving the background images (notably .section-4 photography) into the right places. I'm able to move the div itself into the correct place but I'm having issues positioning it the way that it's portrayed in the sample.
  • I think I got the navbar correct for Desktop mode, but the answer seemed a bit clunky.
  • I had issues with positioning everything correctly at first since things seemed to overlap heavily over each other. I used margin-top: -24rem; to move things to the right place, but it didn't seem right. After a bit of tinkering, the margin-top portions became more reasonable and fit within 2-3 rem;. I could certainly use help with doing a better job with positioning these in future things.

Community feedback

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