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; width: 10px;
height: 10px; height: 10px;
background: white; background: white;
border-radius: 999px; border-radius: 50%;
left: -28px; left: -28px;
border: 2px solid rgb(155, 144, 144); border: 2px solid rgb(155, 144, 144);
} }
@ -822,6 +822,24 @@ input[data-description="5"]:checked ~ #timeline-descriptions-wrapper div[data-de
position: relative; 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 { .prize-laurel {
height: 150px; height: 150px;
width: auto; width: auto;
@ -830,24 +848,26 @@ input[data-description="5"]:checked ~ #timeline-descriptions-wrapper div[data-de
.prize-title { .prize-title {
position: absolute; position: absolute;
color: rgb(203, 218, 77); color: rgb(77, 218, 211);
font-size: 25px; font-size: 25px;
} }
#pr-ti-2 { #pr-ti-2 {
margin-bottom: 110px; margin-bottom: 40px;
} }
#pr-ti-1 { #pr-ti-1 {
margin-bottom: 160px; margin-bottom: 40px;
} }
#pr-ti-3 { #pr-ti-3 {
margin-bottom: 100px; margin-bottom: 40px;
} }
.prize-content { .prize-content {
margin-bottom: 10px; /* margin-bottom: 10px; */
color:rgb(129, 218, 126);
font-size: 20px;
} }
#second-column { #second-column {

21
index.html
View File

@ -345,18 +345,20 @@
<div id="prizes-container"> <div id="prizes-container">
<article id="second-column"> <article id="second-column">
<div class="podium-description"> <div class="podium-description">
<img class="prize-laurel" src="img/silver-laurel.png" loading="lazy" alt="silver laurel"> <div class="prize-desc">
<div class="prize-title" id="pr-ti-2">2nd</div> <img class="prize-laurel" src="img/silver-laurel.png" loading="lazy" alt="silver laurel">
<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 class="podium-edge"></div>
<div id="second-podium"></div> <div id="second-podium"></div>
</div> </div>
</article> </article>
<article id="first-column"> <article id="first-column">
<div class="podium-description"> <div class="podium-description">
<img class="prize-laurel" src="img/gold-laurel.png" loading="lazy" alt="gold laurel"> <div class="prize-desc">
<div class="prize-title" id="pr-ti-1">1st</div> <img class="prize-laurel" src="img/gold-laurel.png" loading="lazy" alt="gold laurel">
<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 class="podium-edge"></div>
<div id="first-podium"> <div id="first-podium">
<p class="podium-label" id="podium-label-1">Gilroy</p> <p class="podium-label" id="podium-label-1">Gilroy</p>
@ -367,9 +369,10 @@
</article> </article>
<article id="third-column"> <article id="third-column">
<div class="podium-description"> <div class="podium-description">
<img class="prize-laurel" src="img/bronze-laurel.png" loading="lazy" alt="bronze laurel"> <div class="prize-desc">
<div class="prize-title" id="pr-ti-3">3rd</div> <img class="prize-laurel" src="img/bronze-laurel.png" loading="lazy" alt="bronze laurel">
<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 class="podium-edge"></div>
<div id="third-podium"></div> <div id="third-podium"></div>
</div> </div>