buuuncha updates

ceramic-coating.html

@@ -13,9 +13,9 @@
     <link href="css/hamburger.css" rel="stylesheet" />
     <style>
       hr {
-        background-color: black;
-        height: 4px;
+        border: 2px solid var(--gold);
         width: 75%;
+        margin: 1rem;
       }
 
       .info-box {
@@ -23,25 +23,53 @@
         width: 80%;
         padding: 2rem 4rem;;
         border-radius: 4rem;
+        height: min-content;
 
-        background-color: var(--gold);
+        border: 2px solid var(--gold);
+        transition: border 1s ease;
       }
+      .info-box:hover {
+        border: 2px solid white;
+      } 
       .info-box h1, p {
-        color: black;
+        color: white;
+        text-wrap: pretty;
       }
 
       .info-flex {
         display: flex;
         flex-direction: row;
         justify-content: space-between;
+        align-items: center;
+        gap: 2rem;
+        max-width: 80%;
+      }
+      .info-flex:nth-child(1) {
+        max-width: 20%;
+        width: 20%;
+      }
+      .info-flex:nth-child(2) {
+        max-width: 80%;
         width: 80%;
       }
 
-      .info-flex:nth-child(1) {
-        width: 30%;
+      #allIncludeList {
+        display: flex; 
+        flex-wrap: wrap;
+        align-items: center;
+        justify-content: center;
+        
+        max-width: 100%;
       }
-      .info-flex:nth-child(2) {
-        width: 60%;
+      li {
+        text-wrap: nowrap;
+        list-style-position: inside;
+        padding: 0rem;
+        margin: .5rem .5rem;
+      }
+      li::marker {
+        content: "✓ ";
+        color: var(--gold);
       }
 
       /** MOBILE */
@@ -49,6 +77,7 @@
 
         .info-flex {
           flex-direction: column;
+          align-items: center;
           width: 100%;
         }
         .info-flex section {
@@ -86,19 +115,38 @@
 
     <main id="main-content">
       
-      <section class="info-box">
+      <section class="info-box" style="margin-bottom: 2rem;">
         <h1><em>All</em> Ceramic Coatings Include</h1>
         <hr />
-        <p>testing</p>
+        <p>some headline details can go in here, then:</p>
+        <ul id="allIncludeList">
+          <li>list example item 1</li>
+          <li>list example item 2</li>
+          <li>list example item 3</li>
+          <li>list example item 4</li>
+        </ul>
       </section>
 
       <div class="info-flex">
         <section class="info-box">
-            
-          </section>
+          <h1>Choose your <em>Ceramic Coating</em> Package</h1>
+          <hr />
+          <ul>
+            <li>Elite Ceramic Coating</li>
+            <li>Complete Ceramic Coating</li>
+          </ul> 
+          <p><i>dev note:</i>maybe left-align list above, change bullet style, then use existing bullets as first list, then make sub-bullets for the distinguishing characteristics of each package with checkmark bullet?</p>
+        </section>
 
-          <section class="info-box">
-          </section>
+        <section class="info-box">
+          <h1>Wheel Wash <em>Add-on</em></h1>
+          <hr />
+          <ul id="allIncludeList">
+            <li>wheel wash information 1</li>
+            <li>wheel wash information 2</li>
+            <li>wheel wash information 3</li>
+          </ul>
+        </section>
       </div>
     </main>
     <script src="js/hamburger.js"></script>