-
Notifications
You must be signed in to change notification settings - Fork 0
/
Esplanade.html
324 lines (298 loc) · 16.3 KB
/
Esplanade.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
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/W3.css">
<link rel="stylesheet" href="css/Arts & Culture/Esplanade.css" />
<link rel="icon" type="image/x-icon" href="media/png/logo/logotop.png" />
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDDH9_0MnmPn1VVFF-d_qXim8mxrBEklXI&callback=initMap"></script>
<script src="js/Esplanade.js" defer></script>
<script src="https://www.w3schools.com/lib/w3.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="Ryan" />
<meta name="description" content="Esplanade" />
<title>Esplanade - Arts & Culture</title>
</head>
<body>
<main w3-include-html="header.html"></main>
<script>
//code for inserting navigation panel
w3.includeHTML(); //this calls out the w3school method to be included in the index.html page.
</script>
<!-- Header -->
<header id="title">
<h1 class="big">Esplanade</h1>
</header>
<!-- Description -->
<section class="alignment description-container" id="main-body">
<section class="description-alignment-left">
<!--About-->
<section id="about">
<h1 style="font-weight: bold">About</h1>
<!-- First Part -->
<div class="half">
<div class="section-left">
<p>
Fondly nicknamed "the Durian" by Singaporeans due to its resemblance to the popular fruit here, Esplanade is home to a 1,600-seat Concert Hall,
a 2,000 seat Theatre and several other smaller performance venues. Esplanade has hosted various world-class performances and high-profile events
such as the return of the musical <span id="LM">Les Misérables</span>.
</p>
<p>
As Esplanade approaches 16, it remains as one of the busiest arts centres in the world with a total of about 37,000 shows and 26 million guests.
Esplande is a not-for-profit arts centre that aims to entertain, engage, educate and inspire its visitors through arts due to their beliefs in
making the arts accessible for everyone.
</p>
</div>
<figure class="description-image">
<img src="media/jpg/explore-esplanade.jpg" alt="Esplanade" />
<cite>Photo by Esplanade - Theatres on the Bay</cite>
</figure>
</div>
<h3 class="description-subheader">More than a performance venue</h3>
<!--Second Part-->
<div class="half">
<div class="section-left">
<p>
Aside from the various performance venues, the three-storey Esplanade Mall houses various restaurants and cafes. Visitors who are able to find time
will also be able to shop at the retail outlets. Visitors will be able to find a wide range of goods from customised hand lotions to violins.
</p>
<p>
Interested visitors will also be able to find out more about the world-class performance venue through the tours offered. There is a choice of the
Esplanade Walk, a 45-minute guided tour through the Concert Hall, Theatre and front-of-house facilities or the 2-hour Esplanade Tour which gives
visitors a deeper understanding of Esplanade. Through these tours, you will be able to understand the venue's acoustics, architecture and history,
and how it contributes to Singapore's art scene.
</p>
</div>
<figure class="description-image">
<img src="media/jpg/Esplanade-Concert-Hall.jpg" alt="Esplanade Concert Hall" />
<cite>Photo by Esplanade - Theatres on the Bay</cite>
</figure>
<figure class="description-image">
<img src="media/jpg/Esplanade-Facilities.jpg" alt="Esplanade Facilities" />
<cite>Photo by Esplanade - Theatres on the Bay</cite>
</figure>
</div>
</section>
<!-- Facilities -->
<section>
<h1 style="font-weight: bold">Facillities</h1>
<!--Section 1-->
<button class="accordion">Esplanade Information Counter<img class="add-icon" src="media/icons/add.png" /></button>
<div class="panel">
<section>
<p>
Esplanade Mezzanine Level<br />
Opening hours: 12pm – 8.30pm
</p>
<p><span style="font-weight:200">Esplanade Information Counter will operate from 8.30am to 12.30am on 31 Dec 2017.</span></p>
</section>
</div>
<!--Section 2-->
<button class="accordion">Free Wi-Fi<img class="add-icon" src="media/icons/add.png" /></button>
<div class="panel">
<section>
<p>
Enjoy free Wi-Fi service at Esplanade, made possible by our Official Wi-Fi Partner, ViewQwest. To connect, select the network "FreeWiFi@Esplanade",
agree to the terms and conditions of use and that's it!
</p>
</section>
</div>
<!--Section 3-->
<button class="accordion">ATMs<img class="add-icon" src="media/icons/add.png" /></button>
<div class="panel">
<section>
<p>
OCBC: #01-K1<br />
DBS: #01-K2<br />
AXS Station: Level 2, beside the escalators
</p>
</section>
</div>
<!--Section 4-->
<button class="accordion">Lost & Found<img class="add-icon" src="media/icons/add.png" /></button>
<div class="panel">
<section>
<p>
To report or retrieve lost and found items, please proceed to Esplanade’s Information Counter, located at Mezzanine Level. It is open from 12pm – 8.30pm
daily. Alternatively, you may call our Customer Service Hotline at 6828 8377.
</p>
</section>
</div>
<!--Section 5-->
<button class="accordion">First Aid<img class="add-icon" src="media/icons/add.png" /></button>
<div class="panel">
<section>
<p>Should you require medical assistance, please alert any of our Esplanade staff and we will attend to you immediately.</p>
</section>
</div>
<!--Section 6-->
<button class="accordion">Nursing Room<img class="add-icon" src="media/icons/add.png" /></button>
<div class="panel">
<section>
<p>
There are two Nursing Rooms. One is located on Mezzanine Level, open from 8am to 9pm daily. The other Nursing Room is located on Level 4, outside
PIP's PLAYbox, open from 8am to 6pm daily.
</p>
</section>
</div>
<!--Section 7-->
<button class="accordion">Children’s toilets<img class="add-icon" src="media/icons/add.png" /></button>
<div class="panel">
<section>
<p>There are children's toilets located on Level 4, opposite the entrance to PIP's PLAYbox, open from 11am to 6pm daily.</p>
</section>
</div>
<!--Section 8-->
<button class="accordion">Stroller parking<img class="add-icon" src="media/icons/add.png" /></button>
<div class="panel">
<section>
<p>
You can park your strollers on Level 4, under the staircase leading up to PIP's PLAYbox. If you are attending a performance, you may deposit your stroller
at the baggage carts located outside the performance venues.
</p>
</section>
</div>
<!--Section 9-->
<button class="accordion">Baggage Carts for bulky items<img class="add-icon" src="media/icons/add.png" /></button>
<div class="panel">
<section>
<p>
For your convenience, you are encouraged to deposit your bulky items at the baggage carts located outside the performance venues. This service is available
30 to 60 minutes before a performance.
</p>
</section>
</div>
<!--Section 10-->
<button class="accordion">Self-service Lockers<img class="add-icon" src="media/icons/add.png" /></button>
<div class="panel">
<section>
<p>
Lockers are available outside performance venues for storing audio and video recording equipment. These lockers are specially lined with padding to protect
your equipment. Our staff will issue you a locker at your request and your details will be recorded should we need to contact you. You will have to enter a
one-time pass-code to lock your equipment. Our staff will call you 30 minutes after the performance has ended to remind you to collect your equipment if you
have not done so. If you have left the venue, you can still retrieve your equipment. Call our Customer Service Hotline at 6828 8377 and our staff will assist you.
</p>
</section>
</div>
</section>
</section>
<!-- Sidebar -->
<aside class="sidebar-alignment-right">
<section class="sidebar-info">
<div>
<figure class="sidebar-icon">
<img src="media/icons/location.png" />
</figure>
<div class="sidebar-description">
<h3>Esplanade - Theatres on the Bay</h3>
<p>1 Esplanade Drive, Singapore 038981</p>
</div>
</div>
<hr class="sidebar-hr" />
<div>
<figure class="sidebar-icon">
<img src="media/icons/clock.png" />
</figure>
<div class="sidebar-description">
<h3>Opening Hours</h3>
<p>
<span style="font-weight: bold;">Box Office</span><br />
Daily noon-8.30pm
</p>
<p style="text-align:justify">
The Esplanade Box Office will open 1 hour prior to show commencement
for shows before noon and will remain open up to half an hour after
show commencement for shows starting after 8.30pm.
</p>
</div>
</div>
<hr class="sidebar-hr" />
<div>
<figure class="sidebar-icon">
<img src="media/icons/grid-world.png" />
</figure>
<div class="sidebar-description">
<h3><a class="sidebar-link" target="_blank" href="https://www.esplanade.com/">Visit Official Website</a></h3>
</div>
</div>
</section>
<div id="map"></div>
</aside>
</section>
<!--Like what you've read?-->
<section class="like">
<div>
<div class="like1">
<img src="media/png/email.png" alt="email logo" width="30" height="25" />
<p class="likebig">Like what you've read?</p>
</div>
<div>
<p class="likesmall">Subscribe to our email newsletter!</p>
</div>
<div>
<button type="button" class="button" id="signup" onclick="haveoverlay1()">Sign Up</button>
</div>
</div>
</section>
<!-- popup for signup-->
<div id="overlay1">
<div id="textonsignup">
<button class="closebuttonpopup1" onclick="turnoffoverlay1()">Close</button>
<div>
<p class="signuptitle">Sign Up</p>
<p class="signupcontent">Please fill in this form to sign up for our email newsletter.</p>
<hr />
<div>
<form id="signupForm" onsubmit="alert('Thank you for signing up!')">
<div>
<label for="emailsignup">Email:</label>
<input type="email" id="emailsignup" required class="inputwidth" />
</div>
<div>
<label for="passwordsignup">Password:</label>
<input type="password" id="passwordsignup" maxlength="11" pattern="[0-9][a-z]{10}" class="inputwidth" placeholder="Password should contain a number first, followed by 10 alphabet" required />
</div>
<div class="passwordinput">
<input type="checkbox" id="togglepassword" onclick="myPassword()" />Show Password <!--myPassword() basically show password-->
</div>
<div>
By creating an account, you are allowing us to send emails to you.
</div>
<div>
<button type="submit" class="button">Sign Up</button>
</div>
</form>
</div>
</div>
</div>
</div>
<!--Contact Form------------------------------------------------------------------------------------------------------------->
<footer>
<section id="contact">
<div class="authorimage">
<img src="media/jpg/Ryan.jpg" alt="Photo of author" />
</div>
<div class="contentcontact">
<p>Meet the Author</p>
<p>Ryan Ng</p>
<p>
Ryan is currently a Year 1 student pursuing a diploma in Information Security
& Forensics at Ngee Ann Polytechnic. He is a tech enthusiast who enjoys building
PCs and interacting with new technologies.
</p>
<p>Read more from <a href="https://ngwhryan.wixsite.com/portfolio" target="_blank">Ryan Ng</a></p>
</div>
<div class="social-media">
<div class="smicons">
<a href="https://www.instagram.com/ryan_ngwh/" target="_blank"><img src="media/png/socialmediaicon/instagram.png" alt="instagram" width="30" height="30" /></a>
<a href="https://www.linkedin.com/in/ryan-ngwh/" target="_blank"><img src="media/png/socialmediaicon/linkedin.png" alt="linked in" width="30" height="30" /></a>
<a href="mailto:[email protected]" target="_blank"><img src="media/png/socialmediaicon/emailicon.png" alt="email" width="30" height="30" /></a>
</div>
<div class="toparrow">
<a href="#top"><img src="media/png/toparrow.png" alt="Go to Top" width="50" height="50" title="Go back to the top" /></a>
</div>
</div>
</section>
</footer>
</body>
</html>