-
Notifications
You must be signed in to change notification settings - Fork 1
/
accommodation.html
138 lines (122 loc) · 6.43 KB
/
accommodation.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
<!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 | Accommodation</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 class="active"><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="banner bg-img zoom-2" style="background-image: url(images/hero-5.jpg); position: relative;">
<div class="container overlay flex center-x center-y" style="position: absolute;">
<h1>Accommodation</h1>
</div>
</section>
<!-- Header with informational text -->
<section class="container big-pad-top">
<h2 class="text-primary">Luxury 'Out of this World'</h2>
<p>Martian Splendour Resort aims to make its guests feel comfortable, despite being millions of miles from home. Thereby, it was vital that we spoiled our guests with a variety of exquisite accomomodation options. You can rest your head in luxury in either the Standard or Deluxe Suite. Alternatively, you can enjoy your own private infinity pool with the Villa accommodation.
</p>
</section>
<!-- 3 card grid layout displaying various resort activites -->
<!-- ROW 1 -->
<section class="container big-pad-top">
<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/standard-room.jpg);">
</div>
<div class="container flex lg-column sm-column">
<h3>Standard Suite</h3>
<p>Boasting muted tones and modern minimalist design, the Standard Suite is perfect for single guests or couples. The suite also includes a modest living area and kitchenette.</p>
<div class="flex center-x">
<a href="coming-soon.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/deluxe-room.jpg);">
</div>
<div class="container flex lg-column sm-column">
<h3 class>Deluxe Suite</h3>
<p>Enjoy a good night's rest in the spacious, comfortable and luxorious Deluxe Suite. This suite is great for groups of 3-4 and those looking to indulge themeselves.</p>
<div class="flex center-x">
<a href="coming-soon.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/villa-room.jpg);">
</div>
<div class="container flex lg-column sm-column">
<h3>Villa</h3>
<p>The Villa is easily the most premium living experience there is to offer. From the elegent high ceillings to the stunning infinity pool, what's not to love?</p>
<div class="flex center-x">
<a href="coming-soon.html" class="btn">Learn More</a>
</div>
</div>
</div>
</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>
</body>
</html>