changed up service styling + added content to ceramic page

ceramic-coating.html

@@ -12,11 +12,48 @@
     <link href="css/dropdown.css" rel="stylesheet" />
     <link href="css/hamburger.css" rel="stylesheet" />
     <style>
-      .info-container {
-        background-color: var(--gold);
+      hr {
+        background-color: black;
+        height: 4px;
+        width: 75%;
+      }
+
+      .info-box {
         max-width: 80%;
         width: 80%;
+        padding: 2rem 4rem;;
         border-radius: 4rem;
+
+        background-color: var(--gold);
+      }
+      .info-box h1, p {
+        color: black;
+      }
+
+      .info-flex {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        width: 80%;
+      }
+
+      .info-flex:nth-child(1) {
+        width: 30%;
+      }
+      .info-flex:nth-child(2) {
+        width: 60%;
+      }
+
+      /** MOBILE */
+      @media screen and (max-width: 850px) {
+
+        .info-flex {
+          flex-direction: column;
+          width: 100%;
+        }
+        .info-flex section {
+          width: 100%;
+        }
       }
 
     </style>
@@ -48,22 +85,22 @@
     </header>
 
     <main id="main-content">
-      <section>
-        <h1 style="margin-bottom: 7rem">Ceramic Coating</h1>
-        <div id="reviewContainer"></div>
-      </section>
       
-      <section class="info-container">
+      <section class="info-box">
+        <h1><em>All</em> Ceramic Coatings Include</h1>
+        <hr />
+        <p>testing</p>
       </section>
 
-      <div style="display: flex; flex-direction: row; justify-content: space-between; width: 80%;">
-          <section class="info-container" style="width: 30%;">
+      <div class="info-flex">
+        <section class="info-box">
+            
           </section>
 
-          <section class="info-container" style="width: 60%;">
+          <section class="info-box">
           </section>
       </div>
-
     </main>
+    <script src="js/hamburger.js"></script>
   </body>
 </html>

css/style.css

@@ -44,7 +44,7 @@ header {
 .navLink {
   color: var(--gold);
   text-decoration: none;
-  font-weight: 500;
+  font-weight: bold;
   transition: color 0.5s ease;
 }
 
@@ -181,16 +181,17 @@ footer {
     display: flex;
     flex-direction: column;
     position: fixed;
-    gap: 1rem;
+    gap: 2rem;
 
     padding: 2rem 0;
 
-    top: -12rem;
+    top: -20rem;
     left: 0;
     width: 100%;
 
-    font-size: 1rem;
+    font-size: 2rem;
     text-align: center;
+
     background-color: var(--black);
     transition: top 0.5s ease;
     box-shadow: 0 10px 27px rgba(0, 0, 0, 0.05);

services.html

@@ -53,16 +53,17 @@
       .dropdown {
         width: 100%;
         border: 1px solid var(--gold);
-        transition: 2s;
-      }
-      .dropdown:hover {
-        border: 1px solid white;
+        border-radius: 1.25rem;
+        transition: 0.5s;
+        user-select: none;
       }
 
       /** Prevent nested dropdowns from having borders */
       .dropdown .dropdown {
         border-left: none;
         border-right: none;
+        border-bottom: none;
+        border-radius: 0rem;
       }
 
       .dropdown-header {
@@ -105,12 +106,6 @@
         max-height: 2000px;
       }
 
-      /**
-        TODO:
-          - desktop view should be FLEX ROW
-          - mobile view should be normal columns
-          - get rid of double border on dropdowns if nested
-      */
       .dropdown-body {
         display: flex;
         flex-direction: row;
@@ -118,12 +113,12 @@
         align-items: flex-start;
         flex-wrap: wrap;
         margin: 1rem 1rem 1.5rem 6rem;
+        user-select: text;
       }
 
       .dropdown-body p {
         padding-right: 4rem;
       }
-
       .dropdown-body-half {
         flex-basis: 50%;
       }
@@ -137,6 +132,9 @@
           width: 100%;
         }
 
+        h1 {
+          font-size: 1.75rem;
+        }
         h2 {
           font-size: 1.5rem;
         }
@@ -146,7 +144,20 @@
         }
         .dropdown-body {
           margin: 1rem 1rem 1.5rem 3rem;
+          flex-direction: column;
         }
+        .dropdown-body span:not(:first-child) {
+          margin-top: 1.5rem;
+        }
+        .dropdown-body p {
+          padding-right: 0rem;
+        }
+        .book-link {
+          padding: 0;
+          margin: 0;
+          align-self: center;
+        }
+        
       }
     </style>
   </head>