Added "add to cal" function on header

This commit is contained in:
James Dinh 2022-07-23 22:19:23 -07:00
parent f06d1abed9
commit b2201c815b
2 changed files with 34 additions and 3 deletions

View File

@ -424,6 +424,37 @@ nav ul li {
animation: slidein ease 1.5s; animation: slidein ease 1.5s;
} }
.header-link {
background: unset !important;
color: white !important;
}
#header-tooltip::after {
content: '← Add to Calendar';
top: 12px;
right: -160px;
transform-origin: left;
color: rgb(252, 188, 93);
}
#spots-tooltip::after {
content: '← Signups Available!';
top: 12px;
right: -170px;
transform-origin: left;
color: rgb(252, 188, 93);
}
@media (max-width: 610px) {
#header-tooltip::after, #spots-tooltip::after {
display: none;
}
}
.header-icon {
margin-right: 6px;
}
#spots-container { #spots-container {
display: flex; display: flex;
place-items: center; place-items: center;

View File

@ -99,11 +99,11 @@
<div id="header"> <div id="header">
<img id="logo" src="img/Gilroy Hacks Logo [Summer].png" height="400" width="400" alt="logo"/> <img id="logo" src="img/Gilroy Hacks Logo [Summer].png" height="400" width="400" alt="logo"/>
<hr id="line-header"> <hr id="line-header">
<h2 id="header-subtitle-date">Aug 12 - 14</h2> <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>
<div id="spots-container"> <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> <div class="blob green" aria-hidden="true"></div>
<h2 id="header-subtitle-spots">21 spots remaining</h2> <h2 id="header-subtitle-spots">21 spots remaining</h2>
</div> </div></a>
<div id="entrance-arrow"> <div id="entrance-arrow">
<a href="#event" id="arrow-link"> <a href="#event" id="arrow-link">
Event Event