This is a solution to the Insure Landing Page Challenge on Frontend Mentor.

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author

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

• Live Site URL: https://kens-visuals.github.io/insure-landing-page/
• Solution URL: https://www.frontendmentor.io/solutions/insure-landing-page-with-scss-bem-css-animations-and-vanilla-js-tlFb95NjO

• Semantic HTML5 markup
• SCSS custom properties
• CSS Flexbox
• CSS Grid
• CSS animations
• Vanilla JS
• Mobile-first workflow

This project helped me to experiment with some new ideas about layouts. I've experimented with containers and how to position them correctly, so I can control it from a single place. Another thing that I wanted to accomplish with this project was to add some scroll-reveal animations with JS, I was expecting it to be a lot more complex with Vanilla JS. However, it turned out to be a single API called IntersectionObserver that will help you to add the stuff. I didn't do anything crazy, but definitely got some practice and had some fun with it. That pretty much was the main goal of this project, and I'm glad how it came out.

For the future project, I'll most certainly implement similar things. Moreover, I'll try to come up with more complex animations and how to achieve them with Vanilla JS. Super excited about this feature and how it can help to make the website come alive.

• IntersectionObserver Tutorial - This is a simple tutorial by Kevin Powell about IntersectionObserver.
• IntersectionObserver API Docs - As you guessed from the name this the link to the MDN Docs forIntersectionObserver API.

• Frontend Mentor - @kens-visuals
• Codewars - @kens_visuals
• CodePen - @kens-visuals