-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
206 lines (190 loc) · 7.49 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
<!DOCTYPE html>
<html lang="en">
<!-- This head section contains all the invisible information about the page -->
<head>
<title>Theme park web site - Home</title>
<meta charset="utf-8">
<meta name="description" content="This is the fantastic theme park site.">
<meta name="author" content="Theme park content">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="refresh" content="600">
<meta name="keywords" content="Theme park">
<link rel="stylesheet" type="text/css" href="StyleSheet/style.css">
<style>
/* css styling for page elements */
h1{
text-align: center;
font-family: 'Trebuchet MS', sans-serif;
font-size: 30px;
animation-name: zoom-in-zoom-out;
animation-duration: 4s;
animation-iteration-count: infinite;
}
h2{
text-align: center;
font-family: 'Trebuchet MS', sans-serif;
font-size: 30px;
}
p{
text-align: center;
font-family: 'Trebuchet MS', sans-serif;
font-size: 22px;
animation-duration: 2s;
animation-name: slidein;
animation-timing-function: ease-out;
}
h4{
font-family: 'Trebuchet MS', sans-serif;
font-size: 25px;
}
li{
text-align: center;
font-family: 'Trebuchet MS', sans-serif;
font-size: 23px;
}
body{
background-color: rgb(242, 233, 244);
}
#headerImg{
width: 20%;
height: 80%;
animation-duration: 5s;
animation-name: fadeIn;
animation-timing-function: ease-out;
}
/* css animations */
@keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
@keyframes slidein {
from {
margin-left: 100%;
width: 300%;
}
to {
margin-left: 0%;
width: 100%;
}
}
@keyframes zoom-in-zoom-out {
0% {
transform: scale(1, 1);
}
50% {
transform: scale(1.5, 1.5);
}
100% {
transform: scale(1, 1);
}
}
</style>
</head>
<header>
<!-- logo was created using the website: https://www.canva.com/ -->
<object data="img/sunset logo.png" width="600px" id="logo">
</object>
</header>
<nav>
<!-- navbar and links to the other pages -->
<div class="navbar">
<div class="guide">
<a href="index.html" class="pages"><b><h2>Home</h2></b></a>
<a href="tickets.html" class="pages"><b><h2>Tickets</h2></b></a>
<a href="info.html" class="pages"><b><h2>Info</h2></b></a>
</div>
</div>
</nav>
<!-- This body section contains the structure for all the visble content -->
<body>
<div id="headerImg">
<img src="img\header photo1.jpg" alt="https://4kwallpapers.com/photography/ferris-wheel-silhouette-sunset-neon-lights-amusement-park-2161.html"/>
</div>
<div id="introTitle">
<br/>
<br/>
<h1>Welcome to the <i><b>Sunset</b></i> Theme park!</h1>
</div>
<!-- code copied from the embed video option on youtube so the video appears on screen -->
<iframe id="rollercoaster-vid" width="1000" height="380" src="https://www.youtube.com/embed/h_lcZcBcQ0o?start=24"
title="YouTube video player" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
align= "center"></iframe>
<br/>
<div id="introText">
<p>The theme park that you will never forget,<br/>
from our thrilling Infinity roller coaster
to a colorful fairy wheel that you can enjoy <b><i>the sunset</i></b> from.
</p>
</div>
<br/>
<div id="bestRides">
<h2>Best Rides</h2>
<br/>
<!-- used a list to organise the best rides paragraphs and images -->
<ul>
<li><b><i>The Infinity Roller Coaster</i></b></li>
<br/>
<p>Our most famous ride "the infinity roller coaster" that fills you with infinite joy and
thrill, <br/> most of our visitors ride it a second time, you down to beat that?</p>
<br/>
<img src="img\sunset rollercoaster 2.jpeg" alt="https://www.thejakartapost.com/travel/2020/03/31/virtual-theme-park-rides-you-can-experience-from-home.html"
style="box-shadow: 15px 15px rgb(69, 68, 68);" class="centerImg" />
<br/>
<br/>
<br/>
<li><b><i>The Rainbow Wheel</i></b></li>
<br/>
<p>A colorful rainbow wheel, that will take you on a smooth ride while you enjoy the
city view.</p>
<br/>
<img src="img\rainbow fairywheel.png" alt="https://adventure.howstuffworks.com/destinations/theme-parks/10-classic-amusement-park-rides.htm"
style="box-shadow: 15px 15px rgb(69, 68, 68);" class="centerImg" />
<br/>
<br/>
<br/>
<li><b><i>The swinger</i></b></li>
<br/>
<p>A classic swinging chairs ride that will get your heart beating and blood pumping so,
hold on tight! </p>
<br/>
<img src="img\sunset swing ride.jpg" alt="https://www.booking.com/articles/the-best-european-theme-parks-for-young-wheelchair-users.vi.html"
style="box-shadow: 15px 15px rgb(69, 68, 68);" class="centerImg"/>
</ol>
</div>
</body>
<footer>
<link rel="stylesheet" href="index.css">
<div class="info">
<div class="vdisc">
<h4>Visit us</h4>
<p class="infotext"><small>Sunset Park</small></p>
<p class="infotext"><small>CB1 2EW</small></p>
<p class="infotext"><small>Paris, France</small></p>
</div>
<div class="vdisc">
<h4>Open Hours</h4>
<p class="infotext"><small>Mon to Fri <b>8:00 am to 8:00 pm</b></small></p>
<p class="infotext"><small>Weekends <b>8:00 am to 10:00 pm</b></small></p>
</div>
<div class="vdisc">
<h4>Contact</h4>
<p class="infotext"><small>+12 34 567 890</small></p>
<p class="infotext"><small>Mon to Fri 9:00am to 5:00pm</small></p>
</div>
</div>
</footer>
<footer class="developer">
<!-- developers names and social media images that link to the respective website -->
<p> ©website developed by:
<small> Yasmine Chakkour; Weijie Li; Miha Dolinar</small>
<a href="https://www.instagram.com"> <img class="social-icon" src="/img/Instagram-Icon.png" alt="https://upload.wikimedia.org/wikipedia/commons/thumb/5/58/Instagram-Icon.png/640px-Instagram-Icon.png">
</a>
<a href="https://www.twitter.com"> <img class="social-icon" src="/img/twitter-icon.png" alt="https://www.pngitem.com/middle/TTwiwRo_image-transparent-twitter-icon-png-png-download/">
</a>
<a href="https://www.facebook.com"> <img class="social-icon" src="/img/facebook-icon.jpg" alt="https://www.assistanceleague.org/las-vegas/thrift-shop/pngtree-facebook-icon-png-image_943697/">
</a>
</p>
</footer>
</html>