Added Prizes section

css/general.css

@@ -340,41 +340,6 @@ section {
     margin: 10px 0;
 }
 
-#steps-card {
-    width: 400px;
-    min-width: 300px;
-    border-radius: 10px;
-    background-color: #0d1117;
-    background-color: #1e2227;
-    margin: 10px auto;
-    padding: 10px 30px;
-    box-shadow: 5px 5px 10px rgb(0 0 0 / 20%);
-    text-align: left;
-}
-
-#steps-header {
-  padding-top: 30px;
-}
-
-.list-item {
-    margin: 0 0 30px 30px;
-    padding: 10px;
-    position: relative;
-}
-
-.list-item::before {
-    content: "";
-    position: relative;
-    margin-right: 10px;
-    width: 10px;
-    height: 10px;
-    background: rgb(255, 255, 255);
-    border-radius: 999px;
-    float: left;
-    border: 3px solid rgb(44, 44, 44);
-}
-
-
 /* Timeline */
 #timeline {
   width: 100%;
@@ -489,7 +454,7 @@ input:checked + .dot-info span {
   margin-top: 70px;
   font-size: 22px;
   font-weight: 400;
-  margin-bottom: 150px;
+  margin-bottom: 200px;
   text-align: left;
 }
 #timeline-descriptions-wrapper div {
@@ -639,6 +604,36 @@ input[data-description="5"]:checked ~ #timeline-descriptions-wrapper div[data-de
     margin: 20px auto;
   }
   
+#steps-card {
+  width: 400px;
+  min-width: 300px;
+  border-radius: 10px;
+  background-color: #0d1117;
+  background-color: #1e2227;
+  margin: 10px auto;
+  padding: 10px 30px;
+  box-shadow: 5px 5px 10px rgb(0 0 0 / 20%);
+  text-align: left;
+}
+
+.list-item {
+  margin: 0 0 30px 30px;
+  padding: 10px;
+  position: relative;
+}
+
+.list-item::before {
+  content: "";
+  position: relative;
+  margin-right: 10px;
+  width: 10px;
+  height: 10px;
+  background: rgb(255, 255, 255);
+  border-radius: 999px;
+  float: left;
+  border: 3px solid rgb(44, 44, 44);
+}
+
   /* Outer Layer with the steps border */
   .outer {
     border-left: 2px solid #333;
@@ -655,6 +650,10 @@ input[data-description="5"]:checked ~ #timeline-descriptions-wrapper div[data-de
     max-width: 400px;
   }
   
+  #signup-header {
+    padding-top: 10px;
+  }
+
   /* Title of the card */
   .title {
     color: rgb(255, 255, 255);
@@ -683,54 +682,95 @@ input[data-description="5"]:checked ~ #timeline-descriptions-wrapper div[data-de
 
 #prizes-container {
     display: grid;
-    margin-top: 20px;
+    margin: 20px 20px 0;
     width: auto;
-    height: auto;
+    height: 300px;
     justify-content: center;
     grid-template-columns: repeat(3, 1fr);
 }
 
 .podium-description {
   width: 100%;
+  height: auto;
+  justify-content: center;
+
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: center;
+  align-items: center;
+
+  text-align: center;
+  position: relative;
+}
+
+.prize-laurel {
+  height: 150px;
+  width: auto;
+  position: relative;
+}
+
+.prize-title {
+  position: absolute;
+  color: rgb(203, 218, 77);
+  font-size: 25px;
+}
+
+#pr-ti-2 {
+  margin-bottom: 110px;
+}
+
+#pr-ti-1 {
+  margin-bottom: 160px;
+}
+
+#pr-ti-3 {
+  margin-bottom: 100px;
+}
+
+.prize-content {
+  margin-bottom: 10px;
+}
+
+#prize-logo {
+  margin-top: 18px;
   height: 50px;
+  border-radius: 50%;
+  border: 1px solid white;
 }
 
 #second-column {
   width: 100%;
-  height: 50px;
+  height: auto;
+  margin-top: 40px;
 }
 
 #first-column {
   width: 100%;
