/Insure-Landing-Page

Primary LanguageCSS

Insure Landing Page

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

  • View the optimal layout for the site depending on their device's screen size
  • See hover states for all interactive elements on the page

Screenshot

Links

My Process

Built With

  • Semantic HTML5 markup
  • CSS custom properties
  • Flexbox
  • Mobile-First Workflow

Code Snippet

imgBtn.addEventListener("click", function(){
    var menuMobile = document.getElementById("menu-mobile-items");

    if(menuMobile.style.display === "none") {
        menuMobile.style.display = "block";
        imgBtn.src = './images/icon-close.svg';
    } else {
        menuMobile.style.display = "none";
        imgBtn.src = './images/icon-hamburger.svg';
    }
})

Features

  • Fully responsive Design
  • Mobile-first Approach
  • Custom Toggle Navigation Menu
  • Smooth Scrolling

Author