new gradient border on ceramic coating

ceramic-coating.html

@@ -18,24 +18,32 @@
         margin: 1rem;
       }
 
+
+
+
       .info-box {
+        background: 
+            linear-gradient(var(--black) 0 0) padding-box, /*black background*/
+            linear-gradient(to left, var(--gold), white, var(--gold)) border-box;
+        border: 5px solid transparent;
+
         max-width: 80%;
         width: 80%;
         padding: 2rem 4rem;;
         border-radius: 4rem;
         height: min-content;
 
-        border: 2px solid var(--gold);
-        transition: border 1s ease;
+        /** border: 2px solid var(--gold);    **/
+        transition: 1s ease;
       }
       .info-box:hover {
-        border: 2px solid white;
       } 
-      .info-box h1, p {
-        color: white;
-        text-wrap: pretty;
+      .info-box h1 {
+        color: var(--gold);
+      }
+      .info-box h2 {
+        color: white;
       }
-
       .info-flex {
         display: flex;
         flex-direction: row;
@@ -61,16 +69,27 @@
         
         max-width: 100%;
       }
-      li {
+      #allIncludeList li {
         text-wrap: nowrap;
         list-style-position: inside;
         padding: 0rem;
         margin: .5rem .5rem;
       }
-      li::marker {
+      
+     #allIncludeList li::marker {
         content: "✓ ";
-        color: var(--gold);
-      }
+     }
+
+     ol li ul {
+       padding-left: 1rem;
+     }
+     li {
+       color: white;
+       text-align: left;
+     }
+     li::marker {
+       color: var(--gold);
+     }
 
       /** MOBILE */
       @media screen and (max-width: 850px) {
@@ -120,28 +139,42 @@
         <hr />
         <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>
+          <li>3-5 years of protection</li>
+          <li>Hand wash</li>
+          <li>other detail</li>
+          <li>other detail</li>
         </ul>
       </section>
 
       <div class="info-flex">
         <section class="info-box">
-          <h1>Choose your <em>Ceramic Coating</em> Package</h1>
+          <h1>Choose your <em>Package</em></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>
+          <div style="width: 75%;">
+            <ol>
+              <li>
+                <h2>Elite Ceramic Coating:</h2>
+                <ul>
+                  <li>elite detail one</li>
+                  <li>elite detail two</li>
+                </ul>
+              </li>
+
+              <li>
+                <h2>Complete Ceramic Coating:</h2>
+                <ul>
+                  <li>complete detail one</li>
+                  <li>complete detail two</li>
+                </ul>
+              </li>
+            </ol> 
+          </div>
         </section>
 
         <section class="info-box">
           <h1>Wheel Wash <em>Add-on</em></h1>
           <hr />
-          <ul id="allIncludeList">
+          <ul>
             <li>wheel wash information 1</li>
             <li>wheel wash information 2</li>
             <li>wheel wash information 3</li>
@@ -149,6 +182,23 @@
         </section>
       </div>
     </main>
+
+    <footer>
+      <div id="footer-left">
+        &copy;Luxury Detailing Maine 2025<br />
+        All rights reserved<br />
+        Portland, ME
+      </div>
+      <div id="footer-right">
+        207-807-6770<br />
+        example@email.com<br />
+        <a
+          href="https://www.instagram.com/luxurydetailingmaine/"
+          target="_blank"
+          >@luxurydetailingmaine</a
+        >
+      </div>
+    </footer> 
     <script src="js/hamburger.js"></script>
   </body>
 </html>