-
Notifications
You must be signed in to change notification settings - Fork 1
/
Attractions.html
255 lines (236 loc) · 15.2 KB
/
Attractions.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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Attractions of Harry Potter theme park</title>
<meta charset="UTF-8">
<meta name="description" content="The attractions at Harry Potter themed park where you can experience amazing interaction with the magic world of wizardry through Virtual Reality and Augmented Reality" />
<meta name="keywords" content="Harry Potter, Theme Park, Wizardry, Magic, Fantasy, Virtual Reality, Augmented Reality, Attractions" />
<meta name="author" content="UoL - Web Development Course - w1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="css/stylesheet_grid.css">
</head>
<body class="grid_container_attractions">
<header id="main_navbar"><!-- The header contains the logo, the main navigation bar and the search bar -->
<label for="toggle">☰</label>
<input type="checkbox" id="toggle" />
<nav class="grid_header_navbar"><!-- The main navigation bar. All the links to attractions bring to the attraction page, anchored in different places
Note that the "service" links, the last 5, do not land anywhere -->
<figure id="fig_logo"><!-- The logo -->
<a href="index.html">
<img id="logo" src="images/HP_ThemePark_logo.png" alt="Harry Potter Theme Park Logo"/>
</a>
</figure>
<ul id="main_navbar_ar">
<li><a href="Attractions.html#sec_platform">Platform 9 3/4 AR experience</a></li>
<li><a href="Attractions.html#sec_ministry_of_magic">The Ministry of Magic AR experience</a></li>
<li><a href="Attractions.html#sec_forbidden_forest">The Forbidden Forest AR experience</a></li>
<li><a href="Attractions.html#sec_visit_hogwarts">Visit Hogwarts School AR experience</a></li>
<li><a href="Attractions.html#sec_diagon_alley">A walk in Diagon Alley AR experience</a></li>
<li><a href="Attractions.html#sec_magical_creatures_exhibition">Magical creatures exhibition AR experience</a></li>
</ul>
<ul id="main_navbar_vr">
<li><a href="Attractions.html#sec_ride_a_broomstick">Ride a Broomstick VR experience</a></li>
<li><a href="Attractions.html#sec_quidditch_match">Play Quidditch VR experience</a></li>
<li><a href="Attractions.html#sec_visit_gringott">Visit Gringott's cave VR experience</a></li>
<li><a href="Attractions.html#sec_find_the_horcruxes">Find the Horcruxes VR game</a></li>
</ul>
<ul id="main_navbar_other">
<li><a href="not_found.html">Plan your vacation</a></li>
<li><a href="not_found.html">Stay the night</a></li>
<li><a href="not_found.html">Tickets</a></li>
<li><a href="not_found.html">Reservations</a></li>
<li><a href="not_found.html">News</a></li>
</ul>
<div id="searchBar"><!-- Search Bar -->
<label for="searchText" >Search the website</label>
<input type="text" id="searchText" />
<button id="search">🔍 </button>
</div>
</nav>
</header>
<main id="main_section" class="bkg_container"><!-- This block contains the main image and the title of the page -->
<figure>
<img src="images/home_main_2.jpg" alt="Photo of Harry, Hermione, Ron and Sirius Black" />
</figure>
<section class="flex_column gradient_bkg">
<h1>Our Attractions</h1>
<h2>Immerse yourself in the magic and, through Augmented and Virtual Reality, live the most unforgettable experience you've ever had</h2>
<div id="buy_tickets" class="find_more"><!--This section would be a link to the Tickets page-->
<h2>Tickets</h2>
<a href="not_found.html">You'd better purchase in advance</a>
</div>
</section>
</main>
<!-- Section talking of the Virtual Reality attractions available in the park-->
<article id="art_vr_attractions" class="bkg_container" ><!-- This section adverts one of the attractions of the theme park-->
<figure>
<img src="images/virtual-reality_big.jpg" alt="A virtual reality headset"/>
</figure>
<div class="flex_column gradient_bkg">
<header>
<h3>Virtual Reality Attractions</h3>
</header>
<p>Immerse yourself in rides that are out of this world, literally! With all-new Virtual Reality (VR) adventure rides! Experience new dimensions with 4D surround-sound and 4K video resolution. Watch all your favourite characters come to life and immerse yourself in the adventure.</p>
</div>
</article>
<article id="art_ride_a_broomstick" class="bkg_container" ><!-- This section adverts one of the attractions of the theme park-->
<figure>
<img src="images/broomstick-hp.jpg" height="500" width="980" alt="A person enjoying the experience of riding a broomstick in virtual reality"/>
</figure>
<div class="flex_column gradient_bkg">
<header>
<h3>Ride a Broomstick VR experience</h3>
</header>
<h4>Experience the thrilling ride on our VR Broomstick</h4>
</div>
</article>
<article id="art_quidditch_match" class="bkg_container"><!-- This section adverts one of the attractions of the theme park-->
<figure>
<img src="images/broomstick.jpg" height="500" width="980" alt="Harry Potter riding a broomstick in a Quidditch match"/>
</figure>
<div class="flex_column gradient_bkg">
<header>
<h3>Play a virtua-real Quidditch match</h3>
</header>
<h4>Take on your friends in a fully-immersive quidditch match as you fly through the air chasing the elusive Golden Snitch</h4>
</div>
</article>
<article id="art_visit_gringott" class="bkg_container"><!-- This section adverts one of the attractions of the theme park-->
<figure>
<img src="images/gringotts.jpg" height="500" width="980" alt="Interiors of Gringott's bank and Griphook the Goblin"/>
</figure>
<div class="flex_column gradient_bkg">
<header>
<h3>Visit Gringott's cave</h3>
</header>
<h4>Join Harry, Ron, and Hermoine in the events of "Harry Potter and the Deathly Hollows - Part 2" as they infiltrate Gringotts Bank to retrieve a Horcrux to defeat Lord Voldemort.</h4>
</div>
</article>
<article id="art_find_the_horcruxes" class="bkg_container"><!-- This section adverts one of the attractions of the theme park-->
<figure>
<img src="images/horcruxes.jpg" height="500" width="980" alt="Characters of Harry Potter after the Horcruxes"/>
</figure>
<div class="flex_column gradient_bkg">
<header>
<h3>Find the Horcruxes</h3>
</header>
<h4>Join Harry as he searches for the Horcrux with the only known book: "Secrets of the Darkest Act"</h4>
</div>
</article>
<aside id="buy_now" class="find_more "><!-- This section describes the options available for tickets. They would send to the Tickets page for details-->
<!--This section would be a link to the Tickets page-->
<h6><a href="not_found.html">Buy Your Tickets NOW</a></h6>
</aside>
<!-- Section talking of the Augmented Reality attractions available in the park-->
<article id="art_ar_attractions" class="bkg_container" ><!-- This section adverts one of the attractions of the theme park-->
<figure>
<img src="images/augmented-reality_big.jpg" alt="A virtual reality headset"/>
</figure>
<div class="flex_column gradient_bkg">
<header>
<h3>Augmented Reality Attractions</h3>
</header>
<p>Take your virtual experience to the next level with interactive augmented reality adventures! Completely replace your real-world environment with the latest in haptic multi-sensory technology. Feel as if you are in the action and forge your own path with multiple story-lines and environments.</p>
</div>
</article>
<article id="art_platform" class="bkg_container" ><!-- This section adverts one of the attractions of the theme park-->
<figure>
<img src="images/hogwarts_express.jpg" height="500" width="980" alt="Hogwarts Express on platform 9 3/4" />
</figure>
<div class="flex_column gradient_bkg">
<header>
<h3>Where the journey begins: Platform 9 3/4</h3>
</header>
<h4>Take your family to Platform Nine and Three-Quarters, hidden from view between platforms 9 and 10. Ride the Hogwarts Express and start your own wizrding adventure!</h4>
</div>
</article>
<article id="art_ministry_of_magic" class="bkg_container"><!-- This section adverts one of the attractions of the theme park-->
<figure>
<img src="images/ministry_of_magic.jpg" height="500" width="980" alt="Entrance of the Ministry of Magic"/>
</figure>
<div class="flex_column gradient_bkg">
<header>
<h3>Visit the Ministry of Magic</h3>
</header>
<h4>Join the Minister from Magic as he informs the Muggle Prime Minister of the existance of the wizarding world in this exciting visit to the Ministry of Magic</h4>
</div>
</article>
<article id="art_forbidden_forest" class="bkg_container"><!-- This section adverts one of the attractions of the theme park-->
<figure>
<img src="images/forbidden_forest.jpg" height="500" width="980" alt="Harry, Hermione and Ron running in the Forbidden Forest"/>
</figure>
<div class="flex_column gradient_bkg">
<header>
<h3>Venture deep into the Forbidden Forest</h3>
</header>
<h4>Join Hagrid the Gamekeeper at the edge of the Forbidden Forest where many creatures dark, dangerous and friendly call home</h4>
</div>
</article>
<article id="art_magical_creatures" class="bkg_container"><!-- This section adverts one of the attractions of the theme park-->
<figure>
<img src="images/centaur.jpg" height="500" width="980" alt="Picture of a Centaur"/>
</figure>
<div class="flex_column gradient_bkg">
<header>
<h3>Magical creatures exhibition</h3>
</header>
<h4>At night, Tree roots and stumps at the edge of the Dark Forest are barely visible in near blackness. Here, many magical creatures roam and perform incredible acts of magic</h4>
</div>
</article>
<article id="art_hogwarts_school" class="bkg_container"><!-- This section adverts one of the attractions of the theme park-->
<figure>
<img src="images/hogwarts_castle.jpg" width="980" alt="People in Hogwarts castle enjoying virtual reality attractions"/>
</figure>
<div class="flex_column gradient_bkg">
<header>
<h3>Visit Hogwarts school</h3>
</header>
<h4>Enroll in the Hogwarts School of Witchcraft and Wizardry and put on the sorting hat to begin your journey as a young wizard</h4>
</div>
</article>
<article id="art_diagon_alley" class="bkg_container"><!-- This section adverts one of the attractions of the theme park-->
<figure>
<img src="images/diagon_alley.jpg" width="980" alt="Picture of Diagon Alley by night"/>
</figure>
<div class="flex_column gradient_bkg">
<header>
<h3>Have a walk in Diagon Alley</h3>
</header>
<h4>Just behind the Leaky Couldron pub, the cobblestoned wizarding alley completely hidden from Muggles is a wizarding community with characters of all shapes and sizes. Come join in the fun and play some bar games with fellow wizards!</h4>
</div>
</article>
<footer id="footer"><!-- footer of the page containing the footer navbar, the Follow us section and other links-->
<nav id="footer_navbar" class="navbar"><!-- Secondary navigation bar -->
<ul id="fnb_1st">
<li><a href="not_found.html">Where we are</a></li>
<li><a href="not_found.html">How to get here</a></li>
<li><a href="not_found.html">Opening times</a></li>
</ul>
<ul id="fnb_2nd">
<li><a href="not_found.html">When you arrive</a></li>
<li><a href="not_found.html">Facilities</a></li>
<li><a href="not_found.html">FAQ</a></li>
</ul>
<ul id="fnb_3rd">
<li><a href="contactUs.html">Contact us</a></li>
<li><a href="not_found.html">Partnership (Schools)</a></li>
<li><a href="not_found.html">Private events</a></li>
<li><a href="not_found.html">Additional needs</a></li>
</ul>
<ul id="fnb_followus">
<li><h5>Follow us:</h5></li>
<li><a href="http://www.facebook.com"><img src="images/follow_us_facebook.svg" width="64" height="64" alt="Follow us on Facebook" /></a></li>
<li><a href="http://www.twitter.com"><img src="images/follow_us_twitter.svg" height="64" width="64" alt="Follow us on Twitter" /></a></li>
<li><a href="http://www.instagram.com"><img src="images/follow_us_instagram.svg" height="64" width="64" alt="Follow us on Instagram" /></a></li>
<li><a href="http://www.youtube.com"><img src="images/follow_us_youtube.svg" height="64" width="64" alt="Follow us on Youtube" /></a></li>
<li><a href="http://www.instagram.com"><img src="images/follow_us_tripadvisor.svg" height="64" width="64" alt="Follow us on TripAdvisor" /></a></li>
</ul>
<ul id="fnb_corp">
<li><a href="not_found.html">Privacy Policy</a></li>
<li><a href="not_found.html">Terms and Conditions</a></li>
<li><a href="not_found.html">Work for us</a></li>
</ul>
</nav>
</footer>
</body>
</html>