Frontend Mentor - Insure landing page solution

This is a solution to the Insure landing page challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Overview
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources

Overview

Links

• Solution URL
• Live Site URL

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow
• IntersectionObserver API

What I learned

const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('add-animation');
    }
  });
});

observer.observe(document.querySelector('.hero__container '));
observer.observe(document.querySelector('.view-container'));
observer.observe(document.querySelector('.work__container'));

}

Continued development

I will work on my animation skills a bit more. I need to imporve my skills on animation and make wesbsite look more appealing and iteractive. This is my first time implementing IntersectionObserver API, I hope I can improve on that.

Useful resources

• Example resource 1 - This helped me for implementaion of IntersectionObserver API.