-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
executable file
·458 lines (414 loc) · 20.8 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
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;500;600;700;900&display=swap" rel="stylesheet">
<title>Travel.init</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/colors.css">
<link rel="stylesheet" href="css/container.css">
<link rel="stylesheet" href="css/header.css">
<link rel="stylesheet" href="css/banner.css">
<link rel="stylesheet" href="css/popular-search.css">
<link rel="stylesheet" href="css/travel-category.css">
<link rel="stylesheet" href="css/text-session.css">
<link rel="stylesheet" href="css/travel-tours.css">
<link rel="stylesheet" href="css/travel-qr-code.css">
<link rel="stylesheet" href="css/travel-footer.css">
<link rel="stylesheet" href="css/media-queries.css">
</head>
<body>
<div class="container">
<header class="header-travel">
<h1 class="title">Travel<span>.int</span></h1>
<div class="menu">
<a href="#"><svg fill="#000000" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24px" height="24px"><path d="M 2 5 L 2 7 L 22 7 L 22 5 L 2 5 z M 2 11 L 2 13 L 22 13 L 22 11 L 2 11 z M 2 17 L 2 19 L 22 19 L 22 17 L 2 17 z"/></svg></a>
</div>
<nav class="navigation-travel">
<a href="#" class="link -action" >Home</a>
<a href="#" class="link -action">Category</a>
<a href="#" class="link -action">About us</a>
<a href="#" class="link -action">Tours</a>
<a href="#" class="link -action">Contact</a>
</nav>
<div class="buttons">
<button class="btn">Log in</button>
<button class="btn sign-up">Sign up</button>
</div>
</header>
<section class="banner-travel">
<p class="text">Travel.int is all you need</p>
<h1 class="title">Explore The World</h1>
<img class="temple-image" src="img/temple.png" alt="Japanese temple">
<div class="search-travel">
<div class="search-data">
<div class="box-info">
<div class="icon">
<svg width="9" height="9" viewBox="0 0 9 9" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7.81374 0.0618503L0.505083 3.4351C-0.338143 3.82868 -0.0570677 5.06548 0.842408 5.06548H3.93459V8.15766C3.93459 9.05713 5.17139 9.33839 5.56496 8.49498L8.93822 1.18633C9.21929 0.5115 8.48839 -0.219401 7.81374 0.0618503V0.0618503Z" fill="#385DDA"/>
</svg>
</div>
<h2 class="title">Location</h2>
</div>
<input class="location" type="text" name="location" id="location" placeholder="Where do you want to go?">
</div>
<div class="search-data">
<div class="box-info center">
<div class="icon">
<svg width="8" height="10" viewBox="0 0 8 10" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 8.28571C0 8.75893 0.383929 9.14286 0.857143 9.14286H7.14286C7.61607 9.14286 8 8.75893 8 8.28571V3.42857H0V8.28571ZM5.71429 4.78571C5.71429 4.66786 5.81071 4.57143 5.92857 4.57143H6.64286C6.76071 4.57143 6.85714 4.66786 6.85714 4.78571V5.5C6.85714 5.61786 6.76071 5.71429 6.64286 5.71429H5.92857C5.81071 5.71429 5.71429 5.61786 5.71429 5.5V4.78571ZM5.71429 7.07143C5.71429 6.95357 5.81071 6.85714 5.92857 6.85714H6.64286C6.76071 6.85714 6.85714 6.95357 6.85714 7.07143V7.78571C6.85714 7.90357 6.76071 8 6.64286 8H5.92857C5.81071 8 5.71429 7.90357 5.71429 7.78571V7.07143ZM3.42857 4.78571C3.42857 4.66786 3.525 4.57143 3.64286 4.57143H4.35714C4.475 4.57143 4.57143 4.66786 4.57143 4.78571V5.5C4.57143 5.61786 4.475 5.71429 4.35714 5.71429H3.64286C3.525 5.71429 3.42857 5.61786 3.42857 5.5V4.78571ZM3.42857 7.07143C3.42857 6.95357 3.525 6.85714 3.64286 6.85714H4.35714C4.475 6.85714 4.57143 6.95357 4.57143 7.07143V7.78571C4.57143 7.90357 4.475 8 4.35714 8H3.64286C3.525 8 3.42857 7.90357 3.42857 7.78571V7.07143ZM1.14286 4.78571C1.14286 4.66786 1.23929 4.57143 1.35714 4.57143H2.07143C2.18929 4.57143 2.28571 4.66786 2.28571 4.78571V5.5C2.28571 5.61786 2.18929 5.71429 2.07143 5.71429H1.35714C1.23929 5.71429 1.14286 5.61786 1.14286 5.5V4.78571ZM1.14286 7.07143C1.14286 6.95357 1.23929 6.85714 1.35714 6.85714H2.07143C2.18929 6.85714 2.28571 6.95357 2.28571 7.07143V7.78571C2.28571 7.90357 2.18929 8 2.07143 8H1.35714C1.23929 8 1.14286 7.90357 1.14286 7.78571V7.07143ZM7.14286 1.14286H6.28571V0.285714C6.28571 0.128571 6.15714 0 6 0H5.42857C5.27143 0 5.14286 0.128571 5.14286 0.285714V1.14286H2.85714V0.285714C2.85714 0.128571 2.72857 0 2.57143 0H2C1.84286 0 1.71429 0.128571 1.71429 0.285714V1.14286H0.857143C0.383929 1.14286 0 1.52679 0 2V2.85714H8V2C8 1.52679 7.61607 1.14286 7.14286 1.14286Z" fill="#385DDA"/>
</svg>
</div>
<h2 class="title">Date</h2>
</div>
<div class="box-date">
<label for="date">Choose a date</label>
<div class="arrow"></div>
<input type="date" valueAsDate name="date" id="date">
</div>
</div>
<div class="search-data">
<div class="box-info">
<div class="icon">
<svg width="10" height="8" viewBox="0 0 10 8" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.75 3.25H8.75V2.25C8.75 2.1125 8.6375 2 8.5 2H8C7.8625 2 7.75 2.1125 7.75 2.25V3.25H6.75C6.6125 3.25 6.5 3.3625 6.5 3.5V4C6.5 4.1375 6.6125 4.25 6.75 4.25H7.75V5.25C7.75 5.3875 7.8625 5.5 8 5.5H8.5C8.6375 5.5 8.75 5.3875 8.75 5.25V4.25H9.75C9.8875 4.25 10 4.1375 10 4V3.5C10 3.3625 9.8875 3.25 9.75 3.25ZM3.5 4C4.60469 4 5.5 3.10469 5.5 2C5.5 0.895313 4.60469 0 3.5 0C2.39531 0 1.5 0.895313 1.5 2C1.5 3.10469 2.39531 4 3.5 4ZM4.9 4.5H4.63906C4.29219 4.65937 3.90625 4.75 3.5 4.75C3.09375 4.75 2.70938 4.65937 2.36094 4.5H2.1C0.940625 4.5 0 5.44062 0 6.6V7.25C0 7.66406 0.335938 8 0.75 8H6.25C6.66406 8 7 7.66406 7 7.25V6.6C7 5.44062 6.05938 4.5 4.9 4.5Z" fill="#385DDA"/>
</svg>
</div>
<h2 class="title">People</h2>
</div>
<div class="box-number">
<span class="subtraction">
<svg width="11" height="1" viewBox="0 0 11 1" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="11" height="1" fill="#AEAEAE"/>
</svg>
</span>
<label class="number" for="number" >Add people</label>
<input type="number" min="0" max="50" name="number" id="number">
<span class="addition">
<svg width="11" height="11" viewBox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect y="5.07715" width="11" height="0.846154" fill="#3075C6"/>
<rect x="5.92285" width="11" height="0.846153" transform="rotate(90 5.92285 0)" fill="#3075C6"/>
</svg>
</span>
</div>
<button class="btn-search">
<svg width="25" height="26" viewBox="0 0 25 26" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M24.6582 21.6162L19.79 16.748C19.5703 16.5283 19.2725 16.4062 18.96 16.4062H18.1641C19.5117 14.6826 20.3125 12.5146 20.3125 10.1562C20.3125 4.5459 15.7666 0 10.1562 0C4.5459 0 0 4.5459 0 10.1562C0 15.7666 4.5459 20.3125 10.1562 20.3125C12.5146 20.3125 14.6826 19.5117 16.4062 18.1641V18.96C16.4062 19.2725 16.5283 19.5703 16.748 19.79L21.6162 24.6582C22.0752 25.1172 22.8174 25.1172 23.2715 24.6582L24.6533 23.2764C25.1123 22.8174 25.1123 22.0752 24.6582 21.6162ZM10.1562 16.4062C6.7041 16.4062 3.90625 13.6133 3.90625 10.1562C3.90625 6.7041 6.69922 3.90625 10.1562 3.90625C13.6084 3.90625 16.4062 6.69922 16.4062 10.1562C16.4062 13.6084 13.6133 16.4062 10.1562 16.4062Z" fill="white"/>
</svg>
</button>
</div>
</div>
</section>
<section class="popular-search">
<h1 class="title">Popular Search</h1>
<div class="places">
<div class="first">
<a class="common -interest-points" href="#">Eiffel tower</a>
<a class="common -interest-points" href="#">Bali</a>
<a class="common -interest-points" href="#">Egypt</a>
<a class="common -interest-points" href="#">Eiffel tower</a>
<a class="common -interest-points" href="#">Turkey</a>
<a class="common -interest-points" href="#">The Grand Canyon</a>
</div>
<div class="second">
<a class="common -interest-points" href="#">Cappadocia</a>
<a class="common -interest-points" href="#">UAE</a>
<a class="common -interest-points" href="#">The Grand Canyon</a>
<a class="common -interest-points" href="#">London</a>
<a class="common -interest-points" href="#">USA</a>
<a class="common -interest-points" href="#">Temple Japan</a>
</div>
</div>
</section>
</div>
<section class="travel-category">
<nav class="navigation">
<div class="header">
<h1 class="title">Category</h1>
<div class="buttons">
<button class="btn -left">
<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.292893 7.29289C-0.0976314 7.68342 -0.0976315 8.31658 0.292892 8.70711L6.65685 15.0711C7.04738 15.4616 7.68054 15.4616 8.07107 15.0711C8.46159 14.6805 8.46159 14.0474 8.07107 13.6569L2.41421 8L8.07107 2.34315C8.46159 1.95262 8.46159 1.31946 8.07107 0.928931C7.68054 0.538407 7.04738 0.538407 6.65686 0.928931L0.292893 7.29289ZM17 7L1 7L1 9L17 9L17 7Z" fill="#3075C6"/>
</svg>
</button>
<button class="btn -right">
<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16.7071 8.70711C17.0976 8.31658 17.0976 7.68342 16.7071 7.29289L10.3431 0.928932C9.95262 0.538408 9.31946 0.538408 8.92893 0.928932C8.53841 1.31946 8.53841 1.95262 8.92893 2.34315L14.5858 8L8.92893 13.6569C8.53841 14.0474 8.53841 14.6805 8.92893 15.0711C9.31946 15.4616 9.95262 15.4616 10.3431 15.0711L16.7071 8.70711ZM0 9L16 9V7L0 7L0 9Z" fill="white"/>
</svg>
</button>
</div>
</div>
<p class="text">You don't have to look for your tour for a long time.
We have grouped them by category</p>
</nav>
<div class="places">
<figure class="card">
<div class="card-image">
<a href="#">
<img src="img/card/beach.png" alt="Beach">
</a>
</div>
<figcaption class="card-text">Beach</figcaption>
</figure>
<figure class="card">
<div class="card-image">
<a href="#">
<img src="img/card/mountain.png" alt="Mountain">
</a>
</div>
<figcaption class="card-text">Mountain</figcaption>
</figure>
<figure class="card">
<div class="card-image">
<a href="#">
<img src="img/card/desert.png" alt="Desert">
</a>
</div>
<figcaption class="card-text">Desert</figcaption>
</figure>
<figure class="card">
<div class="card-image">
<a href="#">
<img src="img/card/tower.png" alt="Eiffel Tower">
</a>
</div>
<figcaption class="card-text">Tower</figcaption>
</figure>
<figure class="card">
<div class="card-image">
<a href="#">
<img src="img/card/temple-place.png" alt="Temple">
</a>
</div>
<figcaption class="card-text">Temple</figcaption>
</figure>
<figure class="card">
<div class="card-image">
<a href="#">
<img src="img/card/forest.png" alt="Forest">
</a>
</div>
<figcaption class="card-text">Forest</figcaption>
</figure>
<figure class="card">
<div class="card-image">
<a href="#">
<img src="img/card/city.png" alt="City">
</a>
</div>
<figcaption class="card-text">City</figcaption>
</figure>
</div>
</section>
<section class="text-session">
<div class="photo-content">
<img class="photo" src="img/woman.png" alt="Woman">
<div class="box-photo -customers">
<img src="img/smile.png" alt="Emoji face smile">
<p class="box-number">3300+</p>
<p class="box-text">Customers</p>
</div>
<div class="box-photo -destinations">
<img src="img/rocket.png" alt="Papel rocket emoji">
<p class="box-number">400+</p>
<p class="box-text">Destinations</p>
</div>
<div class="box-photo -tours">
<img src="img/flag.png" alt="Flag emoji">
<p class="box-number">70+</p>
<p class="box-text">Tours</p>
</div>
</div>
<div class="text-content">
<h2 class="title">Why Choose <strong>Travel</strong>.int?</h2>
<p class="text">
There are always undoubted leaders, professionals in their field,
experts of their product - that's us! Travel agency Verona-tour does
not stand still, we work for you! We are developing our network,
opening new offices, inspecting hotels and discovering new countries,
and most importantly, we provide our tourists with the best service in Ukraine!
</p>
</div>
</section>
<section class="travel-tours">
<div class="tours-container">
<h2 class="title">Top Tours For You</h2>
<p class="text">Much places for your vibes from the world</p>
<div class="tours-cards">
<div class="tours-cards-row">
<div class="tours-card">
<img src="img/card-tour/canyon.png" alt="The Grand Canyon">
<h3 class="tours-title">The Grand Canyon</h3>
<p class="tours-text">The biggest and the most beautiful canyon in the world</p>
<div class="tours-infors">
<div class="location">
<img src="img/place.png" alt="Location icon"><p>Arizona, USA</p>
</div>
<div class="coust">
<img src="img/coin.png" alt="Coin icon"><p>150 <span>/ person</span></p>
</div>
</div>
</div>
<div class="tours-card">
<img src="img/card-tour/new-york.png" alt="New York, WTC">
<h3 class="tours-title">New York, WTC</h3>
<p class="tours-text">The highest point of the New York.
One of the centers of world trade
</p>
<div class="tours-infors">
<div class="location">
<img src="img/place.png" alt="Location icon"><p>NYC, USA</p>
</div>
<div class="coust">
<img src="img/coin.png" alt="Coin icon"><p>180 <span>/ person</span></p>
</div>
</div>
</div>
<div class="tours-card">
<img src="img/card-tour/bali.png" alt="Bali Beaches">
<h3 class="tours-title">Bali Beaches</h3>
<p class="tours-text">Amazing views from the cleanest beaches in the world</p>
<div class="tours-infors">
<div class="location">
<img src="img/place.png" alt="Location icon"><p>Bali, Insonesia</p>
</div>
<div class="coust">
<img src="img/coin.png" alt="Coin icon"><p>90 <span>/ person</span></p>
</div>
</div>
</div>
<div class="tours-card">
<img src="img/card-tour/snow-hills.png" alt="Snow Hills">
<h3 class="tours-title">Snow Hills</h3>
<p class="tours-text">Great skiing opportunity with a beautiful view</p>
<div class="tours-infors">
<div class="location">
<img src="img/place.png" alt="Location icon"><p>Carpati, Ukraine</p>
</div>
<div class="coust">
<img src="img/coin.png" alt="Coin icon"><p>75 <span>/ person</span></p>
</div>
</div>
</div>
</div>
<div class="tours-cards-row">
<div class="tours-card">
<img src="img/card-tour/tokyo.png" alt="Tokyo Temples">
<h3 class="tours-title">Tokyo Temples</h3>
<p class="tours-text">Great opportunity to explore traditional Japanese culture</p>
<div class="tours-infors">
<div class="location">
<img src="img/place.png" alt="Location icon"><p>Tokyo, Japan</p>
</div>
<div class="coust">
<img src="img/coin.png" alt="Coin icon"><p>120 <span>/ person</span></p>
</div>
</div>
</div>
<div class="tours-card">
<img src="img/card-tour/snow-forest.png" alt="Snow Forest">
<h3 class="tours-title">Snow Forest</h3>
<p class="tours-text">Taste the cold and beauty of the Russian forest in winter</p>
<div class="tours-infors">
<div class="location">
<img src="img/place.png" alt="Location icon"><p>Camchatka, Ru.</p>
</div>
<div class="coust">
<img src="img/coin.png" alt="Coin icon"><p>60 <span>/ person</span></p>
</div>
</div>
</div>
<div class="tours-card">
<img src="img/card-tour/cappadocia.png" alt="Cappadocia">
<h3 class="tours-title">Cappadocia</h3>
<p class="tours-text">The biggest ballon show in the world</p>
<div class="tours-infors">
<div class="location">
<img src="img/place.png" alt="Location icon"><p>Cappad, Turkey</p>
</div>
<div class="coust">
<img src="img/coin.png" alt="Coin icon"><p>70 <span>/ person</span></p>
</div>
</div>
</div>
<div class="tours-card">
<img src="img/card-tour/ackerman.png" alt="Ackerman Fortress">
<h3 class="tours-title">Ackerman Fortress</h3>
<p class="tours-text">The oldest Black Sea fortress with a rich history</p>
<div class="tours-infors">
<div class="location">
<img src="img/place.png" alt="Location icon"><p>Odes, Ukraine</p>
</div>
<div class="coust">
<img src="img/coin.png" alt="Coin icon"><p>40 <span>/ person</span></p>
</div>
</div>
</div>
</div>
</div>
<a class="btn-tours">View All Tours</a>
</div>
</section>
<section class="travel-qr-code">
<div class="qr-code-container">
<h1 class="title">Scan QR-code and take discount</h1>
<img class="qr-code" src="img/qr-code.png" alt="QR Code">
</div>
</section>
<footer class="travel-footer">
<div class="footer-container">
<div class="footer-navigation">
<div class="items">
<h1 class="travel-logo">Travel<span>.int</span></h1>
<p class="text">Enjoy by triping <br/>
with Travelint.
</p>
<div class="icons">
<a href="#"><img src="img/social-midea/facebook.png" alt="Icone Facebook"></a>
<a href="#"><img src="img/social-midea/telegram.png" alt="Icone Telegram"></a>
<a href="#"><img src="img/social-midea/instagram.png" alt="Icone Instagram"></a>
</div>
</div>
<div class="items">
<p class="item-title">Menu</p>
<ul>
<a href="#"><li>Home</li></a>
<a href="#"><li>Tours</li></a>
<a href="#"><li>Category</li></a>
<a href="#"><li>About Us</li></a>
</ul>
</div>
<div class="items">
<p class="item-title">Booking Plan</p>
<ul>
<a href="#"><li>Personal Trip</li></a>
<a href="#"><li>Group Trip</li></a>
</ul>
</div>
<div class="items">
<p class="item-title">Support</p>
<ul>
<a href="#"><li>FAQ</li></a>
<a href="#"><li>Terms & Conditions</li></a>
<a href="#"><li>Privacy Policy</li></a>
</ul>
</div>
<div class="items">
<p class="item-title">Get App</p>
<ul>
<a href="#"><li>Google Play Store</li></a>
<a href="#"><li>App Store</li></a>
<a href="#"><li>Other Stores</li></a>
</ul>
</div>
</div>
<h1 class="footer-copyright">2021 (c) — Travelint. All Rights Reserved</h1>
</div>
</footer>
<script src="js/script.js"></script>
</body>
</html>