forked from hackclub/evergreen
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
238 lines (238 loc) · 11 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title> Evergreen: Seattle Day of Service </title>
<meta name="description" content="A website to provide students/families with information about the Evergreen Day of Service in Seattle, Washington.">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://kit.fontawesome.com/75a8e683b5.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="style.css">
<link rel="icon" type="image/x-icon" href="images/favicon.ico">
</head>
<body>
<nav class="navbar navbar-expand-sm navbar-custom navbar-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active"><a class="nav-link" href="#dayofservice">What is a Hackathon?</a></li>
<li class="nav-item"><a class="nav-link" href="#tracks">Tracks</a></li>
<li class="nav-item"><a class="nav-link" href="#faq">FAQ</a></li>
<li class="nav-item"><a class="nav-link" href="#events">Previous Events</a></li>
<li class="nav-item"><a class="nav-link" href="#register">Register</a></li>
</ul>
</div>
</nav>
<a href="https://hackclub.com/"><img style="position: absolute; top: 0; left: 10px; border: 0; width: 256px; z-index: 999;" src="https://assets.hackclub.com/flag-orpheus-top.svg" alt="Hack Club"/></a>
<main>
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<div class="logo">
<img class="img-fluid" src="images/updated-evergreen-logo.png" width="500" height="380" alt="The Evergreen logo.">
</div>
<h5>May 3rd, 2024 | Seattle, WA</h5>
</div>
</div>
<div class="row">
<div id="dayofservice"></div>
<div class="col-sm-12">
<div class="headers-dos">
<h5>What is a Hackathon?</h5>
</div>
<p>A Hackathon is a social coding event—and Days of Service is Hack Club's initiative to support girls learning to code by hosting gender-focused Hackathons as an opportunity for girls to build awesome projects!</p>
<p>Working with local youth organizations, high school Hack Club leaders run one-day coding events (a day of service) that help girls and gender minorities write their first lines of code. They might build their first ever website, video game, application, or even code a robot arm to draw out their sketches!</p>
<p>Built for beginners learning to code, girls are supported by experienced Hack Clubbers. By the end of the day, every single participant builds something with code. In 2023, Hack Club girls ran Days of Service in 6 cities, and in 2024 they'll increase events to more than 10 cities.</p>
</div>
</div>
<div class="row">
<div id="tracks"></div>
<div class="col-sm-12">
<div class="headers-tracks">
<h5>Tracks</h5>
</div>
<p><b>A track is a series of workshops for a specific coding subject that you will learn about during the hackathon!</b></p>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="headers-two">
<div class="floats">
<img class="img-fluid" src="images/blot-float.png" width="100" height="150" alt="The floating image for the Blot track.">
</div>
<h5>Generate Robot Art with Blot</h5>
<p>In this workshop, participants will learn to create computer-generated art by drawing assorted shapes from our guides. They'll use <a href="https://blot.hackclub.dev/"><b>Blot</b></a>, a robotic arm created by Hack Club that translates code to creation. With this track, attendees will learn JavaScript and digitial fabrication. Afterwards, they'll be shipped their own robot arm to draw what they've created!</p>
</div>
</div>
<div class="col-sm-12">
<div class="headers-two">
<div class="floats">
<img class="img-fluid" src="images/onboard-float.png" width="100" height="175" alt="The floating image for the OnBoard track.">
</div>
<h5>Design a Circuit Board with OnBoard</h5>
<p>In this workshop, participants will learn the fundamentals of circuit board design with Hack Club's <a href="https://hackclub.com/onboard/"><b>OnBoard program</b></a>. They'll use <a href="https://easyeda.com/"><b>EasyEDA</b></a>, a circuit design software, to complete this. Attendees will learn to use that software as well as the basics of PCB design. After students complete this track, they'll be shipped their PCB to have a physical copy of their creation!</p>
</div>
</div>
<div class="col-sm-12">
<div class="headers-two">
<div class="floats">
<img class="img-fluid" src="images/village-float.png" width="100" height="250" alt="The floating image for the 3D Village track.">
</div>
<h5>Build a 3D Village with Spline</h5>
<p>In this workshop, participants learn the fundamentals of 3D modeling by building their own 3D village. They'll use <a href="https://spline.design/"><b>Spline</b></a>, a web-based 3D design tool, to accomplish this. Spline allows them to add interactivity and customize their design. With this track, attendees learn the basics of working in 3D, which can be used for websites, games, animation, and printing!</p>
</div>
</div>
</div>
<div class="row">
<div id="faq"></div>
<div class="col-sm-12">
<div class="headers-faq">
<h5>FAQS</h5>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="faq">
<h5><b>How much does attendance cost?</b></h5>
<p>Attendance is free thanks to Hack Club's support!</p>
</div>
</div>
<div class="col-sm-4">
<div class="faq">
<h5><b>What is Evergreen?</b></h5>
<p>Evergreen is a Days of Service event that aims to teach teens how to code and build their own projects.</p>
</div>
</div>
<div class="col-sm-4">
<div class="faq">
<h5><b>What if I've never coded before?</b></h5>
<p>That's perfectly okay! We will have workshops to teach you!</p>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="faq">
<h5><b>What should I bring?</b></h5>
<p>You should bring a laptop, but we will have Chromebooks available if you don't have a laptop.</p>
</div>
</div>
<div class="col-sm-4">
<div class="faq">
<h5><b>Will I need a team?</b></h5>
<p>You can work by yourself or in a team! The goal is to create something that you're proud of.</p>
</div>
</div>
<div class="col-sm-4">
<div class="faq">
<h5><b>Where does Evergreen take place?</b></h5>
<p>Evergreen will take place at the Amazon HQ in Seattle.</p>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="faq-space">
<h5><b>What if I am not from the Renton School District?</b></h5>
<p>That's totally okay! Any high schooler can attend.</p>
</div>
</div>
<div class="col-sm-6">
<div class="faq-space">
<h5><b>My parents or I have another question.</b></h5>
<p>No worries! Contact <a href="mailto:[email protected]"><b>[email protected]</b></a> with any questions you may have.</p>
</div>
</div>
</div>
<div class="row">
<div id="events"></div>
<div class="col-sm-12">
<div class="headers-prev">
<h5>Previous Events</h5>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<div class="events-decor">
<img src="images/horizon-card.png" width="222" height="250" alt="A photo from the Horizon Day of Service.">
<p>3/25/23 - Horizon (New York City, NY)</p>
</div>
</div>
<div class="col-sm-3">
<div class="events-decor">
<img src="images/alpine-card.jpeg" width="222" height="250" alt="A photo from the Alpine Day of Service.">
<p>7/15/23 - Alpine (Salt Lake City, UT)</p>
</div>
</div>
<div class="col-sm-3">
<div class="events-decor">
<img src="images/spark-card.jpg" width="222" height="250" alt="A photo from the Spark Day of Service.jpg">
<p>8/12/23 - Spark (San Francisco, CA)</p>
</div>
</div>
<div class="col-sm-3">
<div class="events-decor">
<img src="images/lonestar-card.jpg" width="222" height="250" alt="A photo from the Lonestar Day of Service.">
<p>9/16/23 - Lonestar (San Antonio, TX)</p>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<div class="events-decor">
<img src="images/harvest-card.jpg" width="222" height="250" alt="A photo from the Harvest Day of Service.">
<p>10/28/23 - Harvest (Burlington, VT)</p>
</div>
</div>
<div class="col-sm-3">
<div class="events-decor">
<img src="images/halo-card.jpg" width="222" height="250" alt="A photo from the Halo Day of Service.">
<p>11/4/23 - Halo (Los Angeles, CA)</p>
</div>
</div>
<div class="col-sm-3">
<div class="events-decor">
<img src="images/programmer-card.jpg" width="222" height="250" alt="A photo from the Think Like a Programmer Day of Service.">
<p>2/22/24 - Think Like a Programmer (Boston, MA)</p>
</div>
</div>
<div class="col-sm-3">
<div class="events-decor">
<img src="images/blossom-card.jpg" width="222" height="250" alt="A photo from the Blossom Day of Service.">
<p>3/16/24 - Blossom (Atlanta, GA)</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="register-button">
<a href="https://docs.google.com/forms/d/e/1FAIpQLSdXiMx9T1aJVpLtekAjdg02TckSz_2WaJ_JC3GMOB7MfWQ3bQ/viewform"><h1><b>RENTON REGISTRATION</b></h1></a>
</div>
</div>
<div class="col-sm-6">
<div class="register-button">
<a href="https://airtable.com/appfHMGuDHsmGjzcW/pagzQFuMGIOIhO5Jh/form"><h1><b>PUBLIC REGISTRATION</b></h1></a>
</div>
</div>
</div>
</div>
</main>
<footer>
<div class="hc">
<h4>Made with <i class="fa fa-heart-o" aria-hidden="true"></i> by Hack Club</h4>
</div>
<div class="socials"><br>
<h3><li><a href="https://www.instagram.com/starthackclub" target="_blank"><i class="fa-brands fa-instagram"></i></a></li><li><a href="https://daysofservice.hackclub.com/" target="_blank"><i class="fas fa-globe"></i></li></h3>
</div>
</footer>
<!--jQuery, Popper, and Bootstrap Javascript files-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>