/
index.html
312 lines (232 loc) · 15.5 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
<!DOCTYPE html>
<html>
<head>
<title>Brighton Guide</title>
<!-- Our CSS styles -->
<link rel="stylesheet" href="styles.css">
<!-- /* Our JavaScript File */ -->
<script src="script.js"></script>
<!-- /* Font File */ -->
<!-- <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet"> -->
<style>
@import url('https://fonts.googleapis.com/css?family=Barrio|Bungee+Inline|Bungee+Shade|Codystar|Fascinate+Inline|Raleway');
</style>
</head>
<body>
<header id="title_text">
<h1 style="font-size:12vw"> <span id="line_one"> buildings of </span></br>
<span id="animation_">
<span class="letter">B</span>
<span class="letter">R</span>
<span class="letter">I</span>
<span class="letter">G</span>
<span class="letter">H</span>
<span class="letter">T</span>
<span class="letter">O</span>
<span class="letter">N</span>
</span>
</h1>
</header>
<div>
<nav id="navbar">
<ul>
<li><a href="./index.html">Home<a/></li>
<li><a href="./about.html">About</a></li>
<li><a href="./contact.html">Contact</a></li>
</ul>
</nav>
</div>
<div id="about">
Welcome to our comprehensive guide to some of the best Buildings of Brighton (and Hove!). Here we have a collection of famous landmarks and hidden gems in the heart of the city, displayed on the map with images and a brief description. <span class="instructions">Check the reference number then scroll down to see a photo/more information about each building.</span>
</div>
<!-- Map Section -->
<div>
<div id="map"></div>
</div>
<!-- Place Descriptions with images -->
<h2 class="subheading">Buildings</h2>
<div class="container">
<figure class="place">
<img src="http://i1213.photobucket.com/albums/cc479/natashahoare/brighton%20buildings/DSC_0310.jpg"/>
<button class="accordion">1) London Road Viaduct</button>
<div class="panel">
<p class="details">Considered one of the best monuments of early railway architecture. 400 yards long with 26 arches, the viaduct was built in the 1940's to connect Brighton with the East Coast and is still in use today. Architect: John Urpeth Rastrick.</p>
</div>
</figure>
<figure class="place">
<img src="http://i1213.photobucket.com/albums/cc479/natashahoare/brighton%20buildings/DSC_0308.jpg"/>
<button class="accordion">2) Duke of York's Picturehouse</button>
<div class="panel">
<p class="details">Duke of York's is the oldest cinema in continued use in Britain. Built in Edwardian Baroque style in 1910, the building has remained largely unchanged despite passing hands several times. Spot the black & white legs on the roof - one of the few newer additions. Original architect: Clayton & Black.</p>
</div>
</figure>
<figure class="place">
<img src="http://i1213.photobucket.com/albums/cc479/natashahoare/brighton%20buildings/DSC_0277.jpg"/>
<button class="accordion">3) St Bartholomew's Church</button>
<div class="panel">
<p class="details">Commissioned by Reverend Arthur Wagner in 1872. This neo-gothic church had a controversial welcome - it's an imposing building with a nave 1 metre higher than Westminster Abbey and an unusually geometric shape. Worth viewing from both outside and in. Architect: Edmund Scott, updated by Henry Wilson (1910).</p>
</div>
</figure>
<figure class="place">
<img src="http://i1213.photobucket.com/albums/cc479/natashahoare/brighton%20buildings/DSC_0270.jpg"/>
<button class="accordion">4) Brighton Station</button>
<div class="panel">
<p class="details"> The original terminal buildings are Italian Villa style (now converted to shops & cafes), but today's main feature is the great glass and iron canopy spanning the station. Original architect: David Mocatta, glass/iron H.E. Wallis.</p>
</div>
</figure>
<figure class="place">
<img src="http://i1213.photobucket.com/albums/cc479/natashahoare/brighton%20buildings/DSC_0255.jpg"/>
<button class="accordion">5) Theobald House</button>
<div class="panel">
<p class="details"> Housing Chairman Stanley Theobald pushed for social housing in Brighton in the 50s and 60s. Towering above the North Laine, this is the tallest of the blocks. Whilst Theobald House is by no means beautiful, Brighton's current housing crisis makes it an important marker of what can be achieved when attention is given to affordable housing. </p>
</div>
</figure>
<figure class="place">
<img src="http://i1213.photobucket.com/albums/cc479/natashahoare/brighton%20buildings/DSC_0041.jpg"/>
<button class="accordion">6) Hanover Residences</button>
<div class="panel">
<p class="details"> A hilly residential area of Brighton known for its colourful Victorian houses. Also features plenty of pubs and some great panoramic views of Brighton. </p>
</div>
</figure>
<figure class="place">
<img src="http://i1213.photobucket.com/albums/cc479/natashahoare/brighton%20buildings/DSC_0248.jpg"/>
<button class="accordion">7) (Abandoned) Astoria Theatre</button>
<div class="panel">
<p class="details"> Built in art deco style featuring a vast cast iron facade. Unlike Duke of York's, this cinema couldn't survive the decline in the 70s and after a spell as a bingo hall was left derilect. The Kissing Coppers Banksy mural is not the original, but appeared shortly after the legalisation of gay marriage in the UK. Architect: Edward Albert Stone. </p>
</div>
</figure>
<figure class="place">
<img src="http://i1213.photobucket.com/albums/cc479/natashahoare/brighton%20buildings/DSC_0228_1.jpg"/>
<button class="accordion">8) King & Queen's Pub</button>
<div class="panel">
<p class="details"> In the 1930s famous local architect's Clayton & Black redesigned this pub in Tudor style; complete with tapestries, heraldic glass and carved oak timbers. In its early days it ran an illict trade with the neighbouring army barracks through a secret rear hatch still visible today. Henry VIII and Anne Boleyn sit above the entrance. </p>
</div>
</figure>
<figure class="place">
<img src="http://i1213.photobucket.com/albums/cc479/natashahoare/brighton%20buildings/DSC_0223.jpg"/>
<button class="accordion">9) The Royal Pavilion</button>
<div class="panel">
<p class="details"> Probably Brighton's most well known building. Designed in the early 19th century by Henry Holland as a holiday retreat for the Prince Regent, then later developed by John Nash into the grand palace we see today. Described by Adèle d'Osmond as a "mad house", the Pavilion is packed with elaborate 'Oriental' features from the colonial era. </p>
</div>
</figure>
<figure class="place">
<img src="http://i1213.photobucket.com/albums/cc479/natashahoare/brighton%20buildings/DSC_0209.jpg"/>
<button class="accordion">10) 163 North Street</button>
<div class="panel">
<p class="details"> Considered by many to be the chef-d'œuvre of famous local firm Clayton & Black's, 163 North Street is positioned in the heart of Brighton's bustling commercial area. Built in Edwardian Baroque style in 1904, with pink granite and a green slated roof. </p>
</div>
</figure>
<figure class="place">
<img src="http://i1213.photobucket.com/albums/cc479/natashahoare/brighton%20buildings/DSC_0121.jpg"/>
<button class="accordion">11) Embassy Court</button>
<div class="panel">
<p class="details"> A 12 story residential block built from reinforced concrete, Embassy Court is one of the only examples of the Early Modern Movement in Sussex. An interesting contrast to the usual Regency and Victorian houses on the seafront. Architect: Wells Coates, 1936. </p>
</div>
</figure>
<figure class="place">
<img src="http://i1213.photobucket.com/albums/cc479/natashahoare/brighton%20buildings/DSC_0111.jpg"/>
<button class="accordion">12) Hove Bandstand</button>
<div class="panel">
<p class="details"> Designed by Phillip Lockwood in 1884, considered one of the finest standing examples of a Victorian Bandstand. It was restored in 2009. </p>
</div>
</figure>
<figure class="place">
<img src="http://i1213.photobucket.com/albums/cc479/natashahoare/brighton%20buildings/DSC_0158.jpg"/>
<button class="accordion">13) Western Terrace</button>
<div class="panel">
<p class="details"> An interesting cul-de-sac off Western Road. Includes Gothic House (whilst the ground floor has been converted, the upper half remains Gothick style) and Western Pavillion, a house which was occupied by the architect Amon Henry Wilds himself and features a minature dome similar to the Royal Pavilion. </p>
</div>
</figure>
<figure class="place">
<img src="http://i1213.photobucket.com/albums/cc479/natashahoare/brighton%20buildings/DSC_0102.jpg"/>
<button class="accordion">14) Metropole Hotel</button>
<div class="panel">
<p class="details"> Originally designed by Alfred Waterhouse, famous for the Natural History Museum and Manchester Town Hall among others. Victorian like many other seafront buildings, but an unusual red terracotta instead of the typical whitewash. Enlarged in 1961 which unfortuntely required the removal of some of Waterhouse's features from the roofline.</p>
</div>
</figure>
<figure class="place">
<img src="http://i1213.photobucket.com/albums/cc479/natashahoare/brighton%20buildings/thegrand.jpg"/>
<button class="accordion">15) The Grand Hotel</button>
<div class="panel">
<p class="details"> An iconic Victorian seafront hotel. In 1984 it was badly damaged by an IRA bomb intended to assassinate Margaret Thatcher, but was saved by millions of pounds of funding. Unfortunately the façade is currently undergoing a big restoration, scheduled for completion some time in 2018. Designed in 1864 by J. H. Whichcord. </p>
</div>
</figure>
<figure class="place">
<img src="http://i1213.photobucket.com/albums/cc479/natashahoare/brighton%20buildings/DSC_0091_1.jpg"/>
<button class="accordion">16) The Brighton Centre</button>
<div class="panel">
<p class="details"> Designed in 1977 by Russell Diplock & Associates. This brutalist concrete building contrasts greatly with the ornately Victorian Grand Hotel next door. It's the biggest building of its kind in Southern England, and is regularly used for major political conferences amongst other events. </p>
</div>
</figure>
<figure class="place">
<img src="http://i1213.photobucket.com/albums/cc479/natashahoare/brighton%20buildings/DSC_0080.jpg"/>
<button class="accordion">17) Kingswest Building (Odeon/Pryzm)</button>
<div class="panel">
<p class="details">The Kingswest is a regular contender for ugliest building in Brighton, sometimes vying with the conference centre next door. Gold and metal crowning spikes are the key feature, hanging over an wide expanse of beige. Another imposing addition to the seafront. </p>
</div>
</figure>
<figure class="place">
<img src="http://i1213.photobucket.com/albums/cc479/natashahoare/brighton%20buildings/DSC_0189.jpg"/>
<button class="accordion">18) (Abandoned) Brighton Hippodrome</button>
<div class="panel">
<p class="details"> Designed by Frank Matcham and opened as a variety theatre in 1902. The building is stuccoed, and the central entrance flanked by square Italianate towers with pyramid roofs. It hosted the likes of The Beatles, The Rolling Stones and Charlie Chaplin, but suffered a similar fate to the Astoria; for a time converted to a Bingo Hall, but abandoned from 2007. </p>
</div>
</figure>
<figure class="place">
<img src="http://i1213.photobucket.com/albums/cc479/natashahoare/brighton%20buildings/DSC_0198.jpg"/>
<button class="accordion">19) Middle Street Synagogue</button>
<div class="panel">
<p class="details"> A blend of Italian Renaissance and Neo-Byzantine style, this synagogue was desined by Thomas Lainson in 1875. With an unusual yellow brick face, cotrasing blue and red tiled arches and a richly decorated interior, it's considered one of the UK's most beautiful synagogues. </p>
</div>
</figure>
<figure class="place">
<img src="http://i1213.photobucket.com/albums/cc479/natashahoare/brighton%20buildings/DSC_0065.jpg"/>
<button class="accordion">20) The Palace Pier</button>
<div class="panel">
<p class="details"> A 1,722ft long Victorian pier, one of the most popular tourist attractions in the UK. It opened in 1891, one of three Brighton piers at the time. The Royal Suspension Chain Pier was destroyed in a storm in 1896. West Pier was destroyed by a fire in 2003 and the ruins can still be seen disintegrating just west of Palace Pier today.</p>
</div>
</figure>
<figure class="place">
<img src="http://i1213.photobucket.com/albums/cc479/natashahoare/brighton%20buildings/DSC_0057.jpg"/>
<button class="accordion">21) Madeira Terrace</button>
<div class="panel">
<p> A stretch of cast-iron seafront arches in Brighton's distinctive turquoise. Over recent years they've fallen into disrepair, but a successful crowdfunding campaign has led to promising plans of restoration. </p>
</div>
</figure>
</div>
<!-- End of page footer -->
<footer>
<a href="#title_text">Back Up<a/>
</footer>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCbTG29onmBNOR7NbcOgiln_cFUHAkSlHU&callback=initMap">
</script>
<script>
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
/* Toggle between adding and removing the "active" class,
to highlight the button that controls the panel */
this.classList.toggle("active");
/* Toggle between hiding and showing the active panel */
var panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
});
}
</script>
</body>
<style>
#map {
width: 100%;
height: 500px;
background: grey;
z-index: 1;
margin-top: 10%;
margin-bottom: 10%;
};
</style>
</html>