Added title animations
This commit is contained in:
James Dinh
parent
608ba03197
commit
13118267fd
BIN
css/.DS_Store
vendored
Normal file
BIN
css/.DS_Store
vendored
Normal file
Binary file not shown.
@ -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;
|
||||
width: 300px !important;
|
||||
height: 230px !important;
|
||||
width: 230px !important;
|
||||
}
|
||||
#banner {
|
||||
display: inline-flex;
|
||||
@ -345,8 +345,8 @@ nav ul li {
|
||||
width: 50px;
|
||||
}
|
||||
#logo {
|
||||
height: 300px;
|
||||
width: 300px;
|
||||
height: 2300px;
|
||||
width: 230px;
|
||||
}
|
||||
#prizes-container {
|
||||
transform: scale(0.9);
|
||||
@ -452,13 +452,63 @@ nav ul li {
|
||||
}
|
||||
|
||||
#logo {
|
||||
height: 400px;
|
||||
width: 400px;
|
||||
height: 230px;
|
||||
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;
|
||||
|
||||
@ -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;
|
||||
|
||||
BIN
font/Norwester.otf
Normal file
BIN
font/Norwester.otf
Normal file
Binary file not shown.
BIN
img/.DS_Store
vendored
Normal file
BIN
img/.DS_Store
vendored
Normal file
Binary file not shown.
32
index.html
32
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>        - GHacks Team</p>
|
||||
<p>"Grab a team and make something cool."<br>        - 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>
|
||||
|
||||
BIN
js/.DS_Store
vendored
Normal file
BIN
js/.DS_Store
vendored
Normal file
Binary file not shown.
Loading…
Reference in New Issue
Block a user