changes everywhere

ceramic-coating.html

@@ -12,6 +12,12 @@
     <link href="css/dropdown.css" rel="stylesheet" />
     <link href="css/hamburger.css" rel="stylesheet" />
     <style>
+      .info-container {
+        background-color: var(--gold);
+        max-width: 80%;
+        width: 80%;
+        border-radius: 4rem;
+      }
 
     </style>
   </head>
@@ -47,10 +53,15 @@
         <div id="reviewContainer"></div>
       </section>
       
-      <div style="display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; width: 100%; gap: 10%;">
+      <section class="info-container">
-          <section style="background-color: red; width: 100%; flex-grow: 3"></section>
+      </section>
-          <section style="background-color: red; width: 20%;"></section>
+
-          <section style="background-color: blue; width: 50%;"></section>
+      <div style="display: flex; flex-direction: row; justify-content: space-between; width: 80%;">
+          <section class="info-container" style="width: 30%;">
+          </section>
+
+          <section class="info-container" style="width: 60%;">
+          </section>
       </div>
 
     </main>

css/style.css

@@ -92,17 +92,17 @@ a {
 
 h1 {
   font-size: 2.5rem;
-  color: #fff;
+  color: var(--gold);
 }
 
 h2 {
   font-size: 2rem;
-  color: #fff;
+  color: var(--gold);
 }
 
 h3 {
   font-size: 1.5rem;
-  color: #fff;
+  color: var(--gold);
 }
 
 p {

index.html

@@ -74,6 +74,10 @@
         margin-top: 5rem;
       }
 
+      h2 {
+        color: white;
+      }
+
       /** MOBILE */
       @media screen and (max-width: 850px) {
         #hero-image {

reviews.html

@@ -15,20 +15,25 @@
       #reviewContainer {
         display: flex;
         flex-wrap: wrap;
-        gap: 2rem;
+        gap: 5rem;
 
         align-items: center;
         justify-content: center;
       }
 
+        
       /** REVIEW CARD */
       .review-card {
-        background-color: #eee;
-
         padding: 1rem;
         border-radius: 1rem;
 
+        transition: 1s ease;
         box-shadow: 0px 0px 25px var(--light-gold);
+        color: white;
+      }
+
+      .review-card:hover {
+        box-shadow: 0px 0px 25px white;
       }
 
       .review-card-head {
@@ -37,16 +42,14 @@
         justify-content: space-between;
 
         margin-bottom: 1rem;
-      }
+        color: var(--gold);
-
-      .reviewLink {
-        color: black;
       }
 
       .review-card-body {
         max-height: 15rem;
         overflow-y: auto;
         text-align: left;
+        color: white;
       }
 
       /** GALLERY */
@@ -329,7 +332,7 @@
                 </span> 
               </div>
               <div class="review-card-body">
-                <p style="color: black">${review.text}</p>
+                <p>${review.text}</p>
               </div>
             </div>
           `

services.html

@@ -15,7 +15,8 @@
     <style>
 
       section {
-        width: 40%;
+        max-width: 75%;
+        width: 75%;
         gap: 2rem;
       }
 
@@ -53,7 +54,7 @@
       .dropdown {
         width: 100%;
         border: 1px solid var(--gold);
-        transition: 1s;
+        transition: 2s;
       }
       .dropdown:hover {
         border: 1px solid white;
@@ -68,7 +69,7 @@
         padding: 1.5rem 4rem 2rem 4rem;
         border: none;
 
-        transition: 1s;
+        transition: 2s;
       }
       .dropdown-header:hover {
         border: none;
@@ -96,7 +97,7 @@
         border: none;
       }
       .dropdown-content.open {
-        max-height: 700px;
+        max-height: 1500px;
       }
 
       .dropdown-body {
@@ -154,80 +155,87 @@
     <main id="main-content">
 
       <section id="packages">
-        <h1>Service Packages</h1>
-
         <div class="dropdown">
           <div class="dropdown-header" onclick="toggleDropdown(this)">
             <span class="dropdown-arrow">▼</span> 
-            <div>
+            <h1>Service Packages</h1>
-              <h2>Level One</h2>
-              <p>Give your car the time, love, and care it deserves.</p>
-            </div>
           </div>
           <div class="dropdown-content">
-            <hr>
-            <div class="dropdown-body">
-              <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>
-              <br /><br />
-              <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>
-              <br />
-              <a target="_blank" class="book-link" 
-                href="https://app.urable.com/virtual-shop/IQlYjZyF1i2XilEiEKB5/XGQVAkJx15acdsEemvEr?productServiceId=sIUtLBqGS4mjAQNwHtI4&sku=rH37oV6muKqDXStXhH3k"
-              >
-                <button id="book-button">Book Level One Package Now</button>
-              </a>
-            </div>
-          </div>
-        </div>
 
-        <div class="dropdown">
+            <div class="dropdown">
-          <div class="dropdown-header" onclick="toggleDropdown(this)">
+              <div class="dropdown-header" onclick="toggleDropdown(this)">
-            <span class="dropdown-arrow">▼</span>
+                <span class="dropdown-arrow">▼</span>
-            <div>
+                <div>
-              <h2>Level Two</h2>
+                  <h2>Level One</h2>
-              <p>Tell the world you're proud of your car.</p>
+                  <p>Give your car the time, love, and care it deserves.</p>
+                </div>
+              </div>
+              <div class="dropdown-content">
+                <hr>
+                <div class="dropdown-body">
+                  <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>
+                  <br /><br />
+                  <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>
+                  <br />
+                  <a target="_blank" class="book-link" 
+                    href="https://app.urable.com/virtual-shop/IQlYjZyF1i2XilEiEKB5/XGQVAkJx15acdsEemvEr?productServiceId=sIUtLBqGS4mjAQNwHtI4&sku=rH37oV6muKqDXStXhH3k"
+                  >
+                    <button id="book-button">Book Level One Package Now</button>
+                  </a>
+                </div>
+              </div>
             </div>
-          </div>
-          <div class="dropdown-content">
-            <hr>
-            <div class="dropdown-body">
-              <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>
-              <br /><br />
-              <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><em>Clay service to remove embedded contamination</em></li>
-                <li><em>3 to 6 month ceramic paint sealant: gloss, protection, hydrophobic & self-cleaning properties</em></li>
-              </ul>
 
-              <a target="_blank" class="book-link" 
+            <div class="dropdown">
-                href="https://app.urable.com/virtual-shop/IQlYjZyF1i2XilEiEKB5/XGQVAkJx15acdsEemvEr?productServiceId=ZUyqKhnZtS3uAT9Auo2I&sku=EsEnqIEVcVedKRDITk7e"
+              <div class="dropdown-header" onclick="toggleDropdown(this)">
-              >
+                <span class="dropdown-arrow">▼</span>
-                <button id="book-button">Book Level Two Package Now</button>
+                <div>
-              </a>
+                  <h2>Level Two</h2>
+                  <p>Tell the world you're proud of your car.</p>
+                </div>
+              </div>
+              <div class="dropdown-content">
+                <hr>
+                <div class="dropdown-body">
+                  <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>
+                  <br /><br />
+                  <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><em>Clay service to remove embedded contamination</em></li>
+                    <li><em>3 to 6 month ceramic paint sealant: gloss, protection, hydrophobic & self-cleaning properties</em></li>
+                  </ul>
+
+                  <a target="_blank" class="book-link" 
+                    href="https://app.urable.com/virtual-shop/IQlYjZyF1i2XilEiEKB5/XGQVAkJx15acdsEemvEr?productServiceId=ZUyqKhnZtS3uAT9Auo2I&sku=EsEnqIEVcVedKRDITk7e"
+                  >
+                    <button id="book-button">Book Level Two Package Now</button>
+                  </a>
+                </div>
+              </div>
             </div> 
           </div>
         </div>
@@ -519,3 +527,4 @@
     </script>
   </body>
 </html>
+