Skip to content
Submitted over 4 years ago

Insure landing page - HTML, CSS and a little JS for the burger menu

P
Dave•5,295
@dwhenson
A solution to the Insure landing page challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

I wanted to work on a hamburger menu component that I could use again in other projects I think this one based on Andy Bell's tutorial works well.

I found the top section very difficult to get right (the breakpoint is still not 100% good) especially working with the image. I will try another challenge focusing on images. Any advice on how this could be done better or resources for learning about working with images in layout would be appreciated.

Any other feedback on any points would also be most welcome.

Code

Please log in to post a comment

Log in

Community feedback

  • ApplePieGiraffe•30,525
    @ApplePieGiraffe

    Hello there, Dave! 👋

    Good work on this challenge! 👍 You've done a nice job, as usual, (everything looks pretty good and responds rather well)—and I like the spinning animation you added to the mobile menu icon (just add something like overflow: hidden to the body when the navigation is toggled)! 😀

    A few things I'd like to suggest are,

    • Increasing the size of the text of the navigation links in the footer of the page in the desktop layout (they are quite small, at the moment).
    • Adding overflow-x: hidden to the body to get rid of a horizontal scroll bar that is showing up along the bottom of the screen in the desktop layout.
    • Typically, vertical scrolling is disabled when the mobile navigation is toggled so that users can just focus on the options they have available to them (and I think things feel a little out of place if you are able to scroll down since now part of the page is covered by the menu and you to disable it anyway in order to access the rest of the content on the page). As long as there is a clear way to disable the mobile menu (so that users can easily exit out of it), I think disabling vertical scrolling when the mobile navigation is toggled would be a nice idea! 😉

    Of course, keep coding (and happy coding, too)! 😁

  • Uzochukwu Okafor•355
    @uzoway

    I just posted screenshots of what I mean

  • Uzochukwu Okafor•355
    @uzoway

    Hello Dave! I just visited the site(on mobile) and I must say you did well. Although, there's something I'd like to point out. On the mobile layout, the hamburger and Mobile navigation page is only accessible on the first page. I think it should be fixed(position) so that at any point on the page, one can easily navigate the site.

    I'm actually working on this challenge and you just motivated me to finish it😄

  • Uzochukwu Okafor•355
    @uzoway

    On the slack channel

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