added before/after indicator to gallert + services page

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;
@@ -60,8 +89,12 @@
           width: 100%;
           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="#Ceramic Coating"
-            >Ceramic Coating</a
-          >
+          <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">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">
@@ -137,8 +168,31 @@
               this is where we answer the question in the header
             </div>
           </div>
-        </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>