Changed Footer Styles
This commit is contained in:
James Dinh
parent
dc0bb0889a
commit
79cce86d46
179
contact.html
Normal file
179
contact.html
Normal file
@ -0,0 +1,179 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<!--
|
||||||
|
Gilroy Hacks Website Source Code -> HTML (https://gilroyhacks.com)
|
||||||
|
File: licenses.html
|
||||||
|
|
||||||
|
Web-Designed by James Dinh ᓚᘏᗢ from scratch using pure HTML, CSS, and JS
|
||||||
|
For more info, contact jamesdinh77 (at) protonmail (dot) com
|
||||||
|
|
||||||
|
Copyright Disclaimer: This Source Code is Copyright (c) 2022 Gilroy Hacks All Rights Reserved.
|
||||||
|
-->
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
|
||||||
|
<title>Gilroy Hacks · Contact</title>
|
||||||
|
<link href="css/contact.css" rel="stylesheet" type="text/css" media="all">
|
||||||
|
<link href="css/scroll_nav.css" rel="stylesheet" type="text/css" media="all">
|
||||||
|
<link rel="icon" href="img/Gilroy-Hacks-Logo-icon-tp.ico">
|
||||||
|
|
||||||
|
<style>
|
||||||
|
@font-face {
|
||||||
|
font-family: "Glacial Indifference";
|
||||||
|
src: url("font/GlacialIndifference-Regular.otf") format('opentype');
|
||||||
|
font-display: swap;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
position: relative;
|
||||||
|
background-color: #0d1117 !important;
|
||||||
|
background-image: "";
|
||||||
|
color: #f2f1ef !important;
|
||||||
|
font-family: "Glacial Indifference";
|
||||||
|
}
|
||||||
|
/* width */
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
width: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Track */
|
||||||
|
::-webkit-scrollbar-track {
|
||||||
|
box-shadow: inset 0 0 2px grey;
|
||||||
|
background-color: rgb(12, 14, 26);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Handle */
|
||||||
|
::-webkit-scrollbar-thumb {
|
||||||
|
background: rgb(38, 45, 75);
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Handle on hover */
|
||||||
|
::-webkit-scrollbar-thumb:hover {
|
||||||
|
background: rgb(31, 36, 61);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<!--For icons, go here: https://iconsvg.xyz/ -->
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<!--Nav-->
|
||||||
|
<nav id="navBar">
|
||||||
|
<a id="nav-logo-a" href="./">
|
||||||
|
<img id="nav-logo" src="img/Gilroy Hacks Logo [Summer-wide-2].png" alt="logo"/>
|
||||||
|
</a>
|
||||||
|
<div id="banner">
|
||||||
|
<p id="banner-text"><a class="navlink" id="timer-link" href="index.html#timeline">Opening Ceremony</a> in
|
||||||
|
<abbr class="tooltip-nav" title="Aug 12, 4pm"><span id="timer"></span></abbr>
|
||||||
|
<!-- <span id="nav-tooltip" data-text="Aug 12, 4pm"></span> -->
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div id="nav-links-container">
|
||||||
|
<input onclick="btnToggle()" type="checkbox" id="check">
|
||||||
|
<label for="check" class="checkbtn">
|
||||||
|
<img src="img/bars.png" loading="lazy" height="17" width="25" alt="Bars"/>
|
||||||
|
</label>
|
||||||
|
<a target="_blank" href="https://forms.gle/coK7q43RwBV2f15i7"><div id="sign-up">SIGN UP</div></a>
|
||||||
|
<ul id="navList">
|
||||||
|
<li><a class="navlink" href="index.html#event">Event</a></li>
|
||||||
|
<li><a class="navlink" href="index.html#rules">Rules</a></li>
|
||||||
|
<li><a class="navlink" href="index.html#prizes">Prizes</a></li>
|
||||||
|
<li><a class="navlink" href="index.html#team">Team</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
<header>
|
||||||
|
<div id="header-background">
|
||||||
|
<div id="header-gradient">
|
||||||
|
<div id="header">
|
||||||
|
<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">32 spots remaining</h2>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<main>
|
||||||
|
<section>
|
||||||
|
<h2 class="topic">Contact Form</h2>
|
||||||
|
<hr class="line">
|
||||||
|
<!-- Src: https://codepen.io/nikhil8krishnan/pen/gaybLK -->
|
||||||
|
<form action="" class="contact-form">
|
||||||
|
<div class="form-single-line">
|
||||||
|
<div class="input-block">
|
||||||
|
<label for="">Name</label>
|
||||||
|
<input type="text" class="form-control">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-single-line">
|
||||||
|
<div class="input-block">
|
||||||
|
<label for="">Email</label>
|
||||||
|
<input type="text" class="form-control">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-single-line">
|
||||||
|
<div class="input-block">
|
||||||
|
<label for="">Subject</label>
|
||||||
|
<input type="text" class="form-control">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-sm-12">
|
||||||
|
<div class="input-block textarea">
|
||||||
|
<label for="">Drop your message here</label>
|
||||||
|
<textarea rows="3" type="text" class="form-control"></textarea>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-sm-12">
|
||||||
|
<button class="square-button">Send</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
<!--Footer-->
|
||||||
|
<footer>
|
||||||
|
<div id="footer-container">
|
||||||
|
<article id="footer-desc">
|
||||||
|
<img id="footer-logo" src="img/Gilroy Hacks Logo [Summer-wide-2].png" alt="logo"/>
|
||||||
|
<p>
|
||||||
|
Gilroy Hacks is a student-led organization focused on promoting community engagement and improving STEM exposure for local high school students.
|
||||||
|
</p>
|
||||||
|
<div id="socials">
|
||||||
|
<div><a target="_blank" href="https://www.facebook.com/profile.php?id=100082498013066" title="Facebook"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#ffffff"><path d="M12 0c6.627 0 12 5.373 12 12s-5.373 12-12 12S0 18.627 0 12 5.373 0 12 0zm4 7.278V4.5h-2.286c-2.1 0-3.428 1.6-3.428 3.889v1.667H8v2.777h2.286V19.5h2.857v-6.667h2.286L16 10.056h-2.857V8.944c0-1.11.572-1.666 1.714-1.666H16z"/></svg></a></div>
|
||||||
|
<div class="socials-icon"><a target="_blank" href="https://www.instagram.com/gilroyhacks/" title="Instagram"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#ffffff"><path d="M12 0c6.6274 0 12 5.3726 12 12s-5.3726 12-12 12S0 18.6274 0 12 5.3726 0 12 0zm3.115 4.5h-6.23c-2.5536 0-4.281 1.6524-4.3805 4.1552L4.5 8.8851v6.1996c0 1.3004.4234 2.4193 1.2702 3.2359.7582.73 1.751 1.1212 2.8818 1.1734l.2633.006h6.1694c1.3004 0 2.389-.4234 3.1754-1.1794.762-.734 1.1817-1.7576 1.2343-2.948l.0056-.2577V8.8851c0-1.2702-.4234-2.3589-1.2097-3.1452-.7338-.762-1.7575-1.1817-2.9234-1.2343l-.252-.0056zM8.9152 5.8911h6.2299c.9072 0 1.6633.2722 2.2076.8166.4713.499.7647 1.1758.8103 1.9607l.0063.2167v6.2298c0 .9375-.3327 1.6936-.877 2.2077-.499.4713-1.176.7392-1.984.7806l-.2237.0057H8.9153c-.9072 0-1.6633-.2722-2.2076-.7863-.499-.499-.7693-1.1759-.8109-2.0073l-.0057-.2306V8.885c0-.9073.2722-1.6633.8166-2.2077.4712-.4713 1.1712-.7392 1.9834-.7806l.2242-.0057h6.2299-6.2299zM12 8.0988c-2.117 0-3.871 1.7238-3.871 3.871A3.8591 3.8591 0 0 0 12 15.8408c2.1472 0 3.871-1.7541 3.871-3.871 0-2.117-1.754-3.871-3.871-3.871zm0 1.3911c1.3609 0 2.4798 1.119 2.4798 2.4799 0 1.3608-1.119 2.4798-2.4798 2.4798-1.3609 0-2.4798-1.119-2.4798-2.4798 0-1.361 1.119-2.4799 2.4798-2.4799zm4.0222-2.3589a.877.877 0 1 0 0 1.754.877.877 0 0 0 0-1.754z"/></svg></a></div>
|
||||||
|
</div>
|
||||||
|
<hr id="footer-line">
|
||||||
|
<p id="footer-copyright">
|
||||||
|
© 2022 Gilroy Hacks. All Rights Reserved
|
||||||
|
</p>
|
||||||
|
</article>
|
||||||
|
<article id="footer-links">
|
||||||
|
<h3>Links</h3><br>
|
||||||
|
<ul>
|
||||||
|
<li><a class="link" target="_blank" href="https://discord.gg/nkTDKMcYbr" title="Discord Invite Link">Discord</a></li>
|
||||||
|
<li><a class="link" target="_blank" href="https://forms.gle/coK7q43RwBV2f15i7">Signup Form</a></li>
|
||||||
|
<li><a class="link" target="_blank" href="https://sccl.bibliocommons.com/events/62acbe100685eb4200c37c48" title="Gilroy Library Event">Library Event Entry</a></li>
|
||||||
|
<li><a class="link" href="licenses.html" title="Licenses">Licenses</a></li>
|
||||||
|
<li><a class="link" target="_blank" href="mailto:tech@gilroyhacks.com" title="Email">Email Us</a></li>
|
||||||
|
</ul>
|
||||||
|
</article>
|
||||||
|
<article id="footer-links">
|
||||||
|
<h3>Location</h3><br>
|
||||||
|
<ul>
|
||||||
|
<li>Gilroy Library<br>350 W 6th St, Gilroy, CA 95020</li>
|
||||||
|
</ul>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
<!-- JavaScript Refs -->
|
||||||
|
<script src="js/scroll_nav.js"></script>
|
||||||
|
<script src="js/scroll_element.js"></script>
|
||||||
|
<script src="js/timer.js"></script>
|
||||||
|
<script src="js/form.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
643
css/contact.css
Normal file
643
css/contact.css
Normal file
@ -0,0 +1,643 @@
|
|||||||
|
/*
|
||||||
|
Gilroy Hacks Website Source Code -> CSS (https://gilroyhacks.com)
|
||||||
|
File: contact.css
|
||||||
|
|
||||||
|
Web-Designed by James Dinh ᓚᘏᗢ from scratch using pure HTML, CSS, and JS
|
||||||
|
For more info, contact jamesdinh77 (at) protonmail (dot) com
|
||||||
|
|
||||||
|
Copyright Disclaimer: This Source Code is Copyright (c) 2022 Gilroy Hacks All Rights Reserved.
|
||||||
|
*/
|
||||||
|
|
||||||
|
html {
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Nav */
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav {
|
||||||
|
height: 59px;
|
||||||
|
width: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
position: fixed;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
z-index: 100;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav * {
|
||||||
|
padding: 0;
|
||||||
|
margin: 0px 5px;
|
||||||
|
list-style: none;
|
||||||
|
box-sizing: border-box;
|
||||||
|
z-index: 100;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#nav-logo {
|
||||||
|
margin-top: 5px;
|
||||||
|
height: 50px;
|
||||||
|
width: 258px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#nav-logo:hover {
|
||||||
|
transform: scale(1.03);
|
||||||
|
transition: 0.5s;
|
||||||
|
}
|
||||||
|
|
||||||
|
#nav-logo-div {
|
||||||
|
height: 50px;
|
||||||
|
width: 258px;
|
||||||
|
margin: none;
|
||||||
|
display: inline block;
|
||||||
|
position: fixed;
|
||||||
|
}
|
||||||
|
|
||||||
|
#nav-logo-a {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav ul {
|
||||||
|
float: right;
|
||||||
|
margin-right: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav ul li {
|
||||||
|
display: inline-block;
|
||||||
|
line-height: 30px;
|
||||||
|
margin: 10px 7px;
|
||||||
|
padding: 3px 5px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navlink {
|
||||||
|
color:rgb(233, 203, 104);
|
||||||
|
font-size: 18px;
|
||||||
|
text-decoration: none;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navlink.active,a:hover {
|
||||||
|
color: rgba(233, 203, 104, 0.774);
|
||||||
|
transition: .5s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navlink::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 0.1em;
|
||||||
|
background-color: hotpink;
|
||||||
|
opacity: 1;
|
||||||
|
transition: opacity 300ms, transform 300ms;
|
||||||
|
transform: scale(0);
|
||||||
|
transform-origin: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navlink:hover::after,
|
||||||
|
.navlink:focus::after{
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkbtn {
|
||||||
|
font-size: 23px;
|
||||||
|
color: white;
|
||||||
|
float: right;
|
||||||
|
line-height: 59px;
|
||||||
|
margin-right: 20px;
|
||||||
|
cursor: pointer;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#check {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#nav-links-container {
|
||||||
|
display: flex;
|
||||||
|
width: auto;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
height: 59px;
|
||||||
|
float: right;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
flex-direction: row-reverse;
|
||||||
|
align-content: stretch;
|
||||||
|
}
|
||||||
|
|
||||||
|
#sign-up {
|
||||||
|
padding: 6px 7px;
|
||||||
|
margin: 14px 15px 14px 4px;
|
||||||
|
|
||||||
|
border-radius: 5px;
|
||||||
|
font-size: 16px;
|
||||||
|
background-color: rgb(140, 42, 165);
|
||||||
|
color: bisque;
|
||||||
|
display: flex;
|
||||||
|
place-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#sign-up:hover {
|
||||||
|
transform: scale(1.05);
|
||||||
|
background-color: blueviolet;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: 0.5s;
|
||||||
|
}
|
||||||
|
|
||||||
|
#banner {
|
||||||
|
width: 70%;
|
||||||
|
position: absolute;
|
||||||
|
justify-content: center;
|
||||||
|
display: inline-flex;
|
||||||
|
top: 16px;
|
||||||
|
font-size: 20px;
|
||||||
|
margin: auto;
|
||||||
|
min-width: 310px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#banner-text {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#timer {
|
||||||
|
color: rgb(184, 184, 184);
|
||||||
|
animation: blinking 3s infinite;
|
||||||
|
background-color: rgb(57, 57, 57);
|
||||||
|
border-radius: 5px;
|
||||||
|
padding: 2px 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tooltip-nav {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#timer-link {
|
||||||
|
color:rgb(252, 188, 93);
|
||||||
|
text-decoration: none;
|
||||||
|
cursor: pointer;
|
||||||
|
background: unset;
|
||||||
|
}
|
||||||
|
|
||||||
|
.link:hover {
|
||||||
|
color:rgba(252, 188, 93, 0.719);
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes blinking {
|
||||||
|
0% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes dropdown{
|
||||||
|
0% {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(-30px);
|
||||||
|
}
|
||||||
|
20% {
|
||||||
|
transform: translateY(0px);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
40% {
|
||||||
|
transform: translateY(-7px);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: translateY(0px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Responsive Functions */
|
||||||
|
@media (max-width: 1400px) {
|
||||||
|
#banner {
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (max-width: 1150px) {
|
||||||
|
#banner {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (max-width: 800px) {
|
||||||
|
.checkbtn {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
nav ul {
|
||||||
|
position: fixed;
|
||||||
|
width: 100%;
|
||||||
|
height: 250px;
|
||||||
|
margin-top: 58px;
|
||||||
|
margin-right: 0;
|
||||||
|
background: rgb(24, 24, 24);
|
||||||
|
visibility: hidden;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
nav ul li {
|
||||||
|
display: block;
|
||||||
|
margin: 20px 0;
|
||||||
|
line-height: 30px;
|
||||||
|
}
|
||||||
|
#check:checked ~ul {
|
||||||
|
visibility: visible;
|
||||||
|
animation: dropdown 0.5s ease;
|
||||||
|
}
|
||||||
|
.checkbtn {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
#header-background {
|
||||||
|
background-position: unset !important;
|
||||||
|
background-size: unset !important;
|
||||||
|
}
|
||||||
|
#banner {
|
||||||
|
display: inline-flex;
|
||||||
|
width: 310px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (max-width: 750px) {
|
||||||
|
#banner {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (max-width: 500px) {
|
||||||
|
section {
|
||||||
|
padding-top: 0 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (max-width: 470px) {
|
||||||
|
#nav-logo {
|
||||||
|
content: url(/img/Gilroy-Hacks-Logo-icon-tp.ico);
|
||||||
|
height: 50px;
|
||||||
|
width: 50px;
|
||||||
|
}
|
||||||
|
#logo {
|
||||||
|
height: 300px;
|
||||||
|
width: 300px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.blob {
|
||||||
|
background: black;
|
||||||
|
border-radius: 50%;
|
||||||
|
box-shadow: 0 0 0 0 rgba(0, 0, 0, 1);
|
||||||
|
margin: 10px 4px;
|
||||||
|
height: 10px;
|
||||||
|
width: 10px;
|
||||||
|
transform: scale(1);
|
||||||
|
animation: pulse-black 2s infinite;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blob.green {
|
||||||
|
background: rgba(51, 217, 178, 1);
|
||||||
|
box-shadow: 0 0 0 0 rgba(51, 217, 178, 1);
|
||||||
|
animation: pulse-green 2s infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes pulse-green {
|
||||||
|
0% {
|
||||||
|
transform: scale(0.95);
|
||||||
|
box-shadow: 0 0 0 0 rgba(51, 217, 178, 0.7);
|
||||||
|
}
|
||||||
|
70% {
|
||||||
|
transform: scale(1);
|
||||||
|
box-shadow: 0 0 0 10px rgba(51, 217, 178, 0);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: scale(0.95);
|
||||||
|
box-shadow: 0 0 0 0 rgba(51, 217, 178, 0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Header */
|
||||||
|
#header-background {
|
||||||
|
background-image: url(/img/mountains-1.jpg);
|
||||||
|
background-position: center;
|
||||||
|
background-size: cover;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-attachment: fixed;
|
||||||
|
height: 20%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#header {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
padding: 70px 0 50px;
|
||||||
|
display: flex;
|
||||||
|
flex-flow: row nowrap;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
text-align: center;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
#logo {
|
||||||
|
height: 100px;
|
||||||
|
width: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#header-info {
|
||||||
|
display: flex;
|
||||||
|
flex-flow: column nowrap;
|
||||||
|
align-items: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
#header-subtitle-date {
|
||||||
|
font-size: 18px;
|
||||||
|
padding: 5px 7px;
|
||||||
|
width: fit-content;
|
||||||
|
margin-top: 5px;
|
||||||
|
border-radius: 10px;
|
||||||
|
display: flex;
|
||||||
|
border: 1px solid rgb(73, 73, 73);
|
||||||
|
background-color: rgb(22, 22, 22);
|
||||||
|
animation: slidein ease 1.5s;
|
||||||
|
}
|
||||||
|
|
||||||
|
#spots-container {
|
||||||
|
display: flex;
|
||||||
|
border-radius: 10px;
|
||||||
|
margin-top: 5px;
|
||||||
|
padding: 0 7px;
|
||||||
|
border: 1px solid rgb(73, 73, 73);
|
||||||
|
background-color: rgb(22, 22, 22);
|
||||||
|
animation: slidein-2 ease 3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
#header-subtitle-spots {
|
||||||
|
font-size: 18px;
|
||||||
|
padding: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#spots-container:hover, #header-subtitle-date:hover {
|
||||||
|
transform: translateY(-2px);
|
||||||
|
transition: 0.5s;
|
||||||
|
}
|
||||||
|
|
||||||
|
#header-gradient {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-image: linear-gradient(#0d111733 50%, #0d11175e 60%, #0d1117 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes bounce {
|
||||||
|
0%, 20%, 50%, 80%, 100% {
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
40% {
|
||||||
|
transform: translateY(-5px);
|
||||||
|
}
|
||||||
|
60% {
|
||||||
|
transform: translateY(-3px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Main Section */
|
||||||
|
main {
|
||||||
|
width: 100%;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
text-align: center;
|
||||||
|
position: relative;
|
||||||
|
margin: auto;
|
||||||
|
display: grid;
|
||||||
|
padding-bottom: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
section {
|
||||||
|
width: auto;
|
||||||
|
padding-top: 50px;
|
||||||
|
text-align: center;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
max-width: 1500px;
|
||||||
|
min-width: 200px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.topic {
|
||||||
|
width: auto;
|
||||||
|
font-size: 35px;
|
||||||
|
padding: 0 20px 0 20px;
|
||||||
|
color:rgb(255, 243, 205);
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-form {
|
||||||
|
margin-top: 30px;
|
||||||
|
}
|
||||||
|
.contact-form .input-block {
|
||||||
|
background-color: rgba(255, 255, 255, 0.8);
|
||||||
|
border: solid 1px #003f88;
|
||||||
|
width: 100%;
|
||||||
|
height: 60px;
|
||||||
|
padding: 25px;
|
||||||
|
position: relative;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
transition: all 0.3s ease-out;
|
||||||
|
}
|
||||||
|
.contact-form .input-block.focus {
|
||||||
|
background-color: #fff;
|
||||||
|
border: solid 1px #00236e;
|
||||||
|
}
|
||||||
|
.contact-form .input-block.textarea {
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
.contact-form .input-block.textarea .form-control {
|
||||||
|
height: auto;
|
||||||
|
resize: none;
|
||||||
|
}
|
||||||
|
.contact-form .input-block label {
|
||||||
|
position: absolute;
|
||||||
|
left: 25px;
|
||||||
|
top: 25px;
|
||||||
|
display: block;
|
||||||
|
margin: 0;
|
||||||
|
font-weight: 300;
|
||||||
|
z-index: 1;
|
||||||
|
color: #333;
|
||||||
|
font-size: 18px;
|
||||||
|
line-height: 10px;
|
||||||
|
}
|
||||||
|
.contact-form .input-block .form-control {
|
||||||
|
background-color: transparent;
|
||||||
|
padding: 0;
|
||||||
|
border: none;
|
||||||
|
border-radius: 0;
|
||||||
|
box-shadow: none;
|
||||||
|
height: auto;
|
||||||
|
position: relative;
|
||||||
|
z-index: 2;
|
||||||
|
font-size: 18px;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
.contact-form .input-block .form-control:focus label {
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
.contact-form .square-button {
|
||||||
|
background-color: rgba(255, 255, 255, 0.8);
|
||||||
|
color: #006dac;
|
||||||
|
font-size: 26px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-weight: 700;
|
||||||
|
text-align: center;
|
||||||
|
border-radius: 2px;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
padding: 0 60px;
|
||||||
|
height: 60px;
|
||||||
|
border: none;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.contact-form .square-button:hover, .contact-form .square-button:focus {
|
||||||
|
background-color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.contact-wrap {
|
||||||
|
width: 60%;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Utilities */
|
||||||
|
.vertical-line {
|
||||||
|
width: 2px;
|
||||||
|
margin: 0 10px;
|
||||||
|
background-color: rgb(255, 255, 255);
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes grow-wide {
|
||||||
|
0% {
|
||||||
|
transform: scale(0);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: scale(1);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.tooltip {
|
||||||
|
text-decoration: underline dotted;
|
||||||
|
cursor: help;
|
||||||
|
}
|
||||||
|
|
||||||
|
.emphasis-text {
|
||||||
|
color:rgb(51, 235, 189);
|
||||||
|
}
|
||||||
|
|
||||||
|
.discord-text {
|
||||||
|
color: rgb(110, 112, 247);
|
||||||
|
}
|
||||||
|
|
||||||
|
.discord-tag {
|
||||||
|
color: rgb(150, 150, 150);
|
||||||
|
}
|
||||||
|
|
||||||
|
.line {
|
||||||
|
width: 100px;
|
||||||
|
margin: 10px auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
#footer-line {
|
||||||
|
width: 100px;
|
||||||
|
margin: 10px auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
#arrow-link {
|
||||||
|
color:rgb(252, 188, 93);
|
||||||
|
text-decoration: none;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.link {
|
||||||
|
color:rgb(252, 188, 93);
|
||||||
|
text-decoration: none;
|
||||||
|
cursor: pointer;
|
||||||
|
background:
|
||||||
|
linear-gradient(to right, rgba(100, 200, 200, 1), rgba(100, 200, 200, 1)),
|
||||||
|
linear-gradient(to right, rgba(255, 0, 0, 1), rgba(255, 0, 180, 1), rgba(0, 100, 200, 1));
|
||||||
|
background-size: 100% 0.1em, 0 0.1em;
|
||||||
|
background-position: 100% 100%, 0 100%;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
transition: background-size 400ms;
|
||||||
|
}
|
||||||
|
|
||||||
|
.link:hover {
|
||||||
|
color:rgba(252, 188, 93, 0.719);
|
||||||
|
background-size: 0 0.1em, 100% 0.1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
width: auto;
|
||||||
|
height: auto;
|
||||||
|
background-color: rgb(24, 24, 24);
|
||||||
|
justify-content: center;
|
||||||
|
align-items: left;
|
||||||
|
text-align: center;
|
||||||
|
padding: 20px;
|
||||||
|
flex-flow: row wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
#footer-container {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: center;
|
||||||
|
align-content: stretch;
|
||||||
|
}
|
||||||
|
|
||||||
|
#footer-logo {
|
||||||
|
height: 45px;
|
||||||
|
width: 232px;
|
||||||
|
margin-left: -5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#footer-desc {
|
||||||
|
width: 350px;
|
||||||
|
text-align: left;
|
||||||
|
line-height: 25px;
|
||||||
|
font-size: 18px;
|
||||||
|
padding-right: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#socials {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.socials-icon {
|
||||||
|
margin: 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#footer-copyright {
|
||||||
|
color: rgb(129, 129, 129);
|
||||||
|
}
|
||||||
|
|
||||||
|
#footer-line {
|
||||||
|
width: 100%;
|
||||||
|
margin: 10px auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
#footer-links {
|
||||||
|
width: 200px;
|
||||||
|
margin-top: 7px;
|
||||||
|
padding-right: 20px;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer li {
|
||||||
|
line-height: 30px;
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
@ -1447,6 +1447,7 @@ section {
|
|||||||
height: 100%;
|
height: 100%;
|
||||||
border: 1px solid white;
|
border: 1px solid white;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
min-width: 375px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#map {
|
#map {
|
||||||
@ -1927,6 +1928,7 @@ footer {
|
|||||||
text-align: left;
|
text-align: left;
|
||||||
line-height: 25px;
|
line-height: 25px;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
|
margin-right: 40px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#socials {
|
#socials {
|
||||||
@ -1953,7 +1955,7 @@ footer {
|
|||||||
#footer-links {
|
#footer-links {
|
||||||
width: 200px;
|
width: 200px;
|
||||||
margin-top: 7px;
|
margin-top: 7px;
|
||||||
padding-left: 40px;
|
margin-right: 20px;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -255,16 +255,6 @@ nav ul li {
|
|||||||
.checkbtn {
|
.checkbtn {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
#prize-logo, .podium-label {
|
|
||||||
transform: scale(0.9);
|
|
||||||
font-size: 16px !important;
|
|
||||||
}
|
|
||||||
#podium-label-1 {
|
|
||||||
margin-right: 1px !important;
|
|
||||||
}
|
|
||||||
#podium-label-2 {
|
|
||||||
margin-left: 1px !important;
|
|
||||||
}
|
|
||||||
#header-background {
|
#header-background {
|
||||||
background-position: unset !important;
|
background-position: unset !important;
|
||||||
background-size: unset !important;
|
background-size: unset !important;
|
||||||
@ -280,9 +270,6 @@ nav ul li {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
@media (max-width: 500px) {
|
@media (max-width: 500px) {
|
||||||
#event, #rules, #prizes, #team {
|
|
||||||
transform: scale(0.9);
|
|
||||||
}
|
|
||||||
section {
|
section {
|
||||||
padding-top: 0 !important;
|
padding-top: 0 !important;
|
||||||
}
|
}
|
||||||
@ -293,35 +280,6 @@ nav ul li {
|
|||||||
height: 50px;
|
height: 50px;
|
||||||
width: 50px;
|
width: 50px;
|
||||||
}
|
}
|
||||||
#logo {
|
|
||||||
height: 300px;
|
|
||||||
width: 300px;
|
|
||||||
}
|
|
||||||
#prizes-container {
|
|
||||||
transform: scale(0.9);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media (max-height: 550px) {
|
|
||||||
#logo {
|
|
||||||
transform: scale(0.8);
|
|
||||||
}
|
|
||||||
#header-subtitle-date {
|
|
||||||
transform: translateY(-30px);
|
|
||||||
}
|
|
||||||
#spots-container {
|
|
||||||
transform: translateY(-30px);
|
|
||||||
}
|
|
||||||
#line-header {
|
|
||||||
transform: translateY(-30px);
|
|
||||||
}
|
|
||||||
#entrance-arrow {
|
|
||||||
visibility: hidden;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media (max-height: 400px) {
|
|
||||||
#header {
|
|
||||||
transform: scale(0.7);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.blob {
|
.blob {
|
||||||
@ -534,12 +492,6 @@ section {
|
|||||||
margin: 10px auto;
|
margin: 10px auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
#arrow-link {
|
|
||||||
color:rgb(252, 188, 93);
|
|
||||||
text-decoration: none;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.link {
|
.link {
|
||||||
color:rgb(252, 188, 93);
|
color:rgb(252, 188, 93);
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
@ -588,6 +540,7 @@ footer {
|
|||||||
text-align: left;
|
text-align: left;
|
||||||
line-height: 25px;
|
line-height: 25px;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
|
padding-right: 40px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#socials {
|
#socials {
|
||||||
@ -614,7 +567,7 @@ footer {
|
|||||||
#footer-links {
|
#footer-links {
|
||||||
width: 200px;
|
width: 200px;
|
||||||
margin-top: 7px;
|
margin-top: 7px;
|
||||||
padding-left: 40px;
|
padding-right: 20px;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
14
index.html
14
index.html
@ -121,7 +121,7 @@
|
|||||||
<article id="event-description">
|
<article id="event-description">
|
||||||
<h2 id="description-heading">Our Mission Statement</h2>
|
<h2 id="description-heading">Our Mission Statement</h2>
|
||||||
<div id="event-main-box">
|
<div id="event-main-box">
|
||||||
<div id="description-content">Gilroy Hacks is a student-led organization focused on promoting community engagement and improving STEM exposure for local high school students.</div>
|
<div id="description-content">Gilroy Hacks is a student-led organization focused on promoting community engagement and improving STEM exposure for local middle/high school students.</div>
|
||||||
<hr class="line">
|
<hr class="line">
|
||||||
<ul class="list">
|
<ul class="list">
|
||||||
<li>Even if you're not an expert at coding, this hackathon offers an opportunity for you to strengthen your skills and collaborate with others to create something useful. Below are important dates to keep in mind:
|
<li>Even if you're not an expert at coding, this hackathon offers an opportunity for you to strengthen your skills and collaborate with others to create something useful. Below are important dates to keep in mind:
|
||||||
@ -193,7 +193,7 @@
|
|||||||
Now's your time to shine! Start working with your team to build your project. No strings attached!
|
Now's your time to shine! Start working with your team to build your project. No strings attached!
|
||||||
<ul class="timeline-description-list">
|
<ul class="timeline-description-list">
|
||||||
<li><span class="important-text">=IMPORTANT=</span> Your project must follow one of the given prompts and guidelines; otherwise, your team may lose a lot of points for unrelated topic deductions</li>
|
<li><span class="important-text">=IMPORTANT=</span> Your project must follow one of the given prompts and guidelines; otherwise, your team may lose a lot of points for unrelated topic deductions</li>
|
||||||
<li>Remember, you only have 44 hours to complete your project... Use your time wisely</li>
|
<li>Remember, you only have 46 hours to complete your project... Use your time wisely</li>
|
||||||
</ul>
|
</ul>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
@ -204,11 +204,11 @@
|
|||||||
</div>
|
</div>
|
||||||
<h3>Projects Due</h3>
|
<h3>Projects Due</h3>
|
||||||
<h4 class="timeline-description-subtitle">8/14 | 2:00pm</h4><br>
|
<h4 class="timeline-description-subtitle">8/14 | 2:00pm</h4><br>
|
||||||
<p class="timeline-description">STOP coding! Your 44 hours of intense stress and turmoil are finally up! We hope you learned some valuable skills and made some new friends along the way.<br>
|
<p class="timeline-description">STOP coding! Your 46 hours of intense stress and turmoil are finally up! We hope you learned some valuable skills and made some new friends along the way.<br>
|
||||||
<ul class="timeline-description-list">
|
<ul class="timeline-description-list">
|
||||||
<li><span class="important-text">=IMPORTANT=</span> Make sure you turn in your project BEFORE the deadline at 2:00pm. You can find the submission form on the Discord server or <a class="link" href="https://forms.gle/bpoXvyjP2TcsrELX8" target="_blank" title="Submission Form">Submit Here</a></li>
|
<li><span class="important-text">=IMPORTANT=</span> Make sure you turn in your project BEFORE the deadline at 2:00pm. You can find the submission form on the Discord server or <a class="link" href="https://forms.gle/bpoXvyjP2TcsrELX8" target="_blank" title="Submission Form">Submit Here</a></li>
|
||||||
<li>Don't leave yet though, because you still need to present your project to the judges</li>
|
<li>Don't leave yet though, because you still need to present your project to the judges</li>
|
||||||
<li>From now until Project Presentations (2:30pm), your team will have around 2 hours to prepare for your presentation. Get back to work!</li>
|
<li>From now until Project Presentations (2:30pm), your team will have around 30 mins to prepare for your presentation. Get back to work!</li>
|
||||||
</ul>
|
</ul>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
@ -224,7 +224,7 @@
|
|||||||
<li>Be Creative! Make your product stand out by including a demo or showing its function across multiple sources</li>
|
<li>Be Creative! Make your product stand out by including a demo or showing its function across multiple sources</li>
|
||||||
<li>Presentations will occur in order of team number (i.e. Team 1 will go first)</li>
|
<li>Presentations will occur in order of team number (i.e. Team 1 will go first)</li>
|
||||||
<li>It is advised you have your camera on and that you ensure your microphone and tech work before presenting</li>
|
<li>It is advised you have your camera on and that you ensure your microphone and tech work before presenting</li>
|
||||||
<li><span class="important-text">=IMPORTANT=</span> Your team's presentation is not allowed to go ABOVE 5 minutes... Use your time wisely.</li>
|
<li><span class="important-text">=IMPORTANT=</span> Your team's presentation is NOT ALLOWED to go above 5 minutes... Use your time wisely.</li>
|
||||||
<li>Your team will be graded on both the product and presentation as per the rubric</li>
|
<li>Your team will be graded on both the product and presentation as per the rubric</li>
|
||||||
</ul>
|
</ul>
|
||||||
</p>
|
</p>
|
||||||
@ -479,7 +479,7 @@
|
|||||||
<div class="rules-card" id="rules-2">
|
<div class="rules-card" id="rules-2">
|
||||||
<p class="rules-title">Do not plagiarize</p>
|
<p class="rules-title">Do not plagiarize</p>
|
||||||
<p>
|
<p>
|
||||||
- You are allowed to use existing libraries and packages with a valid license, but required to give credit when credit is due (which also includes Creative Commons and <abbr class="tooltip" title="Open-source software is computer software that is released under a license in which the copyright holder grants users the rights to use, study, change, and distribute the software and its source code to anyone and for any purpose">Open Source Projects</abbr>)
|
- You are allowed to use existing libraries and packages with a valid license but required to give credit when credit is due (which also includes Creative Commons and <abbr class="tooltip" title="Open-source software is computer software that is released under a license in which the copyright holder grants users the rights to use, study, change, and distribute the software and its source code to anyone and for any purpose">Open Source Projects</abbr>)
|
||||||
<br>
|
<br>
|
||||||
- You may also use old projects as frameworks for your product, but you cannot work on any material that is related to the hackathon before the event
|
- You may also use old projects as frameworks for your product, but you cannot work on any material that is related to the hackathon before the event
|
||||||
</p>
|
</p>
|
||||||
@ -718,7 +718,7 @@
|
|||||||
<article id="footer-desc">
|
<article id="footer-desc">
|
||||||
<img id="footer-logo" src="img/Gilroy Hacks Logo [Summer-wide-2].png" alt="logo"/>
|
<img id="footer-logo" src="img/Gilroy Hacks Logo [Summer-wide-2].png" alt="logo"/>
|
||||||
<p>
|
<p>
|
||||||
Gilroy Hacks is a student-led organization focused on promoting community engagement and improving STEM exposure for local high school students.
|
Gilroy Hacks is a student-led organization focused on promoting community engagement and improving STEM exposure for local middle/high school students.
|
||||||
</p>
|
</p>
|
||||||
<div id="socials">
|
<div id="socials">
|
||||||
<div><a target="_blank" href="https://www.facebook.com/profile.php?id=100082498013066" title="Facebook"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#ffffff"><path d="M12 0c6.627 0 12 5.373 12 12s-5.373 12-12 12S0 18.627 0 12 5.373 0 12 0zm4 7.278V4.5h-2.286c-2.1 0-3.428 1.6-3.428 3.889v1.667H8v2.777h2.286V19.5h2.857v-6.667h2.286L16 10.056h-2.857V8.944c0-1.11.572-1.666 1.714-1.666H16z"/></svg></a></div>
|
<div><a target="_blank" href="https://www.facebook.com/profile.php?id=100082498013066" title="Facebook"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#ffffff"><path d="M12 0c6.627 0 12 5.373 12 12s-5.373 12-12 12S0 18.627 0 12 5.373 0 12 0zm4 7.278V4.5h-2.286c-2.1 0-3.428 1.6-3.428 3.889v1.667H8v2.777h2.286V19.5h2.857v-6.667h2.286L16 10.056h-2.857V8.944c0-1.11.572-1.666 1.714-1.666H16z"/></svg></a></div>
|
||||||
|
|||||||
38
js/form.js
Normal file
38
js/form.js
Normal file
@ -0,0 +1,38 @@
|
|||||||
|
//material contact form animation
|
||||||
|
$(".contact-form")
|
||||||
|
.find(".form-control")
|
||||||
|
.each(function () {
|
||||||
|
var targetItem = $(this).parent();
|
||||||
|
if ($(this).val()) {
|
||||||
|
$(targetItem).find("label").css({
|
||||||
|
top: "10px",
|
||||||
|
fontSize: "14px"
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
$(".contact-form")
|
||||||
|
.find(".form-control")
|
||||||
|
.focus(function () {
|
||||||
|
$(this).parent(".input-block").addClass("focus");
|
||||||
|
$(this).parent().find("label").animate(
|
||||||
|
{
|
||||||
|
top: "10px",
|
||||||
|
fontSize: "14px"
|
||||||
|
},
|
||||||
|
300
|
||||||
|
);
|
||||||
|
});
|
||||||
|
$(".contact-form")
|
||||||
|
.find(".form-control")
|
||||||
|
.blur(function () {
|
||||||
|
if ($(this).val().length == 0) {
|
||||||
|
$(this).parent(".input-block").removeClass("focus");
|
||||||
|
$(this).parent().find("label").animate(
|
||||||
|
{
|
||||||
|
top: "25px",
|
||||||
|
fontSize: "18px"
|
||||||
|
},
|
||||||
|
300
|
||||||
|
);
|
||||||
|
}
|
||||||
|
});
|
||||||
@ -10,7 +10,7 @@ scrollNavbar = () => {
|
|||||||
const navBar = document.getElementById("navBar");
|
const navBar = document.getElementById("navBar");
|
||||||
const links = document.querySelectorAll("#navBar a");
|
const links = document.querySelectorAll("#navBar a");
|
||||||
|
|
||||||
if (document.documentElement.scrollTop > 100) {
|
if (document.documentElement.scrollTop > 50) {
|
||||||
navBar.classList.add("pa-fixed-header");
|
navBar.classList.add("pa-fixed-header");
|
||||||
|
|
||||||
// Change the color of links on scroll
|
// Change the color of links on scroll
|
||||||
|
|||||||
@ -18,15 +18,7 @@
|
|||||||
<link href="css/licenses.css" rel="stylesheet" type="text/css" media="all">
|
<link href="css/licenses.css" rel="stylesheet" type="text/css" media="all">
|
||||||
<link href="css/scroll_nav.css" rel="stylesheet" type="text/css" media="all">
|
<link href="css/scroll_nav.css" rel="stylesheet" type="text/css" media="all">
|
||||||
<link rel="icon" href="img/Gilroy-Hacks-Logo-icon-tp.ico">
|
<link rel="icon" href="img/Gilroy-Hacks-Logo-icon-tp.ico">
|
||||||
<link rel="apple-touch-icon" href="img/Gilroy Hacks Logo (app).png">
|
|
||||||
|
|
||||||
<meta name="author" content="Gilroy Hacks">
|
|
||||||
<meta name="copyright" content="This site and its pages are Copyright (c) 2022 Gilroy Hacks All Rights Reserved.">
|
|
||||||
<meta name="description" content="The official website for the Gilroy Hacks Hackathon. Strengthen your skills and collaborate with others to create something useful.">
|
|
||||||
<meta name="keywords" content="Gilroy Hacks, GilroyHacks, Gilroy, hackathon, Bay Area, GECA, Dr. TJ Owens Gilroy Early College Academy">
|
|
||||||
|
|
||||||
<script src="js/leaflet.js"></script>
|
|
||||||
<script defer data-domain="gilroyhacks.com" src="https://plausible.gilroyhacks.com/js/plausible.js"></script>
|
|
||||||
<style>
|
<style>
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: "Glacial Indifference";
|
font-family: "Glacial Indifference";
|
||||||
@ -40,6 +32,27 @@
|
|||||||
color: #f2f1ef !important;
|
color: #f2f1ef !important;
|
||||||
font-family: "Glacial Indifference";
|
font-family: "Glacial Indifference";
|
||||||
}
|
}
|
||||||
|
/* width */
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
width: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Track */
|
||||||
|
::-webkit-scrollbar-track {
|
||||||
|
box-shadow: inset 0 0 2px grey;
|
||||||
|
background-color: rgb(12, 14, 26);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Handle */
|
||||||
|
::-webkit-scrollbar-thumb {
|
||||||
|
background: rgb(38, 45, 75);
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Handle on hover */
|
||||||
|
::-webkit-scrollbar-thumb:hover {
|
||||||
|
background: rgb(31, 36, 61);
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
<!--For icons, go here: https://iconsvg.xyz/ -->
|
<!--For icons, go here: https://iconsvg.xyz/ -->
|
||||||
</head>
|
</head>
|
||||||
@ -220,6 +233,13 @@
|
|||||||
<li>Attribution: <a class="link" href="https://www.w3schools.com/howto/howto_js_countdown.asp">w3schools</a></li>
|
<li>Attribution: <a class="link" href="https://www.w3schools.com/howto/howto_js_countdown.asp">w3schools</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</article>
|
</article>
|
||||||
|
<article class="license-entry">
|
||||||
|
Custom Scroll Bar
|
||||||
|
<ul>
|
||||||
|
<li>License: Unknown</li>
|
||||||
|
<li>Attribution: <a class="link" href="https://www.w3schools.com/howto/howto_js_countdown.asp">w3schools</a></li>
|
||||||
|
</ul>
|
||||||
|
</article>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</main>
|
</main>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user