made service page sexier w/ down arrow. TODO implement card classes

index.html

@@ -196,7 +196,7 @@
       </section>
 
       <div id="tableOfContents">
-        <h1>Our Services</h1>
+        <h1>Available Services</h1>
         <div id="categoryLinks">
           <a href="./services.html?jumpTarget=ceramic"  class="jumpLink"><h2>Ceramic Coating</h2></a>
           <a href="./services.html?jumpTarget=paint"    class="jumpLink"><h2>Polish & Paint Correction</h2></a>

services.html

@@ -19,12 +19,9 @@
         gap: 12rem;
       }
 
-      h1 {
-         margin-top: 12rem; 
-      }
 
       /** landings are used to jump slightly above categories */
-      .landing { top: 3rem; position: relative; }
+      .landing { top: 10rem; position: relative; }
 
       #categoryLinks {
         display: flex;
@@ -44,20 +41,33 @@
         padding: 0 5rem;
         
         text-decoration: none;
-        color: var(--black);
+        color: var(--gold);
 
-        background-color: var(--gold);
+        border: 1px solid var(--gold);
         
         border-radius: 1rem;
         
         transition: 0.3s ease;
       }
       .jumpLink:hover {
-        color: white;  
+        box-shadow: 0px 0px 10px var(--gold);
       }
-      .jumpLink a, .jumpLink h2 {
+
-        color: var(--black);
+      #downArrowWrapper {
-        background-color: var(--gold);
+        display: flex;
+        justify-content: center;
+        margin-top: 2rem;
+      }
+      #downArrow {
+        transform: rotate(-45deg);
+        height: 20px;
+        width: 20px;
+        border-left: solid 2px var(--gold);
+        border-bottom: solid 2px var(--gold);
+      }
+      #downArrow:hover {
+        border-left: solid 3px var(--gold);
+        border-bottom: solid 3px var(--gold);
       }
 
       #categoryContainer {
@@ -65,17 +75,22 @@
         height: 100%;
       }
 
+      .serviceHeader { 
+        margin-top: 20rem;
+      }
       .serviceContainer {
         display: flex;
         align-items: flex-start;
         justify-content: space-evenly;
         flex-wrap: wrap;
+        gap: 5rem;
         margin: 3rem 0;
       }
 
       #tableOfContents {
         width: 90%;
-        margin-bottom: 25vh;
+        margin-top: 15vh;
+        margin-bottom: 35vh;
       }
 
 
@@ -87,7 +102,7 @@
 
         height: 100%;
 
-        width: 45%;
+        width: 40rem;
       }
 
       .card {
@@ -103,6 +118,11 @@
         border: 2px solid white;
       }
 
+      /** TODO implement these classes to make consistent service card sizes */
+      .tall   { height: 30rem; }
+      .medium { height: 20rem; }
+      .short  { height: 10rem; }
+
       .card-head {
         margin-bottom: 2rem;
       }
@@ -173,12 +193,16 @@
           width: 100%;
         }
 
-        h1 {
+        .jumpLink {
+          height: 10rem;
+        }
+
+        /* h1 {
           font-size: 1.75rem;
         }
         h2 {
           font-size: 1.5rem;
-        }
+        }*/
       }
     </style>
   </head>
@@ -220,31 +244,36 @@
             <a href="#exteriorJump" class="jumpLink"><h2>Exterior Detailing</h2></a>
             <a href="#interiorJump" class="jumpLink"><h2>Interior Detailing</h2></a>
           </div>
+
+          <div id="downArrowWrapper">
+            <a id="downArrow" href="#packagesJump"></a>
+          </div>
         </div>
 
         <div id="categoryContainer">
           <span id="packagesJump" class="landing"></span>
-          <h1>Service Packages</h1>
+          <h1 class="serviceHeader">Service Packages</h1>
+          <a href="#main-content">back to top</a>
           <div id="packages" class="serviceContainer">
           </div>
 
           <span id="ceramicJump" class="landing"></span>
-          <h1>Ceramic Coating</h1>
+          <h1 class="serviceHeader">Ceramic Coating</h1>
           <div id="ceramic" class="serviceContainer">
           </div>
 
           <span id="paintJump" class="landing"></span>
-          <h1>Paint & Polish Correction</h1>
+          <h1 class="serviceHeader">Paint & Polish Correction</h1>
           <div id="paint" class="serviceContainer">
           </div>
           
           <span id="exteriorJump" class="landing"></span>
-          <h1>Exterior Detailing</h1>
+          <h1 class="serviceHeader">Exterior Detailing</h1>
           <div id="exterior" class="serviceContainer">
           </div>
 
           <span id="interiorJump" class="landing"></span>
-          <h1>Interior Detailing</h1>
+          <h1 class="serviceHeader">Interior Detailing</h1>
           <div id="interior" class="serviceContainer">
           </div>
         </div>
@@ -594,7 +623,6 @@
         window.scrollTo({ top: destination, left: 0, behavior: "smooth"});
       }
     </script>
-  
   </body>
 </html>