-  height: 90px;
+  height: auto;
   position: relative;
 }
 
 #third-column {
   width: 100%;
-  height: 40px;
+  height: auto;
+  margin-top: 50px;
 }
 
 #second-podium {
   width: 100%;
   height: 50px;
-  bottom: -40px;
-  position: relative;
   background-color: #333;
 }
 
 #first-podium {
   width: 100%;
   height: 90px;
-  position: relative;
   background-color: #333;
 }
 
 #third-podium {
   width: 100%;
   height: 40px;
-  position: relative;
-  bottom: -50px;
   background-color: #333;
 }
 

index.html

@@ -13,7 +13,7 @@
     <title>Gilroy Hacks</title>
     <link href="css/general.css" rel="stylesheet" type="text/css" media="all">
     <link href="css/scroll_nav.css" rel="stylesheet" type="text/css" media="all">
-    <link rel="icon" href="img/Gilroy-Hacks-Logo.ico">
+    <link rel="icon" href="img/Gilroy-Hacks-Logo-icon-tp.ico">
     <meta name="author" content="Gilroy Hacks">
     <meta name="copyright" content="This site and its pages are Copyright (c) 2022 Gilroy Hacks All Rights Reserved.">
     <meta name="description" content="The official webiste for the Gilroy Hacks Hackathon. Strengthen your skills and collaborate with others to create something useful.">
@@ -39,7 +39,7 @@
     <!--Nav-->
     <nav id="navBar">
         <a id="nav-logo-a" href="./">
-            <img id="nav-logo" src="img/Gilroy Hacks Logo [Summer-wide].png" loading="lazy" height="50" width="auto" alt="logo"/>
+            <img id="nav-logo" src="img/Gilroy Hacks Logo [Summer-wide-2].png" loading="lazy" height="50" width="auto" alt="logo"/>
         </a>
         <div id="nav-links-container">
             <input type="checkbox" id="check">
@@ -184,7 +184,7 @@
                     </div>
                 </article>
                 <article>
-                    <h3 id="steps-header">Signup STEPS</h3>
+                    <h2 id="signup-header">Signup STEPS</h2>
                     <div id="steps-card">
                         <div id="signup-container">
                             <div class="outer">
@@ -240,16 +240,28 @@
             <hr class="line">
             <div id="prizes-container">
                 <article id="second-column">
-                    <div class="podium-description">2nd</div>
+                    <div class="podium-description">
+                        <img class="prize-laurel" src="img/silver-laurel.png">
+                        <div class="prize-title" id="pr-ti-2">2nd</div>
+                        <div class="prize-content">A lot of money</div>
                         <div id="second-podium"></div>
+                    </div>
                 </article>
                 <article id="first-column">
-                    <div class="podium-description">1st</div>
-                    <div id="first-podium"></div>
+                    <div class="podium-description">
+                        <img class="prize-laurel" src="img/gold-laurel.png">
+                        <div class="prize-title" id="pr-ti-1">1st</div>
+                        <div class="prize-content">A lot of money</div>
+                        <div id="first-podium"><img id="prize-logo" src="img/Gilroy Hacks Logo [icon-tp-podium].png"></div>
+                    </div>
                 </article>
                 <article id="third-column">
-                    <div class="podium-description">3rd</div>
+                    <div class="podium-description">
+                        <img class="prize-laurel" src="img/bronze-laurel.png">
+                        <div class="prize-title" id="pr-ti-3">3rd</div>
+                        <div class="prize-content">A lot of money</div>
                         <div id="third-podium"></div>
+                    </div>
                 </article>
             </div>
         </section>
@@ -265,6 +277,7 @@
 <footer>
     <ul>
         <li><a class="link" target="_blank" href="https://discord.gg/nkTDKMcYbr" title="Discord Invite Link">Discord</a></li>
+        <li><a class="link" target="_blank" href="mailto:tech@gilroyhacks.com" title="Email">Contact Us</a></li>
     </ul>
     <hr id="footer-line">
     © 2022 Gilroy Hacks <br>