-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
178 lines (161 loc) · 8.57 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta name='viewport' content='width=device-width'>
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700" rel="stylesheet">
<meta charset="utf-8">
<title>Martian Splendour Resort | Welcome</title>
<link rel="stylesheet" type="text/css" href="css/styles.css">
</head>
<body>
<!-- Navigation Bar -->
<nav id="main-menu" class="flex space-between sm-column relative">
<div id="logo" class="flex center-y">
<a href="index.html">
<img src="images/logo-5.png" alt="Resort company logo">
</a>
</div>
<div class="flex center-y sm-column bg-primary">
<!-- Hamburger menu for mobile devices -->
<label id="nav-toggle" class="flex center-y" for="toggle">☰</label>
<input type="checkbox" id="toggle"/>
<ul class ="flex sm-column lg-row center-y">
<li><a href="about.html">About</a></li>
<li><a href="accommodation.html">Accommodation</a></li>
<li><a href="things-to-do.html">Things to Do</a></li>
<li id="book-btn"><a href="book-now.html">Book Now</a></li>
</ul>
</div>
</nav>
<!-- Hero Section -->
<section class="hero-2 bg-img flex center-x center-y" style="background-image: url(images/hero-4.png);">
<div class="container">
<h1>Journey Into The Unknown</h1>
<a href="about.html" class="btn small-margin-top">Learn More</a>
</div>
</section>
<!-- Section displaying what Martian Splendour offers -->
<section class="container big-pad-top">
<div>
<h2 class="lg-align-left text-primary">Martian Splendour Resort</h2>
<p class="big-pad-bottom">Years and years of hard work have lead to this monumentous moment. No longer are we bound for Earth alone. No longer is space travel for astronauts only. Now we welcome a new era where all can enjoy the wonders of space. Don't miss out on this marvelous once-in-a-life-time experience. On Mars, greatness awaits you.</p>
</div>
<!-- Three card grid layout-->
<div class="card-container flex sm-column lg-row big-pad-bottom">
<!-- Card 1 -->
<div class="card-frame lg-column-3 box-shadow">
<div class="card-img" style="background-image: url(images/content/space-travel.jpg);">
</div>
<div class="container flex lg-column sm-column">
<h3>Resort Info</h3>
<p>The highly aniticipated Martian Splendour Resort is finally here! Via spacecraft, guests will journey into the unknown and enjoy a week-long stay on the infamous Red Planet. </p>
<div class="flex center-x">
<a href="about.html" class="btn">Learn More</a>
</div>
</div>
</div>
<!-- Card 2 -->
<div class="card-frame lg-column-3 box-shadow">
<div class="card-img" style="background-image: url(images/content/hotel-4.jpg);">
</div>
<div class="container flex lg-column sm-column">
<h3 class>Accommodation and Rooms</h3>
<p>At Martian Splendour Resort luxury is a top priority. With our grand and lavish accommodation you are guaranteed the best the universe has to offer.</p>
<div class="flex center-x">
<a href="accommodation.html" class="btn">Learn More</a>
</div>
</div>
</div>
<!-- Card 3 -->
<div class="card-frame lg-column-3 box-shadow">
<div class="card-img" style="background-image: url(images/content/dirtbike-2.jpg);">
</div>
<div class="container flex lg-column sm-column">
<h3>Fun Activities</h3>
<p>From off-road racing, sand tobogganing and awesome space-themed workshops there is much to enjoy.</p>
<div class="flex center-x">
<a href="things-to-do.html" class="btn">Learn More</a>
</div>
</div>
</div>
</div>
</section>
<!-- Section promoting the scenic helicopter rides offered at the resort -->
<section style="background: rgb(235, 233, 233);">
<div class="container pad-bottom big-pad-top center-x center-y">
<h2 class="text-primary">Serene Beauty</h2>
<p class="text-center" style="padding: 0 20%;">From dusk till dawn, the views on Mars are absolutely spectacular. Whether you are soaring on a scenic helicopter flight, taking a tour or simply strolling, you will have many chances to catch a glimpse.</p>
</div>
<!-- Hero image showcasing scenery from helicopter rides -->
<div class="hero bg-img zoom" style="background-image: url(images/hero-3.jpg); position: relative;">
<div class="container overlay flex center-x center-y" style="position: absolute;">
<h1>
<a href="gallery.html" class="text-secondary">Gallery</a>
</h1>
</div>
</div>
</section>
<!-- 50-50 Grid card grid with photo and text -->
<section class="flex sm-column lg-row card-container container big-pad-top big-pad-bottom">
<!-- Image card -->
<div class="bg-img card-frame lg-column-2 box-shadow sm-card-resize" style="background-image: url(images/hero-2.jpg);"></div>
<!-- Text Card -->
<div class="flex card-frame lg-column-2 box-shadow bg-primary sm-card-resize">
<div class="container flex lg-column sm-column center-y">
<h2 class="flex center-y">Enjoy Scenic Helicopter Rides</h2>
<div class="flex center-x">
<a href="things-to-do.html" class="btn">More Activities</a>
</div>
</div>
</div>
</section>
<!-- Section promoting the scenic helicopter rides offered at the resort -->
<section class="hero bg-img flex center-x center-y" style="background: #BF0436;">
<div class="container fun-facts">
<h1>Did you know?</h1>
<p id="fun-fact">Mars is named after the Roman God of War</p>
<a href="#" id="next-fact-btn" class="btn small-margin-top">Next Fact</a>
</div>
</section>
<footer>
<div class="container pad-top">
<div class="flex lg-row sm-column space-between">
<ul>
<li class="f-title"><a href="about.html">About</a></li>
<li><a href="coming-soon.html">Location</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="coming-soon.html">Getting Here</a></li>
<li><a href="coming-soon.html">Facts and Facilities</a></li>
<li><a href="references.html">References</a></li>
</ul>
<ul>
<li class="f-title"><a href="accommodation.html">Accommodation</a></li>
<li><a href="coming-soon.html">Standard Suite</a></li>
<li><a href="coming-soon.html">Deluxe Suite</a></li>
<li><a href="coming-soon.html">Villa</a></li>
</ul>
<ul>
<li class="f-title"><a href="things-to-do.html">Things to Do</a></li>
<li><a href="coming-soon.html">Land Activites</a></li>
<li><a href="coming-soon.html">Mars Tours</a></li>
<li><a href="coming-soon.html">Space Workshops</a></li>
<li><a href="coming-soon.html">Leisure</a></li>
<li><a href="coming-soon.html">Eat & Drink</a></li>
</ul>
<ul>
<li class="f-title"><a href="coming-soon.html">Contact Us</a></li>
<li><a href="coming-soon.html">Social Media</a></li>
<li><a href="coming-soon.html">Reservation/Booking</a></li>
<li><a href="coming-soon.html">Email</a></li>
<li class="f-title"><a href="book-now.html">Book Now</a></li>
</ul>
</div>
<hr>
<p class="small-pad-top small-pad-bottom">Martian Splendour Resort, Copyright © 2020</p>
</div>
</footer>
<!-- Javascript for Fun Fact section -->
<script src="js/jquery-3.5.1.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>