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

Added Comments

Browse Source
This commit is contained in:
James Dinh 2022-06-12 13:51:47 -07:00
parent 226746d2de
commit 79e9268439
6 changed files with 79 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
css/general.css
View File

@ -1,7 +1,10 @@
/* /*
Gilroy Hacks Website Source Code -> CSS (https://gilroyhacks.com) Gilroy Hacks Website Source Code -> CSS (https://gilroyhacks.com)
Web-Designed by James Dinh ᓚᘏᗢ from scratch using pure HTML, CSS, and JS
For more info, contact jamesdinh77 (at) protonmail (dot) com For more info, contact jamesdinh77 (at) protonmail (dot) com
Copyright Disclaimer: This Source Code is Copyright (c) 2022 Gilroy Hacks All Rights Reserved.
*/ */
html { html {
@ -16,7 +19,7 @@ html {
} }
nav { nav {
height: auto; height: 59px;
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
top: 0; top: 0;
@ -141,6 +144,56 @@ nav li a:focus::after{
transition: 0.5s; transition: 0.5s;
} }
#banner-text {
height: 100%;
width: 70%;
margin: auto;
font-size: 20px;
display: inline-flex;
position: absolute;
justify-content: center;
align-items: center;
}
#banner-moving-text {
animation: headline 20s infinite;
}
.sub-text {
color: gray;
}
@keyframes blinking {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes headline {
0% {
transform: translateX(10vw);
opacity: 0;
}
15% {
opacity: 1;
}
50% {
opacity: 1;;
transform: translateX(-20vw);
}
60% {
opacity: 0;
}
100% {
opacity: 0;
transform: translateX(-20vw);
}
}
/* .notification { /* .notification {
position: absolute; position: absolute;
text-align: center; text-align: center;
@ -343,6 +396,11 @@ nav li a:focus::after{
padding: 5px; padding: 5px;
} }
#spots-container:hover, #header-subtitle-date:hover {
transform: translateY(-2px);
transition: 0.5s;
}
#entrance-arrow { #entrance-arrow {
width: 50px; width: 50px;
height: 50px; height: 50px;
@ -830,6 +888,7 @@ section {
@media (max-width: 630px) { @media (max-width: 630px) {
.flex-parent { .flex-parent {
justify-content: initial; justify-content: initial;
margin-top: 0;
} }
.input-flex-container { .input-flex-container {
@ -847,10 +906,6 @@ section {
margin: 0 10px 50px; margin: 0 10px 50px;
} }
input {
background-color: transparent !important;
z-index: 1;
}
.timeline-input::before, .timeline-input::after { .timeline-input::before, .timeline-input::after {
content: none; content: none;
} }

15
index.html
View File

@ -1,9 +1,12 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<!-- <!--
Official Gilroy Hacks Website Source Code -> HTML (https://gilroyhacks.com) Gilroy Hacks Website Source Code -> HTML (https://gilroyhacks.com)
Web-Designed by James Dinh ᓚᘏᗢ from scratch using pure HTML, CSS, and JS
For more info, contact jamesdinh77 (at) protonmail (dot) com For more info, contact jamesdinh77 (at) protonmail (dot) com
Copyright Disclaimer: This Source Code is Copyright (c) 2022 Gilroy Hacks All Rights Reserved.
--> -->
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
@ -43,6 +46,7 @@
<a id="nav-logo-a" href="./"> <a id="nav-logo-a" href="./">
<img id="nav-logo" src="img/Gilroy Hacks Logo [Summer-wide-2].png" alt="logo"/> <img id="nav-logo" src="img/Gilroy Hacks Logo [Summer-wide-2].png" alt="logo"/>
</a> </a>
<!-- <div id="banner-text"><p id="banner-moving-text">Next Event -> Opening Ceremony, <span class="sub-text">2mo</span></p></div> -->
<div id="nav-links-container"> <div id="nav-links-container">
<input type="checkbox" id="check"> <input type="checkbox" id="check">
<label for="check" class="checkbtn"> <label for="check" class="checkbtn">
@ -56,7 +60,6 @@
<li><a onclick="uncheck('check')" href="#team">Team</a></li> <li><a onclick="uncheck('check')" href="#team">Team</a></li>
</ul> </ul>
</div> </div>
<!-- <div id="notification">hi</div> -->
</nav> </nav>
<!--Front Page--> <!--Front Page-->
<header> <header>
@ -127,7 +130,7 @@
</div> </div>
<input id="t5" class="timeline-input" type="radio" name="timeline-dot" data-description="5"> <input id="t5" class="timeline-input" type="radio" name="timeline-dot" data-description="5">
<div onclick="check('t5')" class="dot-info" data-description="5"> <div onclick="check('t5')" class="dot-info" data-description="5">
<span class="year">8/14 3:30pm</span> <span class="year">8/14 4:00pm</span>
<span class="label">Awards Ceremony</span> <span class="label">Awards Ceremony</span>
</div> </div>
<div id="timeline-right-arrow"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18l6-6-6-6"/></svg></div> <div id="timeline-right-arrow"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18l6-6-6-6"/></svg></div>
@ -202,10 +205,10 @@
<div class="right"></div> <div class="right"></div>
</div> </div>
<h3>Awards Ceremony</h3> <h3>Awards Ceremony</h3>
<h4 class="timeline-description-subtitle">8/14 | 3:30pm - 4:00pm</h4><br> <h4 class="timeline-description-subtitle">8/14 | 4:00pm - 4:30pm</h4><br>
<p class="timeline-description">Congratuations! Judge scores are tallied and here's where we announce the 1st, 2nd, and 3rd place teams along with positive feedback for each.<br> <p class="timeline-description">Congratuations! Judge scores are tallied and here's where we announce the 1st, 2nd, and 3rd place teams along with constructive feedback for each in the <u>Community Room</u>.<br>
<ul class="timeline-description-list"> <ul class="timeline-description-list">
<li>Winners: we will contact you via Email about your prizes; allow up to 2 days for a response</li> <li><u>Winners</u>: we will contact you via Email about your prizes; allow up to 2 days for a response</li>
<li>For Questions, ask in the Discord server (#ask-questions), or contact tech support at <a class="link" target="_blank" href="mailto:tech@gilroyhacks.com" title="Email">tech@gilroyhacks.com</a></li> <li>For Questions, ask in the Discord server (#ask-questions), or contact tech support at <a class="link" target="_blank" href="mailto:tech@gilroyhacks.com" title="Email">tech@gilroyhacks.com</a></li>
</ul> </ul>
</p> </p>

2
js/data_checkbox.js
View File

@ -1,3 +1,5 @@
// Gilroy Hacks Website Source Code -> JS (https://gilroyhacks.com)
var i; var i;
var checkboxes = document.querySelectorAll('#signup-container input[type=checkbox]'); var checkboxes = document.querySelectorAll('#signup-container input[type=checkbox]');
var verify = true; var verify = true;

11
js/map.js
View File

@ -1,3 +1,5 @@
// Gilroy Hacks Website Source Code -> JS (https://gilroyhacks.com)
var map = L.map('map').setView([37.00508, -121.57268], 18); var map = L.map('map').setView([37.00508, -121.57268], 18);
var myIcon = L.icon({ var myIcon = L.icon({
@ -13,12 +15,3 @@ let marker = L.marker([37.00529, -121.572764], {icon: myIcon}).addTo(map)
L.popup().setLatLng([37.00529, -121.572697]).setContent('<h3 style="text-align: center">Gilroy Library</h3><br>350 W 6th St, Gilroy, CA 95020') L.popup().setLatLng([37.00529, -121.572697]).setContent('<h3 style="text-align: center">Gilroy Library</h3><br>350 W 6th St, Gilroy, CA 95020')
.openOn(map); .openOn(map);
// var circle = L.circle([37.00508, -121.57268], {
// color: 'blue',
// fillColor: '#6393c4d2',
// fillOpacity: 0.5,
// radius: 50
// }).addTo(map)
// .bindPopup('<h3 style="text-align: center">Gilroy Library</h3><br>350 W 6th St, Gilroy, CA 95020')
// .openPopup();

2
js/scroll_element.js
View File

@ -1,3 +1,5 @@
// Gilroy Hacks Website Source Code -> JS (https://gilroyhacks.com)
// Creating an observer when the user views that element // Creating an observer when the user views that element
const observer = new IntersectionObserver(entries => { const observer = new IntersectionObserver(entries => {
// Loop over the entries // Loop over the entries

1
js/scroll_nav.js
View File

@ -1,3 +1,4 @@
// Gilroy Hacks Website Source Code -> JS (https://gilroyhacks.com)
// Toggle the .pa-fixed-header class when the user // Toggle the .pa-fixed-header class when the user
// scroll 100px // scroll 100px