Added animation

css/general.css

@@ -202,16 +202,6 @@ nav li a:focus::after{
   }
 }
 
-#spots-container {
-    display: flex;
-    place-items: center;
-    border-radius: 10px;
-    margin-top: 5px;
-    padding: 0 7px;
-    border: 1px solid rgb(73, 73, 73);
-    background-color: rgb(22, 22, 22);
-}
-
 .blob {
     background: black;
     border-radius: 50%;
@@ -274,11 +264,22 @@ nav li a:focus::after{
     border-radius: 10px;
     border: 1px solid rgb(73, 73, 73);
     background-color: rgb(22, 22, 22);
+    animation: slidein ease 1.5s;
+}
+
+#spots-container {
+  display: flex;
+  place-items: center;
+  border-radius: 10px;
+  margin-top: 5px;
+  padding: 0 7px;
+  border: 1px solid rgb(73, 73, 73);
+  background-color: rgb(22, 22, 22);
+  animation: slidein-2 ease 3s;
 }
 
 #header-subtitle-spots {
     padding: 5px;
-    
 }
 
 #entrance-arrow {
@@ -310,6 +311,42 @@ nav li a:focus::after{
 #logo {
     min-height: 300px;
     min-width: 300px;
+    animation: fadeInAnimation ease 3s;
+    animation-iteration-count: 1;
+    animation-fill-mode: forwards;
+}
+
+@keyframes fadeInAnimation {
+  0% {
+      opacity: 0;
+  }
+  100% {
+      opacity: 1;
+   }
+}
+@keyframes slidein {
+  0% {
+    transform: translateY(250px);
+    opacity: 0;
+  }
+  60% {
+    opacity: 0;
+  }
+  100% {
+    transform: translateY(0px);
+  }
+}
+@keyframes slidein-2 {
+  0% {
+    transform: translateY(1000px);
+    opacity: 0;
+  }
+  80% {
+    opacity: 0;
+  }
+  100% {
+    transform: translateY(0px);
+  }
 }
 
 /* Main Section */
@@ -836,7 +873,7 @@ input[data-description="5"]:checked ~ #timeline-descriptions-wrapper div[data-de
 }
 
 .prize-desc:hover {
-  transform: scale(1.05);
+  transform: rotate3d(0, 1, 0, 360deg);
   transition: 0.5s;
 }
 
@@ -850,22 +887,10 @@ input[data-description="5"]:checked ~ #timeline-descriptions-wrapper div[data-de
   position: absolute;
   color: rgb(77, 218, 211);
   font-size: 25px;
-}
-
-#pr-ti-2 {
-  margin-bottom: 40px;
-}
-
-#pr-ti-1 {
-  margin-bottom: 40px;
-}
-
-#pr-ti-3 {
   margin-bottom: 40px;
 }
 
 .prize-content {
-  /* margin-bottom: 10px; */
   color:rgb(129, 218, 126);
   font-size: 20px;
 }
@@ -938,6 +963,12 @@ input[data-description="5"]:checked ~ #timeline-descriptions-wrapper div[data-de
   margin-left: 7px;
   color: #ffde59;
 }
+/* 
+#first-podium:hover > .podium-label, #first-podium:hover > #prize-logo {
+  transform: scale(1.1);
+  margin: 5px;
+  transition: 0.5s;
+} */
 
 #team-container {
   width: 100%;

index.html

@@ -347,7 +347,7 @@
                     <div class="podium-description">
                         <div class="prize-desc">
                             <img class="prize-laurel" src="img/silver-laurel.png" loading="lazy" alt="silver laurel">
-                            <div class="prize-title" id="pr-ti-2">2nd<br><div class="prize-content">$300</div></div>
+                            <div class="prize-title">2nd<br><div class="prize-content">$300</div></div>
                         </div>
                         <div class="podium-edge"></div>
                         <div id="second-podium"></div>
@@ -357,7 +357,7 @@
                     <div class="podium-description">
                         <div class="prize-desc">
                             <img class="prize-laurel" src="img/gold-laurel.png" loading="lazy" alt="gold laurel">
-                            <div class="prize-title" id="pr-ti-1">1st<br><div class="prize-content">$400</div></div>
+                            <div class="prize-title">1st<br><div class="prize-content">$400</div></div>
                         </div>
                         <div class="podium-edge"></div>
                         <div id="first-podium">
@@ -371,7 +371,7 @@
                     <div class="podium-description">
                         <div class="prize-desc">
                             <img class="prize-laurel" src="img/bronze-laurel.png" loading="lazy" alt="bronze laurel">
-                            <div class="prize-title" id="pr-ti-3">3rd<br><div class="prize-content">$200</div></div>
+                            <div class="prize-title">3rd<br><div class="prize-content">$200</div></div>
                         </div>
                         <div class="podium-edge"></div>
                         <div id="third-podium"></div>
@@ -437,7 +437,7 @@
                     <div class="team-entry">
                         <div class="team-picture"><img src="img/Gilroy Hacks Logo [icon-tp-podium].png" loading="lazy" alt="profile picture"></div>
                         <div class="team-description">
-                            <h4 class="person-name">Mark</h4>
+                            <h4 class="person-name">Mark Chen</h4>
                             <h5 class="person-subtitle">Tech Support</h5>
                             <h5 class="person-contact"><span class="discord-text">Discord</span>: No Game no life<span class="discord-tag">#4534</span></h5>
                         </div>