-
Notifications
You must be signed in to change notification settings - Fork 30
/
club.html
268 lines (264 loc) · 15.5 KB
/
club.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
263
264
265
266
267
268
<!DOCTYPE html>
<html>
<head>
<title>BrickHack</title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="clubs, club, hackathons, hackathon, hack-a-thon, design, rit, brickhack"/>
<meta name="description" content="BrickHack is a multidisciplinary group of students who are passionate about running hackathons.">
<!-- Twitter Cards -->
<meta property="twitter:card" content="summary"/>
<meta property="twitter:title" content="BrickHack">
<meta property="twitter:url" content="https://brickhack.io/club.html" >
<meta property="twitter:description" content="BrickHack is a multidisciplinary group of students who are passionate about running hackathons.">
<meta name="twitter:image" content="./assets/club/club-logo-name.svg">
<!-- Open Graph Cards -->
<meta property="og:type" content="website" />
<meta property="og:title" content="Brickhack" />
<meta property="og:site_name" content="BrickHack" />
<meta property="og:url" content="https://brickhack.io/club.html" />
<meta property="og:description" content="BrickHack is a multidisciplinary group of students who are passionate about running hackathons."/>
<meta property="og:image" content="./assets/club/club-logo-name.svg" />
<!-- Favicons -->
<link rel="apple-touch-icon" sizes="180x180" href="resources/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="resources/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="resources/favicon/favicon-16x16.png">
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;600;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Sora&display=swap" rel="stylesheet">
</head>
<body>
<nav>
<div id="navbar-top">
<i class="fa fa-bars" aria-hidden="true" id="toggle"></i>
<a id="logo" href="#landing" class="nav-link"><img src="./assets/club/club-logo.svg" alt="BrickHack logo"></a>
</div>
<div id="navbar-middle">
<a href="#landing" class="nav-link">Join Us</a>
<a href="#about" class="nav-link">About</a>
<a href="#events" class="nav-link">Events</a>
<a href="#teams" class="nav-link">Teams</a>
<a href="#contact" class="nav-link">Contact</a>
</div>
</nav>
<div class="mobile-grayout"></div>
<main>
<section id="landing">
<h1>BrickHack</h1>
<p>BrickHack is a multidisciplinary group of students who are passionate about running hackathons.</p>
<p>We love the challenge of organizing great events through careful planning, empathy, and a little bit of luck. Every year, we come together to organize several hackathon events for the students of RIT and beyond.</p>
<div id="landing-bottom">
<div>
<h2>Join us!</h2>
<p>To get involved, and for details on applying to our different teams, join our Discord!</p>
<div id="landing-btns">
<a class="btn-dark" href="https://discord.gg/gNJXjvzkuB" target="_blank" rel="noopener">JOIN OUR DISCORD</a>
<a class="btn-light" href="#teams">VIEW OUR TEAMS</a>
</div>
</div>
<img src="./assets/club/landing.svg" alt="Illustration of a desktop website and a phone displaying a mobile website. A bubble says, "BrickHack Club: Welcome!"">
</div>
</section>
<section id="about">
<h1>About</h1>
<p>A hackathon is a “hacking marathon” in which teams or individuals have a specified time frame to create something from nothing. These events foster creative problem solving, teamwork, and innovative thinking skills.</p>
<p>Our flagship event is BrickHack, a yearly 24-hour hackathon. For more information about the BrickHack event, check out <a href="#events">our events</a>.</p>
<div class="card">
<button class="card-header">
Do I need hackathon experience to join BrickHack?
<i class="fa fa-plus" aria-hidden="true"></i>
</button>
<div class="card-body">
<p>Nope! Having prior experience with hackathons is appreciated but not a requirement.</p>
</div>
</div>
<div class="card">
<button class="card-header">
What will I be doing?
<i class="fa fa-plus" aria-hidden="true"></i>
</button>
<div class="card-body">
<p>What you do with BrickHack will vary depending upon the team that you join.</p>
<a class="btn-light" href="#teams">VIEW OUR TEAMS</a>
</div>
</div>
<div class="card">
<button class="card-header">
How much work is BrickHack?
<i class="fa fa-plus" aria-hidden="true"></i>
</button>
<div class="card-body">
<p>We won't lie— putting on a yearly hackathon event takes quite a bit of work. However, we promote a flexible environment to allow our team members to balance being in the club with school and work.</p>
</div>
</div>
<div class="card">
<button class="card-header">
How can BrickHack benefit me?
<i class="fa fa-plus" aria-hidden="true"></i>
</button>
<div class="card-body">
<p>The process of preparing, advertising, and running hackathons will develop your organizational, interpersonal, and leadership skills.</p>
<p>Aside from the recruiting jargon, it can be really great to have a consistent project to work on throughout the year. Something you can put time into, and at the end be proud of what you've worked towards. (The résumé bump is nice too!)</p>
</div>
</div>
<div class="card">
<button class="card-header">
Do I need to bring my own bricks?
<i class="fa fa-plus" aria-hidden="true"></i>
</button>
<div class="card-body">
<p>We've got you covered.</p>
</div>
</div>
</section>
<section id="events">
<h1>Events</h1>
<div class="event">
<img src="./assets/club/events.svg" alt="Illustration of a computer monitor with Ricky the Brick on it. Ricky is smiling, winking, and holding his arms up in a cheer.">
<div class="event-description">
<h2>BrickHack hackathon</h2>
<p><em>Held each February</em></p>
<p>BrickHack is a 24-hour hackathon events that attracks 600+ hackers from around the world each year. Hackers work in teams to compete in different prize-awarded categories while learning new skills along the way. To learn more about this hackathon, check out the event's website!</p>
<a class="btn-dark" href="index.html">VISIT EVENT SITE</a>
</div>
</div>
</section>
<section id="teams">
<h1>Teams</h1>
<p>We are currently recruiting for the following teams:</p>
<select id="select-team">
<option value="#logistics-team">LOGISTICS TEAM</option>
<option value="#sponsorship-team">SPONSORSHIP TEAM</option>
<option value="#marketing-team">MARKETING TEAM</option>
<option value="#design-team">DESIGN TEAM</option>
</select>
<div class="team-info show-team" id="logistics-team">
<img src="./assets/club/logistics-team.svg" alt="Illustration of a pen writing on a notepad over a to-do list.">
<div>
<h2>Logistics</h2>
<p>The Logistics team is responsible for planning all events at our hackathons. They work to organize our hackathons' venues, schedules, swag, tech, accessibility, and more.</p>
<!-- TODO: Info on team members to be added later
Making structure now so we have it later
<div>
<div>
<p><b>Team members</b></p>
<p>Names to be added</p>
</div>
<div>
<p><b>Director</b></p>
<p>Names to be added</p>
</div>
</div> -->
</div>
</div>
<div class="team-info" id="sponsorship-team">
<img src="./assets/club/sponsorship-team.svg" alt="Illustration of an open envelope with a list of people coming out of it. Above and below the envelope are arrows pointing in opposite directions.">
<div>
<h2>Sponsorship</h2>
<p>The Sponsorship team is responsible for inquiring about new and maintaining existing relationships with the sponsors of our hackathon events. They work with our sponsors to schedule event talks and coordinate prize categories and swag at our hackathons.</p>
<!-- TODO: Info on team members to be added later
Making structure now so we have it later
<div>
<div>
<p><b>Team members</b></p>
<p>Names to be added</p>
</div>
<div>
<p><b>Director</b></p>
<p>Names to be added</p>
</div>
</div> -->
</div>
</div>
<div class="team-info" id="marketing-team">
<img src="./assets/club/marketing-team.svg" alt="Illustration of a poster advertising BrickHack with a pen on top of it.">
<div>
<h2>Marketing</h2>
<p>The Marketing team is responsible for advertising our hackathons and recruiting new club members. They handle any external communications via email, social media, posters, and more.</p>
<!-- TODO: Info on team members to be added later
Making structure now so we have it later
<div>
<div>
<p><b>Team members</b></p>
<p>Names to be added</p>
</div>
<div>
<p><b>Director</b></p>
<p>Names to be added</p>
</div>
</div> -->
</div>
</div>
<div class="team-info" id="design-team">
<img src="./assets/club/design-team.svg" alt="Illustration of a website mockup in the process of being built.">
<div>
<h2>Design</h2>
<p>The Design team is responsible for creating a consistent brand for BrickHack and our other hackathon events. They create graphic assets for our events' website, posters, emails, swag, and more.</p>
<!-- TODO: Info on team members to be added later
Making structure now so we have it later
<div>
<div>
<p><b>Team members</b></p>
<p>Names to be added</p>
</div>
<div>
<p><b>Director</b></p>
<p>Names to be added</p>
</div>
</div> -->
</div>
</div>
</section>
<section id="contact">
<div>
<h1>Contact</h1>
<p>Have any questions? Feel free to reach out to us at <b>[email protected]</b></p>
<a class="btn-light" href="mailto:[email protected]">EMAIL US</a>
<p>You can also sign up to receive our BrickHack event newsletter here:</p>
<!-- MailChimp email form, copied from bh8 preregister -->
<div class="field-row-stacked">
<div id="mc_embed_signup">
<form action="https://coderit.us11.list-manage.com/subscribe/post?u=122b09a8cef4c1f3888af8e40&id=4c1af7f783" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" rel="noopener" novalidate>
<div id="mc_embed_signup_scroll">
<div class="mc-field-group">
<div class="field-row">
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" placeholder="[email protected]">
<button type="submit">SUBMIT</button>
</div>
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_122b09a8cef4c1f3888af8e40_4c1af7f783" tabindex="-1" value=""></div>
</div>
</form>
</div>
</div>
</div>
<div>
<div id="line"></div>
<div id="footer">
<a id="footer-logo" href="#landing"><img src="./assets/club/club-logo-name.svg" alt="BrickHack logo"></a>
<div>
<p>Rochester Institute of Technology</p>
<p>1 Lomb Memorial Dr, Rochester, NY 14623</p>
</div>
<div id="socials">
<span id="social-text">Connect with us!</span>
<a class="social-link" href="https://discord.gg/gNJXjvzkuB" target="_blank" rel="noopener">Discord</a>
<a class="social-link" href="https://github.com/codeRIT/brickhack.io" target="_blank" rel="noopener">GitHub</a>
<!-- <a class="social-link" href="#" target="_blank" rel="noopener">Reddit</a> -->
<a class="social-link" href="https://twitter.com/brickhackrit" target="_blank" rel="noopener">Twitter</a>
<a class="social-link" href="https://snapchat.com/add/brickhack" target="_blank" rel="noopener">Snapchat</a>
</div>
</div>
</div>
</section>
</main>
<!-- This is where Parcel imports are located! (SASS, etc.) -->
<script src="./club.js"></script>
</body>
</html>