Fixed page bugs

This commit is contained in:
James Dinh 2022-07-23 22:29:47 -07:00
parent b2201c815b
commit 4468e14a8c
4 changed files with 88 additions and 10 deletions

View File

@ -94,11 +94,13 @@
<img id="logo" src="img/Gilroy Hacks Logo [Summer].png" height="100" width="100" alt="logo"/>
<div class="vertical-line"></div>
<div id="header-info">
<h2 id="header-subtitle-date">Aug 12 - 14</h2>
<div id="spots-container">
<div class="blob green" aria-hidden="true"></div>
<h2 id="header-subtitle-spots">21 spots remaining</h2>
</div>
<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>
<a class="link tooltip header-link" id="spots-tooltip" target="_blank" href="https://forms.gle/coK7q43RwBV2f15i7">
<div id="spots-container">
<div class="blob green" aria-hidden="true"></div>
<h2 id="header-subtitle-spots">21 spots remaining</h2>
</div>
</a>
</div>
</div>
</div>

View File

@ -387,6 +387,37 @@ nav ul li {
animation: slidein ease 1.5s;
}
.header-link {
background: unset !important;
color: white !important;
}
#header-tooltip::after {
content: '← Add to Calendar';
top: 8px;
right: -100px;
transform-origin: left;
color: rgb(252, 188, 93);
}
#spots-tooltip::after {
content: '← Signups Available!';
top: 8px;
right: -165px;
transform-origin: left;
color: rgb(252, 188, 93);
}
@media (max-width: 700px) {
#header-tooltip::after, #spots-tooltip::after {
display: none;
}
}
.header-icon {
margin-right: 6px;
}
#spots-container {
display: flex;
border-radius: 10px;
@ -621,6 +652,12 @@ option {
margin: 10px auto;
}
.new-tab-icon {
fill: white;
height: 10px;
margin-left: 5px;
}
#footer-line {
width: 100px;
margin: 10px auto;

View File

@ -383,6 +383,37 @@ nav ul li {
animation: slidein ease 1.5s;
}
.header-link {
background: unset !important;
color: white !important;
}
#header-tooltip::after {
content: '← Add to Calendar';
top: 8px;
right: -100px;
transform-origin: left;
color: rgb(252, 188, 93);
}
#spots-tooltip::after {
content: '← Signups Available!';
top: 8px;
right: -165px;
transform-origin: left;
color: rgb(252, 188, 93);
}
@media (max-width: 700px) {
#header-tooltip::after, #spots-tooltip::after {
display: none;
}
}
.header-icon {
margin-right: 6px;
}
#spots-container {
display: flex;
border-radius: 10px;
@ -543,6 +574,12 @@ section {
margin: 10px auto;
}
.new-tab-icon {
fill: white;
height: 10px;
margin-left: 5px;
}
#footer-line {
width: 100px;
margin: 10px auto;

View File

@ -92,11 +92,13 @@
<img id="logo" src="img/Gilroy Hacks Logo [Summer].png" height="100" width="100" alt="logo"/>
<div class="vertical-line"></div>
<div id="header-info">
<h2 id="header-subtitle-date">Aug 12 - 14</h2>
<div id="spots-container">
<div class="blob green" aria-hidden="true"></div>
<h2 id="header-subtitle-spots">21 spots remaining</h2>
</div>
<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>
<a class="link tooltip header-link" id="spots-tooltip" target="_blank" href="https://forms.gle/coK7q43RwBV2f15i7">
<div id="spots-container">
<div class="blob green" aria-hidden="true"></div>
<h2 id="header-subtitle-spots">21 spots remaining</h2>
</div>
</a>
</div>
</div>
</div>