-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
312 lines (310 loc) · 18.5 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
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>DandyHacks 2023</title>
<link rel="stylesheet" href="styles.css" />
<link rel="icon" type="image/x-icon" href="favicon.png">
</head>
<body class="font-sans text-lavender bg-deep-purple">
<nav class="fixed z-30 flex flex-row items-center justify-between flex-none w-full px-5 py-5 transition-transform md:px-12 bg-deep-purple translate-y-0">
<h3 class="text-2xl"><a href="#hero">DandyHacks ‘23</a></h3>
<div>
<input class="absolute z-50 w-8 h-8 opacity-0 peer lg:hidden" type="checkbox" />
<div class="fixed top-0 left-0 w-screen h-screen bg-black opacity-0 pointer-events-none peer-checked:pointer-events-auto transition-opacity peer-checked:opacity-50 lg:hidden"></div>
<img class="relative z-40 lg:hidden" src="img/icons/hamburger.png" />
<ul class="fixed top-0 right-0 z-30 flex flex-col h-screen pt-32 pb-16 text-3xl font-bold landscape:max-lg:overflow-auto transition-transform gap-8 lg:flex-row lg:text-xl px-9 lg:p-0 w-72 bg-violet peer-checked:translate-x-0 translate-x-72 lg:bg-deep-purple lg:translate-x-0 lg:w-fit lg:h-fit lg:relative lg:gap-10 lg:transition-none">
<li class="text-right hover:scale-110 transition-transform origin-center"><a href="#about">About</a></li>
<li class="text-right hover:scale-110 transition-transform origin-center"><a href="static/Newsletter_-_StuOrgs_Get_Connected_1_1.pdf" target="_blank">Newsletter</a></li>
<li class="text-right hover:scale-110 transition-transform origin-center"><a href="#tracks">Tracks</a></li>
<li class="text-right hover:scale-110 transition-transform origin-center"><a href="#schedule">Schedule</a></li>
<li class="text-right hover:scale-110 transition-transform origin-center"><a href="#prizes">Prizes</a></li>
<li class="text-right hover:scale-110 transition-transform origin-center"><a href="#past-projects">Past projects</a></li>
<li class="text-right hover:scale-110 transition-transform origin-center"><a href="#faq">FAQ</a></li>
<li class="text-right hover:scale-110 transition-transform origin-center"><a href="#sponsors">Sponsors</a></li>
</ul>
</div>
<a id="mlh-trust-badge" style="
display: block;
max-width: 100px;
min-width: 60px;
position: absolute;
right: 50px;
top: 100%;
width: 10%;
z-index: 20;
"
href="https://mlh.io/na?utm_source=na-hackathon&utm_medium=TrustBadge&utm_campaign=2024-season&utm_content=white"
target="_blank"><img
src="https://s3.amazonaws.com/logged-assets/trust-badge/2024/mlh-trust-badge-2024-white.svg"
alt="Major League Hacking 2024 Hackathon Season" style="width: 100%" /></a>
</nav>
<div class="wrapper scroll-smooth">
<div id="hero" class="flex flex-col items-center justify-center h-screen parallax">
<div class="absolute w-full h-full bg-no-repeat bg-cover bg-enchanted-forest-layer-1 bg-center-bottom"></div>
<div class="absolute w-full h-full bg-no-repeat bg-cover bg-enchanted-forest-layer-2 bg-center-bottom"></div>
<div class="absolute w-full h-full bg-no-repeat bg-cover bg-enchanted-forest-layer-3 bg-center-bottom"></div>
<div class="absolute w-full h-full bg-no-repeat bg-cover bg-enchanted-forest-layer-4 bg-center-bottom">
<div class="relative w-full h-full md:max-lg:portrait:h-3/6 -bottom-full bg-violet"></div>
</div>
<div class="flex flex-col gap-6 md:gap-0">
<div class="flex flex-col md:flex-row items-center justify-center gap-6 md:gap-2.5">
<img class="md:max-lg:h-1/2" src="img/logo.png" alt="The logo of DandyHacks 2023" />
<div class="flex flex-col items-center md:items-start gap-4">
<h1 class="text-4xl lg:text-6xl">DandyHacks ‘23</h1>
<h2 class="text-2xl lg:text-4xl text-purple">November 3-5</h2>
</div>
</div>
<div class="flex flex-col items-center justify-center font-bold md:flex-row gap-7 md:max-lg:relative md:max-lg:bottom-14">
<a class="flex items-center justify-center px-6 py-4 text-xl rounded-full hover-scale lg:px-10 lg:py-5 lg:text-2xl text-deep-purple bg-lavender" href="https://docs.google.com/forms/d/e/1FAIpQLSf0fuT8o8gTrG9d8flxtpRD1JkOzHu8tEXG-wXM3KiNzhHRyw/viewform?usp=sf_link" target="_blank">Register</a>
<a class="flex items-center justify-center px-6 py-4 text-xl rounded-full hover-scale lg:px-10 lg:py-5 lg:text-2xl text-deep-purple bg-purple" href="https://discord.gg/SbNBkUK6Cr" target="_blank">Join Discord</a>
</div>
</div>
</div>
<div class="flex flex-row items-center justify-center gap-[77px] relative">
<img class="hidden hover-scale xl:self-start xl:block" src="img/sticker2.png" />
<div class="px-9 lg:px-0 lg:flex-[0_0_454px] flex flex-col gap-7 lg:gap-14 mb-16 lg:mb-[150px]">
<h2 class="text-2xl lg:text-5xl">
<div id="about" class="absolute -top-20"></div>
What is DandyHacks?
</h2>
<div class="text-base lg:text-xl">
<p>
DandyHacks is the University of Rochester’s annual 42-hour long
hackathon. This year will be our 11th anniversary, and we’re so excited
to hold this amazing milestone in-person! As a fully student-led
organization at a tier 1 research university, we embody our school’s
values, encouraging participants to question the world and learn more.
<br/>
<br/>
DandyHacks is very beginner-friendly, and we welcome students from all
backgrounds and majors. Participating in DandyHacks is not just about
winning; it is about collaborating with peers, learning from mentors,
and gaining valuable experiences. This year, DandyHacks will take place
on Nov 3-5 in the Feldman Ballroom. We hope to see you there!
</p>
</div>
</div>
<img class="hidden hover-scale lg:block lg:relative lg:b-[150px]" src="img/sticker1.png" />
</div>
<div class="relative flex items-center justify-center text-xl bg-violet">
<div class="flex flex-col grow-0 items-center w-full gap-7 lg:gap-11 px-9 lg:px-0 lg:w-[999px] box-border text-base lg:text-xl">
<h2 class="text-5xl">
<div id="tracks" class="absolute -top-20"></div>
Tracks
</h2>
<p>
Choose one track to submit your project into. Each track will have
three top winners, and each project may only win in one track. Each
track will have different prizes, so pick and choose your track
depending on which prize you want to win!
</p>
<div class="flex flex-row flex-wrap justify-center pt-5 pb-12 lg:pt-1 gap-12">
<div class="w-[298px] h-[448px] rounded-3xl bg-deep-purple p-6 hover-scale">
<img class="w-40 mx-auto my-9" src="img/tracks/entertainment.svg" alt="A window with a video player" />
<h3 class="mb-4 text-2xl text-center font-display">Entertainment</h3>
<p class="text-center">
What innovative platforms can be created for content creation and
distribution?
</p>
</div>
<div class="w-[298px] h-[448px] rounded-3xl bg-deep-purple p-6 hover-scale">
<img class="w-40 mx-auto my-9" src="img/tracks/productivity.svg" alt="A to-do lists with 2 items, both of which are checked" />
<h3 class="mb-4 text-2xl text-center font-display">Productivity</h3>
<p class="text-center">
What innovative tools or applications can help streamline workflow
and task management?
</p>
</div>
<div class="w-[298px] h-[448px] rounded-3xl bg-deep-purple p-6 hover-scale">
<img class="w-40 mx-auto my-9" src="img/tracks/emerging-tech.svg" alt="A gear with a light bulb inside the hole" />
<h3 class="mb-4 text-2xl text-center font-display">Emerging Tech</h3>
<p class="text-center">
What applications can emerging technologies, such as AI or VR,
have in various industries?
</p>
</div>
</div>
</div>
</div>
<div class="relative flex items-center justify-center text-xl bg-violet">
<div class="flex flex-col grow-0 items-center w-full gap-7 lg:gap-11 px-9 lg:px-0 lg:w-[999px] pb-12 box-border text-base lg:text-xl">
<h2 class="text-5xl">
<div id="schedule" class="absolute -top-20"></div>
Schedule
</h2>
<iframe class="airtable-embed" src="https://airtable.com/embed/apptXzBn6KSOHO9rk/shrA0pG3QN5rh3QGo?backgroundColor=purple&viewControls=on" frameborder="0" onmousewheel="" width="100%" height="533" style="background: transparent; border: 1px solid #ccc;"></iframe>
</div>
</div>
<div id="particles-js" class="relative flex flex-col items-center px-5 bg-deep-purple">
<div class="flex flex-col items-center justify-center py-12 lg:py-20 gap-12 lg:gap-20 bg-deep-purple">
<h2 class="text-5xl">
<div id="prizes" class="absolute -top-20"></div>
Prizes
</h2>
<div class="flex flex-wrap justify-center pointer-events-none max-w-7xl gap-6">
<div class="hover-scale pointer-events-auto flex items-center h-28 p-8 bg-no-repeat bg-contain w-72 md:w-80 lg:w-96 grow-0 rounded-2xl bg-prize-acer-nitro-monitor bg-violet bg-[bottom_-16px_right_-16px]"><h3>Acer Nitro KG241Y Sbiip 23.8" Monitor</h3></div>
<div class="hover-scale pointer-events-auto flex items-center h-28 p-8 bg-no-repeat bg-contain w-72 md:w-80 lg:w-96 grow-0 rounded-2xl bg-prize-razer-blackwidow bg-violet bg-[bottom_-16px_right_-16px]"><h3>Razer BlackWidow V4 with Yellow Switches</h3></div>
<div class="hover-scale pointer-events-auto flex items-center h-28 p-8 bg-no-repeat bg-contain w-72 md:w-80 lg:w-96 grow-0 rounded-2xl bg-prize-wireless-photo-printer bg-violet bg-[bottom_-16px_right_-16px]"><h3>Wireless Photo Printer</h3></div>
<div class="hover-scale pointer-events-auto flex items-center h-28 p-8 bg-no-repeat bg-contain w-72 md:w-80 lg:w-96 grow-0 rounded-2xl bg-prize-jbl-flip-5 bg-violet bg-[bottom_-16px_right_-16px]"><h3>JBL Flip 5 Speaker</h3></div>
<div class="hover-scale pointer-events-auto flex items-center h-28 p-8 bg-no-repeat bg-contain w-72 md:w-80 lg:w-96 grow-0 rounded-2xl bg-prize-desk-lamp bg-violet bg-[bottom_-8px_right_0px]"><h3>Desk Lamp</h3></div>
<div class="hover-scale pointer-events-auto flex items-center h-28 p-8 bg-no-repeat bg-contain w-72 md:w-80 lg:w-96 grow-0 rounded-2xl bg-prize-echo-dot bg-violet bg-[bottom_-12px_right_-16px]"><h3>Echo dot 5th gen</h3></div>
<div class="hover-scale pointer-events-auto flex items-center h-28 p-8 bg-no-repeat bg-contain w-72 md:w-80 lg:w-96 grow-0 rounded-2xl bg-prize-airtag bg-violet bg-[bottom_-16px_right_-16px]"><h3>AirTag</h3></div>
<div class="hover-scale pointer-events-auto flex items-center h-28 p-8 bg-no-repeat bg-contain w-72 md:w-80 lg:w-96 grow-0 rounded-2xl bg-prize-amazon-fire-stick bg-violet bg-[bottom_-16px_right_0px]"><h3>Amazon Fire Stick</h3></div>
</div>
</div>
<div class="flex flex-col grow-0 items-center w-full gap-12 lg:gap-20 px-9 lg:px-0 lg:w-[999px] box-border text-base lg:text-xl">
<h2 class="text-5xl text-center">
<div id="past-projects" class="absolute -top-20"></div>
Past projects
</h2>
<div class="flex flex-row flex-wrap justify-center pointer-events-none lg:pt-1 gap-12">
<a href="https://devpost.com/software/goodsoup" target="_blank" class="w-[298px] h-[448px] rounded-3xl bg-violet hover-scale pointer-events-auto overflow-hidden">
<img class="w-full mx-auto mb-9" src="img/projects/goodsoup.png" />
<h3 class="mb-4 text-2xl text-center font-display">GoodSoup</h3>
<p class="px-6 text-center">
The dining hall recipe allergen analysis.
</p>
</a>
<a href="https://devpost.com/software/project-eleos" target="_blank" class="w-[298px] h-[448px] rounded-3xl bg-violet hover-scale pointer-events-auto overflow-hidden">
<img class="w-full mx-auto mb-9" src="img/projects/project-eleos.png" />
<h3 class="mb-4 text-2xl text-center font-display">Project Eleos</h3>
<p class="px-6 text-center">
Project Eleos is our attempt at solving the issue of computational
power and its availability to the average person.
</p>
</a>
<a href="https://devpost.com/software/2-tris" target="_blank" class="w-[298px] h-[448px] rounded-3xl bg-violet hover-scale pointer-events-auto overflow-hidden">
<img class="w-full mx-auto mb-9" src="img/projects/2-tris.jpg" />
<h3 class="mb-4 text-2xl text-center font-display">2-Tris</h3>
<p class="px-6 text-center">
A 2d co-op shooter version of Tetris featuring 3 classically
composed pieces.
</p>
</a>
</div>
</div>
<div class="flex flex-col items-center pt-12 pb-24 lg:pt-20 box-border gap-12 lg:gap-20">
<h2 class="text-5xl">
<div id="faq" class="absolute -top-20"></div>
FAQS
</h2>
<div class="flex flex-col px-10 pointer-events-none lg:py-0 gap-5 lg:px-0">
<details>
<summary>
What is a hackathon?
<img src="img/icons/plus.png" />
</summary>
<p>
A hackathon is an event in which people meet to collaboratively
build their ideas using technology.
</p>
</details>
<details>
<summary>
Who is eligible to participate?
<img src="img/icons/plus.png" />
</summary>
<p>
Any graduate or undergraduate student over the age of 18 enrolled in
a North American institution of higher education is eligible. All hackers must be
vaccinated and are encouraged to mask while indoors.
</p>
</details>
<details>
<summary>
Do I have to pay to participate?
<img src="img/icons/plus.png" />
</summary>
<p>
Hackers do not have to pay to participate. Hackers just need to
register and check-in upon arrival. Registration will open up in
early September, but you may join discord and follow us on Instagram
<a class="underline" href="https://www.instagram.com/dandyhacks">@dandyhacks</a> to
stay up to date on all things DandyHacks!
</p>
</details>
<details>
<summary>
Will the hackathon be in-person or virtual?
<img src="img/icons/plus.png" />
</summary>
<p>
The hackathon will be fully in-person with a couple online
workshops.
</p>
</details>
<details>
<summary>
What safety protocols are in place to protect the community?
<img src="img/icons/plus.png" />
</summary>
<p>
Please see the <a class="underline" href="https://www.rochester.edu/coronavirus-update/">University of Rochester COVID-19 protocols</a>.
</p>
</details>
<details>
<summary>
Will I work individually or with a team?
<img src="img/icons/plus.png" />
</summary>
<p>
You can work individually or with a team. Each team can have a
maximum of 4 people, and don’t worry if you don’t have a team yet!
We will make time and communication channels for you to find a team.
</p>
</details>
<details>
<summary>
Can I start hacking before the event?
<img src="img/icons/plus.png" />
</summary>
<p>
You may not start hacking before the event, but you can start
planning and gathering resources.
</p>
</details>
<details>
<summary>
I still have questions…
<img src="img/icons/plus.png" />
</summary>
<p>
Reach out to us at <a class="underline" href="mailto:[email protected]">our email</a>
or on <a class="underline" href="https://www.instagram.com/dandyhacks">our Instagram</a>!
</p>
</details>
</div>
</div>
<div class="relative flex flex-col items-center mb-24 gap-12">
<h2 class="text-5xl">
<div id="sponsors" class="absolute -top-20"></div>
Sponsors
</h2>
<div>
<img class="pointer-events-none" src="img/sponsors_lavender.png" />
<a class="absolute block w-[8%] h-[7%] left-[42%] top-[75%]" href="http://hackp.ac/mlh-StandOutStickers-hackathons" target="_blank"></a>
</div>
</div>
</div>
<footer class="flex gap-8 lg:gap-0 flex-col lg:flex-row items-center justify-between lg:px-24 lg:py-12 lg:bg-groundboi lg:bg-no-repeat lg:bg-center-top lg:bg-[length:344px_auto] text-xl">
<div class="flex flex-col items-center gap-5">
<span class="hidden font-bold lg:inline">[email protected]</span>
<div class="flex gap-2.5 items-center">
<a class="hover:scale-110 transition-transform origin-center" href="mailto:[email protected]"><img src="img/social/mail.svg"></a>
<a class="hover:scale-110 transition-transform origin-center" href="https://www.instagram.com/dandyhacks"><img src="img/social/instagram.svg"></a>
<a class="hover:scale-110 transition-transform origin-center" href="https://www.facebook.com/DandyHacks"><img src="img/social/facebook.svg"></a>
<a class="hover:scale-110 transition-transform origin-center" href="https://twitter.com/dandyhacks"><img src="img/social/twitter.svg"></a>
</div>
</div>
<div class="flex flex-col items-center mb-5 gap-5 lg:mb-0">
<a class="font-bold" href="http://mlh.io/code-of-conduct" target="_blank"><span>MLH Code of Conduct</span></a>
<span>© 2023 DandyHacks</span>
</div>
</footer>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/particles.min.js"></script>
<script src="script.js"></script>
</body>
</html>