-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
116 lines (101 loc) · 5.64 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
<!DOCTYPE html>
<html lang="en">
<!-- Head section -->
<head>
<link href="https://fonts.googleapis.com/css?family=Creepster&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/96deacfc14.js"></script>
<title>Crazy Coaster Theme Park</title>
<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="#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="#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="far fa-jack-o-lantern headerIcon"></i> Crazy Coaster Theme Park <i class="far fa-jack-o-lantern headerIcon"></i></h1>
<p>Don't mind the clown with the red baloon</p>
</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="#mapImage"><i class="far fa-map-signs navBarIcon"></i> Map</a>
</div>
<!--The big central block with articles and images-->
<div class="bodyContainer">
<!--Left column code-->
<div class="leftColumn">
<h2 class="subHeader"><i class="far fa-bat"></i> The Ferris Wheel <i class="far fa-bat"></i></h2>
<img src='images/Park-Ferris-Wheel-Small.jpg' alt='Ferris Wheel' class="columnImage">
<p class="mainTextDescription">
Keep your hands away from rusty parts, don't mind the cracks!
</p>
<h2 class="subHeader"><i class="far fa-coffin"></i> The Magic Castle of Horrors <i class="far fa-coffin"></i></h2>
<img src='images/Park-Castle-Small.jpg' alt='Castle' class="columnImage">
<p class="mainTextDescription">
Oh yeah everyone loves castles. The only in town with several confirmed deaths, careful!
</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="far fa-spider-web"></i> The Shitty Rollercoaster <i class="far fa-spider-web"></i></h2>
<img src='images/Park-Roller-Coaster-Small.jpg' alt='RollerCoaster' class="columnImage">
<p class="mainTextDescription">
Please use diapers, that's all we can say.
</p>
<h2 class="subHeader"><i class="far fa-ghost"></i> The Slowest Carrousel <i class="far fa-ghost"></i></h2>
<img src='images/Park-Carrousel-Small.jpg' alt='Carrousel' class="columnImage">
<p class="mainTextDescription">
So boring...
</p>
</div>
</div>
<!--The map section-->
<div class="map-container">
<div id="mainMap">
<h1 id="mapHeader"><i class="far fa-skull-crossbones"></i> Getting to the Park <i class="far fa-skull-crossbones"></i></h1>
<p id="mapText">Just Past the cemetery, a bridge will bring you to the main door. No, there are no zombies in the way, all of them are here!
</p>
<img src="images/map.jpg" alt='Map' id="mapImage">
</div>
</div>
</div>
<!--Footer-->
<footer id="footer">
©2019, The WebDev Team BScCS-UoL
</footer>
</body>
</html>