-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
178 lines (173 loc) · 11.8 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Code I/O 2024</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<link href="./assets/css/main.css" rel="stylesheet">
</head>
<body>
<header class="navbar bg-dark text-light">
<div class="container d-flex justify-content-center justify-content-sm-between flex-wrap">
<a class="navbar-brand text-light" href="#" style="display: flex; align-items: center;">
<img src="./assets/img/codeio-logo.png" width="15%" class="d-inline-block align-text-top" style="padding-right: 10px; ">
Code I/O 2024
</a>
<ul class="nav nav-underline" role="tablist">
<li class="nav-item" role="presentation">
<a href="#about" class="nav-link active link-light" type="button" role="tab">About</a>
</li>
<li class="nav-item" role="presentation">
<a href="#event_highlights" class="nav-link active link-light" type="button" role="tab">Event Highlights</a>
</li>
<li class="nav-item" role="presentation">
<a href="#workshops" class="nav-link active link-light" type="button" role="tab">Workshops</a>
</li>
<li class="nav-item" role="presentation">
<a href="#schedule" class="nav-link active link-light" type="button" role="tab">Schedule</a>
</li>
<li class="nav-item" role="presentation">
<a href="#sponsors" class="nav-link active link-light" type="button" role="tab">Sponsor</a>
</li>
<li class="nav-item" role="presentation">
<a href="#past_events" class="nav-link active link-light" type="button" role="tab">Past Event Photos</a>
</li>
</ul>
</div>
</header>
<main class="tab-content">
<div class="tab-pane show active" id="home-tab-pane" role="tabpanel" aria-labelledby="home-tab" tabindex="0">
<div class="container my-5">
<div class="p-5 text-center bg-body-tertiary rounded-3">
<img src="./assets/img/codeio-logo.png" width="30%" class="d-inline-block align-text-top" style=" border-radius: 10%; border: 3px solid #000;">
<p class="col-lg-8 mx-auto fs-5 text-muted" style="padding-top: 30px;">
Code I/O is a one-day hackathon designed for middle schoolers, offering a platform for both coding enthusiasts and beginners.
</p>
<p class="col-lg-8 mx-auto fs-6 text-muted">
Saturday, March 2nd, 2024 9:00AM to 6:00PM <br>
Dreese Laboratories
</p>
<a class="btn btn-primary btn-lg px-4 rounded-pill" type="button" href="https://go.osu.edu/codeio2024">
Register
</a>
</div>
</div>
<div class="container">
<div class="container my-5 bg-body-tertiary rounded-3">
<section id="about" style="padding: 40px;">
<h2>About</h2>
<p>
Presented by <a href="https://hack.osu.edu">OHI/O</a> and <a href="https://www.yforse.org/">Youth for STEM Equity</a>, Code I/O features a coding STEM Escape Room, immersive problem-solving experiences, drone demonstrations, and resources for hands-on exploration of real-world challenges with guidance from industry professionals. Prior to the main event, two workshops will be conducted to familiarize participants with hackathon dynamics and introduce coding fundamentals like Java, HTML, Scratch, and Binary code. This initiative aims to inspire curiosity, foster collaboration, and open doors to coding opportunities. Join Code I/O for a day of learning, creativity, and technological exploration. Register now to be part of this enriching experience.
</p>
<p>
<strong>Eligibility:</strong> Code I/O is open to all middle school students, regardless of coding experience. Whether you're a coding prodigy or a beginner, Code I/O welcomes you!
</p>
</section>
</div>
<div class="container my-5 bg-body-tertiary rounded-3">
<section id="event_highlights" style="padding: 40px;">
<h2>Event Highlights</h2>
<p>
<ul>
<li>
<strong>STEM escape room: Crack the code!</strong> Embark on a thrilling coding journey in our STEM Escape Room. Solve puzzles, unravel challenges, and experience the excitement of coding in an interactive escape room setting.
</li>
<li>
<strong>Drone demonstrations: Soar into the future of tech!</strong> Watch drones take flight and explore the fascinating world of aerial technology. Engage in drone demonstrations that showcase the principles of flight, navigation, and innovation.
</li>
<li>
<strong>Industry problem-solving: Hackathon.</strong> Tackle real-world challenges with hands-on industry problem-solving sessions. Collaborate with peers to devise innovative coding solutions and discover the impact of technology on various industries.
</li>
<li>
<strong>Opportunities to obtain more coding experiences.</strong> Network with industry professionals and other students who will provide guidance on your coding journey. Explore potential avenues to enhance your coding skills and pursue your passion for technology via resources regarding research, internships, and learning guides.
</li>
</ul>
</p>
</section>
</div>
<div class="container my-5 bg-body-tertiary rounded-3">
<section id="workshops" style="padding: 40px;">
<h2>Workshops</h2>
<p>
<ol>
<li>
<strong>Introduction to hackathons.</strong> Learn the ropes of hackathons, understand the dynamics, and get ready to dive into Code I/O with confidence!
</li>
<li>
<strong>Coding Essentials (Java, HTML, Scratch, Binary).</strong> Delve into the fundamentals of coding with expert-led workshops covering Java, HTML, Scratch, and Binary code. Perfect for both beginners and those looking to expand their coding skills.
</li>
</ol>
</p>
</section>
</div>
<style>
</style>
<div class="container my-5 bg-body-tertiary rounded-3" style="margin: 5% auto; padding: 20px; background-color: #f8f9fa; border-radius: 15px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);">
<section id="schedule" style="padding: 40px;">
<h2>Schedule</h2>
<table class="schedule-table" style="width: 100%; border-collapse: collapse; margin-top: 20px;">
<tr>
<td style="width: 20%; font-weight: bold; padding: 15px; border: 1px solid #343a40; background-color: #343a40; color: #ffffff;">
Time
</td>
<td style="width: 40%; font-weight:bold; padding: 15px; border: 1px solid #343a40; background-color: #343a40; color: #ffffff;">
Event
</td>
</tr>
<tr>
<td style="padding: 15px; border: 1px solid #dee2e6;">9:00am - 9:30am</td>
<td style="padding: 15px; border: 1px solid #dee2e6;">Check-In</td>
</tr>
<tr>
<td style="padding: 15px; border: 1px solid #dee2e6;">9:45am - 11:45am</td>
<td style="padding: 15px; border: 1px solid #dee2e6;">Hack-a-Thon Introduction & Lecture</td>
</tr>
<tr>
<td style="padding: 15px; border: 1px solid #dee2e6;">12:00pm - 1:00pm</td>
<td style="padding: 15px; border: 1px solid #dee2e6;">Tech STEMscape</td>
</tr>
<tr>
<td style="padding: 15px; border: 1px solid #dee2e6;">1:00pm - 2:00pm</td>
<td style="padding: 15px; border: 1px solid #dee2e6;">Lunch and Drone Demo</td>
</tr>
<tr>
<td style="padding: 15px; border: 1px solid #dee2e6;">3:00pm - 5:00pm</td>
<td style="padding: 15px; border: 1px solid #dee2e6;">Independent Hacking</td>
</tr>
<tr>
<td style="padding: 15px; border: 1px solid #dee2e6;">5:15pm - 6:00pm</td>
<td style="padding: 15px; border: 1px solid #dee2e6;">Awards and Wrap Up</td>
</tr>
</table>
</section>
</div>
<div class="container my-5 bg-body-tertiary rounded-3">
<section id="sponsors" style="padding: 40px;">
<h2>Sponsored By:</h2>
<p style="text-align: center; padding: 10px;">
<img src=".\assets\img\vz-2_rgb_p.png" alt= "Verizon Sponsor" width="75%" style="padding: 20px;">
</p>
</section>
</div>
<div class="container my-5 bg-body-tertiary rounded-3">
<section id="past_events" style="padding: 40px;">
<h2>Past Event Photos</h2>
<p style="text-align: center; padding: 10px;">
<img src=".\assets\img\photo1_2023.jpg" alt= "2023 Event Photo" width="75%" style="padding: 20px;">
<img src=".\assets\img\photo2_2023.jpg" alt= "2023 Event Photo" width="75%" style="padding: 20px;">
<img src=".\assets\img\photo3_2023.png" alt= "2023 Event Photo" width="75%" style="padding: 20px;">
</p>
</section>
</div>
</div>
</div>
</main>
<footer class="footer mt-auto bg-body-tertiary">
<div class="container py-5">
<span class="text-body-secondary">© 2024 OHI/O.</span>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
</body>
</html>