Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Oops! You need to be logged in to do that
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

Insure Landing Page With Responsive Mobile Navigation

P
ApplePieGiraffeβ€’ 30,105

@ApplePieGiraffe

Desktop design screenshot for the Insure landing page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison

SolutionDesign

Reports

Accessibility report (1)
error

This button element does not have a name available to an accessibility API. Valid names are: title undefined, element content, aria-label undefined, aria-labelledby undefined.

<button class="hamburger-menu header__hamburger-menu">
                <div class="ha...</button>

ApplePieGiraffe’s questions for the community

Hey, everybody! πŸ‘‹

This was a fun challenge from which I learned a lot!

This was my first time coding a responsive mobile navigation (which turned out to be a little easier than I thought) and I'm quite pleased with the result (that is, if it works for you as well as it did for me πŸ˜†)!

I also got to practice using CSS grid a little more and think carefully about how I wanted the page to be responsive. 🧐

Of course, feedback is welcome and appreciated! 😊

Happy coding! 😁

Community feedback

Thomas Jonstrupβ€’ 470

@thomasjonstrup

Posted

Really beautiful solution that looks just like the design, i like how the content is placed just like the design and how clean it is in the dom. Very good job.

2


P
ApplePieGiraffeβ€’ 30,105

@ApplePieGiraffe

Posted

@thomasjonstrup

Thanks!

0

Arturo Simonβ€’ 1,695

@artimys

Posted

You've outdone yourself here @ApplePieGiraffe πŸ™Œ. It looks awesome.

Well used semantics, clean css, responds great and I saw aria support on the hamburger menu πŸ‘. My favorite part is how the picture tag responds in the header.

Keep it up!!

2


P
ApplePieGiraffeβ€’ 30,105

@ApplePieGiraffe

Posted

@artimys

Thanks so much, artimys!

0

P
Emmilie Estabilloβ€’ 5,420

@emestabillo

Posted

Hey APG! Seems I'm a couple of days late lol. Just dropping by to give a thumbs up for this project. You're ready for intermediate :-)

1


P
ApplePieGiraffeβ€’ 30,105

@ApplePieGiraffe

Posted

@emestabillo

Haha, thanks Emmilie! 😊

0

P
Anna Leighβ€’ 5,135

@brasspetals

Posted

Looks great to me! I really like the animation styles on the mobile navigation - feels very smooth and goes well with the overall design and feel of the page, and the whole thing responds beautifully. Awesome job! πŸ™Œ

1


P
ApplePieGiraffeβ€’ 30,105

@ApplePieGiraffe

Posted

@brasspetals

Thanks a lot, Anna! 😁

0

Please log in to post a comment

Log in with GitHub
Slack logo

Join our Slack community

Join over 180,000 people taking the challenges, talking about their code, helping each other, and chatting about all things front-end!