-
Notifications
You must be signed in to change notification settings - Fork 0
/
services.html
154 lines (143 loc) · 7.39 KB
/
services.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
<!DOCTYPE html>
<html lang="en">
<!-- Head section -->
<head>
<title>Crazy Coaster Theme Park</title>
<link href="https://fonts.googleapis.com/css?family=Creepster&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/96deacfc14.js"></script>
<meta charset="utf-8">
<meta name="description" content="The funniest park on earth">
<meta name="author" content="Web-dev team">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="'Theme Park', Attractions">
<link rel="stylesheet" type="text/css" href="style/style.css">
<script src="js/hamburgerMenu.js"></script>
</head>
<!-- Visible document body -->
<body>
<div class='page'>
<!--Mobile Nav bar-->
<nav class="navBar" id="mobileNavBar">
<a href="index.html"><i class="far fa-jack-o-lantern mobileLogo"></i></a>
<a href="index.html"><i class="fab fa-fort-awesome navMenuIcon"></i> Home <i class="fab fa-fort-awesome navMenuIcon"></i></a>
<a href="services.html"><i class="far fa-ticket-alt navMenuIcon"></i> Tickets <i class="far fa-ticket-alt navMenuIcon"></i></a>
<a href="attractions.html"><i class="fal fa-alicorn navMenuIcon"></i> Attractions <i class="fal fa-alicorn navMenuIcon"></i></a>
<a href="services.html"><i class="far fa-concierge-bell navMenuIcon"></i> Services <i class="far fa-concierge-bell navMenuIcon"></i></a>
<a href="index.html#mapImage"><i class="far fa-map-signs navMenuIcon"></i> Map <i class="far fa-map-signs navMenuIcon"></i></a>
<a href="javascript:void(0);" class="mobileMenuIcon" onclick="menuFunction()">
<i class="far fa-bars"></i>
</a>
</nav>
<!--Nav bar-->
<nav class="navBar" id="topNavBar">
<a href="index.html"><i class="fab fa-fort-awesome navMenuIcon"></i> Home <i class="fab fa-fort-awesome navMenuIcon"></i></a>
<a href="services.html"><i class="far fa-ticket-alt navMenuIcon"></i> Tickets <i class="far fa-ticket-alt navMenuIcon"></i></a>
<a href="attractions.html"><i class="fal fa-alicorn navMenuIcon"></i> Attractions <i class="fal fa-alicorn navMenuIcon"></i></a>
<a href="services.html"><i class="far fa-concierge-bell navMenuIcon"></i> Services <i class="far fa-concierge-bell navMenuIcon"></i></a>
<a href="index.html#mapImage"><i class="far fa-map-signs navMenuIcon"></i> Map <i class="far fa-map-signs navMenuIcon"></i></a>
</nav>
<!--Scrolling text-->
<div class="topBanner">
<p class="bannerText">Check out the new Crazy Coaster Season Pass!</p>
</div>
<!--The big header-->
<header>
<h1><i class="fal fa-tombstone headerIcon"></i> Services <i class="fal fa-tombstone headerIcon"></i></h1>
</header>
<!--The black nav bar/button bar-->
<div id="theOtherNavBar">
<a href="services.html"><i class="far fa-ticket-alt navBarIcon"></i> Get Tickets</a>
<a href="attractions.html"><i class="fal fa-alicorn navBarIcon"></i> Attractions</a>
<a href="services.html"><i class="far fa-concierge-bell navBarIcon"></i> Services</a>
<a href="index.html#mapImage"><i class="far fa-map-signs navBarIcon"></i> Map</a>
</div>
<!--Get tickets block-->
<div class="getTicketsContainer">
<div id="tickets">
<h2 id="ticketsText"> Buy Tickets </h2>
<div class="selectBlockContainer">
<select class="ticketsSelect"><option value="tickets" class="ticketsOption">Tickets</option></select>
<select class="ticketsSelect"><option value="promo1" class="ticketsOption">PROMO 1</option></select>
<select class="ticketsSelect"><option value="promo2" class="ticketsOption">PROMO 2</option></select>
<select class="ticketsSelect"><option value="seasonPass" class="ticketsOption">SEASON PASS</option></select>
</div>
</div>
</div>
<!--The big central block with text and images-->
<div class="otherServicesContainer">
<!--The Other Services block-->
<div class="otherServices">
<h2 class="servicesText"><i class="far fa-book-dead"></i> Other Services <i class="far fa-book-dead"></i></h2>
</div>
</div>
<div class="bodyContainer">
<!--Left column code-->
<div class="leftColumn">
<h2 class="subHeader"><i class="fal fa-hotel"></i> Hotel <i class="fal fa-hotel"></i></h2>
<img src='images/Park-Hotel-Small.jpg' alt='Hotel' class="columnImage">
<p class="mainTextDescription">
Yea, a night or two with the undead. You are free to roam between twilights dressed only with your white bedsheets...
provided by us, of course.
<br>Screamigs and chainsaw are the background music on every room. For complains, please dial 666.
<br> $150/night what a deadly deal!
</p>
</div>
<!--Div to account for the gap between the two columns-->
<div></div>
<!--Right column code-->
<div class="rightColumn">
<h2 class="subHeader"><i class="fal fa-broom"></i> Season Pass <i class="fal fa-broom"></i></h2>
<img src='images/Park-Season-Pass-Small.jpg' alt='Season Pass' class="columnImage">
<p class="mainTextDescription">
Oh, season pass, access granted to all the horrors and entertainment on the park. soda refill? You got it!
Premium hotel room where you can actually sleep? You got it!
<br> $2000 and stay till you die!
</p>
</div>
</div>
<div class="otherServicesContainer">
<!--The Food block-->
<div class="otherServices">
<h2 class="servicesText"><i class="far fa-hat-chef"></i> Food <i class="far fa-hat-chef"></i></h2>
</div>
</div>
<div class="bodyContainer">
<!--Left column code-->
<div class="leftColumn">
<h2 class="subHeader"><i class="far fa-cauldron"></i> Restaurant <i class="far fa-cauldron"></i></h2>
<img src='images/Park-Restaurant-Small.jpg' alt='Restaurant' class="columnImage">
<p class="mainTextDescription">
Spider legs sweetened with snake venom, piranha cupcake, served hot.
<br>No, we mean it, this is actual spider legs with actual venom.
<br> all you can eat for only $49.99
</p>
</div>
<!--Div to account for the gap between the two columns-->
<div></div>
<!--Right column code-->
<div class="rightColumn">
<h2 class="subHeader"><i class="fal fa-flask-poison"></i> Bar <i class="fal fa-flask-poison"></i></h2>
<img src='images/Park-Bar-Small.jpg' alt='Bar' class="columnImage">
<p class="mainTextDescription">
Feel the joy of tasting the ugliest poisons on earth, why, you say?...
because it is soo cool to die from the poisonous taste of the most incredible halloween themed drinks on the creepiest bar!
<br>Come on, if you weren't a creep, you wouldn't have come!
</p>
</div>
</div>
<!--The Ads section-->
<div class="adContainer">
<div class="ad">
<img src="images/ad.jpg" alt='Ad 1' class="adImage">
</div>
<div class="ad">
<img src="images/ad.jpg" alt='Ad 2' class="adImage">
</div>
</div>
</div>
<!--Footer-->
<footer id="footer">
©2019, The WebDev Team BScCS-UoL
</footer>
</body>
</html>