added before/after indicator to gallert + services page

css/style.css

@@ -154,33 +154,7 @@ footer {
   top: 6px;
 }
 
-/** BOOK NOW button */
-#book-button {
-  height: 7rem;
-  min-width: 100%;
 
-  background-color: var(--black);
-  color: var(--gold);
-
-  border: 1px solid var(--dark-gold);
-  border-radius: 5rem;
-
-  padding: 2rem 0;
-  margin: 0;
-
-  font-size: 2rem;
-  font-weight: bold;
-  text-decoration: none;
-  transition: 0.5s ease;
-}
-#book-button:hover {
-  cursor: pointer;
-  background-color: #000;
-  box-shadow: 0px 0px 30px var(--gold);
-}
-#book-button:active {
-  background-color: var(--gold);
-}
 
 /** DESKTOP RULES */
 @media screen and (min-width: 851px) {
@@ -197,10 +171,6 @@ footer {
   h1 {
     font-size: 3rem;
   }
-
-  #book-button {
-    width: 50%;
-  }
 }
 
 /* MOBILE RULES */
@@ -244,8 +214,5 @@ footer {
     font-size: 2rem;
   }
 
-  #book-button {
+
-    font-size: 1.75rem;
-    width: 85%;
-  }
 }

index.html

@@ -39,7 +39,36 @@
         padding-bottom: 2rem;
       }
 
-      #book-now {
+      /** BOOK NOW big button */
+      #book-button {
+        height: 7rem;
+        width: 50%;
+        min-width: 100%;
+
+        background-color: var(--black);
+        color: var(--gold);
+
+        border: 1px solid var(--dark-gold);
+        border-radius: 5rem;
+
+        padding: 2rem 0;
+        margin: 0;
+
+        font-size: 2rem;
+        font-weight: bold;
+        text-decoration: none;
+        transition: 0.5s ease;
+      }
+      #book-button:hover {
+        cursor: pointer;
+        background-color: #000;
+        box-shadow: 0px 0px 30px var(--gold);
+      }
+      #book-button:active {
+        background-color: var(--gold);
+      }
+      
+      #book-link {
         display: block;
         width: 50%;
         margin-top: 5rem;
@@ -61,7 +90,11 @@
           padding-bottom: 1.5rem;
         }
    
-        #book-now {
+        #book-button {
+          font-size: 1.75rem;
+          width: 85%;
+        }
+        #book-link {
           margin-top: 2.5rem;
         }
       }
@@ -86,12 +119,10 @@
         </button>
 
         <nav>
-          <a class="navLink" role="navigation" href="#Services">Services</a>
+          <a class="navLink" role="navigation" href="services.html">Services</a>
-          <a class="navLink" role="navigation" href="#Ceramic Coating"
+          <a class="navLink" role="navigation" href="ceramic_coating.html">Ceramic Coating</a>
-            >Ceramic Coating</a
-          >
           <a class="navLink" role="navigation" href="reviews.html">Reviews</a>
-          <a class="navLink" role="navigation" href="#Contact">Contact</a>
+          <a class="navLink" role="navigation" href="contact.html">Contact</a>
         </nav>
       </div>
     </header>
@@ -107,7 +138,7 @@
       <a
         href="https://app.urable.com/virtual-shop/IQlYjZyF1i2XilEiEKB5"
         target="_blank"
-        id="book-now"
+        id="book-link"
       >
         <button id="book-button">BOOK NOW</button>
       </a>
@@ -117,7 +148,7 @@
 
         <div class="dropdown">
           <div class="dropdown-header" onclick="toggleDropdown(this)">
-            <span>HEADER</span>
+            <span>Question 1</span>
             <span class="dropdown-arrow">▼</span>
           </div>
           <div class="dropdown-content">
@@ -127,9 +158,9 @@
           </div>
         </div>
 
-         <div class="dropdown">
+        <div class="dropdown">
           <div class="dropdown-header" onclick="toggleDropdown(this)">
-            <span>HEADER</span>
+            <span>Question 2</span>
             <span class="dropdown-arrow">▼</span>
           </div>
           <div class="dropdown-content">
@@ -139,6 +170,29 @@
           </div>
         </div>
 
