afjal1/insure-landing-page

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
  • The challenge
  • Screenshots
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
• Author
• Acknowledgments

Overview

The challenge

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

Screenshots

Links

• Solution URL: Github Repository
• Live Site URL: Insure Landing Page

My process

Built with

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

What I learned

• toggle() method of the classList property in JavaScript

hamburgerIcon.addEventListener("click", (e) => {
    e.preventDefault();
    mobileMenu.classList.toggle("nav-mobile-menu-open");
    body.classList.toggle("overflowHidden");
    if(mobileMenu.classList.contains("nav-mobile-menu-open")){
        hamburgerIcon.src = "images/icon-close.svg";
    } else {
        hamburgerIcon.src = "images/icon-hamburger.svg";
    }  
})

Continued development

• Creating layouts using CSS Grid

Author

• Github - Sachin9328
• Linkedin - Sachin Jadhav
• Frontend Mentor - @Sachin9328

Acknowledgments

Thanks to Grace on Frontend Mentor's Slack for advicing me to use CSS Grid for the desktop design layout.