-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathhome.html
More file actions
339 lines (324 loc) · 19.3 KB
/
Copy pathhome.html
File metadata and controls
339 lines (324 loc) · 19.3 KB
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
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Swingtime</title>
<link rel="icon" href="favicon.ico">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<nav id="header" class="navbar navbar-expand-sm justify-content-between transition">
<div id="mini-logo"></div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#links" aria-controls="links" aria-expanded="false" aria-label="Toggle navigation">
<span class="fas fa-bars"></span>
</button>
<div id="links" class="collapse navbar-collapse justify-content-end">
<ul class="navbar-nav align-items-end">
<li class="nav-item"><a id="about" href="#about">about</a></li>
<!--
During auditions season, move the auditions near the front of the homepage,
right after 'About'
-->
<li class="nav-item"><a id="auditions" href="#auditions">auditions</a></li>
<li class="nav-item"><a id="booking" href="#booking">booking</a></li>
<li class="nav-item"><a id="members" href="#members">members</a></li>
<!---->
<!-- <li class="nav-item"><a id="auditions" href="#auditions">auditions</a></li> -->
<li class="nav-item"><a id="contact" href="#contact">contact</a></li>
<li class="nav-item"><a id="facebook" href="https://www.facebook.com/stanfordswingtime?fref=ts" target=\ "_blank\">
facebook</a></li>
<li class="nav-item"><a id="memory_lane" href="#memory_lane">memory lane</a></li>
</ul>
</div>
</nav>
<div id="banner">
<div id="banner-contents">
<div id="st">SWINGTIME:</div>
<div class="clear-inline"></div>
<div id="desc">Stanford's premiere swing dance performance troupe</div>
</div>
</div>
<div id="content">
<div class="container">
<div class="info">
<h1 name="about"><span class="line"></span>ABOUT<span class="line"></span></h1>
<div class="row">
<div class="col-lg-5 col-xl-4">
<img id="star-img" class="img-fluid" src="/images/star.jpg">
</div>
<div class="col-lg-7 col-xl-8">
<h3>Swingtime is Stanford's premiere performance-based swing dance troupe.</h3>
<p>Our specialty is Savoy-style Lindy Hop, a style of swing born in late-'20s Harlem. We work with professional choreographers, dance historians, and dance legends to recreate swing-era dances and integrate current trends.</p>
<br>
<p>Swingtime's repertoire ranges from smooth swing with sleek moves to fast-paced Lindy Hop with jaw-dropping aerials. We are continually pressing the limits of how smooth, fast, and high we can go!</p>
<br>
</div>
</div>
</div>
<!-- This section can be used to replace the other auditions section during the weeks before auditions -->
<!-- <div class="info">
<h1 name="auditions"><span class="line"></span>AUDITIONS<span class="line"></span></h1>
<div class="row">
<div class="col-12">
<h3 class="text-center">Join us for the experience of a lifetime this year!</h3>
<p>
Now is your time! Come audition for Swingtime - we are Stanford's sensational swing dance performance troupe.
You will join a fun and tight-knit family, perform stylish swing choreography for big audiences, and best of all,
find a new passion to pursue at Stanford and beyond. (Extra perk: we also get to perform in classic costumes!)
</p>
<p>Think you have what it takes? Even if you're not sure, come and try out anyway!
When we say <strong>no experience necessary</strong>, we mean it. Swingtime members are
chosen for attitude as much as aptitude – many of our current members had never danced before. As a bonus,
you'll learn part of an actual Swingtime choreo!
</p>
<br>
<h3 class="text-center">2024 Audition Dates </h3>
<p class="text-center">
<strong>Saturday 09/28, 2:00-5:00pm, Roble Arts Gym 113</strong>
<br>
with
<br>
<strong>Callbacks: Sunday 9/29, 2:00-5:00pm, Roble Arts Gym 113</strong>
<br>
<br>
</p>
<p class="text-center"> Can't make it? Fill out this
<u><a href="https://docs.google.com/forms/d/e/1FAIpQLSd0kRoR3B2EZvlTJx_HRnNXFw1v8p8FvOeMMrjGNJRqodZQwQ/viewform">form</a></u>
to request a spot at makeup auditions!
</p>
<p class="text-center">
No experience is necessary - all you need is a pair of socks (or dance shoes)!
</p>
<br>
<br>
<p class="text-center">
NEED MORE CONVINCING?
Check out this 60-second highlight video or previous performances on our Youtube channel!
</p>
<div>
<div class="video-responsive">
<iframe width="560" height="315" src="https://www.youtube.com/embed/8fBRyV_OMY4?si=xNlIt5bT9PMN9AHb" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
</div>
</div> -->
<div class="info">
<h1 name="booking"><span class="line"></span>BOOKING<span class="line"></span></h1>
<div class="row">
<div class="col-lg-5 col-xl-4">
<h3>We bring the party.</h3>
<p>Want to jazz up your company party or dance showcase? We love doing gigs of all kinds. Options including choreographies, swing dancing lessons, or both.</p>
<br>
<p>Our pieces range from cute and cheery to smooth and jazzy, so if you're looking to set a particular mood, we're happy to help!</p>
<br>
<p>For booking or general enquiries, please e-mail us at <a class="contact-link" href="email">email</a>.</p>
<br>
</div>
<div class="col-lg-7 col-xl-8">
<!-- Uses Bootstrap Carousel Plugin -->
<div name="photo-gallery" id="photo-carousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#photo-carousel" data-slide-to="0" class="active"></li>
<li data-target="#photo-carousel" data-slide-to="1"></li>
<li data-target="#photo-carousel" data-slide-to="2"></li>
<li data-target="#photo-carousel" data-slide-to="3"></li>
<li data-target="#photo-carousel" data-slide-to="4"></li>
<li data-target="#photo-carousel" data-slide-to="5"></li>
<li data-target="#photo-carousel" data-slide-to="6"></li>
<li data-target="#photo-carousel" data-slide-to="7"></li>
<li data-target="#photo-carousel" data-slide-to="8"></li>
<li data-target="#photo-carousel" data-slide-to="9"></li>
<li data-target="#photo-carousel" data-slide-to="10"></li>
<li data-target="#photo-carousel" data-slide-to="11"></li>
<li data-target="#photo-carousel" data-slide-to="12"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="carousel-item active slide0"></div>
<div class="carousel-item slide1"></div>
<div class="carousel-item slide2"></div>
<div class="carousel-item slide3"></div>
<div class="carousel-item slide4"></div>
<div class="carousel-item slide5"></div>
<div class="carousel-item slide6"></div>
<div class="carousel-item slide7"></div>
<div class="carousel-item slide8"></div>
<div class="carousel-item slide9"></div>
<div class="carousel-item slide10"></div>
<div class="carousel-item slide11"></div>
<div class="carousel-item slide12"></div>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#photo-carousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#photo-carousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<h5 class="testimonial">“Our guests were… delighted by your youthful and exuberant dancing! Drawing everyone onto the dance floor after your show for a group swing dance lesson was also a huge success.”</h5>
<h6 class="testimonial-name">– Jill Olson</h6>
</div>
</div>
<div class="row">
<div class="col-lg-8">
<div class="video-responsive">
<iframe width="560" height="315" src="https://www.youtube.com/embed/QNClzhK_mHA?si=wYQLaGQYoLbdVi8Q" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
</div>
<div class="col-lg-4">
<h3>See us in action.</h3>
<p>Check out our <a href="//www.youtube.com/user/swingtimedancetroupe">YouTube Channel</a>, where you can find a compilation of performance videos.</p>
<br>
<p>Alternatively, check out our <a href="#photo-gallery">photo gallery</a> above for pictures of us in action!</p>
</div>
</div>
<!--
List of Past Gigs
I don't think anyone wants to maintain this so I removed it. If anyone feels like it
should be added back, feel free to do so!
<div class="row" id="past-gigs">
<div class="col-12">
<h3 class="text-center">Check out our past gigs.</h3>
</div>
<h5 class="year" id="2009">2009</h5>
<h5 class="year" id="2010">2010</h5>
<h5 class="year" id="2011">2011</h5>
<h5 class="year" id="2012">2012</h5>
<h5 class="year" id="2013">2013</h5>
<h5 class="year" id="2014">2014</h5>
<h5 class="year" id="2015">2015</h5>
<h5 class="year" id="2016">2016</h5>
<h5 class="year selected" id="2017">2017</h5>
</div>
<div class="row" id="events">
<div class="col-12">
<div id="events-container">
<div class="inline">
<ul id="event-dates">
</ul>
</div>
<div class="inline">
<ul id="event-names">
</ul>
</div>
</div>
</div>
</div>
-->
</div>
<div class="info">
<h1 name="members"><span class="line"></span>MEMBERS<span class="line"></span></h1>
<div class="row d-flex justify-content-center" id="members-list">
<div class="member">
<img src="/images/members/alaina.jpeg"></img>
<h5>Alaina Zhang</h5>
<h6>Member</h6>
</div>
<div class="member">
<img src="/images/members/amelia.jpg"></img>
<h5>Amelia Chiu</h5>
<h6>Member</h6>
</div>
<div class="member">
<img src="/images/members/benOtter.png"></img>
<h5>Ben Otter</h5>
<h6>Member</h6>
</div>
<div class="member">
<img src="/images/members/dakota2.jpg"></img>
<h5>Dakota Blue Lawlar</h5>
<h6>Member</h6>
</div>
<div class="member">
<img src="/images/members/grady.JPEG"></img>
<h5>Grady Fleming</h5>
<h6>Financial Officer</h6>
</div>
<div class="member">
<img src="/images/members/hanbo.JPG"></img>
<h5>Hanbo Xu</h5>
<h6>Vice-President</h6>
</div>
<div class="member">
<img src="/images/members/hannah.png"></img>
<h5>Hannah Field</h5>
<h6>Member</h6>
</div>
<div class="member">
<img src="/images/members/MayaB2.jpeg"></img>
<h5>Maya Nola Bridgman</h5>
<h6>Member</h6>
</div>
<div class="member">
<img src="/images/members/rowyn2.JPG"></img>
<h5>Rowyn Price Birdsley</h5>
<h6>Co-Artistic Director</h6>
</div>
<div class="member">
<img src="/images/members/sharis.png"></img>
<h5>Sharis Hsu</h5>
<h6>Member</h6>
</div>
<div class="member">
<img src="/images/members/sinmi.jpeg"></img>
<h5>Sinmi Sowande</h5>
<h6>Member</h6>
</div>
<div class="member">
<img src="/images/members/tyler.jpeg"></img>
<h5>Tyler Yang</h5>
<h6>President</h6>
</div>
<div class="member">
<img src="/images/members/vivien.jpg"></img>
<h5>Vivien He</h5>
<h6>Co-Artistic Director</h6>
</div>
</div>
</div>
<!-- After auditions are over: -->
<div class="info">
<h1 name="auditions"><span class="line"></span>AUDITIONS<span class="line"></span></h1>
<div class="row">
<div class="col-12">
<h3 class="text-center">Join us for the experience of a lifetime!</h3>
<p>Think you have what it takes? Even if you're not sure, come and try out anyway! When we say <strong>no experience necessary</strong>, we mean it. Swingtime members are chosen for attitude as much as aptitude – many of our current members had never danced before. As a bonus, you'll learn part of an actual Swingtime choreo!</p>
</div>
</div>
</div>
<div class="info">
<h1 name="memory_lane"><span class="line"></span>Memory Lane<span class="line"></span></h1>
<h3 class="text-center"><a href="anniversary.html">Go to the archives!</a></h3>
</div>
<div class="info">
<h1 name="contact"><span class="line"></span>CONTACT<span class="line"></span></h1>
<div class="row">
<div class="col-12">
<h3 class="text-center">For booking and general enquiries, email us at</h3>
<h3 class="text-center"><a class="contact-link" href="email">email</a>.</h3>
</div>
</div>
<p> Swingtime members often dance socially, but we are primarily a performance group. For information on Lindy Hop lessons and dance parties, check out <a href="http://swing.stanford.edu/">Stanford Swing Dancers</a>.</p>
<br>
<p> Many thanks to Paul Csonka, Babacar Cedric Ndoye, Lucas Garron, David Chia, William Ito, and our other photographers for the photos on this page. </p>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="js/bootstrap.bundle.min.js"></script>
<script src="js/jquery.easing.min.js"></script>
<script src="js/banner.js"></script>
</body>
</html>