Updated header
This commit is contained in:
parent
cb2435a35b
commit
41767ab833
@ -280,6 +280,7 @@ nav * {
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex-flow: row wrap;
|
flex-flow: row wrap;
|
||||||
max-width: 420px;
|
max-width: 420px;
|
||||||
|
padding: 0 10px;
|
||||||
min-width: none;
|
min-width: none;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
@ -674,7 +675,7 @@ nav * {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#header-subtitle-date {
|
.header-subtitle {
|
||||||
padding: 5px 7px;
|
padding: 5px 7px;
|
||||||
margin-top: 5px;
|
margin-top: 5px;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
@ -683,7 +684,23 @@ nav * {
|
|||||||
place-items: center;
|
place-items: center;
|
||||||
border: 1px solid rgb(73, 73, 73);
|
border: 1px solid rgb(73, 73, 73);
|
||||||
background-color: rgb(22, 22, 22);
|
background-color: rgb(22, 22, 22);
|
||||||
animation: slidein ease 1.5s;
|
}
|
||||||
|
|
||||||
|
.header-subtitle.donate {
|
||||||
|
background: rgb(98,0,255);
|
||||||
|
background: linear-gradient(90deg, rgba(98,0,255,1) 0%, rgba(199,82,35,1) 75%, rgba(209,117,47,1) 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-link.left {
|
||||||
|
animation: slideinleft ease 1.5s;
|
||||||
|
animation-delay: calc(var(--i));
|
||||||
|
animation-fill-mode: both;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-link.right {
|
||||||
|
animation: slideinright ease 1.5s;
|
||||||
|
animation-delay: calc(var(--i));
|
||||||
|
animation-fill-mode: both;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header-link {
|
.header-link {
|
||||||
@ -700,14 +717,30 @@ nav * {
|
|||||||
color: rgb(252, 188, 93);
|
color: rgb(252, 188, 93);
|
||||||
}
|
}
|
||||||
|
|
||||||
#spots-tooltip::after {
|
#map-tooltip::after {
|
||||||
content: '← Sign up here';
|
content: '← Open map';
|
||||||
top: 12px;
|
top: 12px;
|
||||||
right: -150px;
|
right: -120px;
|
||||||
transform-origin: left;
|
transform-origin: left;
|
||||||
color: rgb(252, 188, 93);
|
color: rgb(252, 188, 93);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#donate-tooltip::after {
|
||||||
|
content: '← Donate Page 💝';
|
||||||
|
top: 12px;
|
||||||
|
right: -160px;
|
||||||
|
transform-origin: left;
|
||||||
|
color: rgb(252, 188, 93);
|
||||||
|
}
|
||||||
|
|
||||||
|
#spots-tooltip::after {
|
||||||
|
content: 'Sign up here →';
|
||||||
|
top: 12px;
|
||||||
|
right: 205px;
|
||||||
|
transform-origin: right;
|
||||||
|
color: rgb(252, 188, 93);
|
||||||
|
}
|
||||||
|
|
||||||
.header-info-container {
|
.header-info-container {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-flow: column nowrap;
|
flex-flow: column nowrap;
|
||||||
@ -734,14 +767,16 @@ nav * {
|
|||||||
width: fit-content;
|
width: fit-content;
|
||||||
border: 1px solid rgb(73, 73, 73);
|
border: 1px solid rgb(73, 73, 73);
|
||||||
background-color: rgb(22, 22, 22);
|
background-color: rgb(22, 22, 22);
|
||||||
animation: slidein-2 ease 3s;
|
animation: slideinleft ease 1.5s;
|
||||||
|
background: rgb(20,48,10);
|
||||||
|
background: linear-gradient(90deg, rgba(20,48,10,1) 0%, rgba(43,52,44,1) 100%);
|
||||||
}
|
}
|
||||||
|
|
||||||
#header-subtitle-spots {
|
#header-subtitle-spots {
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#spots-container:hover, #header-subtitle-date:hover {
|
#spots-container:hover, .header-subtitle:hover {
|
||||||
transform: translateY(-2px);
|
transform: translateY(-2px);
|
||||||
transition: 0.5s;
|
transition: 0.5s;
|
||||||
}
|
}
|
||||||
@ -792,32 +827,48 @@ nav * {
|
|||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@keyframes slidein {
|
@keyframes slideinleft {
|
||||||
0% {
|
0% {
|
||||||
transform: translateY(250px);
|
transform: translateX(-20px);
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
60% {
|
60% {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
|
transform: translateX(-20px);
|
||||||
}
|
}
|
||||||
100% {
|
100% {
|
||||||
transform: translateY(0px);
|
transform: translateX(0px);
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@keyframes slidein-2 {
|
@keyframes slideinright {
|
||||||
0% {
|
0% {
|
||||||
transform: translateY(1000px);
|
transform: translateX(20px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
60% {
|
||||||
|
transform: translateX(20px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: translateX(0px);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/* @keyframes slidein-2 {
|
||||||
|
0% {
|
||||||
|
transform: translateY(20px);
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
80% {
|
80% {
|
||||||
|
transform: translateY(20px);
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
100% {
|
100% {
|
||||||
transform: translateY(0px);
|
transform: translateY(0px);
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
}
|
} */
|
||||||
@keyframes slidein-side {
|
@keyframes slidein-side {
|
||||||
0% {
|
0% {
|
||||||
transform: translateX(-100px);
|
transform: translateX(-100px);
|
||||||
@ -2618,7 +2669,7 @@ li .splide__pagination__page.is-active {
|
|||||||
/* Utilities */
|
/* Utilities */
|
||||||
#line-header {
|
#line-header {
|
||||||
width: 200px;
|
width: 200px;
|
||||||
margin: 0 auto 5px;
|
margin: 10px 0;
|
||||||
animation: grow-wide ease 2s;
|
animation: grow-wide ease 2s;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -2689,6 +2740,11 @@ li .splide__pagination__page.is-active {
|
|||||||
margin-left: 5px;
|
margin-left: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.new-tab-icon.sub-icon {
|
||||||
|
height: 15px;
|
||||||
|
margin-left: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
.discord-icon {
|
.discord-icon {
|
||||||
width: 16px;
|
width: 16px;
|
||||||
height: 16px;
|
height: 16px;
|
||||||
|
BIN
img/WolframHackathonLogo2023.png
Normal file
BIN
img/WolframHackathonLogo2023.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 63 KiB |
20
index.html
20
index.html
@ -121,13 +121,16 @@
|
|||||||
</div>
|
</div>
|
||||||
<hr id="line-header">
|
<hr id="line-header">
|
||||||
<div class="header-info">
|
<div class="header-info">
|
||||||
<a class="link tooltip header-link" id="header-tooltip" target="_blank" href="https://calendar.google.com/calendar/render?action=TEMPLATE&dates=20230415T170000Z%2F20230417T000000Z&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> Apr 15 - 16</h2></a>
|
<a class="link tooltip header-link left" id="header-tooltip" style="--i:0.1s" target="_blank" href="https://calendar.google.com/calendar/render?action=TEMPLATE&dates=20230415T170000Z%2F20230417T000000Z&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 class="header-subtitle" 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> Apr 15 - 16</h2></a>
|
||||||
<a class="link tooltip header-link" target="_blank" href="https://goo.gl/maps/sAwTRMW3zRkZphV77"><h2 id="header-subtitle-date"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s-8-4.5-8-11.8A8 8 0 0 1 12 2a8 8 0 0 1 8 8.2c0 7.3-8 11.8-8 11.8z"/><circle cx="12" cy="10" r="3"/></svg> Gavilan College</h2></a>
|
<a class="link tooltip header-link right" id="map-tooltip" style="--i:0.3s" target="_blank" href="https://goo.gl/maps/sAwTRMW3zRkZphV77"><h2 class="header-subtitle" id="header-subtitle-location"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s-8-4.5-8-11.8A8 8 0 0 1 12 2a8 8 0 0 1 8 8.2c0 7.3-8 11.8-8 11.8z"/><circle cx="12" cy="10" r="3"/></svg> Gavilan College</h2></a>
|
||||||
|
<a class="tooltip header-link left" id="spots-tooltip" style="--i:0.5s" href="https://forms.gle/DGhhtikk5j72E59G8" target="_blank">
|
||||||
|
<div id="spots-container">
|
||||||
|
<div class="blob green" aria-hidden="true"></div>
|
||||||
|
<h2 id="header-subtitle-spots">Signup Form<svg class="new-tab-icon sub-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M384 320c-17.67 0-32 14.33-32 32v96H64V160h96c17.67 0 32-14.32 32-32s-14.33-32-32-32L64 96c-35.35 0-64 28.65-64 64V448c0 35.34 28.65 64 64 64h288c35.35 0 64-28.66 64-64v-96C416 334.3 401.7 320 384 320zM488 0H352c-12.94 0-24.62 7.797-29.56 19.75c-4.969 11.97-2.219 25.72 6.938 34.88L370.8 96L169.4 297.4c-12.5 12.5-12.5 32.75 0 45.25C175.6 348.9 183.8 352 192 352s16.38-3.125 22.62-9.375L416 141.3l41.38 41.38c9.156 9.141 22.88 11.84 34.88 6.938C504.2 184.6 512 172.9 512 160V24C512 10.74 501.3 0 488 0z"/></svg></h2>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a class="link tooltip header-link right" id="donate-tooltip" style="--i:0.7s" target="_blank" href="https://goo.gl/maps/sAwTRMW3zRkZphV77"><h2 class="header-subtitle donate"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg> Donate<svg class="new-tab-icon sub-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M384 320c-17.67 0-32 14.33-32 32v96H64V160h96c17.67 0 32-14.32 32-32s-14.33-32-32-32L64 96c-35.35 0-64 28.65-64 64V448c0 35.34 28.65 64 64 64h288c35.35 0 64-28.66 64-64v-96C416 334.3 401.7 320 384 320zM488 0H352c-12.94 0-24.62 7.797-29.56 19.75c-4.969 11.97-2.219 25.72 6.938 34.88L370.8 96L169.4 297.4c-12.5 12.5-12.5 32.75 0 45.25C175.6 348.9 183.8 352 192 352s16.38-3.125 22.62-9.375L416 141.3l41.38 41.38c9.156 9.141 22.88 11.84 34.88 6.938C504.2 184.6 512 172.9 512 160V24C512 10.74 501.3 0 488 0z"/></svg></h2></a>
|
||||||
</div>
|
</div>
|
||||||
<a class="tooltip header-link" id="spots-tooltip" href="https://forms.gle/DGhhtikk5j72E59G8" target="_blank"><div id="spots-container">
|
|
||||||
<div class="blob green" aria-hidden="true"></div>
|
|
||||||
<h2 id="header-subtitle-spots">Signups are open!</h2>
|
|
||||||
</div></a>
|
|
||||||
<div id="entrance-arrow">
|
<div id="entrance-arrow">
|
||||||
<a href="#event" id="arrow-link">
|
<a href="#event" id="arrow-link">
|
||||||
Scroll
|
Scroll
|
||||||
@ -271,6 +274,9 @@
|
|||||||
<a href="https://artofproblemsolving.com/" target="_blank">
|
<a href="https://artofproblemsolving.com/" target="_blank">
|
||||||
<img src="img/AOPS_logo" loading="lazy" alt="AOPS logo">
|
<img src="img/AOPS_logo" loading="lazy" alt="AOPS logo">
|
||||||
</a>
|
</a>
|
||||||
|
<a href="https://www.wolfram.com/language/" target="_blank">
|
||||||
|
<img src="img/WolframHackathonLogo2023.png" loading="lazy" alt="Wolfram Alpha logo">
|
||||||
|
</a>
|
||||||
<a href="https://taskade.com/" target="_blank">
|
<a href="https://taskade.com/" target="_blank">
|
||||||
<img src="img/taskade_logo" loading="lazy" alt="taskade logo">
|
<img src="img/taskade_logo" loading="lazy" alt="taskade logo">
|
||||||
</a>
|
</a>
|
||||||
@ -853,4 +859,4 @@
|
|||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
</body>
|
</body>
|
||||||
</html
|
<
|
Loading…
Reference in New Issue
Block a user