changed font, started service overhaul + standardized widths across

<main>s

ceramic-coating.html

@@ -24,11 +24,11 @@
         flex-wrap: wrap;
         align-items: center;
         justify-content: space-between;
-        gap: 2rem;
+        gap: 5rem;
 
-        max-width: 80%;
+        width: 90%;
 
-        margin-top: 2.5rem;
+        margin-top: 4rem;
       }
 
       .info-box {
@@ -37,11 +37,15 @@
             linear-gradient(to left, var(--gold), white, var(--gold)) border-box;
         border: 5px solid transparent;
 
-        max-width: 80%;
+        display: flex;
-        width: 80%;
+        justify-content: center;
+        flex-grow: 1;
+
+        min-width: auto;
+        width: auto;
         padding: 2rem 4rem;
         border-radius: 4rem;
-        height: min-content;
+        min-height: 20rem;
 
         /** border: 2px solid var(--gold);    **/
         transition: 1s ease;
@@ -57,10 +61,9 @@
       }
 
       #packages {
-        max-width: 60%;
+        flex-shrink: 1;
       }
       #wheel-wash {
-        max-width: 35%;
       }
 
       
@@ -105,7 +108,7 @@
         .info-flex {
           flex-direction: column;
           align-items: center;
-          width: 100%;
+          min-width: 90%;
         }
         .info-flex section {
           width: 100%;
@@ -158,17 +161,21 @@
         <section id="packages" class="info-box">
           <h1>Choose Your Coating <em>Package</em></h1>
           <hr />
-          <div>
+          <div style="width: 100%; display:flex; justify-content: space-around;">
-            <h2>Elite</h2>
+            <div>
-            <ul class="checkMarkList">
+              <h2>Elite</h2>
-              <li>elite detail one</li>
+              <ul>
-              <li>elite detail two</li>
+                <li>elite detail one</li>
-            </ul>
+                <li>elite detail two</li>
-            <h2>Complete</h2>
+              </ul>
-            <ul class="checkMarkList">
+            </div>
-              <li>complete detail one</li>
+            <div>
-              <li>complete detail two</li>
+              <h2>Complete</h2>
-            </ul>
+              <ul>
+                <li>complete detail one</li>
+                <li>complete detail two</li>
+              </ul>
+            </div>
           </div>
         </section>
 

css/style.css

@@ -3,12 +3,18 @@
   padding: 0;
   box-sizing: border-box;
 
+  background-color: var(--black);
+
   letter-spacing: 0.01rem;
 }
 
