From 36519d52b55dd9e2300ffe461b6da3e905e4d78f Mon Sep 17 00:00:00 2001
From: James Dinh <jamesdinh77@gmail.com>
Date: Wed, 1 Jun 2022 18:54:41 -0700
Subject: [PATCH] Improved Podium Aesthetic

---
 css/general.css | 50 ++++++++++++++++++++++++++++++++++++++++++-------
 index.html      | 16 ++++++++++++----
 2 files changed, 55 insertions(+), 11 deletions(-)

diff --git a/css/general.css b/css/general.css
index 03ac473..d8f55a5 100644
--- a/css/general.css
+++ b/css/general.css
@@ -167,6 +167,16 @@ nav li a:focus::after{
     #card-container {
         grid-template-columns: repeat(1, 1fr) !important;
     }
+    #prize-logo, .podium-label {
+      transform: scale(0.9);
+      font-size: 16px !important;
+    }
+    #podium-label-1 {
+      margin-right: 1px !important;
+    }
+    #podium-label-2 {
+      margin-left: 1px !important;
+    }
 }
 @media (max-width: 500px) {
   #event, #rules, #prizes, #team {
@@ -836,13 +846,6 @@ input[data-description="5"]:checked ~ #timeline-descriptions-wrapper div[data-de
   margin-bottom: 10px;
 }
 
-#prize-logo {
-  margin-top: 18px;
-  height: 50px;
-  border-radius: 50%;
-  border: 1px solid white;
-}
-
 #second-column {
   width: 100%;
   height: auto;
@@ -871,6 +874,10 @@ input[data-description="5"]:checked ~ #timeline-descriptions-wrapper div[data-de
   width: 100%;
   height: 90px;
   background-color: #333;
+  align-items: center;
+  text-align: center;
+  display: flex;
+  justify-content: center;
 }
 
 #third-podium {
@@ -879,6 +886,35 @@ input[data-description="5"]:checked ~ #timeline-descriptions-wrapper div[data-de
   background-color: #333;
 }
 
+.podium-edge {
+  width: 105%;
+  height: 10px;
+  background-color: #24282e;
+  border-radius: 4px;
+  z-index: 1;
+}
+
+#prize-logo {
+  height: 50px;
+  border-radius: 50%;
+  border: 1px solid rgb(119, 119, 119);
+}
+
+.podium-label {
+  position: relative;
+  font-size: 20px;
+}
+
+#podium-label-1 {
+  margin-right: 7px;
+  color: #ff914d;
+}
+
+#podium-label-2 {
+  margin-left: 7px;
+  color: #ffde59;
+}
+
 /* Utilities */
 #line-header {
     width: 200px;
diff --git a/index.html b/index.html
index 7c5debd..a191b7e 100644
--- a/index.html
+++ b/index.html
@@ -51,7 +51,7 @@
                 <li><a href="#event">Event</a></li>
                 <li><a href="#rules">Rules</a></li>
                 <li><a href="#prizes">Prizes</a></li>
-                <li><a href="#teams">Team</a></li>
+                <li><a href="#team">Team</a></li>
             </ul>
         </div>
     </nav>
@@ -346,6 +346,7 @@
                         <img class="prize-laurel" src="img/silver-laurel.png" loading="lazy" alt="silver laurel">
                         <div class="prize-title" id="pr-ti-2">2nd</div>
                         <div class="prize-content">A lot of money</div>
+                        <div class="podium-edge"></div>
                         <div id="second-podium"></div>
                     </div>
                 </article>
@@ -354,7 +355,12 @@
                         <img class="prize-laurel" src="img/gold-laurel.png" loading="lazy" alt="gold laurel">
                         <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" loading="lazy" alt="logo"></div>
+                        <div class="podium-edge"></div>
+                        <div id="first-podium">
+                            <p class="podium-label" id="podium-label-1">Gilroy</p>
+                            <img id="prize-logo" src="img/Gilroy Hacks Logo [icon-tp-podium].png" loading="lazy" alt="logo">
+                            <p class="podium-label" id="podium-label-2">Hacks</p>
+                        </div>
                     </div>
                 </article>
                 <article id="third-column">
@@ -362,14 +368,16 @@
                         <img class="prize-laurel" src="img/bronze-laurel.png" loading="lazy" alt="bronze laurel">
                         <div class="prize-title" id="pr-ti-3">3rd</div>
                         <div class="prize-content">A lot of money</div>
+                        <div class="podium-edge"></div>
                         <div id="third-podium"></div>
                     </div>
                 </article>
             </div>
         </section>
-        <section id="teams">
-            <h2 class="topic">Team</h2>
+        <section id="team">
+            <h2 class="topic">Hackathon Team</h2>
             <hr class="line">
+            
         </section>
     </main>
 <!--Footer-->