+        <div class="dropdown">
+          <div class="dropdown-header" onclick="toggleDropdown(this)">
+            <span>Question 3</span>
+            <span class="dropdown-arrow">▼</span>
+          </div>
+          <div class="dropdown-content">
+            <div class="dropdown-body">
+              this is where we answer the question in the header
+            </div>
+          </div>
+        </div>
+
+        <div class="dropdown">
+          <div class="dropdown-header" onclick="toggleDropdown(this)">
+            <span>Question 4</span>
+            <span class="dropdown-arrow">▼</span>
+          </div>
+          <div class="dropdown-content">
+            <div class="dropdown-body">
+              this is where we answer the question in the header
+            </div>
+          </div>
+        </div>
       </section>
     </main>
 

reviews.html

@@ -57,7 +57,7 @@
       }
 
       /** BEFORE / AFTER IMAGES */
-      .image-pair {
+      .before-after-pair {
         position: relative;
 
         display: flex;
@@ -68,7 +68,7 @@
         width: 75%;
       }
 
-      .before-img {
+      .before-img-container {
         max-height: 100%;
       }
 
@@ -90,6 +90,24 @@
         width: 100%;
       }
 
+      .img-state-text {
+        position: absolute;
+        top: 0;
+        left: 0;
+
+        font-size: .8rem;
+
+        background-color: rgba(0, 0, 0, 0.8);
+
+        padding: .25rem 1rem;
+      }
+      .before-img-container .img-state-text {
+        color: white;
+      }
+      .after-img-container .img-state-text {
+        color: var(--gold);
+      }
+
       /** 
        * DESKTOP RULES 
        */
@@ -114,7 +132,7 @@
         }
 
 
-        .image-pair, .before-img, .after-img-container {
+        .before-after-pair, .before-img, .after-img-container {
           width: 400px;
         }
       }
@@ -138,7 +156,7 @@
           width: 100%;
         }
 
-        .image-pair, .before-img, .after-img-container {
+        .before-after-pair, .before-img, .after-img-container {
           width: 100%;
         }
       }
@@ -163,12 +181,10 @@
         </button>
 
         <nav>
-          <a class="navLink" role="navigation" href="#Services">Services</a>
+          <a class="navLink" role="navigation" href="services.html">Services</a>
-          <a class="navLink" role="navigation" href="#Ceramic Coating"
+          <a class="navLink" role="navigation" href="ceramic_coating.html">Ceramic Coating</a>
-            >Ceramic Coating</a
+          <a class="navLink" role="navigation" href="reviews.html">Reviews</a>
-          >
+          <a class="navLink" role="navigation" href="contact.html">Contact</a>
-          <a class="navLink" role="navigation" href="#Reviews">Reviews</a>
-          <a class="navLink" role="navigation" href="#Contact">Contact</a>
         </nav>
       </div>
     </header>
@@ -183,33 +199,61 @@
         <h1 style="margin-bottom: 7rem">Gallery</h1>
         <div id="galleryPhotos">
 
-          <div class="image-pair">
+          <figure class="before-after-pair">
-            <img class="before-img" src="assets/img/before1.jpg"></img>
+            <span class="before-img-container">
-            <span class="after-img-container">
+              <figcaption class="img-state-text">before</figcaption>
-              <img class="after-img" src="assets/img/after1.jpg"></img>
+              <img class="before-img" src="assets/img/before1.jpg" 
+                alt="An interior of a car trunk, the floor is covered in dirt and grass.">
+              </img>
             </span>
-          </div>
+            <span class="after-img-container">
+              <figcaption class="img-state-text">after</figcaption>
+              <img class="after-img" src="assets/img/after1.jpg"
+                alt="The same trunk after it has been restored to like-new condition."></img>
+            </span>
+          </figure>
 
-          <div class="image-pair">
+          <figure class="before-after-pair">
-            <img class="before-img" src="assets/img/before1.jpg"></img>
+            <span class="before-img-container">
-            <span class="after-img-container">
+              <figcaption class="img-state-text">before</figcaption>
-              <img class="after-img" src="assets/img/after1.jpg"></img>
+              <img class="before-img" src="assets/img/before1.jpg" 
+                alt="An interior of a car trunk, the floor is covered in dirt and grass.">
+              </img>
             </span>
