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

Landing page with htlm, css and little bit of JS

Filipโ€ข 350

@filip65

Desktop design screenshot for the Insure landing page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


Any suggestion to improve would be great! ๐Ÿ˜

Community feedback

Anna Leighโ€ข 5,135

@brasspetals

Posted

Hi, Filip! ๐Ÿ‘‹

Congrats on completing your first full-page challenge! Overall it responds well, and I have a few suggestions to make it even better:

  • The font-family for your headings should all be the same - here your h1 is correct, but the h2โ€™s and h3โ€™s are not.

  • Adding hover and focus states to your links would be a nice touch.

  • For accessibility, I highly suggest using a button for mobile menu button.

  • The benefits text gets very stretched on medium layouts, so consider adding a max-width to these.

  • The curvy images for the mobile menu, banner, and footer would be better set as background images, and positioned with background-position as well as background-size if needed.

  • The โ€œhow we workโ€ link in the banner needs text-transform: uppercase

  • The font of the links in your footer is too large, and I also suggest using unordered lists for the link groups, with the links inside list items. Another note here is that your .headers should not be links as they are just titles for the link groups.

Happy coding!

1

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