wellfedbison/gilroyhacks.com
wellfedbison/gilroyhacks.com
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Added animation

Browse Source
This commit is contained in:
James Dinh 2022-06-02 17:35:28 -07:00
parent 28840e0b3d
commit c556a38b1e
2 changed files with 59 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
css/general.css
View File

@ -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%;

8
index.html
View File

@ -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>