-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
208 lines (183 loc) · 13.6 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Woodson Science Olympiad</title>
<link rel="icon" type="image/x-icon" href="./assets/genetics-rotated.png">
<!-- Styling -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<link rel="stylesheet" href="./css/style.css">
<link rel="stylesheet" href="./css/index.css">
<link rel="stylesheet" href="./css/queries.css">
<!-- 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=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Karla&display=swap" rel="stylesheet">
<!-- Icons -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
</head>
<body>
<!-- ---------------- BIG NAVBAR ---------------- -->
<nav class="navbar sticky-top navbar-expand-md d-none d-md-block" id="big-navbar">
<div class="container-fluid" id="big-fluid">
<ul class="navbar-nav me-auto mb-2 mb-lg-0" id="big-navlist">
<li class="nav-item big-nav-item" id="big-0">
<a class="nav-link" href="/">Home</a>
<div class="nav-decor" id="decor-0"></div>
</li>
<li class="nav-item big-nav-item" id="big-1">
<a class="nav-link" href="team">The Team</a>
<div class="nav-decor" id="decor-1"></div>
</li>
<li class="nav-item big-nav-item" id="big-2">
<a class="nav-link" href="leadership">Leadership</a>
<div class="nav-decor" id="decor-2"></div>
</li>
<li class="nav-item big-nav-item" id="big-3">
<a class="nav-link" href="tryouts">Tryouts</a>
<div class="nav-decor" id="decor-3"></div>
</li>
<li class="nav-item big-nav-item" id="big-4">
<a class="nav-link" href="contribute">Contribute</a>
<div class="nav-decor" id="decor-4"></div>
</li>
</ul>
</div>
</nav>
<!-- ---------------- SMALL NAVBAR ---------------- -->
<nav class="navbar sticky-top d-md-none" id="small-navbar">
<div class="container-fluid">
<span class="material-symbols-outlined" id="navbar-small-icon">genetics</span>
<a class="navbar-brand" href="/" id="small-navbar-brand">Woodson Scioly</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="material-symbols-outlined" id="small-toggle-button">menu</span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item"><a class="nav-link nav-link-small" href="/">Home</a></li>
<li class="nav-item"><a class="nav-link nav-link-small" href="team">The Team</a></li>
<li class="nav-item"><a class="nav-link nav-link-small" href="leadership">Leadership</a></li>
<li class="nav-item"><a class="nav-link nav-link-small" href="tryouts">Tryouts</a></li>
<li class="nav-item"><a class="nav-link nav-link-small" href="contribute">Contribute</a></li>
</ul>
</div>
</div>
</nav>
<div id="landing-container">
<canvas id="canvas"></canvas>
<div id="landing-title">
<h1 class="title-text" id="landing-main">Woodson Science Olympiad</h1>
<h5 class="title-text" id="subtitle">Pioneers in science, engineering, and inter-disciplinary exploration</h5>
<a href="#main" id="intro-link">Learn More</a>
</div>
</div>
<!-- ---------------- MAIN BODY ---------------- -->
<div id="main">
<div class="main-section">
<h2 class="section-title">About Us</h2>
<div class="section-title-decor"></div>
We are <b>W. T. Woodson High School's</b> official Science Olympiad team. Our <b>three teams of 15 competitors</b> attend tournaments around the region, challenging teams of other schools in various science-related events. Being Woodson's most <b>competitive</b> and <b>rewarding</b> extracurricular activity, we encourage all students students to try out - fill out our <a href="https://forms.gle/9r478SqCtdAfuWBr7" class="inline-link">interest form</a> if you're thinking about joining! To learn about the application process, head over to our <a href="./tryouts" class="inline-link">Tryouts page</a>.
</div>
<div class="main-section">
<h2 class="section-title">What is Science Olympiad?</h2>
<div class="section-title-decor"></div>
<div class="row what-is-row">
<div class="col-xs-2 col-sm-2 col-md-1 col-lg-1 what-is-icon"><span class="material-symbols-outlined body-icon">science</span></div>
<div class="col-xs-10 col-sm-10 col-md-11 col-lg-11"><b>Events: </b>Science Olympiad consists of <b>23 events</b> that cover various topics ranging from chemistry, earth earth science, electrical engineering, and more. As a former Woodson Scioly president said, it's like a <b>track meet</b> for science nerds!</div>
</div>
<div class="row what-is-row">
<div class="col-xs-2 col-sm-2 col-md-1 col-lg-1 what-is-icon"><span class="material-symbols-outlined body-icon">draw</span></div>
<div class="col-xs-10 col-sm-10 col-md-11 col-lg-11"><b>Preparation: </b>There are different types of events. For <b>study events</b>, you make a binder or a cheat sheet. For <b>builds</b>, you construct a physical machine. For <b>labs</b> or <b>hybrids</b>, you study and prepare for a hands-on examination.</div>
</div>
<div class="row what-is-row">
<div class="col-xs-2 col-sm-2 col-md-1 col-lg-1 what-is-icon"><span class="material-symbols-outlined body-icon">social_leaderboard</span></div>
<div class="col-xs-10 col-sm-10 col-md-11 col-lg-11"><b>Competition: </b>Schools and universities around the country hold tournaments. We've been to invitationals at the <b>National Cathedral</b>, <b>Princeton</b>, and <b>Yale</b>. The States tournament we attend every year is held at the <b>University of Virginia.</b></div>
</div>
</div>
<div class="main-section">
<h2 class="section-title">Why Compete</h2>
<div class="section-title-decor"></div>
<ul>
<li class="why-bullet"><b>Medals: </b>At every tournament, competitors have the opportunity to earn medals for their events. Last season, our teams earned <b>54</b> medals!</li>
<li class="why-bullet"><b>Traveling: </b>Science Olympiad tournaments are a great opportunity to visit cool places, especially because renowed universities are known to hold tournaments. Running around campus to find your next event can be a great way to tour colleges like UVA and Princeton!</li>
<li class="why-bullet"><b>Fun with the team: </b>When we're not competing, we're enjoying ourselves. Team members get to enjoy eating and goofing off with each other - just ask our competitors who came to our water balloon party this year. </li>
<li class="why-bullet"><b>Finding your fit: </b>Each competitor can find and compete in the event that fulfills them the most. People can choose between event formats as well - options include binder events, sheet events, labs, hybrids, and builds. Topics are broad as well, ranging from electrical engineering to chemistry to remote sensing. </li>
</ul>
</div>
<div class="main-section">
<h2 class="section-title">What our Members Say</h2>
<div class="section-title-decor"></div>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
<div class="row">
<div class="quote-container">
<div class="quote-box row">
<div class="quotation-mark quotation-mark-top col-1"><i class="bi bi-quote"></i></div>
<div class="quote-text col-10">I love Woodson Scioly almost as much as I love winning medals.</div>
<div class="quotation-mark quotation-mark-bottom col-1"><i class="bi bi-quote"></i></div>
</div>
</div>
<div class="quote-container">
<div class="quote-box row">
<div class="quotation-mark quotation-mark-top col-1"><i class="bi bi-quote"></i></div>
<div class="quote-text col-10">Being part of the program allows me to pursue my passion for science & engineering. Thanks to Science Olympiad, I have had many opportunities to explore my true interests in a way that's really rewarding.</div>
<div class="quotation-mark quotation-mark-bottom col-1"><i class="bi bi-quote"></i></div>
</div>
</div>
<div class="quote-container">
<div class="quote-box row">
<div class="quotation-mark quotation-mark-top col-1"><i class="bi bi-quote"></i></div>
<div class="quote-text col-10">Science Olympiad is a gateway for many opportunities, and it itself is an amazing opportunity.</div>
<div class="quotation-mark quotation-mark-bottom col-1"><i class="bi bi-quote"></i></div>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
<div class="row">
<div class="quote-container">
<div class="quote-box row">
<div class="quotation-mark quotation-mark-top col-1"><i class="bi bi-quote"></i></div>
<div class="quote-text col-10">Woodson Scioly is about much more than studying and taking tests. We ate, traveled, watched the World Cup, and played basketball last season too. I hope future members will enjoy it as much as I did last season.</div>
<div class="quotation-mark quotation-mark-bottom col-1"><i class="bi bi-quote"></i></div>
</div>
</div>
<div class="quote-container">
<div class="quote-box row">
<div class="quotation-mark quotation-mark-top col-1"><i class="bi bi-quote"></i></div>
<div class="quote-text col-10">Mrs. Babcock's room is super nice and cozy, and the back is always overflowing with Scioly materials.</div>
<div class="quotation-mark quotation-mark-bottom col-1"><i class="bi bi-quote"></i></div>
</div>
</div>
<div class="quote-container">
<div class="quote-box row">
<div class="quotation-mark quotation-mark-top col-1"><i class="bi bi-quote"></i></div>
<div class="quote-text col-10">I'm sorry I don't know the ethnicities of corn.</div>
<div class="quotation-mark quotation-mark-bottom col-1"><i class="bi bi-quote"></i></div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer class="py-3 my-4" id="footer-main">
<div class="navbar-link-container" id="footer-icons">
<a href="mailto:woodsonscioly@gmail.com" class="footer-icon"><i class="bi bi-envelope-at"></i></a>
<a href="https://www.instagram.com/woodsonscioly/" class="footer-icon"><i class="bi bi-instagram"></i></a>
<a href="https://www.github.com/i30101/woodsonscioly" class="footer-icon"><i class="bi bi-github"></i></a>
</div>
<hr/>
<p class="text-center text-muted" id="copyright">© 2024 Woodson Science Olympiad <br> Website by Andrew Kim </p>
</footer>
</div>
<!-- ---------------- SCRIPTS ---------------- -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="./js/animate.js"></script>
<script src="./js/live-background.js"></script>
</body>
</html>