service overhaul page work

css/style.css

@@ -83,7 +83,7 @@ main {
 
   text-align: center;
 
-  min-width: 100%;
+  width: 100%;
   padding: 0;
   margin: 0;
 }

services2.html

@@ -15,21 +15,58 @@
     <style>
 
       main {
-        max-width: 90%;
+        gap: 12rem;
-        display: flex;
       }
 
+      #categoryLinks {
+        display: flex;
+        justify-content: space-evenly;
+        align-items: center;
+        gap: 2rem;
+
+        margin-top: 2rem;
+      }
+
+      #servicesContainer {
+        width: 90%;
+        height: 100%;
+      }
       
       #tableOfContents {
-        display: flex;
+        width: 90%;
-        flex-direction: row;
+        margin-top: 5rem;
-        gap: 1rem;
       }
 
-      #serviceListings {
+      .card {
-        align-self: flex-end;
+        padding: 3rem;
-        width: 100%;
+        border: 2px solid var(--gold);
-        height: 100%;
+        border-radius: 1rem;
+
+        transition: 0.5s ease;
+        color: white;
+        width: 25%;
+      }
+      .card:hover {
+        border: 2px solid white;
+      }
+
+      .card-body {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        gap: 2rem;
+        text-align: left;
+      }
+
+      .card-body span {
+        display: flex;
+        flex-direction: column;
+        align-self: stretch;
+
+        width: 50%;
+      }
+      .card-body span h3 {
+        text-align: center;
       }
 
 
@@ -106,25 +143,25 @@
 
     <main id="main-content">
 
-        <div>
-          <h1>Service Categories</h1>
         <div id="tableOfContents">
-            <a href="#packages">Service Packages</a>
+          <h1>Service Categories</h1>
-            <a href="#ceramic">Ceramic Coating</a>
+          <div id="categoryLinks">
-            <a href="#paint">Polish & Paint Correction</a>
+            <h2><a href="#packages">Service Packages</a></h2>
-            <a href="#exterior">Exterior Detailing</a>
+            <h2><a href="#ceramic">Ceramic Coating</a></h2>
-            <a href="#interior">Interior Detailing</a>
+            <h2><a href="#paint">Polish & Paint Correction</a></h2>
+            <h2><a href="#exterior">Exterior Detailing</a></h2>
+            <h2><a href="#interior">Interior Detailing</a></h2>
+          </div>
         </div>
 
-        </div>
+        <div id="servicesContainer">
 
-        <div id="serviceListings">
           <div class="card" >
-            <h2>hheadheadheadheadheadheadheadheadheadheadead</h2>
+            <div class="card-head">
-            <p>bodyyy</p>
+              <h2>Service Package One</h2>
             </div>
-          <div class="dropdown-body">
+            <div class="card-body">
-            <span class="dropdown-body-half">
+              <span>
                 <h3>Interior</h3>
                 <ul>
                   <li>Vacuum & light carpet shampooing</li>
@@ -134,8 +171,7 @@
                   <li>Crack & crevice cleaning</li>
                 </ul>
               </span>
-
+              <span>
-            <span class="dropdown-body-half">
                 <h3>Exterior</h3>
                 <ul>
                   <li>Hand wash & dry</li>
@@ -148,6 +184,8 @@
             </div>
           </div>
 
+        </div>
+
 
     </main>