260 lines
16 KiB
HTML
260 lines
16 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<!--
|
|
Official Gilroy Hacks Website Source Code -> HTML (https://gilroyhacks.com)
|
|
|
|
For more info, contact jamesdinh77 (at) protonmail (dot) com
|
|
-->
|
|
<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</title>
|
|
<link href="css/general.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.ico">
|
|
<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 webiste 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">
|
|
|
|
<style>
|
|
@font-face {
|
|
font-family: "Glacial Indifference";
|
|
src: url("font/GlacialIndifference-Regular.otf") format('opentype');
|
|
font-display: swap;
|
|
}
|
|
body {
|
|
position: relative;
|
|
background-color: #141313 !important;
|
|
background-image: "";
|
|
color: #f2f1ef !important;
|
|
font-family: "Glacial Indifference";
|
|
}
|
|
</style>
|
|
<!--For icons, go here: https://iconsvg.xyz/ -->
|
|
</head>
|
|
<body></body>
|
|
<!--Nav-->
|
|
<nav id="navBar">
|
|
<a id="nav-logo-a" href="./">
|
|
<img id="nav-logo" src="img/Gilroy Hacks Logo [Summer-wide].png" loading="lazy" height="50" width="auto" alt="logo"/>
|
|
</a>
|
|
<div id="nav-links-container">
|
|
<input 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>
|
|
<li><a href="#event">Event</a></li>
|
|
<li><a href="#rules">Rules</a></li>
|
|
<li><a href="#prizes">Prizes</a></li>
|
|
<li><a href="#teams">Teams</a></li>
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
<!--Front Page-->
|
|
<header>
|
|
<div id="header-background">
|
|
<div id="header">
|
|
<img id="logo" src="img/Gilroy Hacks Logo [Summer].png" height="400" width="400" loading="lazy" alt="logo"/>
|
|
<hr id="line-header">
|
|
<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">40 spots left</h2>
|
|
</div>
|
|
<div id="entrance-arrow">
|
|
<a href="#event" id="arrow-link">
|
|
Event
|
|
<svg id="arrow" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<!--Main-->
|
|
<main>
|
|
<section id="event">
|
|
<h2 class="topic">Hackathon Event</h2>
|
|
<hr class="line">
|
|
<div id="event-container">
|
|
<article id="event-description">
|
|
<h2 id="description-heading">Description</h2>
|
|
<ul class="list">
|
|
<li>Even if you're not an expert at coding, this hackathon will offer an opportunity to strengthen your skills and collaborate with others to create something useful. Below are important dates to keep in mind:
|
|
<ul style="margin-left: 25px">
|
|
<li><span class="emphasis-text">Aug 11</span> -> Signup Period Ends</li>
|
|
<li><span class="emphasis-text">Aug 12-14</span> -> Summer 2022 Hackathon</li>
|
|
</ul>
|
|
</li>
|
|
<li>Our program is dedicated to providing the Gilroy/Morgan Hill/Hollister youth with the opportunity to develop their coding skills. We specialize in hackathons where students participate in teams and compete for prizes.</li>
|
|
</ul>
|
|
<!-- Timeline src: https://codepen.io/cjl750/pen/MXvYmg -->
|
|
<div id="timeline">
|
|
<h2 id="timeline-heading">Timeline</h2>
|
|
<div class="flex-parent">
|
|
<div class="input-flex-container">
|
|
<input type="radio" name="timeline-dot" data-description="1" checked>
|
|
<div class="dot-info" data-description="1">
|
|
<span class="year">8/12 6:00pm</span>
|
|
<span class="label">Opening Ceremony</span>
|
|
</div>
|
|
<input type="radio" name="timeline-dot" data-description="2">
|
|
<div class="dot-info" data-description="2">
|
|
<span class="year">8/12 6:30pm</span>
|
|
<span class="label">Hacking Begins</span>
|
|
</div>
|
|
<input type="radio" name="timeline-dot" data-description="3">
|
|
<div class="dot-info" data-description="3">
|
|
<span class="year">8/14 12:00pm</span>
|
|
<span class="label">Hacking Ends</span>
|
|
</div>
|
|
<input type="radio" name="timeline-dot" data-description="4">
|
|
<div class="dot-info" data-description="4">
|
|
<span class="year">8/14 2:00pm</span>
|
|
<span class="label">Project Presentations</span>
|
|
</div>
|
|
<input type="radio" name="timeline-dot" data-description="5">
|
|
<div class="dot-info" data-description="5">
|
|
<span class="year">8/14 3:30pm</span>
|
|
<span class="label">Awards Ceremony</span>
|
|
</div>
|
|
<div id="timeline-descriptions-wrapper">
|
|
<div data-description="1">
|
|
<h4>Opening Ceremony</h4>
|
|
<h5 class="timeline-description-subtitle">8/12 | 6:00pm - 6:30pm</h5><br>
|
|
<p class="timeline-description">The official start of the hackathon where we deliver the opening presentation along with the final teams, prompts, rules, and timeline.<br>
|
|
<ul class="timeline-description-list">
|
|
<li>You are required to attend this portion of the hackathon to participate</li>
|
|
<li><span class="important-text">=IMPORTANT=</span> DO NOT START CODING during this period</li>
|
|
</ul>
|
|
</p>
|
|
</div>
|
|
<div data-description="2">
|
|
<h4>Hacking Begins</h4>
|
|
<h5 class="timeline-description-subtitle">8/12 | 6:30pm</h5><br>
|
|
<p class="timeline-description">
|
|
Now's your time to shine! Start working with your team to build your project. No strings attached!
|
|
<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>Remember, you only have 44 hours to complete your project... Use your time wisely</li>
|
|
</ul>
|
|
</p>
|
|
</div>
|
|
<div data-description="3">
|
|
<h4>Hacking Ends</h4>
|
|
<h5 class="timeline-description-subtitle">8/14 | 12:00pm</h5><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>
|
|
<ul class="timeline-description-list">
|
|
<li><span class="important-text">=IMPORTANT=</span> Make sure you turn in your project BEFORE the deadline at 12:30pm. 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>From now until Project Presentations (2:00pm), your team will have around 2 hours to prepare for your presentation. Get back to work!</li>
|
|
</ul>
|
|
</p>
|
|
</div>
|
|
<div data-description="4">
|
|
<h4>Project Presentations</h4>
|
|
<h5 class="timeline-description-subtitle">8/14 | 2:00pm - 3:00pm</h5><br>
|
|
<p class="timeline-description">This is where your team will present your product to our honored judges.<br>
|
|
<ul class="timeline-description-list">
|
|
<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>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> 5 minutes max per team. Your team is not allowed to go ABOVE those 5 minutes... Use your time wisely.</li>
|
|
<li>Your team will be graded on both the product and presentation as per the rubric</li>
|
|
</ul>
|
|
</p>
|
|
</div>
|
|
<div data-description="5">
|
|
<h4>Awards Ceremony</h4>
|
|
<h5 class="timeline-description-subtitle">8/14 | 3:30pm - 4:00pm</h5><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>
|
|
<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>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>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
<article>
|
|
<h3 id="steps-header">Signup STEPS</h3>
|
|
<div id="steps-card">
|
|
<div class="timeline">
|
|
<div class="outer">
|
|
<div class="card">
|
|
<div class="info">
|
|
<p class="title">Sign up w/ this <a class="link" target="_blank" href="https://forms.gle/coK7q43RwBV2f15i7" title="Signup Form">form</a></p>
|
|
<p>- These questions are used to gauge your experience and skills so we can pair you with others</p>
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="info">
|
|
<p class="title">Join the <a class="link" target="_blank" href="https://discord.gg/nkTDKMcYbr" title="Discord Invite Link">Discord</a></p>
|
|
<p>- Please change your nickname to your First and Last name</p>
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="info">
|
|
<p class="title">Create/join a team</p>
|
|
<p>- Join teams in the Discord Server!</p>
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="info">
|
|
<p class="title">Start discussing ideas for a project</p>
|
|
<p>
|
|
- Between now and the start of the hackathon is a great time to come up with project ideas w/ your team
|
|
<br>
|
|
- However, you can't start working on the project before the hackathon
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="info">
|
|
<p class="title">Wait for the hackathon to start!</p>
|
|
<p>- Mark your calendars, Aug 12 - 14</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
</section>
|
|
<section id="rules">
|
|
<h2 class="topic">Rules</h2>
|
|
<hr class="line">
|
|
|
|
</section>
|
|
<section id="prizes">
|
|
<h2 class="topic">Prizes</h2>
|
|
<hr class="line">
|
|
</section>
|
|
<section id="teams">
|
|
<h2 class="topic">Teams</h2>
|
|
<hr class="line">
|
|
<div id="discord-widget">
|
|
<iframe src="https://discord.com/widget?id=896884806124728352&theme=dark" width="350" height="500" allowtransparency="true" frameborder="0" sandbox="allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts"></iframe>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
<!--Footer-->
|
|
<footer>
|
|
<ul>
|
|
<li><a class="link" target="_blank" href="https://discord.gg/nkTDKMcYbr" title="Discord Invite Link">Discord</a></li>
|
|
</ul>
|
|
<hr id="footer-line">
|
|
© 2022 Gilroy Hacks <br>
|
|
All Rights Reserved
|
|
</footer>
|
|
<script src="js/scroll_nav.js"></script>
|
|
<script src="js/timeline.js"></script>
|
|
</body>
|
|
</html> |