reformatting service cards

services2.html

@@ -19,8 +19,12 @@
         gap: 12rem;
       }
 
+      h1 {
+         margin-top: 12rem; 
+      }
+
       /** landings are used to jump slightly above categories */
-      .landing { top: -5rem; position: relative; }
+      .landing { top: 3rem; position: relative; }
 
       #categoryLinks {
         display: flex;
@@ -63,19 +67,28 @@
 
       .serviceContainer {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         justify-content: space-evenly;
+        flex-wrap: wrap;
         margin: 3rem 0;
       }
 
       #tableOfContents {
         width: 90%;
-        margin-top: 8rem;
         margin-bottom: 25vh;
       }
 
 
-      /** Service Card */
+      /** Services */
+      .service {
+        display: flex;
+        flex-direction: column;
+
+        height: 100%;
+
+        width: 45%;
+      }
+
       .card {
         padding: 3rem;
         border: 2px solid var(--gold);
@@ -83,26 +96,39 @@
 
         transition: 0.5s ease;
         color: white;
-        width: 30%;
+        width: 100%;
       }
       .card:hover {
         border: 2px solid white;
       }
 
+      .card-head {
+        margin-bottom: 2rem;
+      }
+
       .card-body {
         display: flex;
+        flex-direction: column;
         justify-content: center;
         align-items: center;
         gap: 2rem;
         text-align: left;
+        width: 100%;
       }
 
-      .card-body span {
+      /** .card-body span {
         display: flex;
         flex-direction: column;
         align-self: stretch;
 
         width: 50%;
+      }*/
+      .card-body span {
+        display: flex;
+        flex-direction: column;
+        align-self: stretch;
+
+        width: 100%;
       }
       .card-body span h3 {
         text-align: center;
@@ -189,14 +215,13 @@
           <div id="categoryLinks">
             <a href="#packagesJump" class="jumpLink"><h2>Service Packages</h2></a>
             <a href="#ceramicJump"  class="jumpLink"><h2>Ceramic Coating</h2></a>
-            <a href="paintJump"    class="jumpLink"><h2>Polish &<br/>Paint Correction</h2></a>
+            <a href="#paintJump"    class="jumpLink"><h2>Polish &<br/>Paint Correction</h2></a>
             <a href="#exteriorJump" class="jumpLink"><h2>Exterior Detailing</h2></a>
             <a href="#interiorJump" class="jumpLink"><h2>Interior Detailing</h2></a>
           </div>
         </div>
 
         <div id="categoryContainer">
-
           <span id="packagesJump" class="landing"></span>
           <h1>Service Packages</h1>
           <div id="packages" class="serviceContainer">
@@ -221,10 +246,8 @@
           <h1>Interior Detailing</h1>
           <div id="interior" class="serviceContainer">
           </div>
-
         </div>
 
-
     </main>
 
     <footer>
@@ -243,9 +266,10 @@
         >
       </div>
     </footer>
-    <script src="js/hamburger.js"></script>
-    <script>
 
+    <script src="js/hamburger.js"></script>
+
+    <script>
       // these categories must match the IDs of the serviceContainer <div>s above
       const categories = ["packages", "ceramic", "paint", "exterior", "interior"];
       const serviceData = {
@@ -343,7 +367,7 @@
                 "bullets" :  [
                   "Hand wash & dry",
                   "Wheel cleaning",
-                  "1 stage paint correction on all paint & glas",
+                  "1 stage paint correction on all paint & glass",
                   "Free quarterly washes",
                   "Free annual decontamination and topper"
                 ]
@@ -398,7 +422,7 @@
             },
             "right" : {
               "header" : "Includes",
-              "paragraph" : "Restore shine and gloss.",
+              "paragraph" : "",
               "bullets" :  [
                 "Exterior wash and decontaminaion",
                 "2-step polish to eliminate 80-85% of defects",
@@ -467,7 +491,7 @@
                 "header" : "Includes",
                 "paragraph" : "",
                 "bullets" :  [
-                  "Vacuum & light carpet shampooing<",
+                  "Vacuum & light carpet shampooing",
                   "Plastics, leather, and vinyls cleaning",
                   "Light seat shampooing",
                   "Interior & exterior window cleaning",
@@ -481,29 +505,29 @@
               "title" : "Level Two Interior",
               "subtitle" : "Bring back the interior you love & protect it for months.",
               "left" : {
-                "header" : "Description",
-                "paragraph" : "A thorough restoration of your car's interior.",
-                "bullets" :  []
-              },
-              "right" : {
                 "header" : "Includes",
                 "paragraph" : "",
                 "bullets" :  [
-                  "Vacuum & carpet shampooing<",
-                  "Plastics, leather, and vinyls scrubbed",
-                  "Leather conditioning for protection and suppleness",
                   "Upholstery shampooing",
                   "Crack & crevice cleaning",
                   "6 month interior protection (Spills, UV, less dust, less cleaning, and plastic rejuvenation)"
                   ]
               },
+              "right" : {
+                "header" : "and",
+                "paragraph" : "",
+                "bullets" :  [
+                  "Vacuum & carpet shampooing",
+                  "Plastics, leather, and vinyls scrubbed",
+                  "Leather conditioning for protection and suppleness",
+                  
+                ]
+              },
               "url" : "https://app.urable.com/virtual-shop/IQlYjZyF1i2XilEiEKB5/yT4vtoWKB5qGaQMaxOdd?productServiceId=bc8YSJd6fl0CprnAY43r&sku=iUA7y7dwM4Kz51pBpQNI"
             }
         ]
       };
 
-
-
       function insertServices(serviceData) {
         for (const category of categories) {
           let categoryData = serviceData[category];
@@ -518,7 +542,8 @@
             target.insertAdjacentHTML(
             "beforeend",
             `
-            <div class="card" >
+            <div class="service">
+              <div class="card">
                 <div class="card-head">
                   <h2>${service.title}</h2>
                   <p>${service.subtitle}</p>
@@ -528,6 +553,9 @@
                   ${rightSide ? rightSide : ""}
                 </div>
               </div>
+
+              <button>book</button>
+            </div>
           `);
           }
         }
@@ -536,12 +564,12 @@
       function buildCardColumn(data) {
         let html = "<span>";
         if (data.header) {
-          html += "<h3>" + data.header + "</h3>";
+          html += "<h3 style='text-align:left;'>" + data.header + "</h3>";
         }
         if (data.paragraph) {
           html += "<p>" + data.paragraph + "</p>";
         }
-        if (data.bullets) {
+        if (data.bullets.length > 0) {
           html += "<ul>";
           for (point of data.bullets) {
             html += "<li>" + point + "</li>";
@@ -557,8 +585,8 @@
       window.onload = (event) => {
         insertServices(serviceData);
       }
-
     </script>
+  
   </body>
 </html>