-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
218 lines (148 loc) · 6.91 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
<!DOCTYPE html>
<html>
<head>
<title>Happy Valley</title>
<link rel="icon" type="image/x-icon" href="./assets/happy_valley_logo2.png">
<link rel="stylesheet" href="style/style.css">
</head>
<body>
<!-- Header with naviagtion urls -->
<div class="navigation_bar">
<img class="logo" src = "assets/happy_valley_logo2.png" alt="Theme Park Logo" >
<h2 class="title">Happy Valley</h2>
<ul class="">
<li><a href="index.html">Home</a></li> <!-- Return always to home (main page) -->
<li><a href="#services">Services</a></li> <!-- Scroll to services -->
<li><a href="#attractions">Attractions</a></li> <!-- Scroll to Attractions -->
<li><a href="#shopping">Shopping</a></li> <!-- Scroll to Shopping -->
</ul>
<button onclick="window.location.href='tickets.html';" target="_blank">Buy Ticket</button> <!-- Navigate to buy ticket -->
</div>
<!-- Image Galleries from our park -->
<div class="gallery">
<img src="assets/theme_park_img1.jpg" width="200" alt="Theme park attraction image" />
</div>
<!-- Strt of Services Section -->
<div class="services" >
<h2 class="title"> Services</h2>
<div style="display: flex; ;">
<div class="item" >
<img src="assets/parking1.jpg" alt="Parking image" width="200">
<h2>Free parking</h2>
</div>
<div class="item" >
<img src="assets/freewifi_img.jpg" alt="wifi image" width="200">
<h2>Free wifi</h2>
</div>
<div class="item" >
<img src="assets/restaurant_img1.jpg" alt="restaurant image" width="200">
<h2>Restaurants</h2>
</div>
<div class="item" >
<img src="assets/gift-shop.jpg" alt="gift shop image" width="200">
<h2>Gift shop </h2>
</div>
</div>
</div>
<!-- Strt of attractions section -->
<div class="attractions" >
<h2 class="title">Attractions</h2>
<div style="display: flex;">
<div style="width: 25%;">
<img src="assets/rollercoaster.jpg" alt="rollercoaster image" style="width: 300px; height: 200px;">
<h3>Rollercoaster</h3>
<p>A rollercoaster: twists, turns, drops, and pure exhilaration! Hold on tight, scream with joy, and enjoy the thrilling ride of a lifetime!</p>
</div>
<div class="sperator" ></div>
<div style="width: 25%;">
<img src="assets/upsidedown.jpg" alt="upside down attraction image" style="width: 300px; height: 200px;">
<h3>Ferry wheel</h3>
<p>
Ferris wheel: Soaring high, serene views, pure delight! Relax, enjoy, and embrace the magical ride!</p>
</div>
<div class="sperator"></div>
<div style="width: 25%;">
<img src="assets/flying-swings.jpg" alt="flying swings attraction image" style="width: 300px; height: 200px;">
<h3>Upside down</h3>
<p>Upside down: Thrilling flips, gravity defied, pure exhilaration! Hold your breath, embrace the rush, and experience the heart-pounding adventure!
</p>
</div>
<div class="sperator"></div>
<div style="width: 25%;">
<img src="assets/carrousel.jpg" alt="carrousel attraction image" style="width: 300px; height: 200px;">
<h3>Carrousel</h3>
<p>Carousel: Whimsical charm, timeless joy, pure enchantment! Spin, smile, and create cherished memories on this delightful ride!
</p>
</div>
</div>
</div>
<!-- Strt of Shopping Section -->
<div class="shopping">
<h2 class="title">Shopping</h2>
<div style="display: flex; text-align: center">
<div class="item">
<img src="assets/souvenir.jpg" alt="souvenir shop" style="width: 300px; height: 300px;">
<h2>Souvenirs</h2>
</div>
<div class="item">
<img src="assets/white-shirt.jpg" alt="white shirt" style="width: 300px; height: 300px;">
<h2>Clothes & Merchandise</h2>
</div>
<div class="item">
<img src="assets/sale-photo.jpg" alt="family in a rollercoaster" style="width: 300px; height: 300px;">
<h2>Ride photos & videos </h2>
</div>
<div class="more">
<div>
<img src="assets/right-arrow.png" alt="gift shop image" style="width: 200px; height: 200px;;">
<p style="font-size: 25px;">More</p>
</div>
</div>
</div>
</div>
<!-- Upcoming and offer from our park -->
<div style="display: flex;margin-top: 20px;">
<div style="width: 45%; padding-left: 20px; padding-right: 20px;">
<h1>Upcoming events</h1>
<b>Superhero Week:</b> Celebrate the world of superheroes with a dedicated
event where visitors can meet and interact with their
favorite comic book heroes. The park will host special
superhero-themed shows, character meet-and-greets, and offer
exclusive merchandise related to popular superheroes
Fantasy Fair: Transport to a magical realm with a Fantasy Fair event.
the park will create an enchanted atmosphere with fairy
tale characters, mythical creatures, and whimsical decorations.
Visitors can enjoy live performances, participate in fantasy-themed games
and activities, and dress up in their favorite fantasy costumes.
</div>
<di style="width: 1px; height: 300px;; background-color: lightgray; margin-top: 20px;">
</di>
<div style="width: 45%; padding-left: 20px; padding-right: 20px;">
<h1>Summer events</h1>
Summer Splash: Beat the heat with a Summer Splash Bash event! The park
will set up water-based attractions and activities, such as water slides, splash
pads, and water balloon fights. Visitors can also enjoy water-themed shows, live
music performances, and beach games. Special tropical-themed food and refreshing
beverages will be offered to enhance the summertime atmosphere.
</div>
</div>
<div class="location">
<h2 class="title">Location</h2>
<img src="assets/map2.jpg" alt="map of the theme park" style="width: 1800px; height: 600px;">
</div>
<!-- Strt of footer -->
<footer class="footer">
<div class="contact">
<h2>Contact Us</h2>
<div>
<img class="contact-icon" src="../assets/phone-icon.png" width="50" />
<span>+123 555 5555</span>
</div>
</div>
<div class="copyright">
<h4>Copyright Happy Valley 2023</h4>
</div>
<a href="visitorsPage.html">Story & feedback</a> <!-- Navigate to feedback -->
</footer>
</body>
</html>