-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
283 lines (282 loc) · 17.1 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
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#1f211e">
<link defer rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer"/>
<meta name="msapplication-TileColor" content="#1f211e">
<meta name="description" content="Nomadic Holidays offers great alpine retreats for those who want a nice relaxing stay away from the city life">
<meta name="theme-color" content="#1f211e">
<title>Nomadic Holidays | The perfect holiday for those who want to be closer to nature</title>
<link rel="stylesheet" href="./style.css">
<script defer src="script.js"></script>
</head>
<body>
<div class="wrapper">
<!--HERO PARALLAX-->
<section>
<div class="parallax">
<img width="1920" height="1080" draggable="false" src="./img/background.webp" alt="parallax forest at sunset">
<img id="sun" width="1920" height="1080" draggable="false" src="./img/sun.webp">
<img width="1920" height="1080" draggable="false" src="./img/foreground.webp">
<img id="tree-left" width="1920" height="1080" draggable="false" src="./img/tree_left.webp">
<img id="tree-right" width="1920" height="1080" draggable="false" src="./img/tree_right.webp">
<h1 id="header">
nomadic holidays
</h1>
</div>
</section>
<!--HERO MOBILE/TABLET-->
<div class="mobile-graphic">
<img width="1920" height="1080" id="large_screens" src="./img/mobile_graphic_large.webp" alt="forest at sunset">
<img width="1920" height="1080" id="medium_screens" src="./img/mobile_graphic_medium.webp" alt="forest at sunset">
<img width="1920" height="1080" id="small_screens" src="./img/mobile_graphic_small.webp" alt="forest at sunset">
<img width="1920" height="1080" id="extra_small_screens" src="./img/mobile_graphic_extra_small.webp" alt="forest at sunset">
<h1>nomadic holidays</h1>
</div>
<div class="content-wrapper">
<!--POLAROIDS-->
<section>
<div class="polaroids">
<div class="img-wrapper">
<img width="1920" height="1080" draggable="false" src="./img/lakeside.webp" alt="cabin in front of a lake">
<p>beautiful vistas</p>
</div>
<div class="text">
<h2>cabin retreats</h2>
<p>We have a wide variety of cabins available, ranging from luxurious to rustic. We also offer a variety of activities for you to enjoy, be it with friends family or, or if your more of a lone wolf we have something for you to. Kayaking, walking trails, mountain climbing and much more.</p>
<p id="quote"><span>''</span> This is the most relaxed i've felt in years <span>''</span></p>
</div>
</div>
<div class="polaroids">
<div class="text">
<h2>gorgeous vistas</h2>
<p>If you like rural getaways where you can rest and relax while being close to nature, then look no further than exclusive cabins centered around the most beautiful views from around the world, breathe in that alpine air while relaxing and soaking in all that rurual beauty.</p>
<p id="quote"><span>''</span> This is the best holiday i've ever been on <span>''</span></p>
</div>
<div class="img-wrapper">
<img width="1920" height="1080" draggable="false" src="./img/cabin.webp" alt="cabin facing a mountain">
<p>relaxing getaway</p>
</div>
</div>
</section>
<!--BOOK NOW PARALLAX-->
<section>
<div id="parallax-slow">
<button>
book now
</button>
</div>
<div id="mobile-bg">
<button>
book now
</button>
</div>
</section>
<div class="title">
<h2>Fun for the whole family</h2>
<p>Choose from a range of activities</p>
</div>
<!--ACTIVITIES-->
<section>
<div class="activities">
<div class="card">
<i class="fa-solid fa-person-hiking"></i>
<h3>hiking</h3>
<p>We offer a variety of hiking trails so you can climb the worlds most beautiful mountain ranges imaginable, camp out and enjoy the surrounding stunning scenery.</p>
</div>
<div class="card">
<i class="fa-solid fa-sailboat"></i>
<h3>kayaking</h3>
<p>Fun for the whole family. We have a variery of kayaking boats on offer, from single to double seats, come and enjoy the calm lakes and rivers of all our holiday destinations.</p>
</div>
<div class="card">
<i class="fa-solid fa-mountain-sun"></i>
<h3>Mountaineering</h3>
<p>We have a variety of climbing gear on offer. You will to be able to climb and experience the thrill of climbing some of the worlds most incredible mountainous ranges.</p>
</div>
<div class="card">
<i class="fa-solid fa-paper-plane"></i>
<h3>paragliding</h3>
<p>Feel the wind on your face as you paraglide through the most wonderfully beautiful vistas you have ever seen, go at it alone or with a friend, there's nothing quite like it.</p>
</div>
</div>
</section>
<div class="mobile-title">
<h2>Wide range of cabins</h2>
<p>Pick a cabin that's best suited for you</p>
</div>
<!--RENTAL CABINS-->
<section>
<div class="cabin-rental-wrapper">
<div class="cabin-rental">
<div class="card">
<img width="1920" height="1080" draggable="false" src="./img/cabin_affordable.webp" alt="affordable cabin">
<div class="contents">
<h3>basic</h3>
<h4>from £500</h4>
<div class="icons">
<ul>
<li><a data-tooltip ="shower"><i class="fa-solid fa-shower"><span> x1, </span></i></a></li>
<li><a data-tooltip ="kitchen"><i class="fa-solid fa-fire-burner"><span> x1, </span></i></a></li>
<li><a data-tooltip ="bedroom"><i class="fa-solid fa-bed"><span> x1</span></i></a></li>
</ul>
</div>
<p>On the market for a cabin without all the amenities of home, then look no further than our authentic experience of cabin life, we offer a single bedroom cabin with a lovely bathroom and kitchen, and the best part is the incredible view that stretches, as far as the eye can see.</p>
<button>
BOOK NOW
</button>
</div>
</div>
<div class="card">
<img width="1920" height="1080" draggable="false" src="./img/cabin_rustic.webp" alt="rustic cabin">
<div class="contents">
<h3>rustic</h3>
<h4>from £750</h4>
<div class="icons">
<ul>
<li><a data-tooltip ="hot tub"><i class="fa-solid fa-hot-tub-person"><span> x1, </span></i></a></li>
<li><a data-tooltip ="shower"><i class="fa-solid fa-shower"><span> x1, </span></i></a></li>
<li><a data-tooltip ="kitchen"><i class="fa-solid fa-fire-burner"><span> x1, </span></i></a></li>
<li><a data-tooltip ="bedroom"><i class="fa-solid fa-bed"><span> x1</span></i></a></li>
</ul>
</div>
<p>Prefer the rustic feel of a cabin, if so then look no further than our range of rustic cabins. They are fully furnished with everything you would expect from a range of kitchen appliances to a moderately sized hot tub for you to enjoy, what a better way to spend a weekend.</p>
<button>
BOOK NOW
</button>
</div>
</div>
<div class="card">
<img width="1920" height="1080" draggable="false" src="./img/cabin_deluxe.webp" alt="deluxe cabin">
<div class="contents">
<h3>deluxe</h3>
<h4>from £900</h4>
<div class="icons">
<ul>
<li><a data-tooltip ="hot tub"><i class="fa-solid fa-hot-tub-person"><span> x1, </span></i></a></li>
<li><a data-tooltip ="bathroom"><i class="fa-solid fa-bath"><span> x1, </span></i></a></li>
<li><a data-tooltip ="kitchen"><i class="fa-solid fa-fire-burner"><span> x1, </span></i></a></li>
<li><a data-tooltip ="appliance"><i class="fa-solid fa-kitchen-set"><span> x1, </span></i></a></li>
<li><a data-tooltip ="bedrooms"><i class="fa-solid fa-bed"><span> x2, </span></i></a></li>
<li><a data-tooltip ="television"><i class="fa-solid fa-tv"><span> x1</span></i></a></li>
</ul>
</div>
<p>Want a premium stay with incredible views and all the comfort of your home but at a more affordable pricing, then look no further than our deluxe cabins. Everything you could ever possibly want and need is right here. It's a great relaxing getaway for you and for your whole family.</p>
<button>
BOOK NOW
</button>
</div>
</div>
<div class="card">
<img width="1920" height="1080" draggable="false" src="./img/cabin_luxury.webp" alt="luxury cabin">
<div class="contents">
<h3>luxury</h3>
<h4>from £1,200</h4>
<div class="icons">
<ul>
<li><a data-tooltip ="hot tub"><i class="fa-solid fa-hot-tub-person"><span> x1, </span></i></a></li>
<li><a data-tooltip ="bathrooms"><i class="fa-solid fa-bath"><span> x2, </span></i></a></li>
<li><a data-tooltip ="kitchen"><i class="fa-solid fa-fire-burner"><span> x1, </span></i></a></li>
<li><a data-tooltip ="appliances"><i class="fa-solid fa-kitchen-set"><span> x1, </span></i></a></li>
<li><a data-tooltip ="bedrooms"><i class="fa-solid fa-bed"><span> x3, </span></i></a></li>
<li><a data-tooltip ="televisions"><i class="fa-solid fa-tv"><span> x2</span></i></a></li>
</ul>
</div>
<p>Fancy yourself spending a weekend in a luxurious cabin then look no further, offering all of the latest kitchen appliances along with all best the furnishings across every one of our two floor cabins. Relax in the hot tub while soaking in that gorgeous view, this is an experience you do not want to miss out on.</p>
<button>
BOOK NOW
</button>
</div>
</div>
</div>
</div>
</section>
<div class="mobile-title">
<h2>Get in touch with us</h2>
<p>Our team is always on hand to help</p>
</div>
<!--CONTACT FORM-->
<section>
<div class="form-container">
<div class="contact-form">
<div class="left-section">
<img width="1920" height="1080" src="./img/contact_form.webp" alt="lakeside town">
</div>
<div class="right-section">
<h2>contact form</h2>
<form action="#">
<div class="input-box">
<label for="name">
<input autocomplete="given-name" id="name" type="text" placeholder="Name">
</label>
</div>
<div class="input-box">
<label for="phone_number">
<input id="phone_number" type="text" placeholder="Phone">
</label>
</div>
<div class="input-box">
<label for="email">
<input autocomplete="email" id="email" type="text" placeholder="Email">
</label>
</div>
<div class="input-box message-box">
<label for="user_message">
<textarea id="user_message" maxlength="500" placeholder="Insert your message here"></textarea>
</label>
</div>
<button type="button">
SUBMIT
</button>
</form>
</div>
</div>
</div>
</section>
<footer>
<div class="about">
<h2>about</h2>
<ul>
<li><a href="#">jobs</a></li>
<li><a href="#">marketing</a></li>
<li><a href="#">payment methods</a></li>
<li><a href="#">design & branding</a></li>
</ul>
</div>
<div class="reviews">
<h2>reviews</h2>
<ul>
<li><a href="#">glassdoor</a></li>
<li><a href="#">trip advisor</a></li>
<li><a href="#">trustpilot</a></li>
</ul>
</div>
<div class="blog">
<h2>blog</h2>
<ul>
<li><a href="#">travelSuites</a></li>
<li><a href="#">holidayMatt</a></li>
<li><a href="#">vickiDoesHolidays</a></li>
<li><a href="#">blogs & thoughts</a></li>
</ul>
</div>
<div class="euma">
<h2>EUMA</h2>
<ul>
<li><a href="#">about</a></li>
<li><a href="#">members</a></li>
<li><a href="#">navigation</a></li>
<li><a href="#">mapping tool</a></li>
</ul>
</div>
</footer>
</div>
</div>
</body>
</html>