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 style="background-color: red; width: 100%; flex-grow: 3"></section>
-          <section style="background-color: red; width: 20%;"></section>
-          <section style="background-color: blue; width: 50%;"></section>
+      <section class="info-container">
+      </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;
-      }
-
-      .reviewLink {
-        color: black;
+        color: var(--gold);
       }
 
       .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,7 +155,12 @@
     <main id="main-content">
 
       <section id="packages">
+        <div class="dropdown">
+          <div class="dropdown-header" onclick="toggleDropdown(this)">
+            <span class="dropdown-arrow">▼</span> 
             <h1>Service Packages</h1>
+          </div>
+          <div class="dropdown-content">
 
             <div class="dropdown">
               <div class="dropdown-header" onclick="toggleDropdown(this)">
@@ -231,6 +237,8 @@
                 </div>
               </div>
             </div> 
+          </div>
+        </div>
       </section>
 
       <section id="ceramic">
@@ -519,3 +527,4 @@
     </script>
   </body>
 </html>
+