-          </div>
+            <span class="after-img-container">
+              <figcaption class="img-state-text">after</figcaption>
+              <img class="after-img" src="assets/img/after1.jpg"
+                alt="The same trunk after it has been restored to like-new condition."></img>
+            </span>
+          </figure>
 
-          <div class="image-pair">
+          <figure class="before-after-pair">
-            <img class="before-img" src="assets/img/before1.jpg"></img>
+            <span class="before-img-container">
-            <span class="after-img-container">
+              <figcaption class="img-state-text">before</figcaption>
-              <img class="after-img" src="assets/img/after1.jpg"></img>
+              <img class="before-img" src="assets/img/before1.jpg" 
+                alt="An interior of a car trunk, the floor is covered in dirt and grass.">
+              </img>
             </span>
-          </div>
+            <span class="after-img-container">
+              <figcaption class="img-state-text">after</figcaption>
+              <img class="after-img" src="assets/img/after1.jpg"
+                alt="The same trunk after it has been restored to like-new condition."></img>
+            </span>
+          </figure>
 
-          <div class="image-pair">
+          <figure class="before-after-pair">
-            <img class="before-img" src="assets/img/before1.jpg"></img>
+            <span class="before-img-container">
-            <span class="after-img-container">
+              <figcaption class="img-state-text">before</figcaption>
-              <img class="after-img" src="assets/img/after1.jpg"></img>
+              <img class="before-img" src="assets/img/before1.jpg" 
+                alt="An interior of a car trunk, the floor is covered in dirt and grass.">
+              </img>
             </span>
-          </div>
+            <span class="after-img-container">
+              <figcaption class="img-state-text">after</figcaption>
+              <img class="after-img" src="assets/img/after1.jpg"
+                alt="The same trunk after it has been restored to like-new condition."></img>
+            </span>
+          </figure>
 
         </div>
       </section>

services.html

@@ -0,0 +1,120 @@
+<!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="css/style.css" rel="stylesheet" />
+    <link href="css/dropdown.css" rel="stylesheet" />
+    <link href="css/hamburger.css" rel="stylesheet" />
+    
+    <style>
+      #book-button {
+        background-color: var(--black);
+        min-width: 100%;
+        color: var(--gold);
+
+        border: 1px solid var(--dark-gold);
+        border-radius: 5rem;
+
+        padding: .5rem 1rem;
+        margin: 1rem 0 0 0;
+
+        font-size: 1rem;
+        text-decoration: none;
+        transition: 0.5s ease;
+      }
+      #book-button:hover {
+        cursor: pointer;
+        background-color: #000;
+        box-shadow: 0px 0px 15px var(--gold);
+      }
+      #book-button:active {
+        background-color: var(--gold);
+      }
+      
+      #book-link {
+        display: block;
+        width: 50%;
+        margin-top: 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">LMD</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.html">Services</a>
+          <a class="navLink" role="navigation" href="ceramic_coating.html">Ceramic Coating</a>
+          <a class="navLink" role="navigation" href="reviews.html">Reviews</a>
+          <a class="navLink" role="navigation" href="contact.html">Contact</a>
+        </nav>
+      </div>
+    </header>
+
+    <main id="main-content">
+      <section id="interior">
+        <h1>Interior Detailing</h1>
+        <p>Clean car with vaccuum, wipes, brushes, and more.</p>
+        <a
+          href="https://app.urable.com/virtual-shop/IQlYjZyF1i2XilEiEKB5/iy5yKtAhm0O0w0P05acA"
+          target="_blank"
+          class="book-link"
+        >
+          <button id="book-button">Book Interior Detailing</button>
+        </a>
+      </section>
+
+      <section id="exterior">
+        <h1>Exterior Detailing</h1>
+        <p>Wipe, wash, polish, wax, you name it.</p>
+      </section>
+
+      <section id="packages">
+        <h1>Service Packages</h1>
+        <p>Combine and save.</p>
+      </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="js/hamburger.js"></script>
+    <script src="js/dropdown.js"></script>
+  </body>
+</html>