-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
280 lines (253 loc) · 13.3 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mostafa Travel</title>
<!-- Used Fonts -->
<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=Mulish:wght@200;300;400;500;600;700;800;900;1000&display=swap" rel="stylesheet">
<!-- style sheet -->
<link rel="stylesheet" href="./styles/style.css">
<!-- Search Bar icon from Font-awesome -->
<script src="https://kit.fontawesome.com/c4d3f731ad.js" crossorigin="anonymous"></script>
</head>
<body>
<!-- Header -->
<header>
<div class="navbar">
<!-- Site Name -->
<div class="site-title">
<img src="./images/Group 40071 (2).png" alt="">
<h2>Mostafa <span>Travel</span></h2>
</div>
<!-- Nav-bars -->
<nav>
<ul>
<li><a id="Home" href="">Home</a></li>
<li><a href="">Packages</a></li>
<li><a href="">Testimonial</a></li>
<li><a href="">Blog</a></li>
<li><a href="">Contact</a></li>
</ul>
</nav>
<!-- For Hamburger in Mobile View -->
<label for="mobile-nav" class="hamburger">
<div></div>
<div></div>
<div></div>
</label>
</div>
<!-- Banner -->
<div class="banner">
<div class="banner-description">
<h2>Explore Your Travel</h2>
<p>Uncover hidden gems and explore breathtaking landscapes around the world. Whether it's adventure, relaxation, or cultural discovery, the perfect getaway is waiting for you!</p>
<div class="banner-section">
<input type="text" placeholder="Where go">
<select name="area" id="area">
<option value="area">When</option>
</select>
<select name="area" id="area">
<option value="area">Select Type</option>
</select>
<button><i class="fa-solid fa-magnifying-glass"></i> Find Now</button>
</div>
</div>
</div>
</header>
<!-- main section -->
<main>
<!-- Our Popular Tours -->
<section class="first-section">
<div class="tours">
<div class="tours-section">
<h2>Our Popular Tours</h2>
<p>Discover funny anecdotes that will make you laugh, inspiring love stories from the road that will warm your heart, wild travel tales that will have you glued to your screen, travel horror stories that will take you out of your comfort zone,</p>
<li>Tempus euismod lacus mauris dignissim quis in ultrices. Magna nullam odio neque diam. Sociis erat at .</li>
<li>Tempus euismod lacus mauris dignissim quis in ultrices. Magna nullam odio neque diam. Sociis erat at .</li>
<li>Tempus euismod lacus mauris dignissim quis in ultrices. Magna nullam odio neque diam. Sociis erat at .</li>
<p>Discover funny anecdotes that will make you laugh, inspiring love stories from the road that will warm your heart, wild travel tales that will have you glued to your screen, travel horror stories that will take you out of your comfort zone, </p>
<button class="btn-primary">Read More</button>
</div>
<div class="hill-img">
<img src="./images/Rectangle 4.png" alt="">
</div>
</div>
</section>
<!-- Choose Your Destination -->
<section class="destination">
<div class="destination-title">
<h2>Choose Your Destination</h2>
<p>Whether you're seeking relaxation, thrill, or cultural immersion, the perfect travel destination is out there, ready to welcome you with open arms.</p>
</div>
<div class="destination-img">
<div id="images" class="maldives">
<h4>Maldives</h4>
<img src="./images/Rectangle 5.png" alt="">
</div>
<div id="images" class="indonesia">
<h4>Indonesia</h4>
<img src="./images/Rectangle 8.png" alt="">
</div>
<div id="images" class="srilanka">
<h4>Srilanka</h4>
<img src="./images/Rectangle 6.png" alt="">
</div>
<div id="images" class="north-america">
<h4>North America</h4>
<img src="./images/Rectangle 7.png" alt="">
</div>
<div id="images" class="kashmir">
<h4>Kashmir</h4>
<img src="./images/Rectangle 9.png" alt="">
</div>
<div id="images" class="bangladesh">
<h4>Bangladesh</h4>
<img src="./images/Rectangle 11.png" alt="">
</div>
<div id="images" class="bandarban">
<h4>Bandarban</h4>
<img src="./images/Rectangle 10.png" alt="">
</div>
</div>
</section>
<!-- Why Choose Us -->
<section class="why">
<div class="choose-title">
<h2>Why Choose Us</h2>
<p>Enjoy laughable travel moments that will brighten your mood, captivating adventures that will inspire your next trip, daring stories that will fuel your sense of adventure, and eerie tales that will challenge your courage.</p>
</div>
<div class="card-grid">
<div id="card" class="cadr1">
<img src="./images/hotel.svg" alt="">
<h4>Handpicked Hotels</h4>
<p>Enjoy laughable travel moments that will brighten your mood, captivating adventures that will inspire your next trip, daring stories that will fuel your sense of adventure, and eerie tales that will challenge your courage.</p>
</div>
<div id="card" class="cadr2">
<img src="./images/map.svg" alt="">
<h4>World Class Service</h4>
<p>Enjoy laughable travel moments that will brighten your mood, captivating adventures that will inspire your next trip, daring stories that will fuel your sense of adventure, and eerie tales that will challenge your courage.</p>
</div>
<div id="card" class="cadr3">
<img src="./images/price tag.svg" alt="">
<h4>Best Price Guarantee</h4>
<p>Enjoy laughable travel moments that will brighten your mood, captivating adventures that will inspire your next trip, daring stories that will fuel your sense of adventure, and eerie tales that will challenge your courage.</p>
</div>
</div>
</section>
<!-- Deals & Discounts -->
<section class="deals">
<div class="discounts-title">
<h2>Deals & Discounts</h2>
<p>Enjoy laughable travel moments that will brighten your mood, captivating adventures that will inspire your next trip, daring stories that will fuel your sense of adventure, and eerie tales that will challenge your courage.</p>
</div>
<div class="discount-bg1">
<div class="discount1">
<div class="discount-text1" id="discounts">
<div class="discount-icon">
<p><i class="fa fa-clock"></i> 7 Day / 6 Night</p>
<p><i class="fa fa-people-group"></i> Max : 10</p>
<p><i class="fa fa-location-dot"></i> Malaysia</p>
</div>
<h2>Tour To Satorini</h2>
<p id="text">Enjoy laughable travel moments that will brighten your mood, captivating adventures that will inspire your next trip, daring stories that will fuel your sense of adventure, and eerie tales that will challenge your courage.</p>
<h4>Price: $1300-$1500</h4>
<button id="deals-btn" class="discount-btn">Book Now</button>
</div>
</div>
</div>
<div class="discout-bg">
<div class="discount2">
<div class="discount-text1" id="discounts">
<div class="discount-icon">
<p><i class="fa fa-clock"></i> 7 Day / 6 Night</p>
<p><i class="fa fa-people-group"></i> Max : 10</p>
<p><i class="fa fa-location-dot"></i> Malaysia</p>
</div>
<h2>Tour To Satorini</h2>
<p id="text">Enjoy laughable travel moments that will brighten your mood, captivating adventures that will inspire your next trip, daring stories that will fuel your sense of adventure, and eerie tales that will challenge your courage.</p>
<h4>Price: $1300-$1500</h4>
<button id="deals-btn" class="discount-btn">Book Now</button>
</div>
</div>
</div>
<div class="discount-bg1">
<div class="discount1">
<div class="discount-text1" id="discounts">
<div class="discount-icon">
<p><i class="fa fa-clock"></i> 7 Day / 6 Night</p>
<p><i class="fa fa-people-group"></i> Max : 10</p>
<p><i class="fa fa-location-dot"></i> Malaysia</p>
</div>
<h2>Tour To Satorini</h2>
<p id="text">Enjoy laughable travel moments that will brighten your mood, captivating adventures that will inspire your next trip, daring stories that will fuel your sense of adventure, and eerie tales that will challenge your courage.</p>
<h4>Price: $1300-$1500</h4>
<button id="deals-btn" class="discount-btn">Book Now</button>
</div>
</div>
</div>
<div class="btn">
<button>See All Packages</button>
</div>
</section>
<!-- A Simple Perfect Place To Get Lost -->
<section class="first-section">
<div class="container">
<div class="container-text">
<h2>A Simple Perfect Place <br> To Get Lost</h2>
<p>Amet consectetur. Vulputate commodo felis molestie risus ornare nulla amet et. Libero commodo sagittis dignissim adipiscing quis. </p>
<li>Adipiscing ornare pellentesque mauris volutpat tortor vitae platea porta lacus. Lectus suspendisse nullam.</li>
<li>Adipiscing ornare pellentesque mauris volutpat tortor vitae platea porta lacus. Lectus suspendisse nullam.</li>
<button class="btn-primary">See More</button>
</div>
<div class="container-img">
<img src="./images/Group 40089.png" alt="">
<p>Watch Our Mountain in <br> Bangladesh</p>
</div>
</div>
</section>
<!-- Newsletter -->
<section class="first-section">
<div class="newsletter">
<div class="form">
<h2>Newsletter</h2>
<p>Get your daily dose of travel news & tips. Sign up today!</p>
<hr class="news-hr">
<input placeholder="Enter Your Name" type="text" id="newsform">
<input placeholder="Enter Your Email" type="email" name="" id="newsform">
<button class="btn-primary">Subscribe</button>
</div>
<div class="newsletter-pic">
<img src="./images/Rectangle 8 (1).png" alt="">
<div class="save-of">
<p>Travel.com</p>
<h2>Save up to 70%</h2>
</div>
</div>
</div>
</section>
</main>
<!-- footer section -->
<footer>
<section class="footer">
<div class="container-footer">
<div class="footer-logo">
<img src="./images/Group 40071 (2).png" alt="">
<h2>Mostafa <span>Travel</span></h2>
</div>
<p>Discover laugh-out-loud travel stories, heartwarming adventures, thrilling escapades, and unforgettable experiences that will inspire your next journey with Mostafa Travel!</p>
<i class="fa fa-twitter"></i>
<i class="fa fa-facebook"></i>
<i class="fa fa-instagram"></i>
<i class="fa fa-github"></i>
</div>
<hr>
<div class="copy-right">
<p>2017, All Rights Reserved.</p>
</div>
</section>
</footer>
</body>
</html>