-
Notifications
You must be signed in to change notification settings - Fork 0
/
ecommerce.html
221 lines (206 loc) · 12.2 KB
/
ecommerce.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
<!DOCTYPE html>
<html lang="en">
<!-- Head contains all information about the page: metadata, keywords, authors, link to stylesheets -->
<!-- Also we define title of the page, viewport scaling -->
<head>
<!-- Title for the page that is placed on tab of the browser -->
<title>Webdy Attractions</title>
<!-- Here we specifying a recommended set of HTML5 charachters -->
<meta charset="utf-8" />
<!-- We define description with specific keywords to help SEO, so serach engines could easily find our website -->
<meta name="description"
content="official website for the Webdy amusement park where you can find information about the park, buy tickets and buy merchandise" />
<meta name="keywords"
content="Webdy, amusement, theme park, children park, concerts, events, tickets, roller coasters, wheel, food" />
<!-- Metdata that contains information about authors of the website -->
<meta name="author"
content="UoL Goldsmiths Web Development April 2023 Group 34: Lisa, David, Hyukjin, Andy, Fabio" />
<!-- Here defined visible area of the site: initial scale level that is set to be 1 for the screen width -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Here the link for the css file with all styles and styling rules -->
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<!-- Body tag contain the visible part of our website. Here we define structure of what and how content would look like -->
<!-- Primarily, we splitted it to three semantic sections: header, main, footer. -->
<!-- Each of these sections contain data accroding it's semantic meaning -->
<body>
<header aria-label="Navigation">
<!-- Big flexbox container to align all our elements evenely -->
<div class="nav-container">
<!-- Logo container element, that will push user to the homepage -->
<a class="logo-container" href="index.html">
<h1 class="webdy-logo accent-font lime-font" aria->
WEBDY
</h1>
</a>
<!-- We used nav tag for pure semantic meanings, so screen reader could easily read the content: links -->
<!-- Also it help to understand the makrup for other developers and style components -->
<nav class="nav-links">
<a href="ecommerce.html#rides" class="nav-link">Rides</a>
<a href="ecommerce.html#events" class="nav-link">Events</a>
<a href="ecommerce.html#restaurants" class="nav-link">Restaurants</a>
<a href="index.html#reviews" class="nav-link">Reviews</a>
<a href="help.html" class="nav-link">Help</a>
</nav>
</div>
</header>
<!-- Main navigation contains the content of the website: all articles, photos, tables and etc. -->
<main>
<section class="hero-banner">
<img class="hero-banner-image" src="assets/rides/galactic_cruiser.jpg"
alt="Roller Coaster advertising banner photo" />
<div class="hero-banner-content">
<h1 class="accent-font light-font">Give a Chance</h1>
<br />
<h1 class="accent-font lime-font">To our Slides</h1>
<p class="light-font">
Come to the opening of the biggest high-speed slides in
the whole world! 15 minutes of adrenaline and
unforgettable impressions!
</p>
<button class="btn primary-button">Learn More</button>
</div>
</section>
<div class="grid-container-index">
<section id="rides" class="res-container dark-font">
<h2 class="accent-font">Rides</h2>
<div class="card-container">
<div class="card">
<img src="assets/rides/dragons_flight.jpg" alt="Dragon's Flight" />
<h3 class="attraction-name">Dragon's Flight</h3>
<p class="attraction-description">
Immerse yourself in a mythical world atop the wings of a dragon on our Dragon's Flight
rollercoaster! Soar through enchanted forests, swoop around towering castle turrets, and
dive into hidden valleys. Feel your heart race on this thrilling high-speed journey suitable
for all brave adventurers.
</p>
</div>
<div class="card">
<img src="assets/rides/mystic_journey.jpg" alt="Mystic River Journey" />
<h3 class="attraction-name">Mystic River Journey</h3>
<p class="attraction-description">
Uncover the secrets of the Mystic River on this relaxing yet exciting water ride. Travel
through caves with bioluminescent creatures, beautiful waterfalls, and ancient ruins. Get
ready for the surprise splashdown at the end! Great for family members of all ages to enjoy.
</p>
</div>
<div class="card">
<img src="assets/rides/galactic_cruiser.jpg" alt="Galactic Battle Star Cruiser" />
<h3 class="attraction-name">Galactic Battle Star Cruiser</h3>
<p class="attraction-description">
Blast off into space aboard the Galactic Battle Star Cruiser! Navigate asteroid fields,
engage in epic laser battles and traverse wormholes in this interactive 4D dark ride.
Experience the awe and wonder of space travel with cutting-edge special effects and
thrilling gameplay. Recommended for ages 7 and up.
</p>
</div>
</div>
</section>
<section id="events" class="res-container dark-font">
<h2 class="accent-font">Events</h2>
<div class="card-container">
<div class="card">
<img src="assets/events/skrillex.jpg" alt="Skrillex" />
<h3 class="attraction-name">Skrillex Live!</h3>
<p class="attraction-description">
Get ready to dance the night away with Grammy Award-winning DJ Skrillex! Experience his
iconic dubstep beats under a mesmerizing light show. Feel the electric energy of his biggest
hits like "Bangarang" and "Scary Monsters and Nice Sprites". Must be 18 or older to attend.
</p>
</div>
<div class="card">
<img src="assets/events/prodigy.jpeg" alt="Prodigy Firestarter Concert" />
<h3 class="attraction-name">Prodigy Firestarter Concert</h3>
<p class="attraction-description">
It's time to ignite your night with the Prodigy Firestarter Concert! Experience the
pioneering electronic beats from this legendary group, live in our main arena. Hear their
biggest hits like "Firestarter" and "Breathe". This event is recommended for ages 16 and up.
</p>
</div>
<div class="card">
<img src="assets/events/peppa_pig.jpeg" alt="Peppa Pig's Grand Playdate" />
<h3 class="attraction-name">Peppa Pig's Grand Playdate</h3>
<p class="attraction-description">
An exciting day for our younger visitors! Join Peppa Pig and her friends for a fun-filled
playdate. Watch a live show featuring your favorite characters, enjoy interactive games, and
even meet Peppa Pig herself! Perfect for families with children under 10.
</p>
</div>
</div>
</section>
<section id="restaurants" class="res-container dark-font">
<h2 class="accent-font">Restaurants</h2>
<div class="card-container">
<div class="card">
<img src="assets/restaurants/asteroid_dinner.jpg" alt="Asteroid Diner" />
<h3 class="attraction-name">Asteroid Diner</h3>
<p class="attraction-description">
Venture into the great beyond at the Asteroid Diner. With a starry atmosphere that
transports you to outer space, our menu boasts a cosmic array of dishes from Galaxy Burgers
to Nebula Nachos. Vegetarian and gluten-free options are available.
</p>
</div>
<div class="card">
<img src="assets/restaurants/jungle_joes.jpg" alt="Jungle Joe's" />
<h3 class="attraction-name">Jungle Joe's</h3>
<p class="attraction-description">
Deep in the heart of the park, Jungle Joe's offers a tropical escape for hungry explorers.
Dine in our tree-top huts and enjoy a range of fresh, exotic fare like Tiki Tacos and
Rainforest Rice Bowls. Try our legendary Volcano Pizza, if you dare!
</p>
</div>
<div class="card">
<img src="assets/restaurants/candy_kingdom.jpg" alt="Candy Kingdom" />
<h3 class="attraction-name">Candy Kingdom</h3>
<p class="attraction-description">
A dream come true for those with a sweet tooth, Candy Kingdom serves a variety of whimsical
treats in a fairytale setting. From Unicorn Milkshakes to Pixie Popcorn, there's a
delightful dessert for everyone in the family. Don't forget to try our famous Rainbow
Waffles!
</p>
</div>
</div>
</section>
</div>
</main>
<footer class="footer-container bg-dark">
<div class="site-name">
<a href="/">
<h2 class="accent-font lime-font">WEBDY</h2>
</a>
</div>
<div class="footer-details">
<!-- CONTACTS -->
<div class="footer-column">
<h3>Contact Info</h3>
<p>111 Flex Avenue, Party City, Heaven, 777777</p>
<p>Email: example@examplemail.com</p>
<p>Phone: (123) 456 - 7890</p>
</div>
<!-- SOCIAL MEDIA -->
<div class="footer-column">
<h3>Follow Us</h3>
<div>
<a href="https://www.instagram.com/" target="_blank"><img src="assets/instagram.png"
alt="Follow us on Instagram" /></a>
<a href="https://twitter.com/" target="_blank"><img src="assets/twitter.png"
alt="Follow us on Twitter" /></a>
<a href="https://facebook.com/" target="_blank"><img src="assets/facebook.png"
alt="Follow us on Facebook" /></a>
</div>
</div>
<!-- SITEMAP -->
<div class="footer-column">
<h3>Site Map</h3>
<a href="ecommerce.html#events">Events</a>
<a href="ecommerce.html#rides">Rides</a>
<a href="ecommerce.html#restaurants">Restaurants</a>
<a href="help.html">Help</a>
</div>
</div>
<div class="developer-info">
<p>Developed by Andy, Lisa, David, Fabio, Hyukjin. © 2023</p>
</div>
</footer>
</body>
</html>