-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
233 lines (226 loc) · 11.5 KB
/
index.html
File metadata and controls
233 lines (226 loc) · 11.5 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Roboto font -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<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=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
<!-- Playfair font -->
<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=Playfair:ital,opsz,wght@0,5..1200,300..900;1,5..1200,300..900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./styles.css">
<title>Travel</title>
</head>
<body>
<!-- header & nav content -->
<header class="header-section">
<!-- logo -->
<span class="logo">
<a href="#">
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M11.9994 3V7M11.9994 7V17M11.9994 7L8.99943 4M11.9994 7L14.9994 4M11.9994 17V21M11.9994 17L8.99943 20M11.9994 17L14.9994 20M4.20624 7.49999L7.67034 9.49999M7.67034 9.49999L16.3306 14.5M7.67034 9.49999L3.57227 10.5981M7.67034 9.49999L6.57227 5.40191M16.3306 14.5L19.7947 16.5M16.3306 14.5L17.4287 18.5981M16.3306 14.5L20.4287 13.4019M4.2067 16.5L7.6708 14.5M7.6708 14.5L16.3311 9.49999M7.6708 14.5L3.57273 13.4019M7.6708 14.5L6.57273 18.5981M16.3311 9.49999L19.7952 7.49999M16.3311 9.49999L17.4291 5.40192M16.3311 9.49999L20.4291 10.5981" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg>
</a>
</span>
<nav>
<ul>
<li>
<i class="material-icons">bookmark_border</i>
<span class="nav-item-text">reservation</span>
</li>
</ul>
</nav>
<!-- nav bar -->
</header>
<!-- main page content -->
<main>
<!-- hero section -->
<section class="hero-section">
<h1 class="main-heading">
Travel is the only thing you use that makes you happier
</h1>
<button class="hero-cta">
<span class="hero-cta-text">adventure</span>
<i class="material-icons">play_circle_filled</i>
</button>
<form action="#" class="booking">
<div class="booking-inputs">
<div class="booking__input">
<label for="check-in">Check In</label>
<input type="date" name="check-in" id="check-in">
</div>
<div class="booking__input">
<label for="check-out">Check out</label>
<input type="date" name="check-out" id="check-out">
</div>
<div class="booking__input">
<label for="persons">Persons</label>
<select name="persons" id="persons">
<option value="1">1 adult</option>
<option value="2">2 adults</option>
<option value="3">3 adults</option>
<option value="4">4 adults</option>
</select>
</div>
</div>
<button class="booking-button">book now</button>
</form>
</section>
<!-- about us section -->
<section class="about-us-section">
<div class="container">
<div class="section-name">about us</div>
<div class="about-us__content">
<div class="about-us__content--left">
<h2>People don't take trips, trips take people</h2>
<p>
If you think your country does everything the right way and is revered by other nations, you'll definitely have those notions put to the test when you enter another country.
</p>
<img src="https://images.unsplash.com/photo-1651147673446-3bdde118027d?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="boat on lake in autumn">
</div>
<div class="about-us__content--right">
<p>
Have you ever felt the rain on your skin in multiple countries? I have, and I'm here to tell you that it's always a thrilling sensation each time it happens somewhere new. By travelling, I've learned to appreciate things that I would normally ignore.
</p>
<p>
Just like everyone else, I spend some of my days sitting on a couch watching television. Of course, these aren't the moments that define me, nor are they what I think of when wondering through my favorite memories.
</p>
<img src="https://images.unsplash.com/photo-1672497772151-5c126773585e?q=80&w=1376&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="boat on shore near house">
</div>
</div>
</div>
</section>
<!-- accomodation section -->
<section class="accomodation-section">
<div class="container">
<div class="section-name">accomodation</div>
<div class="accomodation__header">
<h2>Rooms / Tour</h2>
<button class="text-button">
See all rooms
<i class="material-icons">trending_flat</i>
</button>
</div>
<div class="stays">
<div class="stay-card stay-card--col-2">
<img class="stay-card__img" src="https://images.unsplash.com/photo-1616486338812-3dadae4b4ace?q=80&w=2832&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="">
<div class="stay-card__details">
<div class="stay-card__name">Sea view apartment</div>
<div class="stay-card__price">$549</div>
</div>
</div>
<div class="stay-card">
<img class="stay-card__img" src="https://images.unsplash.com/photo-1600585154166-d8897c8f930d?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="">
<div class="stay-card__details">
<div class="stay-card__name">Whole House</div>
<div class="stay-card__price">$349</div>
</div>
</div>
<div class="stay-card">
<img class="stay-card__img" src="https://images.unsplash.com/photo-1560185009-5bf9f2849488?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="">
<div class="stay-card__details">
<div class="stay-card__name">Minimal Room</div>
<div class="stay-card__price">$149</div>
</div>
</div>
<div class="stay-card">
<img class="stay-card__img" src="https://images.unsplash.com/photo-1680703103847-0404fe0d0a6e?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="">
<div class="stay-card__details">
<div class="stay-card__name">Rural House</div>
<div class="stay-card__price">$129</div>
</div>
</div>
<div class="stay-card">
<img class="stay-card__img" src="https://images.unsplash.com/photo-1600607687920-4e2a09cf159d?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="">
<div class="stay-card__details">
<div class="stay-card__name">Modern House</div>
<div class="stay-card__price">$229</div>
</div>
</div>
</div>
</div>
</section>
<!-- testimonial section -->
<section class="testimonials-section">
<div class="container">
<div class="section-name">testimonials</div>
<h2>What <strong>clients</strong> say about us</h2>
<div class="feedback">
<div class="feedback-card">
<div class="feedback-card__dialog">
<div class="feedback-card__dialog__title">
Amazing hotels
</div>
<div class="feedback-card__dialog__content">
One thing I can say is that my experience was breathtaking and I can't recommend this for anyone enough. I had a wonderful stay and the team kept checking in on me at every point.
</div>
</div>
<div class="feedback-card__user">
<img src="https://images.unsplash.com/photo-1564564321837-a57b7070ac4f?q=80&w=1476&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="man looking at the camera">
<div class="feedback-card__user__details">
<div class="feedback-card__user__name">Miller Stark</div>
<div class="feedback-card__user__location">
Finland
</div>
</div>
</div>
</div>
<div class="feedback-card">
<div class="feedback-card__dialog">
<div class="feedback-card__dialog__title">
Best experiences
</div>
<div class="feedback-card__dialog__content">
I recommend this for anyone enough. I had a wonderful stay and the team was warm and took care of every inquiry. Every time I had a place to visit they recommended best sites to see.
</div>
</div>
<div class="feedback-card__user">
<img src="https://images.unsplash.com/photo-1502323777036-f29e3972d82f?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="man looking at the camera">
<div class="feedback-card__user__details">
<div class="feedback-card__user__name">Zara Herman</div>
<div class="feedback-card__user__location">
Canada
</div>
</div>
</div>
</div>
<div class="feedback-card">
<div class="feedback-card__dialog">
<div class="feedback-card__dialog__title">
Exceptional hospitality
</div>
<div class="feedback-card__dialog__content">
One thing I can say is that my experience was breathtaking an I can't recommend this for anyone enough. I had a wonderful stay and the team kept checking in on me at every point.
</div>
</div>
<div class="feedback-card__user">
<img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="man looking at the camera">
<div class="feedback-card__user__details">
<div class="feedback-card__user__name">Miller Stark</div>
<div class="feedback-card__user__location">
Finland
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
<!-- footer section -->
<footer class="footer-section">
<div class="container footer-holder">
<p class="copyright">Copyright © <span class="copyright-year">2015</span> by YoursTruly</p>
</div>
</footer>
<!-- Script -->
<script>
// auto update copyright year to current year
const year = document.querySelector(".copyright-year");
year.innerHTML = new Date().getFullYear();
</script>
</body>
</html>