Timeline Colored Border

- Add Colored borders to indicate project type
JacobSeto · Aug 18, 2024 · 04893f6 · 04893f6
1 parent e226a78
commit 04893f6
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 24 deletions.
diff --git a/index.html b/index.html
@@ -57,7 +57,7 @@ <h1>Project Experience</h1>
 
     <div class="timeline">
 
-      <div class="checkpoint">
+      <div class="checkpoint blue-border">
         <a id="serve">
           <div>
             <label>Current</label>
@@ -73,7 +73,7 @@ <h2>SERVE</h2>
         </a>
       </div>
 
-      <div class="checkpoint">
+      <div class="checkpoint green-border">
         <a id="hammer">
           <div>
             <label>August, 2024</label>
@@ -92,7 +92,7 @@ <h2>Completely Hammered</h2>
         </a>
       </div>
 
-      <div class="checkpoint">
+      <div class="checkpoint green-border">
         <a id="rabbeat">
           <div>
             <label>May, 2024</label>
@@ -111,7 +111,7 @@ <h2>Rabbeat</h2>
       </div>
 
 
-      <div class="checkpoint">
+      <div class="checkpoint green-border">
         <a id="tilly">
           <div>
             <label>May, 2024</label>
@@ -130,7 +130,7 @@ <h2>Tilly's Critter Command</h2>
       </div>
 
 
-      <div class="checkpoint">
+      <div class="checkpoint blue-border">
         <a id="polylect">
           <div>
             <label>May, 2024</label>
@@ -146,7 +146,7 @@ <h2>Polylect</h2>
         </a>
       </div>
 
-      <div class="checkpoint">
+      <div class="checkpoint white-border">
         <a id="light">
           <div>
             <label>December, 2023</label>
@@ -163,7 +163,7 @@ <h2>Light Up the Stage</h2>
         </a>
       </div>
 
-      <div class="checkpoint">
+      <div class="checkpoint green-border">
         <a id="rainbow">
           <div>
             <label>December, 2023</label>
@@ -181,7 +181,7 @@ <h2>Rainbow Card Rumble</h2>
         </a>
       </div>
 
-      <div class="checkpoint">
+      <div class="checkpoint green-border">
         <a id="fury">
           <div>
             <label>August, 2023</label>
@@ -199,7 +199,7 @@ <h2>Fury of The Lost Knight</h2>
         </a>
       </div>
 
-      <div class="checkpoint">
+      <div class="checkpoint white-border">
         <a id="flock-arena">
           <div>
             <label>May, 2023</label>
@@ -215,7 +215,7 @@ <h2>Flock Arena</h2>
         </a>
       </div>
 
-      <div class="checkpoint">
+      <div class="checkpoint green-border">
         <a id="planetoids">
           <div>
             <label>December 2022</label>
@@ -231,7 +231,7 @@ <h2>Planetoids</h2>
         </a>
       </div>
 
-      <div class="checkpoint">
+      <div class="checkpoint green-border">
         <a id="carbon">
           <div>
             <label>October 2022</label>
@@ -248,7 +248,7 @@ <h2>Carbon Footprint Calculator</h2>
         </a>
       </div>
 
-      <div class="checkpoint">
+      <div class="checkpoint white-border">
         <a id="castaways">
           <div>
             <label>February 2021</label>

diff --git a/style.css b/style.css
@@ -21,11 +21,12 @@ body {
 }
 
 h1 {
+  padding-top: 50px;
   color: white;
   margin-bottom: 20px;
   /* Adjust the spacing between the header and iframe */
   text-align: center;
-  font-size: xx-large;
+  font-size: 60px;
 
 }
 
@@ -72,6 +73,7 @@ a {
   text-align: center;
   padding: 14px 16px;
   text-decoration: none;
+
 }
 
 
@@ -84,10 +86,12 @@ a {
   display: inline-block;
 }
 
+
+
 .dropdown-content {
   display: none;
   position: fixed;
-  background-color: #f9f9f9;
+  background-color: gray;
   min-width: 160px;
   box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
   z-index: 1;
@@ -102,7 +106,7 @@ a {
 }
 
 .dropdown-content a:hover {
-  background-color: #f1f1f1;
+  background-color: grey;
 }
 
 .dropdown:hover .dropdown-content {
@@ -132,10 +136,6 @@ a {
   margin-top: -25px;
 }
 
-.title h1 {
-  padding-top: 50px;
-}
-
 .title p {
   color: #9d9d9d;
   font-size: 1.3em;
@@ -149,9 +149,8 @@ a {
 
 .checkpoint {
   max-width: 34em;
-  padding-top: 2em;
-  padding-bottom: 2em;
   position: relative;
+  margin-bottom: -4em;
 }
 
 .checkpoint h2 {
@@ -177,11 +176,22 @@ a {
 }
 
 .checkpoint div {
-  border: 2px solid #fff;
   border-radius: 1em;
   padding: 1.5em;
 }
 
+.white-border div {
+  border: 3px solid white;
+}
+
+.green-border div {
+  border: 3px solid lightgreen;
+}
+
+.blue-border div {
+  border: 3px solid lightblue;
+}
+
 .checkpoint div onmouseenter {
   background-color: white;
 }
@@ -266,14 +276,14 @@ a {
 }
 
 .checkpoint:nth-child(odd) label {
-  right: 110%;
+  right: 105%;
   /* Adjust this value if needed */
   transform: translateY(-50%);
   text-align: right;
 }
 
 .checkpoint:nth-child(even) label {
-  left: 110%;
+  left: 105%;
   /* Adjust this value if needed */
   transform: translateY(-50%);
   text-align: left;