added before/after indicator to gallert + services page

2025-10-13 16:48:12 -04:00
parent d74a2bf1cb
commit 4a1aaacf61
4 changed files with 262 additions and 77 deletions
@@ -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>