From 24fc434a4a0e800ed050362b68289406345c0063 Mon Sep 17 00:00:00 2001
From: Simon <vesspa0330@gmail.com>
Date: Sun, 7 Sep 2025 16:33:18 -0400
Subject: [PATCH] some css has been added, hamburger not working yet

---
 index.html | 206 ++++++++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 203 insertions(+), 3 deletions(-)

diff --git a/index.html b/index.html
index 4b6ec9e..8aa024b 100644
--- a/index.html
+++ b/index.html
@@ -8,9 +8,208 @@
       content="Maine Luxury Detailing provides professional car cleaning services in the Portland Area"
     />
     <title>Maine Luxury Detailing</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      /** NAV STYLING */
+      header {
+        background-color: #000;
+        padding: 1rem 0;
+        position: sticky;
+        top: 0;
+        z-index: 999;
+      }
+
+      nav {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
+
+      .logo {
+        font-size: 1.5rem;
+        font-weight: bold;
+        color: #ffd700;
+        text-decoration: none;
+      }
+
+      #navMenu {
+        display: flex;
+        list-style: none;
+        gap: 2rem;
+      }
+
+      .navLink {
+        color: #ffd700;
+        text-decoration: none;
+        font-weight: 500;
+        transition: color 0.3s ease;
+      }
+
+      .navLink:hover {
+        color: #fff;
+      }
+
+      #hamburger {
+        display: none;
+        flex-direction: column;
+        cursor: pointer;
+        background: none;
+        border: none;
+        padding: 5px;
+      }
+
+      #hamburger span {
+        width: 25px;
+        height: 3px;
+        background-color: #ffd700;
+        margin: 3 px 0;
+        transition: 0.3s;
+      }
+
+      body {
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,
+          Cantarell, sans-serif;
+        line-height: 1.6;
+        color: #000;
+        background-color: #fff
+      }
+
+      main {
+        max-width: 700px;
+        margin: 3rem auto;
+        padding: 0 20px;
+      }
+
+      section {
+        margin-bottom: 3rem;
+      }
+
+      h1 {
+        font-size: 2.5rem;
+        color: #000;
+        margin-bottom: 1rem;
+        text-align: center;
+      }
+
+      h2 {
+        font-size: 2rem;
+        color: #ffd700;
+        margin-bottom: 1rem;
+        border-bottom: 2px solid #ffd700;
+        padding-bottom: 0.5rem;
+      }
+
+      h3 {
+        font-size: 1.5rem;
+        color: #000;
+        margin-bottom: 1rem;
+      }
+
+      p {
+        margin-bottom: 1rem;
+        max-width: 75%;
+      }
+
+      footer {
+        background-color: #000;
+        color: #ffd700;
+        text-align: center;
+        padding: 2rem 0;
+        margin-top: 4rem;
+      }
+
+      /** "skip link" for screen readers */
+      .skipLink {
+        position: absolute;
+        top: -50px;
+        left: 6px;
+        background: #fff;
+        color: #000;
+        padding: 8px;
+        text-decoration: none;
+        font-weight: bold;
+        border-radius: 4px;
+        z-index: 1000;
+      }
+
+      .skipLink:focus {
+        top: 6px;
+      }
+
+      /** Desktop (defaul) styles */
+      @media screen and (min-width: 769px) {
+        h1 {
+          font-size: 3rem;
+        }
+
+        nav, main {
+          padding: 0 40px;
+        }
+
+        #navMenu {
+          gap: 3rem;
+        }
+      }
+
+      /* Mobile Styles */
+      @media screen and (max-width: 768px) {
+        #hamburger {
+          display: flex;
+        }
+
+        nav {
+          padding: 0 15px;
+        }
+
+        #navMenu {
+          position: fixed;
+          left: -100%;
+          top: 70px;
+          flex-direction: column;
+          background-color: #000;
+          width: 100%;
+          text-align: center;
+          transition: 0.3s;
+          box-shadow: 0 10px 27px rgba(0, 0, 0, 0.05);
+          padding: 2rem 0;
+          gap: 1rem;
+        }
+
+        #navMenu.active {
+          left: 0;
+        }
+
+        #navMenu li {
+          margin: 1rem 0;
+        }
+
+        /** Hamburger animation */
+        #hamburger.active span:nth-child(1) {
+          transform: rotate(-45deg) translate(-5px, 6px);
+        }
+        #hamburger.active span:nth-child(2) {
+           opacity: 0;
+        }
+        #hamburger.active span:nth-child(3) {
+          transform: rotate(45deg) translate(-5px, -6px);
+        }
+ 
+         h1 {
+           font-size: 2rem;
+         }
+
+         
+      }
+    </style>
   </head>
+  
   <body>
-    <a href="#main-content" class="skip-link">Skip to main content</a>
+    <a href="#main-content" class="skipLink">Skip to main content</a>
 
     <header>
       <nav>
@@ -35,7 +234,7 @@
       </nav>
     </header>
 
-    <main id="main-content" class="container">
+    <main id="main-content">
       <section id="intro">
         <h1>Serving Portland since 2023</h1>
         <p>
@@ -67,6 +266,7 @@
 
       // Toggle hamburger menu
       hamburger.addEventListener("click", function () {
+        console.log("toggle");
         hamburger.classList.toggle("active");
         navMenu.classList.toggle("active");
 
@@ -77,7 +277,7 @@
       // 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) {
+        navLinks[i].addEventListener("click", function (event) {
           hamburger.classList.remove("active");
           navMenu.classList.remove("active");
           hamburger.setAttribute("aria-expanded", "false");