-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
188 lines (187 loc) · 7.52 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="queries.css">
<script
src="https://kit.fontawesome.com/352217b73d.js"
crossorigin="anonymous"
></script>
<title>Highmos</title>
</head>
<body>
<header>
<div class="row header-container">
<nav class="navbar">
<img class="logo" src="images/logo.svg" alt="Logo" />
<button class="header-button">
<i class="fa fa-bookmark"></i
><span class="header-button-text">Reservations</span>
</button>
</nav>
<div class="headline-container">
<h1 class="headline">
Travel is the only thing you buy that makes you richer
</h1>
<div class="adventure-line">
<span>Adventure</span>
<button class="play-button">
<i class="fa fa-play-circle"></i>
</button>
</div>
</div>
<div class="form-container">
<div class="booking-form">
<div class="input-container">
<h3 class="form-title">Check in</h3>
<input type="date" />
</div>
<div class="input-container">
<h3 class="form-title">Check out</h3>
<input type="date" />
</div>
<div class="input-container">
<h3 class="form-title">Person</h3>
<select name="number-of-persons" id="">
<option value="1">1 adult</option>
<option value="2">2 adults</option>
<option value="3">3 adults</option>
</select>
</div>
</div>
<button>BOOK NOW</button>
</div>
</div>
</header>
<section class="about-section">
<div class="row about-container">
<h3>About us</h3>
<div class="about-content">
<div class="about-paragraph-container">
<h2>People don't take trips, trips take people</h2>
<p class="about-paragraph">
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>
<div class="about-image-container">
<img src="./images/image-2.png" alt="Image 2" />
</div>
</div>
<div class="about-paragraph-container">
<div class="about-image-container">
<img src="./images/image-3.png" alt="Image 3" />
</div>
<div class="about-paragraphs-group">
<p class="about-paragraph">
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 traveling, I’ve
learned to appreciate things that I would normally ignore.
</p>
<p class="about-paragraph">
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 wandering
through my favorite memories.
</p>
</div>
</div>
</div>
</div>
</section>
<section class="accomodations-section">
<div class="row accomodations-container">
<h3>Accomodations</h3>
<div class="accomodations-title-line">
<h2>Rooms / Suites</h2>
<a href="#">See all rooms <i class="fa fa-arrow-right"></i></a>
</div>
<div class="accomodations-content">
<div class="accomodations-image-container">
<img src="./images/stay-1.png" alt="Stay 1" />
</div>
<div class="accomodations-image-container">
<img src="./images/stay-2.png" alt="Stay 2" />
</div>
<div class="accomodations-image-container">
<img src="./images/stay-3.png" alt="Stay 3" />
</div>
<div class="accomodations-image-container">
<img src="./images/stay-4.png" alt="Stay 4" />
</div>
<div class="accomodations-image-container">
<img src="./images/stay-5.png" alt="Stay 5" />
</div>
</div>
</div>
</section>
<section class="testimonials-section">
<div class="row testimonials-container">
<h3>Testimonials</h3>
<h2>What <span class="orange-text">clients</span> say about us</h2>
<div class="testimonials-content">
<div class="testimonial">
<div class="testimonial-box">
<h5 class="testimonial-title">Amazing hotels!</h5>
<p class="testimonial-text">
Phasellus ut elementum mauris. Quisque pharetra justo neque, in
pulvinar nisl fringilla in. Duis molestie gravida enim. Cras
fermentum eros ipsum, posuere rutrum nibh eleifend quis.
</p>
</div>
<div class="testimonial-author">
<img class="testimonial-author-image" src="./images/person-1.png" alt="Person 1">
<div class="testimonial-author-info">
<h5 class="testimonial-author-name">Miller Stark</h5>
<p class="testimonial-author-origin">from Finland</p>
</div>
</div>
</div>
<div class="testimonial">
<div class="testimonial-box">
<h5 class="testimonial-title">Best experiences</h5>
<p class="testimonial-text">
Phasellus ut elementum mauris. Quisque pharetra justo neque, in
pulvinar nisl fringilla in. Duis molestie gravida enim. Cras
fermentum eros ipsum, posuere rutrum nibh eleifend quis.
</p>
</div>
<div class="testimonial-author">
<img class="testimonial-author-image" src="./images/person-2.png" alt="Person 2">
<div class="testimonial-author-info">
<h5 class="testimonial-author-name">Zara Herman</h5>
<p class="testimonial-author-origin">from Canada</p>
</div>
</div>
</div>
<div class="testimonial">
<div class="testimonial-box">
<h5 class="testimonial-title">I will go back again</h5>
<p class="testimonial-text">
Phasellus ut elementum mauris. Quisque pharetra justo neque, in
pulvinar nisl fringilla in. Duis molestie gravida enim. Cras
fermentum eros ipsum, posuere rutrum nibh eleifend quis.
</p>
</div>
<div class="testimonial-author">
<img class="testimonial-author-image" src="./images/person-3.png" alt="Person 3">
<div class="testimonial-author-info">
<h5 class="testimonial-author-name">Jackson Nguyen</h5>
<p class="testimonial-author-origin">from Vietnam</p>
</div>
</div>
</div>
</div>
</div>
</section>
<footer>
<div class="row footer-container">
<p class="copyright-text">© nushen, devchallenges.io</p>
</div>
</footer>
</body>
</html>