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

Changed Prizes

Browse Source
This commit is contained in:
James Dinh 2022-06-02 16:33:08 -07:00
parent 5615bf3dc1
commit 28840e0b3d
2 changed files with 38 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
css/general.css
View File

@ -705,7 +705,7 @@ input[data-description="5"]:checked ~ #timeline-descriptions-wrapper div[data-de
width: 10px;
height: 10px;
background: white;
border-radius: 999px;
border-radius: 50%;
left: -28px;
border: 2px solid rgb(155, 144, 144);
}
@ -822,6 +822,24 @@ input[data-description="5"]:checked ~ #timeline-descriptions-wrapper div[data-de
position: relative;
}
.prize-desc {
width: 100%;
height: auto;
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
text-align: center;
position: relative;
}
.prize-desc:hover {
transform: scale(1.05);
transition: 0.5s;
}
.prize-laurel {
height: 150px;
width: auto;
@ -830,24 +848,26 @@ input[data-description="5"]:checked ~ #timeline-descriptions-wrapper div[data-de
.prize-title {
position: absolute;
color: rgb(203, 218, 77);
color: rgb(77, 218, 211);
font-size: 25px;
}
#pr-ti-2 {
margin-bottom: 110px;
margin-bottom: 40px;
}
#pr-ti-1 {
margin-bottom: 160px;
margin-bottom: 40px;
}
#pr-ti-3 {
margin-bottom: 100px;
margin-bottom: 40px;
}
.prize-content {
margin-bottom: 10px;
/* margin-bottom: 10px; */
color:rgb(129, 218, 126);
font-size: 20px;
}
#second-column {

15
index.html
View File

@ -345,18 +345,20 @@
<div id="prizes-container">
<article id="second-column">
<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</div>
<div class="prize-content">A lot of money</div>
<div class="prize-title" id="pr-ti-2">2nd<br><div class="prize-content">$300</div></div>
</div>
<div class="podium-edge"></div>
<div id="second-podium"></div>
</div>
</article>
<article id="first-column">
<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</div>
<div class="prize-content">A lot of money</div>
<div class="prize-title" id="pr-ti-1">1st<br><div class="prize-content">$400</div></div>
</div>
<div class="podium-edge"></div>
<div id="first-podium">
<p class="podium-label" id="podium-label-1">Gilroy</p>
@ -367,9 +369,10 @@
</article>
<article id="third-column">
<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</div>
<div class="prize-content">A lot of money</div>
<div class="prize-title" id="pr-ti-3">3rd<br><div class="prize-content">$200</div></div>
</div>
<div class="podium-edge"></div>
<div id="third-podium"></div>
</div>