Added title animations

css/general.css

@@ -312,13 +312,13 @@ nav ul li {
   #podium-label-2 {
     margin-left: 1px !important;
   }
-  #header-background {
+  /* #header-background {
     background-position: unset !important;
     background-size: unset !important;
-  }
+  } */
   #logo {
-    height: 300px !important;
+    height: 230px !important;
-    width: 300px !important;
+    width: 230px !important;
   }
   #banner {
     display: inline-flex;
@@ -345,8 +345,8 @@ nav ul li {
       width: 50px;
   }
   #logo {
-      height: 300px;
+      height: 2300px;
-      width: 300px;
+      width: 230px;
   }
   #prizes-container {
     transform: scale(0.9);
@@ -452,13 +452,63 @@ nav ul li {
 }
 
 #logo {
-  height: 400px;
+  height: 230px;
-  width: 400px;
+  width: 230px;
   animation: fadeInAnimation ease 3s;
   animation-iteration-count: 1;
   animation-fill-mode: forwards;
 }
 
+.waviy {
+  position: relative;
+  display: flex;
+  font-size: 60px;
+}
+.waviy span {
+  font-family: "Norwester";
+  font-weight: lighter;
+  margin: 0 1.4px;
+  position: relative;
+  display: inline-block;
+  left: 0%;
+  animation: waviy 1s;
+  animation-delay: calc(var(--i));
+  animation-fill-mode:both;
+}
+
+.waviy span:hover {
+  padding-left: -20px;
+
+}
+
+#top-logo-text {
+  color: #7ed957;
+}
+
+#bottom-logo-text {
+  color: #008037;
+}
+
+@keyframes waviy {
+  0% {
+    transform: translateY(-100px);
+    opacity: 0;
+  }
+  10% {
+    opacity: 0;
+  }
+  30% {
+    transform: translateY(0px);
+    opacity: 1;
+  }
+  50% {
+    transform: translateY(-10px);
+  }
+  100% {
+    transform: translateY(0px);
+  }
+}
+
 #header-subtitle-date {
   padding: 5px;
   margin-top: 5px;

css/second.css

@@ -343,7 +343,7 @@ nav ul li {
 
 /* Header */
 #header-background {
-  background-image: url(/img/dojo.png);
+  background-image: url(/img/background.jpg);
   background-position: center;
   background-size: cover;
   background-repeat: no-repeat;

index.html

@@ -37,6 +37,11 @@
             src: url("font/GlacialIndifference-Regular.otf") format('opentype');
             font-display: swap;
         }
+        @font-face {
+            font-family: "Norwester";
+            src: url("font/Norwester.otf") format('opentype');
+            font-display: swap;
+        }
         body {
             position: relative;
             background-color: #0d1117;
@@ -98,7 +103,22 @@
             <div id="header-gradient">
                 <!-- <div id="winners">Congrats to the winners of the Gilroy Hacks 2022 Summer Hackathon: <span id="team-emphasis">Team 7 - Christian Nguyen, Connor Palsgrove</span></div> -->
                 <div id="header">
-                    <img id="logo" src="img/Gilroy_Hacks_Logo_Spring_tp.png" height="400" width="400" alt="logo"/>
+                    <img id="logo" src="img/icon.ico" alt="logo"/>
+                    <div class="waviy" id="top-logo-text">
+                        <span style="--i:0.1s">G</span>
+                        <span style="--i:0.2s">I</span>
+                        <span style="--i:0.3s">L</span>
+                        <span style="--i:0.4s">R</span>
+                        <span style="--i:0.5s">O</span>
+                        <span style="--i:0.6s">Y</span>
+                    </div>
+                    <div class="waviy" id="bottom-logo-text">
+                        <span style="--i:0.7s">H</span>
+                        <span style="--i:0.8s">A</span>
+                        <span style="--i:0.9s">C</span>
+                        <span style="--i:1.0s">K</span>
+                        <span style="--i:1.1s">S</span>
+                    </div>
                     <hr id="line-header">
                     <!-- <a class="link tooltip header-link" id="header-tooltip" target="_blank" href="https://calendar.google.com/calendar/render?action=TEMPLATE&dates=20220812T230000Z%2F20220814T233000Z&details=Participate%20in%20a%20weekend-long%20hackathon%20to%20strengthen%20your%20coding%20skills%20and%20earn%20some%20cool%20prizes%21&location=Gilroy%20Library&text=Gilroy%20Hacks%20Hackathon"><h2 id="header-subtitle-date"><svg class="header-icon" xmlns="http://www.w3.org/2000/svg" width="23" height="23" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>Aug 12 - 14</h2></a> -->
                     <h2 id="header-subtitle-date"><svg class="header-icon" xmlns="http://www.w3.org/2000/svg" width="23" height="23" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>Spring 2023</h2>
@@ -128,7 +148,7 @@
                         <div id="description-content">Gilroy Hacks is a student-led organization fiscally sponsored by Hack Club, a 501(c)(3) nonprofit, focused on promoting community engagement and improving STEM exposure for students.</div>
                         <hr class="line">
                         <div class="list">
-                            <p>"Think, Build, Present"<br>&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;- GHacks Team</p>
+                            <p>"Grab a team and make something cool."<br>&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;- GHacks Team</p>
                             <h3 class="desc-title">Main Events</h3>
                             <ul class="desc-list">
                                 <ul>
@@ -618,13 +638,13 @@
                                 <span class="prize-content">TBA</span>
                             </div>
                             <img class="prize-laurel" src="img/gold-laurel.png" loading="lazy" alt="gold laurel">
-                            <img class="prize-img" id="sling-img" loading="lazy">
+                            <img class="prize-img" id="drone-img" loading="lazy">
                             <div class="prize-subtitle">TBA</div>
                         </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">
+                            <img id="prize-logo" src="img/Gilroy_Hacks_Logo_icon_tp_podium_spring.png" loading="lazy" alt="logo">
                             <p class="podium-label" id="podium-label-2">Hacks</p>
                         </div>
                     </div>
@@ -637,7 +657,7 @@
                                 <span class="prize-content">TBA</span>
                             </div>
                             <img class="prize-laurel" src="img/bronze-laurel.png" loading="lazy" alt="bronze laurel">
-                            <img class="prize-img" id="speaker-img" loading="lazy">
+                            <img class="prize-img" id="drone-img" loading="lazy">
                             <div class="prize-subtitle">TBA</div>
                         </div>
                         <div class="podium-edge"></div>
@@ -723,7 +743,7 @@
                         </div>
                     </div>
                     <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-picture"><img src="img/Gilroy_Hacks_Logo_icon_tp_podium_spring.png" loading="lazy" alt="profile picture"></div>
                         <div class="team-description">
                             <h4 class="person-name">Jonathan Tessmann</h4>
                             <h5 class="person-subtitle">Sponsor Outreach</h5>