Solution : Live Site URL
This is a solution to the Insure landing page challenge on Frontend Mentor.
Your challenge is to build out this landing page and get it looking as close to the design as possible.
You can use any tools you like to help you complete the challenge. So if you've got something you'd like to practice, feel free to give it a go.
Your users should be able to:
- View the optimal layout for the site depending on their device's screen size
- See hover states for all interactive elements on the page
- HTML
- CSS
- CSS Grid
- CSS Flexbox
- JavaScript
Background image patterns were difficult to position as per the design specs and had to do a hybrid approach with them as some are as background images and some as img elements.
The overall layout was simple with the help of grid and flexbox but I overlooked the equal whitespace margins and how the elements were cantered which required adding a fix width at the end to all sections to leave equal whitespace in the margins in all sections.
There is no good tablet view for this challenge that I could think, currently it stretches to cover the viewport which isn't pleasant but its not very bad.
- Fix : mobile hero image is different
- Live solution screenshot(s)
- Submit to frontendmentor and add Solution submitted at Frontend Mentor - Submission link