html skeleton + hamburger logic laid

2025-09-03 22:50:01 -04:00
parent f6b97054ab
commit 037cb6b20b
1 changed files with 100 additions and 0 deletions
@@ -0,0 +1,100 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta
      name="description"
      content="Maine Luxury Detailing provides professional car cleaning services in the Portland Area"
    />
    <title>Maine Luxury Detailing</title>
  </head>
  <body>
    <a href="#main-content" class="skip-link">Skip to main content</a>
    <header>
      <nav>
        <a href="#" class="logo" aria-label="Company Logo">MLD</a>
        <button
          id="hamburger"
          aria-label="Toggle mobile navigation menu"
          aria-expanded="false"
        >
          <span></span>
          <span></span>
          <span></span>
        </button>
        <ul id="navMenu" role="banner">
          <li><a class="navLink" role="navigation" href="#Services">Services</a></li>
          <li><a class="navLink" role="navigation" href="#Ceramic Coating">Ceramic Coating</a></li>
          <li><a class="navLink" role="navigation" href="#Reviews">Reviews</a></li>
          <li><a class="navLink" role="navigation" href="#Contact">Contact</a></li>
        </ul>
      </nav>
    </header>
    <main id="main-content" class="container">
      <section id="intro">
        <h1>Serving Portland since 2023</h1>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
          posuere cursus ante, quis tempor lacus fringilla id. Pellentesque sed
          mi luctus odio varius hendrerit. Nam vitae fermentum ligula, sit amet
          consectetur sem.
        </p>
      </section>
    </main>
    <footer>
      <div id="footer-left">
        <p>&copy;Maine Luxury Detailing 2025. All rights reserved.</p>
      </div>
      <div id="footer-right">
        <p>Phone: XXX-XXX-XXXXX</p>
        <p>Email: xxx@xxx.xxx</p>
        <a href="#">instagram</a>
        <!-- <img class="footer-icon" src="">
          <a href="#"></a>
        </img> -->
      </div>
    </footer>
    <script>
      const hamburger = document.getElementById("hamburger");
      const navMenu = document.getElementById("navMenu");
      // Toggle hamburger menu
      hamburger.addEventListener("click", function () {
        hamburger.classList.toggle("active");
        navMenu.classList.toggle("active");
        const isExpanded = navMenu.classList.contains("active");
        hamburger.setAttribute("aria-expanded", isExpanded);
      });
      // Close hamburger when nav link clicked
      let navLinks = document.getElementsByClassName("navLink");
      for (let i = 0; i < navLinks.length; i++) {
        navlinks[i].addEventListener("click", function (event) {
          hamburger.classList.remove("active");
          navMenu.classList.remove("active");
          hamburger.setAttribute("aria-expanded", "false");
        });
      }
      // CLose hamburger when click outside of menu
      document.addEventListener("click", function (event) {
        const clickOutside =
          hamburger.contains(event.target) || navMenu.contains(event.target);
        if (clickOutside && navMenu.classList.contains("active")) {
          hamburger.classList.remove("active");
          navMenu.classList.remove("active");
          hamburger.setAttribute("aria-expanded", "false");
        }
      });
    </script>
  </body>
 </html>