-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
350 lines (334 loc) · 23.4 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
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
340
341
342
343
344
345
346
347
348
349
350
<html lang="en">
<head>
<meta charset="utf-8">
<title>DramSoc | Imperial College Dramatic Society</title>
<link rel="icon" href="/static/images/logos/dramsoc.jpg">
<link rel="apple-touch-icon" href="/static/images/logos/dramsoc.jpg">
<meta name="viewport" content="width=device-width, viewport-fit=cover">
<meta property="og:image" content="/static/images/general/summer_ball1.jpg">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway:700,400">
<!-- Hash #x used to flush caches -->
<link rel="stylesheet" href="/static/style.css#2">
<script src="/static/script.js#1"></script>
<!-- Stops page from scrolling to the anchor on load -->
<!-- This is a workaround needed to get #talk to scroll to mailing lists after recent shows have loaded -->
<script>
hash = document.location.hash
document.location.hash = ''
</script>
<!-- GOOGLE ANALYTICS -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-8EMSMM17Z4"></script>
<script>
window.dataLayer = window.dataLayer || []
function gtag() { dataLayer.push(arguments) }
gtag('js', new Date())
gtag('config', 'G-8EMSMM17Z4')
</script>
</head>
<body>
<!-- NAVIGATION -->
<div id="nav">
<div id="navbar" class="regular_content">
<button aria-hidden="true" type="button" class="nav_button" onclick="scroll_to('intro')">
<img class="small_logo" aria-hidden="true" src="/static/images/logos/dramsoc_white_200.png">
</button>
<button aria-hidden="true" type="button" id="nav_menu" class="nav_button invert" onclick="toggle_nav_links()">
<img aria-hidden="true" id="nav_menu_img" src="/static/images/symbols/line.3.horizontal.png">
</button>
</div>
<span id="nav_links" class="content_row">
<button type="button" class="nav_button" onclick="scroll_to('acting')">
<h3>Acting</h3>
</button>
<button type="button" class="nav_button" onclick="scroll_to('tech')">
<h3>Tech</h3>
</button>
<button type="button" class="nav_button" onclick="scroll_to('committee')">
<h3>Committee</h3>
</button>
<button type="button" class="nav_button" onclick="scroll_to('talk')">
<h3>Mailing Lists</h3>
</button>
<button type="button" class="nav_button" onclick="scroll_to('contact')">
<h3>Contact</h3>
</button>
<a class="nav_button" href="/tickets" target="_blank">
<h3>Tickets</h3>
</a>
</span>
</div>
<div id="navbar_padding"></div>
<!-- PLAYER -->
<div id="intro" class="background_section">
<div id="player"></div>
<div id="dramsoc">
<img aria-hidden="true" id="dramsoc_logo" src="/static/images/logos/dramsoc_white.png">
<h1 id="dramsoc_title">Imperial College Dramatic Society</h1>
</div>
<button type="button" aria-hidden="true" id="down_button" onclick="scroll_to('about')">
<img aria-hidden="true" id="down_button_img" class="invert" src="/static/images/symbols/chevron.down.png">
</button>
</div>
<!-- FEATURE -->
<!-- Section to advertise upcoming shows -->
<!-- Just change background-image -->
<!-- <div id="feature" class="section" style="background-image: url('/static/images/posters/moon.jpeg');">
<a id="feature_button" class="large_button" href="/tickets" target="_blank">
<img aria-hidden="true" class="icon" src="/static/images/symbols/ticket.png">
Tickets
</a>
</div> -->
<!-- ABOUT -->
<div id="about" class="section plain_section">
<div class="section_column narrow_content">
<h1>Welcome to DramSoc, Imperial's Dramatic Society!</h1>
<p>We do everything related to theatre: acting, set, costume, lighting, sound, writing, stage management, directing, production, and more. There's plenty to get involved in!</p>
<p>DramSoc own and operate the full range of state-of-the-art entertainment equipment, and our technical team run events across college, from <a href="https://mtsoc.co.uk" target="_blank" rel="noopener">MTSoc</a> shows to Summer Ball. We take pride in training our members as theatre technicians, actors and directors. We run weekly workshops, including backstage tours, improvisation, set-building, lighting design, and much more, and many of our alumni graduate to become theatre professionals.</p>
<p>We stage 2 plays per term, with recent productions including Mike Bartlett's 'Earthquakes in London', and 'Compost', a 5-star piece of original theatre produced at Edinburgh Fringe. We produce a range of work written by students, and established playwrights. This really is the place to be if you love theatre!</p>
<div class="content_row">
<a class="large_button" href="https://www.instagram.com/ic_dramsoc/" target="_blank" rel="noopener">
<img aria-hidden="true" class="icon" src="/static/images/symbols/instagram.png">
Upcoming Shows & Events
</a>
<button type="button" class="large_button" onclick="scroll_to('talk')">
<img aria-hidden="true" class="icon" src="/static/images/symbols/envelope.png">
Join Our Mailing Lists
</a>
</div>
</div>
</div>
<!-- ACTING -->
<div id="acting" class="section background_section">
<div class="section_column narrow_content">
<h1>Acting</h1>
<p>DramSoc puts on at least one full-length play in our theatre, the <button type="button" onclick="scroll_to('uch')">Union Concert Hall</button> per term, as well as a number of other plays in different venues around the College and further afield. Usually our main shows have casts of between 15 and 20 people and we welcome auditions from anyone with any amount of experience, so if you’re thinking of getting involved, keep an eye out for audition posters and notices on our website, social media, and our mailing lists at the start and end of every term.</p>
<a class="large_button" href="https://mailman.ic.ac.uk/mailman/listinfo/icds-actor-talk" target="_blank" rel="noopener">
<img aria-hidden="true" class="icon" src="/static/images/symbols/envelope.png">
Join Our Mailing List
</a>
</div>
</div>
<!-- SHOWS -->
<div id="shows" class="section plain_section">
<div class="section_column">
<h1>Recent Shows</h1>
<div id="shows_grid">
<!-- Filled in by /static/script.js -->
</div>
<div class="section_column narrow_content">
<h1>Propose a Show</h1>
<p>DramSoc decides on each term's shows at a Play Proposals meeting (announced on the DramSoc mailing list) held near to the end of the previous term. A full play proposal includes:</p>
<ul>
<li>Representative excerpts from the script</li>
<li>Brief synopsis of the play, its genre and style</li>
<li>Cast breakdown including M/F & large/medium/small parts</li>
<li>Creative vision and possible technical requirements</li>
<li>Production team including a director or producer</li>
<li>Whether performance rights are available</li>
</ul>
<p>A play proposal with all of these things considered is much stronger than one without, but none of these things are mandatory for a proposal. If you have an idea for a proposal, but are unsure about any aspect of the proposal or proposals process, please email the DramSoc President or Acting Director. Additionally, anyone may come to the meeting to observe the process.</p>
<a href="mailto:[email protected]" class="large_button">
<img aria-hidden="true" class="icon" src="/static/images/symbols/envelope.png">
Acting Director
</a>
</div>
</div>
</div>
<!-- TECH -->
<div id="tech" class="section background_section">
<div class="section_column narrow_content">
<h1>Tech</h1>
<p>There are plenty of roles within DramSoc even for those who prefer to stay off the stage! All technical aspects of our shows, and of shows staged by the <a href="https://mtsoc.co.uk" target="_blank" rel="noopener">Musical Theatre Society</a>, are provided by DramSoc Crew. We design and build the set, then dress it and light it. We design sound effects and rig sound equipment. And we make sure the cast look their best with the right costumes, props and make-up.</p>
<p>On top of this, we provide sound, lighting and rigging for live events hosted by the Union and other Clubs & Societies, such as the annual Summer Ball, talent shows, live music events and club nights. We would love you to be around to help out! For more information or to get involved, email our Technical Director, and join the Crew Talk mailing list.</p>
<a class="large_button" href="https://mailman.ic.ac.uk/mailman/listinfo/icds-crew-talk" target="_blank" rel="noopener">
<img aria-hidden="true" class="icon" src="/static/images/symbols/envelope.png">
Join Our Mailing List
</a>
</div>
</div>
<!-- TECHNICAL SERVICES -->
<div id="tech_services" class="section plain_section">
<div class="section_column narrow_content">
<h1>Technical Services</h1>
<p>DramSoc provides a wide range of technical services; from plays to musicals, talent shows to outdoor music festival stages, variety shows to the annual Summer Ball, we do it all. We have a large and dedicated crew, and hire out professional lighting and sound equipment, props and set from our extensive stores. In addition, we offer comprehensive production management, consultancy and design services.</p>
<p>Our experience in production management and design ranges from the large-scale annual Summer Ball, including the lighting and sound in the Great Hall and the Queen's Tower Rooms and all the set and design features, down to small societal events in Metric. As such we believe that you will find our help and advice invaluable whilst planning your event, regardless of its size or complexity.</p>
<p>Even if you do not use DramSoc's services, we will be more than happy to advise and assist in getting alternative quotes. However, we are quite confident that we care more about the success of your event than a hire company would, and we can deliver more for your money, too. In any case, please try to get in contact with us as early as possible, as the more time we have, the better we can help you.</p>
<a href="mailto:[email protected]" class="large_button">
<img aria-hidden="true" class="icon" src="/static/images/symbols/envelope.png">
Technical Director
</a>
</div>
</div>
<!-- UCH -->
<div id="uch" class="section background_section">
<div class="section_column narrow_content">
<h1>Union Concert Hall</h1>
<p>DramSoc's primary venue is the Imperial College Union Union Concert Hall (or UCH). This was built in the 1950s, opening, along with the rest of the upper part of the Union building, in 1956. DramSoc is responsible for the maintenance of the technical aspects of the hall, and it contains a full-featured stage and technical installation, albeit limited by the shape of the building.</p>
<a href="https://maps.app.goo.gl/q1pVpMQwYnLEgYEdA" class="large_button" target="_blank" rel="noopener">
<img aria-hidden="true" class="icon" src="/static/images/symbols/arrow.trianglehead.turn.up.right.circle.svg">
Directions
</a>
</div>
</div>
<!-- COMMITTEE -->
<div id="committee" class="section plain_section">
<div class="section_column regular_content">
<h1>Committee</h1>
<div id="committee_grid" class="content_grid">
<!-- Filled in by /static/script.js -->
</div>
</div>
</div>
<!-- MAILING LISTS -->
<div id="talk" class="section background_section">
<div class="section_column regular_content">
<h1>Mailing Lists</h1>
<p class="narrow_content">Joining our mailing lists is the best way to keep up to date with society news, and find out about society events. Read the descriptions below to help you decide which lists to join.</p>
<div class="content_grid">
<div class="content_item">
<h2>DramSoc Talk</h2>
<p>This is the main society mailing list. All society members should be on this list. If you want information about our plays and society events, then this is the list to join. Traffic is minimal; a weekly newsletter and information about our plays are the only things that go to this list.</p>
<a class="large_button" href="https://mailman.ic.ac.uk/mailman/listinfo/dramsoc-talk" target="_blank" rel="noopener">
<img aria-hidden="true" class="icon" src="/static/images/symbols/envelope.png">
Subscribe
</a>
</div>
<div class="content_item">
<h2>Actor Talk</h2>
<p>This list is for conversation between DramSoc's community of actors, and those interested in acting. It will be the primary means of contact for workshops and members will be the first to know about auditions for upcoming plays.</p>
<a class="large_button" href="https://mailman.ic.ac.uk/mailman/listinfo/icds-actor-talk" target="_blank" rel="noopener">
<img aria-hidden="true" class="icon" src="/static/images/symbols/envelope.png">
Subscribe
</a>
</div>
<div class="content_item">
<h2>Crew Talk</h2>
<p>This list is for crew members, and is the main way we distribute crew information, event and show dates, crew requests and crew calls. All crew members should be on this list! Unless explicitly stated otherwise, anyone can show up for any call that interests them, regardless of skill level or prior experience; we find the best way to learn is to join our experienced crew and learn from them!</p>
<a class="large_button" href="https://mailman.ic.ac.uk/mailman/listinfo/icds-crew-talk" target="_blank" rel="noopener">
<img aria-hidden="true" class="icon" src="/static/images/symbols/envelope.png">
Subscribe
</a>
</div>
</div>
</div>
</div>
<!-- CONTACT -->
<div id="contact" class="section plain_section">
<div class="section_column">
<h1>Contact Us</h1>
<div class="content_column">
<div class="content_row contact_option">
<a href="mailto:[email protected]" class="large_button">
<img aria-hidden="true" class="icon" src="/static/images/symbols/envelope.png">
President
</a>
<p>General queries.</p>
</div>
<div class="content_row contact_option">
<a href="mailto:[email protected]" class="large_button">
<img aria-hidden="true" class="icon" src="/static/images/symbols/envelope.png">
Treasurer
</a>
<p>Financial and invoicing queries. For quotes contact the Technical Director.</p>
</div>
<div class="content_row contact_option">
<a href="mailto:[email protected]" class="large_button">
<img aria-hidden="true" class="icon" src="/static/images/symbols/envelope.png">
Technical Director
</a>
<p>Queries related to technical services and hire.</p>
</div>
<div class="content_row contact_option">
<a href="mailto:[email protected]" class="large_button">
<img aria-hidden="true" class="icon" src="/static/images/symbols/envelope.png">
Acting Director
</a>
<p>Queries related to plays, play proposals, auditions and acting workshops.</p>
</div>
<div class="content_row contact_option">
<a href="mailto:[email protected]" class="large_button">
<img aria-hidden="true" class="icon" src="/static/images/symbols/envelope.png">
System Administrator
</a>
<p>Queries related to this website.</p>
</div>
<div class="content_row contact_option">
<a href="mailto:[email protected]" class="large_button">
<img aria-hidden="true" class="icon" src="/static/images/symbols/envelope.png">
Complaints
</a>
<p>Concerns and complaints.</p>
</div>
</div>
</div>
</div>
<!-- FOOTER -->
<div id="footer" class="section">
<div class="section_column">
<div class="content_grid" id="footer_grid">
<div class="content_column">
<button aria-hidden="true" type="button" onclick="scroll_to('intro')">
<img class="small_logo" aria-hidden="true" src="/static/images/logos/dramsoc_white_200.png">
</button>
<p>Est. 1907</p>
<div class="content_row">
<a title="Instagram" href="https://www.instagram.com/ic_dramsoc/" target="_blank" rel="noopener">
<img aria-hidden="true" class="icon" src="/static/images/symbols/instagram.png">
</a>
<a title="Facebook" href="https://www.facebook.com/dramsoc" target="_blank" rel="noopener">
<img aria-hidden="true" class="icon" src="/static/images/symbols/facebook.png">
</a>
<a title="TikTok" href="https://www.tiktok.com/@ic_dramsoc" target="_blank" rel="noopener">
<img aria-hidden="true" class="icon" src="/static/images/symbols/tiktok.png">
</a>
</div>
</div>
<div class="content_column">
<a href="tel:+442075948102">+44 (0) 20 759 48102</a>
<a id="address" href="https://maps.app.goo.gl/wFEc4Y3T66jhwqZj7" target="_blank" rel="noopener">
Imperial College Dramatic Society<br>
Imperial College Union<br>
Beit Quadrangle<br>
Prince Consort Road<br>
South Kensington<br>
London<br>
SW7 2BB<br>
</a>
</div>
<div class="content_column">
<a href="/static/files/hire_terms_and_conditions.pdf" target="_blank">Hire Terms and Conditions</a>
<a href="/static/files/constitution.pdf" target="_blank">Constitution</a>
<a href="/static/files/bye_laws.pdf" target="_blank">Bye Laws</a>
<a href="/static/files/data_protection_policy.pdf" target="_blank">Data Protection</a>
<a href="/static/files/debtor_policy.pdf" target="_blank">Debtor Policy</a>
<a href="/policy" target="_blank">Ticketing Policy</a>
<a href="/static/files/privacy_notice.pdf" target="_blank">Privacy Notice</a>
</div>
<div class="content_column">
<a href="https://drive.google.com/drive/folders/1k5JOO6hJiYjPn8yoFymKMHEBGHtOoada" rel="noopener" target="_blank">Committee Meeting Minutes</a>
<a href="https://wiki.dramsoc.org/Category:Committee" target="_blank" rel="noopener">Past Committees</a>
<a href="https://wiki.dramsoc.org/Events" target="_blank" rel="noopener">Past Shows</a>
<a href="https://wiki.dramsoc.org/Winters" target="_blank" rel="noopener">Winters</a>
<a href="https://horde.dramsoc.org" target="_blank" rel="noopener">Horde</a>
<a href="https://wiki.dramsoc.org" target="_blank" rel="noopener">Wiki</a>
</div>
<div class="content_column">
<a title="Imperial College London" href="https://www.imperial.ac.uk" target="_blank" rel="noopener">
<img aria-hidden="true" class="invert" id="imperial_logo" src="/static/images/logos/imperial.png">
</a>
<a title="Imperial College Union" href="https://www.imperialcollegeunion.org" target="_blank" rel="noopener">
<img aria-hidden="true" class="invert" id="union_logo" src="/static/images/logos/union.png">
</a>
<a title="The Comus Club" href="https://www.comus.org.uk" target="_blank" rel="noopener">
<img aria-hidden="true" class="invert" id="comus_logo" src="/static/images/logos/comus.png">
</a>
</div>
</div>
<p id="copyright">
DramSoc is part of Imperial College Union which is a <a href="https://register-of-charities.charitycommission.gov.uk/charity-search/-/charity-details/5033166">UK Registered Charity, Number 1151241</a><br>
Copyright © 2025 Imperial College Dramatic Society
</p>
</div>
</div>
</body>
</html>