Solution : Live Site URL
Submit to frontendmentor and add Solution submitted at Frontend Mentor - Submission link
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
- CSS Animations
- JavaScript
This challenge was particularly longer than most I have done in past. Overall the layout was easy to understand and replicate, the difficult parts were the background images/patterns provided in the challenge. The footer was challenging, and the positioning of its inner elements took more time than expected. I am still not satisfied with the way I ended up doing the footer but its very close to the design specs. Most of the layout was done with Grid and with the help of flexbox I was able to align the inner elements well. I added some transition effects and animations to hover elements (buttons, social buttons) and animation for email validation success.
- Live solution screenshot(s)