index is now booking page. split style/script out to add review page.

index.html

@@ -5,241 +5,10 @@
     <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"
+      content="Maine Luxury Detailing provides mobile professional car cleaning services in the Portland Area"
     />
     <title>Maine Luxury Detailing</title>
-    <style>
+    <link href="style.css" rel="stylesheet">
-      * {
-        margin: 0;
-        padding: 0;
-        box-sizing: border-box;
-      }
-       
-      /** COLOR VARIABLES */
-      :root {
-        --black: #000;
-        --gold: #ffd700;
-      }
-
-      
-      /** HEADER + NAV STYLING */
-      header {
-        background-color: var(--black);
-        position: sticky;
-        top: 0;
-        z-index: 999;
-      }
-
-      .banner {
-        display: flex;
-        justify-content: space-between; max-width: 60%;
-        align-items: center;
-
-        height: 4.5rem;
-
-        margin: 0 auto;
-        padding: 1rem 0;
-      }
-                   
-      .logo {
-        font-size: 1.5rem;
-        font-weight: bold;
-        color: var(--gold);
-        text-decoration: none;
-      }
-
-      #hamburger {
-        display: none;
-        flex-direction: column;
-        cursor: pointer;
-        background: none;
-        border: none;
-        padding: 5px;
-      }
-
-      #hamburger span {
-        width: 25px;
-        height: 3px;
-        background-color: var(--gold);
-        margin: 3px 0;
-        transition: 0.3s;
-        position: relative;
-      }
-
-      .navLink {
-        color: var(--gold);
-        text-decoration: none;
-        font-weight: 500;
-        transition: color 0.3s ease;
-      }
-
-      .navLink:hover {
-        color: #fff;
-      }
-
-      /** BODY + CONTENT */
-      body {
-        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,
-          Cantarell, sans-serif;
-        line-height: 1.6;
-        color: #666;
-        background-color: var(--black);
-      }
-
-      main {
-        background-color: #fff;
-      }
-
-      section {
-        max-width: 60%;
-        margin: 0 auto;
-        padding: 3rem 0;
-      }
-      
-      a {
-        color: var(--gold);
-      }
-
-      h1 {
-        font-size: 2.5rem;
-        color: #000;
-        margin-bottom: 1rem;
-        text-align: center;
-      }
-
-      h2 {
-        font-size: 2rem;
-        color: var(--gold);
-        margin-bottom: 1rem;
-        border-bottom: 2px solid var(--gold);
-        padding-bottom: 0.5rem;
-      }
-
-      h3 {
-        font-size: 1.5rem;
-        color: #000;
-        margin-bottom: 1rem;
-      }
-
-      p {
-        margin-bottom: 1rem;
-      }
-
-      /** FOOTER */
-      footer {
-        display: flex;
-        justify-content: space-between;
-
-        margin: 1rem auto;
-        padding: 2rem 0;
-
-        max-width: 60%;
-
-        background-color: #000;
-        color: var(--gold);
-
-        text-align: center;
-      }
-
-      #footer-left {
-        width: 50%;
-        text-align: left;
-      }
-      #footer-right {
-        width: 50%;
-        text-align: right;
-      }
-
-      /** "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 RULES */
-      @media screen and (min-width: 851px) {
-        /** header */
-        nav {
-          display: flex;
-          flex-direction: row;
-          gap: 3rem;
-
-          list-style: none;
-        }
-
-        /** content */
-        h1 {
-          font-size: 3rem;
-        }
-      }
-
-      /* MOBILE RULES */
-      @media screen and (max-width: 850px) {
-        /** header */
-        header {
-          padding: 0 1rem;
-        }
-
-        #hamburger {
-          display: flex;
-        }
-
-        nav {
-          display: flex;
-          flex-direction: column;
-          position: fixed;
-          gap: 1rem;
-
-          padding: 2rem 0;
-
-          top: -12rem;
-          left: 0;
-          width: 100%;
-
-          font-size: 1rem;
-          text-align: center;
-          background-color: #000;
-          transition: top 0.7s ease;
-          box-shadow: 0 10px 27px rgba(0, 0, 0, 0.05);
-          z-index: -1;
-        }
-
-        nav.active {
-          top: 1.5rem;
-        }
-
-        /** hamburger animation */
-        #hamburger.active span:nth-child(1) {
-          transform: rotate(-45deg) translateY(10px) translateX(-3px);
-          width: 24px;
-          height: 4px;
-        }
-        #hamburger.active span:nth-child(2) {
-           opacity: 0;
-        }
-        #hamburger.active span:nth-child(3) {
-          transform: rotate(45deg) translateY(-10px) translateX(-3px);
-          width: 24px;
-          height: 4px;
-        }
-
-        /** content rules */
-        h1 {
-          font-size: 2rem;
-        }
-      }
-    </style>
   </head>
   
   <body>
@@ -262,7 +31,7 @@
         <nav>
           <a class="navLink" role="navigation" href="#Services">Services</a>
           <a class="navLink" role="navigation" href="#Ceramic Coating">Ceramic Coating</a>
