Skip to content
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted over 3 years ago

Insure Landing Page with SCSS, BEM, CSS Animations, and Vanilla JS

bem, sass/scss
Ken•4,915
@kens-visuals
A solution to the Insure landing page challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

Solution retrospective


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.

Got some feedback, comment it 👨🏻‍💻 Cheers 👾

Code
Loading...

Please log in to post a comment

Log in with GitHub

Community feedback

No feedback yet. Be the first to give feedback on Ken's solution.

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

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner
  • Use cases

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License