spaceapps/index.html at main · CUHackers/spaceapps · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>NASA Space Apps Clemson 2025</title>
    <link rel="icon" type="image/png" href="branding/favicon.png">

    <!-- tailwind css: https://tailwindcss.com -->
    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

    <!-- something something responsive -->

    <!-- fira sans font for titles and overpass font for body text -->
    <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=Fira+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Overpass:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">

    <!-- style classes to use fonts -->
    <style>
        .fira-sans-black {
            font-family: "Fira Sans", sans-serif;
            font-weight: 900;
            font-style: normal;
        }

        body {
            font-family: "Overpass", sans-serif;
            font-optical-sizing: auto;
            font-style: normal;
        }

        a {
            text-decoration: underline;
        }
    </style>
</head>
<body class="bg-white text-gray-900 m-0">
    <!-- header has buttons for about, schedule, sponsors, faq, organizers, contact -->
    <header>
        <nav class="text-white p-4" style="background-color: #07173F;">
            <div class="container mx-auto flex flex-col md:flex-row flex-wrap md:justify-between">
                <!-- space apps clemson logo -->
                <img src="branding/white-logo-1.png" class="md:pl-4 w-3xs mx-auto md:mx-0" style="height: auto;">

                <!-- navigation bar items -->
                <div class="space-x-4 flex flex-row flex-wrap md:flex-nowrap text-center md:my-auto mx-auto md:mx-0 pt-4 md:pt-0">
                    <a href="#about" class="hover:underline">About</a>
                    <a href="#schedule" class="hover:underline">Schedule</a>
                    <a href="#organizers" class="hover:underline">Organizers</a>
                    <a href="#faq" class="hover:underline">FAQ</a>
                    <a href="#contact" class="hover:underline md:mx-auto md:mr-10">Contact</a>
                </div>
            </div>
        </nav>
    </header>

    <!-- page title and background image -->
    <div id="title" class="md:px-40 py-40 text-center text-white font-bold"
        style="background: url(assets/nebula.jpg), linear-gradient(to left top, #07173F, #0042A6); backdrop-filter: blur(50%);">
        <p class="text-5xl fira-sans-black">NASA Space Apps Challenge</p>
        <p class="text-3xl fira-sans-black pt-3">Clemson 2025</p><br><br>

        <p class="text-2xl px-4 md:px-0">
            October 4th & 5th, 2025 at
            Wilbur O. and Ann Powers College of Business
        </p>
        <a href="https://www.spaceappschallenge.org/2025/local-events/clemson/" class="underline text-2xl">Register here!</a>
    </div>

    <!-- information about the hackathon -->
    <div id="about" class="m-4">
        <p class="text-2xl text-center m-3 fira-sans-black">About</p>

        <!-- lowkey no idea what most of this does -->
        <div class="flex flex-row flex-wrap justify-center m-4">
            <div class="md:max-w-md text-center my-auto m-3 p-3 bg-gray-200 rounded shadow-lg align-middle">
                <h3 class="text-center text-lg font-bold">NASA Space Apps Challenge</h3>
                <p>
                    The NASA Space Apps Challenge is the largest annual global hackathon, where participants use open
                    datasets from NASA and other space agency partners to address the challenges we face both on Earth
                    and in space.
                </p>
                <p class="pt-4">
                    More info is available on <a href="https://www.spaceappschallenge.org/">their website</a>.
                </p>
            </div>
            <img class="rounded md:max-w-sm m-4" style="height:auto;" src="assets/spaceapps-1.jpg">
            <div class="md:max-w-md text-center my-auto m-3 p-3 rounded shadow-lg bg-gray-200">
                <h3 class="text-center text-lg font-bold">Space Apps in Clemson</h3>
                <p>
                    The event will be held in the
                    <a href="https://maps.app.goo.gl/3zAxQrwbBi2D6Nam6">Wilbur O. and Ann Powers College of Business</a>
                    on the campus of Clemson University and open to all
                    community members who are interested.
                </p>
                <p class="pt-4">
                    Logistics information such as parking will be available soon to registered participants.
                </p>
            </div>
    </div>

    <!-- schedule for the event -->
    <div id="schedule">
        <p class="text-2xl text-center m-3 fira-sans-black pt-4 md:pt-0">Event Schedule</p>
        <p class="text-center">
            The hackathon will be hosted in the
            <a href="https://maps.app.goo.gl/3zAxQrwbBi2D6Nam6">Wilbur O. and Ann Powers College of Business</a>
            on the Clemson University campus.
        </p>

        <div class="container flex flex-wrap justify-center">
            <div class="m-3 p-3 rounded shadow-lg md:min-w-lg text-white" style="background-color: #0042A6;">
                <p class="text-lg text-center font-bold">Day One</p>
                <p class="text-center">October 4th, 2025</p>
                <p class="pt-5 text-center italic">Coming soon!</p>
            </div>
            <div class="m-3 p-3 rounded shadow-lg md:min-w-lg text-white" style="background-color: #0042A6;">
                <p class="text-lg text-center font-bold">Day Two</p>
                <p class="text-center">October 5th, 2025</p>
                <p class="pt-5 text-center italic">Coming soon!</p>
            </div>
        </div>
    </div>

    <!-- list of sponsors by tier -->
    <div id="sponsors">
        <p class="text-2xl text-center m-3 fira-sans-black">Sponsors</p>
        <div class="text-center md:max-w-lg mx-auto rounded overflow-hidden shadow-lg p-3 m-3 bg-gray-200">
            <h3 class="text-lg font-bold">Becoming a sponsor</h3>
            <p>
                Interested in sponsoring? Send us an email at <a href="mailto:cuhackers@g.clemson.edu">cuhackers@g.clemson.edu</a>
                or reach out to one of our <a href="#organizers">organizers</a>.
            </p>
        </div>
    </div>

    <!-- organizing team from cuhackit -->
    <div id="organizers">
        <p class="text-2xl text-center m-3 fira-sans-black pt-4">Local Organizers</p>

        <div class="flex flex-row flex-wrap justify-center">
            <img class="rounded md:max-w-sm m-4" style="height:auto;" src="assets/organizers.jpg">
            <div class="max-w-xl text-center my-auto m-3 p-3 bg-gray-200 rounded shadow-lg align-middle">
                <h3 class="text-center text-lg font-bold">Brought to you by CUhackit</h3>
                <p>
                    The NASA Space Apps Challenge event in Clemson is organized by the Clemson University students behind
                    <a href="https://cuhack.it/">CUhackit</a>, South Carolina's largest annual hackathon. We also organize
                    <a href="http://helloworld.cuhack.it/">Hello World</a>, Clemson's annual freshman hackathon, and
                    <a href="https://bothohacks.org/">BothoHacks</a>, a Botswana-wide hackathon in collaboration with
                    Botho University.
                </p>
            </div>
        </div>

        <div id="exec-cards" class="flex flex-wrap px-auto m-10 justify-center">
            <div class="max-w-md min-w-3xs rounded overflow-hidden shadow-lg p-3 m-3 text-white" style="background-color: #0042A6;">
                <p class="text-center font-bold">Local Lead, Co-Director</p>
                <p class="text-center">
                    Malia Fairbanks <br> <a href="mailto:mfairba@clemson.edu">mfairba@clemson.edu</a>
                </p>
            </div>

            <div class="max-w-md min-w-3xs rounded overflow-hidden shadow-lg p-3 m-3 text-white" style="background-color: #0042A6;">
                <p class="text-center font-bold">Co-Director</p>
                <p class="text-center">
                    Hazel Torek <br> <a href="mailto:ctorek@clemson.edu">ctorek@clemson.edu</a>
                </p>
            </div>

            <div class="max-w-md min-w-3xs rounded overflow-hidden shadow-lg p-3 m-3 text-white" style="background-color: #0042A6;">
                <p class="text-center font-bold">Logistics Lead</p>
                <p class="text-center">
                    Christina Foley <br> <a href="mailto:cmfoley@clemson.edu">cmfoley@clemson.edu</a>
                </p>
            </div>

            <div class="max-w-md min-w-3xs rounded overflow-hidden shadow-lg p-3 m-3 text-white" style="background-color: #0042A6;">
                <p class="text-center font-bold">Public Relations Lead</p>
                <p class="text-center">
                    Varun Sethi <br> <a href="mailto:vsethi@clemson.edu">vsethi@clemson.edu</a>
                </p>
            </div>

            <div class="max-w-md min-w-3xs rounded overflow-hidden shadow-lg p-3 m-3 text-white" style="background-color: #0042A6;">
                <p class="text-center font-bold">Partnerships Lead</p>
                <p class="text-center">
                    Kevius Tribble <br> <a href="mailto:jjtribb@clemson.edu">jjtribb@clemson.edu</a>
                </p>
            </div>

            <div class="max-w-md min-w-3xs rounded overflow-hidden shadow-lg p-3 m-3 text-white" style="background-color: #0042A6;">
                <p class="text-center font-bold">Finance Lead</p>
                <p class="text-center">
                    Uzayr Syed <br> <a href="mailto:usyed@clemson.edu">usyed@clemson.edu</a>
                </p>
            </div>

            <div class="max-w-md min-w-3xs rounded overflow-hidden shadow-lg p-3 m-3 text-white" style="background-color: #0042A6;">
                <p class="text-center font-bold">Faculty Advisor</p>
                <p class="text-center">
                    Jacob Sorber, Ph.D. <br> <a href="mailto:jsorber@clemson.edu">jsorber@clemson.edu</a>
                </p>
            </div>

            <div class="max-w-md min-w-3xs rounded overflow-hidden shadow-lg p-3 m-3 text-white" style="background-color: #0042A6;">
                <p class="text-center font-bold">Faculty Advisor</p>
                <p class="text-center">
                    Carrie Russell, M.S. <br> <a href="mailto:crusse4@clemson.edu">crusse4@clemson.edu</a>
                </p>
            </div>
        </div>
    </div>

    <!-- frequently asked questions -->
    <div id="faq">
        <p class="text-2xl text-center m-3 fira-sans-black pt-4 md:pt-0">Frequently Asked Questions</p>
        <div class="flex flex-row flex-wrap justify-center gap-5">
            <!-- what is a hackathon-->
            <div class="max-w-md text-center p-3 bg-gray-200 rounded shadow-lg align-middle">
                <h3 class="text-center text-lg font-bold">What is a hackathon?</h3>
                <p>
                    A hackathon is an event where teams of people collaborate to build a solution to one of
                    provided challenges for the duration of the event.
                    They're a great way to improve on your skills, meet new people,
                    and compete for a chance to win prizes!
                </p>
            </div>

            <!-- who is spaceapps clemson for -->
            <div class="max-w-md text-center p-3 bg-gray-200 rounded shadow-lg align-middle">
                <h3 class="text-center text-lg font-bold">Who is Space Apps Clemson for?</h3>
                <p>
                    The NASA Space Apps Challenge Clemson is open to <b>everyone</b>, regardless of skill level or
                    Clemson University enrollment. Note that those under the age of 18 must be accompanied by a parent
                    or guardian at all times.
                </p>
            </div>

            <!-- costs -->
            <div class="max-w-md text-center p-3 bg-gray-200 rounded shadow-lg align-middle">
                <h3 class="text-center text-lg font-bold">How much does it cost?</h3>
                <p>
                    Thanks to the support of our amazing sponsors for this event and the NASA Space Apps Challenge Global Organizing team,
                    this event is <b>completely free</b> for our competitors!
                </p>
            </div>

            <!-- prior experience -->
            <div class="max-w-md text-center my-auto m-3 p-3 bg-gray-200 rounded shadow-lg align-middle">
                <h3 class="text-center text-lg font-bold">Do I need prior experience!</h3>
                <p>
                    Not at all! We will have workshops at the event to introduce participants to topics that might be helpful
                    for their projects.
                </p>
            </div>
        </div>
    </div>

    <!-- contact info for hackathon -->
    <div id="contact" class="flex flex-row flex-wrap justify-center m-4">
        <div class="max-w-xl text-center my-auto m-3 p-3 bg-gray-200 rounded shadow-lg align-middle">
            <h3 class="text-center text-lg font-bold">Contact</h3>
            <p>
                Questions that weren't answered here? Feel free to reach out to any of the organizers listed
                <a href="#organizers">above</a> or to send an email to all of us at <a href="#">cuhackers@g.clemson.edu</a>.
            </p>
            <p class="pt-4">
                If you have questions about the global NASA Space Apps Challenge, you can find more information on
                <a href="https://www.spaceappschallenge.org/">their website</a>.
            </p>
        </div>
        <img class="rounded md:max-w-sm m-4" style="height:auto;" src="assets/spaceapps-2.jpg">
    </div>

    <!-- footer with social media -->
    <footer>
        <div class="container flex flex-wrap justify-between p-4 text-white" style="background-color: #07173F;">
            <!-- space apps clemson logo -->
            <img src="branding/white-logo-1.png" class="md:pl-4 w-3xs mx-auto md:mx-0" style="height:auto;">

            <!-- navigation bar items -->
            <div class="space-x-6 flex flex-row content-center mx-auto md:mx-0 mt-4 md:mt-0">
                <a href="mailto:cuhackers@g.clemson.edu" class="my-auto">
                    <img src="icons/envelope.svg">
                </a>
                <a href="https://github.com/cuhackers" class="my-auto">
                    <img src="icons/github-logo.svg">
                </a>
                <a href="https://www.linkedin.com/company/cuhackit" class="my-auto">
                    <img src="icons/linkedin-logo.svg">
                </a>
                <a href="https://www.instagram.com/cuhackit/" class="my-auto">
                    <img src="icons/instagram-logo.svg">
                </a>
                <a href="https://www.tiktok.com/@cuhackit" class="my-auto md:mr-10">
                    <img src="icons/tiktok-logo.svg">
                </a>
            </div>
        </div>
    </footer>
</body>
</html>