-          <a class="navLink" role="navigation" href="#Reviews">Reviews</a>
+          <a class="navLink" role="navigation" href="reviews.html">Reviews</a>
           <a class="navLink" role="navigation" href="#Contact">Contact</a>
         </nav>
       </div>
@@ -270,20 +39,18 @@
 
     <main id="main-content">
       <section id="intro">
-        <h1>Serving Portland since 2023</h1>
+        <h1>Portland's Mobile<br />Luxury Detailing Service</h1>
-        <p>
+        <a href="https://app.urable.com/virtual-shop/IQlYjZyF1i2XilEiEKB5" target="_blank">
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
+            <button id="book-button">BOOK NOW</button>
-          posuere cursus ante, quis tempor lacus fringilla id. Pellentesque sed
+        </a>
-          mi luctus odio varius hendrerit. Nam vitae fermentum ligula, sit amet
-          consectetur sem.
-        </p>
       </section>
     </main>
 
     <footer>
       <div id="footer-left">
         &copy;Maine Luxury Detailing 2025<br />
-        All rights reserved
+        All rights reserved<br />
+        Portland, ME
       </div>
       <div id="footer-right">
           207-807-6770<br />
@@ -291,43 +58,6 @@
           <a href="https://www.instagram.com/luxurydetailingmaine/" target="_blank">@luxurydetailingmaine</a>
       </div>
     </footer>
