forked from hackclub/oasis
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
155 lines (138 loc) · 8.56 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Oasis Hackathon</title>
<link href="./output.css" rel="stylesheet">
<link href="./input.css" rel="stylesheet">
<link rel="stylesheet" href="https://unpkg.com/blocks.css/dist/blocks.min.css" />
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>☀️</text></svg>">
<style>
.gradient-text {
background-clip: text;
-webkit-background-clip: text;
color: transparent;
background-image: linear-gradient(to right, #ed6031c6, #9194ffba);
}
.dropdown-text {
display: none;
font-size: 20px;
background-color: black;
color: white;
padding: 10px;
border-radius: 5px;
}
.button {
text-decoration-style: wavy;
color: #dc4523ba;
text-decoration-line: underline;
text-underline-offset: 2px;
font-weight: 400;
}
.button:hover {
text-decoration-style: wavy;
color: #dc4523;
text-decoration-line: underline;
text-underline-offset: 3px;
font-weight: 600;
}
</style>
</head>
<body class="flex flex-col gap-10">
<navbar class="w-full flex flex-col md:px-[20vw]">
<ul class="flex flex-row justify-between sticky">
<img class="w-1/4" src="public/flag-orpheus-top.png"/>
</ul>
</navbar>
<header class="text-center px-12 md:px-[20vw]">
<h1 class="hero-title">Oasis is a <inline class="title-wave gradient-text">social coding event</inline> hosted in Austin, TX</h1>
</header>
<span class="text-center items-start px-5 md:px-[20vw] text-xl pt-12 md:text-xl">
June 8, 2024 @ <a href="https://futo.org/" class="button">FUTO Headquarters</a> • <p>For girls and gender-diverse students</p>
<br><a href="https://www.gsctx.org/en/sf-events-repository/2024/save-the-date--hack-club-hackathon--c-s-a--6-8-24.html" class="button">Girl Scout Registration</a> •
<button id="public-registration-btn" class="button">Public Registration</button>
</span>
<p id="dropdown-text" class="text-center dropdown-text">Email your interest to [email protected]</p>
<main class="w-full md:px-[20vw] flex flex-col gap-20">
<section class="flex flex-col gap-5">
<span class="font-bold text-2xl md:text-3xl gradient-text">What Are <button class="inline block">"Hackathons" 💻</button></span>
<p class="w-1/2">
A <a href="https://hackclub.com/hackathons/" target="_blank">hackathon</a> is a social coding marathon where teenagers come together to build projects for a weekend and share them with the world. We welcome all high school programmers, artists, dreamers, creators to join us for 8 hours of building, exploring, and sharing.
</p>
<p>
<a href="https://hackclub.com/" target="_blank">Hack Club's</a> <a href="https://daysofservice.hackclub.com//" target="_blank">Days-of-Service</a> initiative aims to help girls and gender minorities write their first lines of code. Partnering with Girls Scouts across the nation, the DOS initiative approaches Computer Science with beginner-friendly workshops.
</p>
</section>
<section class="w-full flex flex-col justify-between gap-5 ">
<span class="font-bold text-2xl md:text-3xl gradient-text">Our Learning <button class="inline block">Tracks 📚</button></span>
<div class="w-full flex flex-col gap-2 p-4">
<span class="font-bold text-xl md:text-xl">Video Game Development 👾</span>
<p>
Join the fun with <a href="https://sprig.hackclub.com/" target="_blank">Sprig Game Engine</a> at our hackathon. With our game console, everyone's a creator. Design, compose music, and build games using our web-based editor. Create your own unique game, and we'll send you a Sprig kit to bring it to life!
</p>
<div class="wrapper block">
<img class="w-5/8" src="public/card.png"/>
</div>
</div>
<div class="w-full flex flex-col gap-2 p-4 rounded-lg">
<span class="font-bold text-xl md:text-xl">Electric Trinkets ✨</span>
<p class="text-base md:text-sm">
Dive into the fun of PCB design with an <a href="https://hackclub.com/onboard/" target="_blank">OnBoard Grant</a> at our hackathon. Create your own custom circuit boards keychains and get them professionally made and delivered right to your door.
</p>
<div class="wrapper block">
<img class="w-5/8" src="public/sprig.png"/>
</div>
</div>
</section>
<section class="w-full flex flex-col gap-5 ">
<span class="font-bold text-2xl md:text-3xl gradient-text">Frequently Asked <button class="inline block">Questions ❓</button></span>
<div class="flex flex-col gap-3 items-center">
<div class="border-2 border-solid border-black">
<div class="border-2 border-solid border-black">
<span class="font-bold text-2xl">✦ Who Can Attend?</span>
<p class="block">
> This event is for teenagers, including Girl Scouts, and all other girls and nonbinary teenagers from the Austin area. Girl Scouts should sign up through the <a href="https://www.gsctx.org/en/sf-events-repository/2024/save-the-date--hack-club-hackathon--c-s-a--6-8-24.html" class="button">Girl Scouts Registration</a>.
All other teenagers interested in attending should email: <a href="mailto:[email protected]">[email protected]</a> and ask to be registered.</p>
<span class="font-bold text-2xl">✦ What if I have never coded before? Can I still come?</span>
<p class="block">
> Of course! Our hackathon is open to all skill levels, including beginners. We'll have workshops and mentors to help you get started and support you throughout the event.
</p>
</div>
</div>
<div class="border-2 border-solid border-black">
<span class="font-bold text-2xl">✦ What should I bring to the hackathon?</span>
<p class="block">
> Bring your enthusiasm, creativity, and a laptop if you have one. Don't worry if you don't have a laptop; we'll do our best to provide resources for everyone.
</p>
</div>
<div class="border-2 border-solid border-black">
<span class="font-bold text-2xl">✦ Is there a team requirement?</span>
<p class="block">
> Teams are encouraged but not mandatory. You can come solo or form a team with friends. If you come solo, we'll help you find teammates with similar interests and skills during the event.
</p>
</div>
<div class="border-2 border-solid border-black">
<span class="font-bold text-2xl">✦ I have more questions ?!</span>
<p class="block">
> If you have any more questions about the event, feel free to email our coordinator <a href="mailto:[email protected]">Nila Palmo Ram</a>.
</p>
</div>
</div>
</section>
<section>
<p class="footer text-center">Made with <button class="inline block">❤</button> + <button class="inline block">✦</button> @ <a href="https://hackclub.com/" target="_blank">Hack Club</a></p>
</section>
</main>
<script>
document.getElementById('public-registration-btn').addEventListener('click', function() {
var dropdownText = document.getElementById('dropdown-text');
if (dropdownText.style.display === 'none' || dropdownText.style.display === '') {
dropdownText.style.display = 'block';
} else {
dropdownText.style.display = 'none';
}
});
</script>
</body>
</html>