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

Responsive landing page with mobile and dropdown nav

Douo 940

@Douoo

Desktop design screenshot for the Blogr landing page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


This was a very straightforward landing page, but one which took me a lot of time; it might even be the one project I've spent the most time on so far. The positioning of the elements was challenging, but the most difficult and time-consuming task was trying to understand some of the design choices (such as having two very similar sans-serif fonts, and then where they get used in the text was not as apparent as I thought). Anyway, at least I now learned how I can position elements off the page and have it be responsive! I wonder if some of the code I wrote behave as they should 😅.

Used very minimal animation here (only on the dropdown arrows) as I just wanted to focus on the important parts of the CSS. I don't feel very confident on how I organized my code. I might have done a lot of experimenting at times, therefore not too organized. I will clean up and refactor at a later time.

As always, please feel free to let me know whether something isn't working the way it should. Thank you everyone!

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