-
+    <script src="script.js"></script>
-    <script>
-      let hamburger = document.getElementById("hamburger");
-
-      // toggle hamburger menu
-      hamburger.addEventListener("click", function () {
-        let navMenu = document.getElementsByTagName("nav")[0];
-        hamburger.classList.toggle("active");
-        navMenu.classList.toggle("active");
-
-        const isExpanded = navMenu.classList.contains("active");
-        hamburger.setAttribute("aria-expanded", isExpanded);
-      });
-
-      // close hamburger when nav link is clicked
-      let navLinks = document.getElementsByClassName("navLink");
-      for (let i = 0; i < navLinks.length; i++) {
-        navLinks[i].addEventListener("click", function (event) {
-          let navMenu = document.getElementsByTagName("nav")[0];
-          hamburger.classList.remove("active");
-          navMenu.classList.remove("active");
-          hamburger.setAttribute("aria-expanded", "false");
-        });
-      }
-
-      // close hamburger when click is outside of menu
-      document.addEventListener("click", function (event) {
-        let navMenu = document.getElementsByTagName("nav")[0];
-        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>

reviews.html

@@ -0,0 +1,71 @@
+<!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 mobile professional car cleaning services in the Portland Area"
+    />
+    <title>Maine Luxury Detailing</title>
+    <link href="style.css" rel="stylesheet">
+  </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">MLD</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="#Services">Services</a>
+          <a class="navLink" role="navigation" href="#Ceramic Coating">Ceramic Coating</a>
+          <a class="navLink" role="navigation" href="#Reviews">Reviews</a>
+          <a class="navLink" role="navigation" href="#Contact">Contact</a>
+        </nav>
+      </div>
+    </header>
+
+    <main id="main-content">
+      <section id="reviews">
+        <h1>Reviews</h1>
+        <div class="review-card">
+          <div class="review-card-head">
+            <span class="review-card-head-left">
+            </span>
+            <span class="review-card-head-left">
+            </span> 
+          </div>
+          <span class="review-card-body">
+          </span>
+        </div>
+          
+      </section>
+    </main>
+
+    <footer>
+      <div id="footer-left">
+        &copy;Maine Luxury Detailing 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="script.js"></script>
+  </body>
+</html> 

script.js

@@ -0,0 +1,35 @@
+let hamburger = document.getElementById("hamburger");
+
+// toggle hamburger menu
+hamburger.addEventListener("click", function () {
+  let navMenu = document.getElementsByTagName("nav")[0];
+  hamburger.classList.toggle("active");
+  navMenu.classList.toggle("active");
+
+  const isExpanded = navMenu.classList.contains("active");
+  hamburger.setAttribute("aria-expanded", isExpanded);
+});
+
+// close hamburger when nav link is clicked
+let navLinks = document.getElementsByClassName("navLink");
+for (let i = 0; i < navLinks.length; i++) {
+  navLinks[i].addEventListener("click", function (event) {
+    let navMenu = document.getElementsByTagName("nav")[0];
+    hamburger.classList.remove("active");
+    navMenu.classList.remove("active");
+    hamburger.setAttribute("aria-expanded", "false");
+  });
+}
+
+// close hamburger when click is outside of menu
+document.addEventListener("click", function (event) {
+  let navMenu = document.getElementsByTagName("nav")[0];
+  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");
+  }
+}); 

style.css

@@ -0,0 +1,275 @@
+  * {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+  }
+   
+  /** COLOR VARIABLES */
+  :root {
+    --black: #000;
+    --gold: #ffd700;
+    --dark-gold: #d1b410;
+  }
+
+  
+  /** HEADER + NAV STYLING */
+  header {
+    background-color: var(--black);
+    position: sticky;
+    top: 0;
+    z-index: 999;
+  }
+
+  .banner {
+    display: flex;
+    justify-content: space-between; max-width: 60%;
+    align-items: center;
+
+    height: 4.5rem;
+
+    margin: 0 auto;
+    padding: 1rem 0;
+  }
+               
+  .logo {
+    font-size: 1.5rem;
+    font-weight: bold;
+    color: var(--gold);
+    text-decoration: none;
+  }
+
+  #hamburger {
+    display: none;
+    flex-direction: column;
+    cursor: pointer;
+    background: none;
+    border: none;
+    padding: 5px;
+  }
+
+  #hamburger span {
+    width: 25px;
+    height: 3px;
+    background-color: var(--gold);
+    margin: 3px 0;
+    transition: 0.3s;
+    position: relative;
+  }
+
+  .navLink {
+    color: var(--gold);
+    text-decoration: none;
+    font-weight: 500;
+    transition: color 0.3s ease;
+  }
+
+  .navLink:hover {
+    color: #fff;
+  }
+
+  /** BODY + CONTENT */
+  body {
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,
+      Cantarell, sans-serif;
+    line-height: 1.6;
+    color: #666;
+    background-color: var(--black);
+  }
+
+  main {
+    /** background-color: #fff;*/
+    background-color: var(--black);
+  }
+
+  section {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    max-width: 60%;
+    margin: 0 auto;
+    padding: 3rem 0;
+  }
+
+  #book-button {
+    background-color: var(--gold);
+    color: black;
+    border: none;
+    border-radius: 5rem;
+
+    box-shadow: 0px 1px 75px rgba(255, 255, 255, 0.5);
+
+    padding: 2rem 0;
+    margin: 5rem 0;
+
+    height: 7rem; 
+
+    font-size: 2rem;
+    font-weight: bold;
+    text-decoration: none;
+  }
+  #book-button:hover {
+    cursor: pointer;
+  }
+  #book-button:active {
+    background-color: var(--dark-gold);
+  }
+  
+  a {
+    color: var(--gold);
+    text-align: center;
+  }
+
+  h1 {
+    font-size: 2.5rem;
+    color: #fff;
+    margin-bottom: 1rem;
+    text-align: center;
+  }
+
+  h2 {
+    font-size: 2rem;
+    color: var(--gold);
+    margin-bottom: 1rem;
+    border-bottom: 2px solid var(--gold);
+    padding-bottom: 0.5rem;
+  }
+
+  h3 {
+    font-size: 1.5rem;
+    color: #000;
+    margin-bottom: 1rem;
+  }
+
+  p {
+    color: #fff;
+    margin-bottom: 1rem;
+  }
+
+  /** FOOTER */
+  footer {
+    display: flex;
+    justify-content: space-between;
+
+    margin: 1rem auto;
+    padding: 2rem 0;
+
+    max-width: 60%;
+
+    background-color: #000;
+    color: var(--gold);
+
+    text-align: center;
+  }
+
+  #footer-left {
+    width: 50%;
+    text-align: left;
+  }
+  #footer-right {
+    width: 50%;
+    text-align: right;
+  }
+
+  /** "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 RULES */
+  @media screen and (min-width: 851px) {
+    /** header */
+    nav {
+      display: flex;
+      flex-direction: row;
+      gap: 3rem;
+
+      list-style: none;
+    }
+
+    /** content */
+    h1 {
+      font-size: 3rem;
+    }
+
+    #book-button {
+      width: 50%;
+    }
+  }
+
+  /* MOBILE RULES */
+  @media screen and (max-width: 850px) {
+    /** header */
+    header {
+      padding: 0 1rem;
+    }
+
+    #hamburger {
+      display: flex;
+    }
+
+    nav {
+      display: flex;
+      flex-direction: column;
+      position: fixed;
+      gap: 1rem;
+
+      padding: 2rem 0;
+
+      top: -12rem;
+      left: 0;
+      width: 100%;
+
+      font-size: 1rem;
+      text-align: center;
+      background-color: #000;
+      transition: top 0.5s ease;
+      box-shadow: 0 10px 27px rgba(0, 0, 0, 0.05);
+      z-index: -1;
+    }
+
+    nav.active {
+      top: 1.5rem;
+    }
+
+    /** hamburger animation */
+    #hamburger.active span:nth-child(1) {
+      transform: rotate(-45deg) translateY(10px) translateX(-3px);
+      width: 24px;
+      height: 4px;
+    }
+    #hamburger.active span:nth-child(2) {
+       opacity: 0;
+    }
+    #hamburger.active span:nth-child(3) {
+      transform: rotate(45deg) translateY(-10px) translateX(-3px);
+      width: 24px;
+      height: 4px;
+    }
+
+    /** footer */
+    footer {
+      font-size: .9rem;
+    }
+
+    /** content rules */
+    h1 {
+      font-size: 2rem;
+    }
+
+    #book-button {
+      font-size: 1.75rem;
+      width: 85%;
+    }
+  }