-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
262 lines (259 loc) · 22.2 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>QuHacks 2023</title>
<!-- Needed? type="image/icon" -->
<link rel="icon" href="media/quhacks-2023-logo.png">
<link rel="stylesheet" href="css/styles.css">
<script src="https://kit.fontawesome.com/7dc3015a44.js" crossorigin="anonymous"></script><link rel="stylesheet" href="https://kit-free.fontawesome.com/releases/latest/css/free.min.css" media="all"><link rel="stylesheet" href="https://kit-free.fontawesome.com/releases/latest/css/free-v4-font-face.min.css" media="all"><link rel="stylesheet" href="https://kit-free.fontawesome.com/releases/latest/css/free-v4-shims.min.css" media="all">
</head>
<!-- Are these next 2 lines necessary? -->
<body>
<nav class="navTransparent">
<p class="title"><a href="#header"> > QuHacks 2023<span id="blink">|</span></a></p>
<ul>
<li><a href="#about" id="about-button">About</a></li>
<li><a href="#schedule" id="schedule-button">Schedule</a></li>
<li><a href="#faq" id="faq-button">FAQs</a></li>
<li><a href="#sponsors" id="sponsors-button">Sponsors</a></li>
<li><a href="#team" id="team-button">Team</a></li>
<!-- TODO: Update links to registration and discord when ready and remove disabled class-->
<li class="nav-reg"><a href="https://forms.gle/frkFNtpmVApCuZud6" target="_blank" id="register-button-nav">Register</a></li>
<li class="nav-reg"><a href="https://discord.gg/3JzyG5aeK7" target="_blank" id="discord-button-nav">Discord Server</a></li>
</ul>
</nav>
<header id="header">
<!-- Logo is just a png and does not scale; background removal elementary -->
<div class="annoucement-banner">
<p> HEADS UP: The website for QuHacks 23-24 will be out soon! </p>
</div>
<ul class="main-container flexbox">
<li class="flex-img"><img src="media/quhacks-2023-logo.png" class="logo-normal"></li>
<li class="flex-info">
<p>January 14th, 2023</p>
<a href="https://forms.gle/frkFNtpmVApCuZud6" target="_blank"
class="button" id="register-button-header">Register</a>
<a href="https://discord.gg/3JzyG5aeK7" target="_blank" class="button" id="discord-button-header">Discord Server</a>
</li>
</ul>
</header>
<div class="body-container colored">
<div id="about"><br>
<h1 class="section-heading" id="about-heading">About</h1>
<ul class="about-content flexbox">
<li class="flex-img about-img"><img src="media/stickers.JPG"></li>
<li class="flex-info">
<div id = "blackbox">
<p>> QuHacks is a day-long hackathon by students, for students. Join us for a day of creation, innovation, and fun
with fellow middle and high schoolers interested in coding. From seasoned coding veterans to first-time
programmers, all are welcome to join.<br><br>Discover your ability to create change by developing
technology to solve real-world problems, attend workshops, and meet some new friends. We can't wait to see you
there!<br><br>QuHacks will be held at the Mary Ellen Duncan Hall of Howard Community College this year. The address is 6040 Scholarship Dr, Columbia, MD 21044.</p>
</div>
</li>
</ul>
</div>
<hr class="body-border">
<div class="schedule" id="schedule"><br>
<h1 class="section-heading" id="schedule-heading">Schedule</h1>
<div class="scroll-wrapper">
<table class="table">
<thead class="thead-dark">
<tr>
<th class="table_heading" scope="col">Time</th>
<th class="table_heading" scope="col">DH100</th>
<th class="table_heading" scope="col">DH116</th>
<th class="table_heading" scope="col">DH117</th>
<th class="table_heading" scope="col">DH108</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">9:00-9:30AM</th>
<td>Sign-in</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th scope="row">9:30-10:00AM</th>
<td>Opening Ceremony</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th scope="row">10:00-11:00AM</th>
<td>Coding</td>
<td>Intro to Programming</td>
<td>AI Workshop</td>
<td>Web Development</td>
</tr>
<tr>
<th scope="row">11:00-12:00PM</th>
<td>Coding/Breakfast</td>
<td>Intro to Programming</td>
<td>AI Workshop</td>
<td>Algorithms Workshop</td>
</tr>
<tr>
<th scope="row">12:00-1:00PM</th>
<td>Coding</td>
<td>Intro to Programming</td>
<td>Web Development</td>
<td>Algorithms Workshop</td>
</tr>
<tr>
<th scope="row">1:00-4:30PM</th>
<td>Coding/Lunch</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th scope="row">4:30-5:30PM</th>
<td>Fun Activity</td>
<td>Judging</td>
<td>Judging</td>
<td></td>
</tr>
<tr>
<th scope="row">5:30-6:00PM</th>
<td>Closing Ceremony</td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3091.2724093478428!2d-76.8790458!3d39.213978499999996!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89b7df0c8bb42f33%3A0x8d6684f527322fa9!2sDuncan%20Hall!5e0!3m2!1sen!2sus!4v1673636434906!5m2!1sen!2sus" width="600" height="450" style="border:0;margin-bottom: 2.5vh" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe><br>
</div>
<hr class="body-border">
<div class="faq-container" id="faq">
<h1 class="section-heading" id="faq-heading">FAQs</h1>
<div class="faq">
<button class="accordion">> What is a Hackathon?</button>
<div class="panel">
<p>A hackathon is a coding marathon - it's like a real-time programming fair where students develop an idea and bring it to life through code. A project could be a game, website, app, robot, Arduino project, whatever! If you enjoy programming or technology in general, hackathons are great places to meet friendly, like-minded people.</p>
</div>
<button class="accordion">> Do I need to know how to code?</button>
<div class="panel">
<p>No, you don't! Even if you aren't able to code beforehand, you can attend workshops, learn some code, and still submit a project. We will have both a novice division (set up specifically for those new to coding) and a main division, and the "Intro to Programming" workshop is tailor made for new programmers.</p>
</div>
<button class="accordion">> Who can attend?</button>
<div class="panel">
<p>You are eligible to participate in QuHacks 2023 if you currently attend middle or high school. If you have
already graduated but would still like to attend the event, please consider volunteering or mentoring
for the event! Send us an email at <a class="faq-a-email"href="mailto:[email protected]">[email protected]</a> for more information
on contributing to QuHacks, or if you have any questions about our eligibility requirements.</p>
</div>
<button class="accordion">> How much does QuHacks cost?</button>
<div class="panel">
<p>Nothing! This event is entirely free of charge, thanks to our awesome sponsors. If you're interested in becoming a sponsor, please email us at <a class="faq-a-email"href="mailto:[email protected]">[email protected]</a>.</p>
</div>
<button class="accordion">> Can I win any prizes?</button>
<div class="panel">
<p>But of course! Prize amounts will be announced at the event, but you can win both swag and money!</p>
</div>
</div>
<div class="faq">
<button class="accordion">> What do I need to compete?</button>
<div class="panel">
<p> The only thing you need is a device that can connect to the
internet, and any materials needed for creating your hack! </p>
</div>
<!--<button class="accordion">Wait a second, a virtual hackathon?</button>
<div class="panel">
<p>Yes indeed! All the same parts of QuHacks you know and love will still be happening, just virtually (except for the food; we don't have that kind of technology yet, but that would be a great hackathon project if you figure it out!). We will also be opening a moderated Discord server where hackers can chat, ask questions, and receive important announcements. Check our <a id="faq-a-schedule"href="#schedule">schedule</a> for more information on what will be happening when.</p>
</div>-->
<!--<button class="accordion">Can I participate virtually?</button>
<div class="panel">
<p>Yes! QuHacks 2021 will be virtual. We will also be opening a moderated Discord server where hackers can chat, ask questions, and
receive important announcements. Check our <a id="faq-a-schedule"href="#schedule">schedule</a> for more information on what will be
happening when.</p>
</div>
-->
<button class="accordion">> Where is QuHacks?</button>
<div class="panel">
<p>QuHacks will be hosted at the Mary Ellen Duncan Hall of Howard Community College in Columbia, Maryland! The address is 6040 Scholarship Dr, Columbia, MD 21044.</p>
</div>
<button class="accordion">> Can I use past projects?</button>
<div class="panel">
<p>Anyone caught working on past projects will be forced to sit in the corner and wear the dunce hat. Seriously though, don't be that one person.</p>
</div>
<button class="accordion">> What if I don't have a team?</button>
<div class="panel">
<p>No problem! Many participants sign up without a team, and you can meet and work with new friends. You may also choose to work alone. The limit is 4 people per team.</p>
</div>
<button class="accordion">> Who's Freddy?</button>
<div class="panel">
<p>> At some point, Freddy had a cheesy description here. However, we can't seem to decide what Freddy is, so we'll just say he's that one duck you keep seeing around on this website.</p>
</div>
</div>
</div>
<hr class="body-border">
<div id="sponsors" class="sponsors-container"><br>
<h1 class="section-heading" id="sponsors-heading">Sponsors</h1>
<!-- loading dots <span class="colorsquare1">.</span><span class="colorsquare2">.</span><span class="colorsquare3">.</span>-->
<!--<li><a href="" target="_blank"><img src="media/sponsors/"></a></li>-->
<h1 class = "sponsors-label sponsors-h2" id="sponsors-plat-label">Platinum Sponsors</h1>
<ul class="sponsors-plat">
<li><a href="https://www.firstinspires.org/" target="_blank" ><img src="media/sponsors/first.png" style="max-width:35%; height: auto"></a></li>
<li><a href="https://hackclub.com/" target="_blank"><img src="media/sponsors/hackclub.png" style="max-width:35%; height: auto"></a></li>
<li><a href="https://www.religroupinc.com/" target="_blank"><img src="media/sponsors/religroup.png"></a></li>
<li><a href="https://www.synergy-technical.com/" target="_blank"><img src="media/sponsors/synergytechnical.png" style="max-width:40%; height: auto"></a></li>
</ul>
<h1 class = "sponsors-label sponsors-h2" id="sponsors-gold-label">Gold Sponsors</h1>
<ul class="sponsors-gold">
<li><a href="https://www.wegmans.com/" target="_blank"><img src="media/sponsors/wegmans.png"></a></li>
</ul>
<h1 class="sponsors-label sponsors-h2"id="sponsors-silver-label">Silver Sponsors</h1>
<ul class="sponsors-silver">
<li><a href="https://artofproblemsolving.com/" target="_blank"><img src="media/sponsors/aops.png"></a></li>
</ul>
<h1 class="sponsors-label sponsors-h2"id="sponsors-bronze-label">Bronze Sponsors</h1>
<ul class="sponsors-bronze">
<li><a href="https://balsamiq.com/" target="_blank"><img src="media/sponsors/balsamiq.png" style="max-width:20%; height: auto"></a>
<a href="https://www.taskade.com/" target="_blank"><img src="media/sponsors/taskade.png"></a>
<a href="https://www.echo3d.com/" target="_blank"><img src="media/sponsors/echo3D.png"></a>
<a href="https://1password.com/" target="_blank"><img src="media/sponsors/1password.png"></a></li>
</ul>
</div>
<hr class="body-border">
<div id="team"><br>
<h1 class="section-heading" id="team-heading">Our Team</h1>
<!-- loading dots<span class="colorsquare1">.</span><span class="colorsquare2">.</span><span class="colorsquare3">.</span>-->
<div class="team">
<div><img src="media/team/jesseheadshot.png" /><h2 class="about-header2-1">Jesse Zong<br>Co-Director</h2><p>Jesse is a senior at Centennial High School, where he is the iron-fisted dictator of Pyoneers and lead anime connoisseur. In his free time, Jesse enjoys nerding out about the latest computer hardware, cooking/baking, and playing (and losing in) League.</p></div>
<div><img src="media/team/lauraheadshot.jpg" /><h2 class="about-header2-2">Laura Jia<br>Co-Director</h2><p>Laura is a senior at Marriotts Ridge High School, where she is part of the Mock Trial team, Interact Club, Writer’s Guild, and various other clubs. In her free time, she likes to read, bike, and bother her sister.</p></div>
<div><img src="media/team/akshayheadshot.jpg" /><h2 class="about-header2-3">Akshay Kannan<br>Organizer</h2><p>Akshay is a senior at Marriotts Ridge High School, where he is a captain of the math team and the Health Occupations Students of America club. In his free time, he enjoys coding in Python and tinkering with hardware. You can also find him reading mystery novels, listening to music, or running outside.</p></div>
<div><img src="media/team/anuragheadshot.png" /><h2 class="about-header2-4">Anurag Sodhi<br>Organizer</h2><p>Anurag is a junior at Centennial High School, where he is involved with CHS Pyoneers, It's Academic, Science Bowl, Science Olympiad, Math Team, Speech and Debate, and Science Journal. Outside of school, Anurag enjoys programming, biking, badminton, playing old games, and reading spare chemistry textbooks.</p></div>
<div><img src="media/team/aryanheadshot.jpg" /><h2 class="about-header2-5">Aryan Sharma<br>Organizer</h2><p>Aryan is a sophomore at Centennial High School, where he is part of the Pyoneers (python-based coding club!) club and a member of the math team. In his free time, he enjoys playing basketball, listening to music, coding in different languages, and playing math games, such as 24.</p></div>
<div><img src="media/team/austinheadshot.jpg" /><h2 class="about-header2-1">Austin Zou<br>Organizer</h2><p>Austin is a senior at Centennial High School, where he is involved with CHS Pyoneers, Centennial Competitive Coding, Cyberpatriot, and Science Olympiad. In his free time, he enjoys ONE PIECE, listening to music, and running.</p></div>
<div><img src="media/team/calebheadshot.jpg" /><h2 class="about-header2-2">Caleb Shim<br>Organizer</h2><p>Caleb is a junior at a Centennial High School, where he is a member of the Pyoneers programming club, math team, and the national math honor society. In his free time, he likes to play basketball with his friends, play the piano, and play videogames.</p></div>
<div><img src="media/team/ishaniheadshot.jpg" /><h2 class="about-header2-3">Ishani Ghosh<br>Organizer</h2><p>Ishani is a junior at Centennial High School, where she is involved in Pre-Medicine Club and Girls Who Code. Outside of school, she conducts research and participates in various science competitions. In her free time, she enjoys playing soccer, reading, swimming, and listening to music.</p></div>
<div><img src="media/team/joanneheadshot.jpg" /><h2 class="about-header2-4">Joanne Lee<br>Organizer</h2><p>Joanne is a senior at Marriotts Ridge High School, where she is involved in Speech and Debate, National Art Honor Society, and Chinese Honor Society. In her free time, she enjoys drawing, playing indie games, and watching horror movies.</p></div>
<div><img src="media/team/julianheadshot.JPG" /><h2 class="about-header2-5">Julian Park<br>Organizer</h2><p>Julian is a senior at Marriotts Ridge High School, where he is an officer at the school’s Computer Science Club. In his free time, he enjoys programming, running, and playing chess.</p></div>
<div><img src="media/team/nicoleheadshot.png" /><h2 class="about-header2-1">Nicole Luo<br>Organizer</h2><p>Nicole is a junior at Centennial High School, where she is a member of SGA, her Class Board, and various other clubs. She is currently also an intern for the non-profit organization Code Your Chances, a group that aims to break down gender barriers in STEM. In her free time, she loves to listen to music and rewatch Ratatouille.</p></div>
<div><img src="media/team/ramyheadshot.jpeg" /><h2 class="about-header2-2">Ramy Kaddouri<br>Organizer</h2><p>Ramy is a junior at Centennial High School where he is part of the Centennial Competitive Coding club board and the Pyoneers club. In his free time, he enjoys competing in programming competitions, working on side projects, reading the news, and trying (unsuccessfully) to learn Vim.</p></div>
<div><img src="media/team/seonyoungheadshot.jpg" /><h2 class="about-header2-3">Seonyoung Lee<br>Organizer</h2><p>Seonyoung is a junior at Centennial High School, where she is a board member for clubs like National Art Honor Society, Active Minds, and Creactive Youth. In her free time, she enjoys painting, coding, playing with her dog, and reading fantasy and mystery books.</p></div>
<div><img src="media/team/sophiaheadshot.jpg" /><h2 class="about-header2-4">Sophia Moylan<br>Organizer</h2><p>Sophia is a senior at Marriotts Ridge High School, where she is involved with environmental, robotics, and computer science clubs. She is a member of the Youth Coalition for Climate Action, as well as the American Conservation Coalition and High School Democrats of America. Outside of school, Sophia enjoys making visual mods of her favorite RPGs, reading comics, and coding basic AIs to master games she (begrudgingly) cannot.</p></div>
</div>
</div>
</div>
<footer class="footer-white">
<a id="footer-envelope" href="mailto:[email protected]" target="_blank"><span class="fas fa-envelope fa-4x"></span></a> 
<a id="footer-github"href="https://github.com/quhacks" target="_blank"><span class="fab fa-github fa-4x"></span></a> 
<a id="footer-twitter"href="https://twitter.com/quhacks" target="_blank"><span class="fab fa-twitter fa-4x"></span></a> 
<a id="footer-instagram"href="https://www.instagram.com/quhacks/" target="_blank"><span class="fab fa-instagram fa-4x"></span></a>
</footer>
<script src="https://code.jquery.com/jquery-3.3.1.js" type="text/javascript"></script>
<script type="text/javascript" src="js/script.js"></script>
<script type="text/javascript" src="js/faq.js"></script>
</div>
</body>
</html>