+.jx-handle, .jx-arrow {
+  background-color: rgba(0,0,0,0);
+}
+
 /** COLOR VARIABLES */
 :root {
-  --black1: #111111;
+  --oldBlack: #111111;
   --black: #191919;
   --gold: rgb(223, 200, 65);
   --dark-gold: rgb(158, 141, 44);
@@ -17,7 +23,6 @@
 
 /** HEADER + NAV STYLING */
 header {
-  background-color: var(--black);
   position: sticky;
   top: 0;
   z-index: 999;
@@ -60,31 +65,31 @@ header {
 
 /** BODY TAGS */
 @font-face {
-  font-family: gontserrat;
+  font-family: inter;
-  src: url('../assets/fonts/gontserrat/Gontserrat-Bold.ttf');
+  src: url('../assets/fonts/Inter.ttf');
 }
 body {
-  font-family: gontserrat, sans-serif;
+  font-family: inter, sans-serif;
   line-height: 1.6;
   color: #666;
-  background-color: var(--black);
 }
 
 main {
   display: flex;
+  gap: 5rem;
   flex-direction: column;
   justify-content: flex-start;
   align-items: center;
 
   text-align: center;
 
-  width: 100%;
+  min-width: 100%;
   padding: 0;
   margin: 0;
 }
 
 section {
-  max-width: 75%;
+  min-width: 90%;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -126,7 +131,6 @@ footer {
 
   max-width: 90%;
 
-  background-color: var(--black);
   color: var(--gold);
 
   text-align: center;
@@ -199,7 +203,6 @@ footer {
     font-size: 2rem;
     text-align: center;
 
-    background-color: var(--black);
     transition: top 0.5s ease;
     box-shadow: 0 10px 27px rgba(0, 0, 0, 0.05);
     z-index: -1;

index.html

@@ -16,7 +16,7 @@
 
       main {
         min-height: 530px; /** to make sure footer doesn't overlap hero */
-        gap: 2rem;
+        margin-top: 0;
       }
 
       #hero-image {
@@ -59,11 +59,12 @@
         font-size: 2rem;
         font-weight: bold;
         text-decoration: none;
-        transition: 0.5s ease;
+        transition: 0.3s ease;
       }
       #book-button:hover {
         cursor: pointer;
-        box-shadow: 0px 0px 30px var(--gold);
+        box-shadow: 0px 0px 10px var(--gold);
+        font-size: 2.25rem;
       }
       #book-button:active {
         background-color: var(--gold);
@@ -136,7 +137,7 @@
       <div id="hero-image"></div>
 
       <section id="intro">
-        <h1>Restore & Protect<br />Your Vehicle</h1>
+        <h1>Restore & Protect Your Vehicle</h1>
         <p>with the best mobile car detailing service in the Portland area</p>
       </section>
 

reviews.html

@@ -14,6 +14,10 @@
     <link rel="stylesheet" href="https://cdn.knightlab.com/libs/juxtapose/latest/css/juxtapose.css">
 
     <style>
+      main {
+        margin-top: 5rem;
+      }
+      
       /** REVIEWS */
       #reviewContainer {
         display: flex;
@@ -201,8 +205,6 @@
       }
     </style>
 
-
-
   </head>
 
   <body>

services2.html

@@ -0,0 +1,200 @@
+<!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="Luxury Detailing Maine provides mobile professional car cleaning services in the Portland Area"
+    />
+    <title>Luxury Detailing Maine</title>
+    <link href="css/style.css" rel="stylesheet" />
+    <link href="css/dropdown.css" rel="stylesheet" />
+    <link href="css/hamburger.css" rel="stylesheet" />
+    
+    <style>
+      
+      main {
+        max-width: 90%;
+        display: flex;
+      }
+
+
+      #tableOfContents {
+        display: flex;
+        flex-direction: row;
+        gap: 1rem;
+      }
+
+      #serviceListings {
+        align-self: flex-end;
+        width: 100%;
+        height: 100%;
+      }
+
+
+      .book-button {
+        background-color: var(--black);
+        color: var(--gold);
+        width: 50%;
+        height: 4rem;
+      
+        border: 1px solid white;
+        border-radius: 5rem;
+
+        padding: .5rem 1rem;
+
+        font-size: 1rem;
+        font-weight: bold;
+        text-decoration: none;
+        transition: 0.5s ease;
+      }
+      .book-button:hover {
+        cursor: pointer;
+        box-shadow: 0px 0px 15px var(--gold);
+      }
+      .book-button:active {
+        background-color: var(--gold);
+      }
+      
+      .book-link {
+        user-select: none;
+      } 
+      
+      /** mobile rules */
+      /** MOBILE */
+      @media screen and (max-width: 850px) {
+        section {
+          width: 100%;
+        }
+
+        h1 {
+          font-size: 1.75rem;
+        }
+        h2 {
+          font-size: 1.5rem;
+        }
+      }
+    </style>
+  </head>
+
+  <body>
+    <a href="#main-content" class="skipLink">Skip to main content</a>
+
+    <header>
+      <div class="banner" role="banner">
+        <a href="index.html" class="logo" aria-label="Company Logo">LUXURY DETAILING</a>
+
+        <button
+          id="hamburger"
+          aria-label="Toggle mobile navigation menu"
+          aria-expanded="false"
+        >
+          <span></span>
+          <span></span>
+          <span></span>
+        </button>
+
+        <nav>
+          <a class="navLink" role="navigation" href="ceramic-coating.html">Ceramic Coating</a>
+          <a class="navLink" role="navigation" href="services.html">Services</a>
+          <a class="navLink" role="navigation" href="reviews.html">Reviews</a>
+          <a class="navLink" role="navigation" href="contact.html">About</a>
+        </nav>
+      </div>
+    </header>
+
+    <main id="main-content">
+
+        <div>
+          <h1>Service Categories</h1>
+          <div id="tableOfContents">
+            <a href="#packages">Service Packages</a>
+            <a href="#ceramic">Ceramic Coating</a>
+            <a href="#paint">Polish & Paint Correction</a>
+            <a href="#exterior">Exterior Detailing</a>
+            <a href="#interior">Interior Detailing</a>
+          </div>
+
+        </div>
+
+        <div id="serviceListings">
+          <div class="card" >
+            <h2>hheadheadheadheadheadheadheadheadheadheadead</h2>
+            <p>bodyyy</p>
+          </div>
+          <div class="dropdown-body">
+            <span class="dropdown-body-half">
+              <h3>Interior</h3>
+              <ul>
+                <li>Vacuum & light carpet shampooing</li>
+                <li>Plastics, leather, and vinyls cleaning</li>
+                <li>Light seat shampooing</li>
+                <li>Interior & exterior window cleaning</li>
+                <li>Crack & crevice cleaning</li>
+              </ul>
+            </span>
+
+            <span class="dropdown-body-half">
+              <h3>Exterior</h3>
+              <ul>
+                <li>Hand wash & dry</li>
+                <li>Bug gut removal</li>
+                <li>Tire, wheel, and wheel well cleaning + tire shine</li>
+                <li>Window cleaning</li>
+                <li>Light door jam cleaning</li>
+              </ul>
+            </span>
+          </div>
+        </div>
+
+
+    </main>
+
+    <footer>
+      <div id="footer-left">
+        &copy;Luxury Detailing Maine 2025<br />
+        All rights reserved<br />
+        Portland, ME
+      </div>
+      <div id="footer-right">
+        207-807-6770<br />
+        example@email.com<br />
+        <a
+          href="https://www.instagram.com/luxurydetailingmaine/"
+          target="_blank"
+          >@luxurydetailingmaine</a
+        >
+      </div>
+    </footer>
+    <script src="js/hamburger.js"></script>
+    <script>
+      function toggleDropdown(headerClicked) {
+        let dropdown = headerClicked.parentElement;
+        let body = headerClicked.nextElementSibling;
+        let arrow = headerClicked.children[0];
+
+        if (dropdown.classList.contains("longest")) {
+          dropdown.classList.toggle("open-longest");
+          body.classList.toggle("open-longest");
+          arrow.classList.toggle("open");
+        }
+        else if (dropdown.classList.contains("long")) {
+          dropdown.classList.toggle("open-long");
+          body.classList.toggle("open-long");
+          arrow.classList.toggle("open");
+        }
+        else {
+          dropdown.classList.toggle("open");
+          body.classList.toggle("open");
+          arrow.classList.toggle("open");
+        }
+
+        let isOpen = dropdown.className.includes("open");
+        dropdown.setAttribute('aria-expanded', isOpen);
+
+      }
+    </script>
+  </body>
+</html>
+