├── README.md
├── img
    ├── 1.jpg
    ├── 2.jpg
    ├── 3.jpg
    ├── 4.jpg
    ├── 5.jpg
    ├── 6.jpg
    ├── 7.jpg
    ├── 8.jpg
    ├── 9.jpg
    ├── 10.jpg
    ├── 11.jpg
    ├── 12.jpg
    ├── 13.jpg
    ├── 14.avif
    ├── 5.avif
    ├── swiper 2.jpg
    ├── swiper1.jpg
    ├── swiper3.jpg
    └── swiper4.jpg
├── .github
    └── workflows
    │   └── static.yml
├── js
    └── script.js
├── css
    └── style.css
└── index.html


/README.md:
--------------------------------------------------------------------------------
1 | # travel-with-zain


--------------------------------------------------------------------------------
/img/1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/code-with-zain-hunzai/travel-with-zain/HEAD/img/1.jpg


--------------------------------------------------------------------------------
/img/2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/code-with-zain-hunzai/travel-with-zain/HEAD/img/2.jpg


--------------------------------------------------------------------------------
/img/3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/code-with-zain-hunzai/travel-with-zain/HEAD/img/3.jpg


--------------------------------------------------------------------------------
/img/4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/code-with-zain-hunzai/travel-with-zain/HEAD/img/4.jpg


--------------------------------------------------------------------------------
/img/5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/code-with-zain-hunzai/travel-with-zain/HEAD/img/5.jpg


--------------------------------------------------------------------------------
/img/6.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/code-with-zain-hunzai/travel-with-zain/HEAD/img/6.jpg


--------------------------------------------------------------------------------
/img/7.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/code-with-zain-hunzai/travel-with-zain/HEAD/img/7.jpg


--------------------------------------------------------------------------------
/img/8.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/code-with-zain-hunzai/travel-with-zain/HEAD/img/8.jpg


--------------------------------------------------------------------------------
/img/9.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/code-with-zain-hunzai/travel-with-zain/HEAD/img/9.jpg


--------------------------------------------------------------------------------
/img/10.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/code-with-zain-hunzai/travel-with-zain/HEAD/img/10.jpg


--------------------------------------------------------------------------------
/img/11.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/code-with-zain-hunzai/travel-with-zain/HEAD/img/11.jpg


--------------------------------------------------------------------------------
/img/12.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/code-with-zain-hunzai/travel-with-zain/HEAD/img/12.jpg


--------------------------------------------------------------------------------
/img/13.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/code-with-zain-hunzai/travel-with-zain/HEAD/img/13.jpg


--------------------------------------------------------------------------------
/img/14.avif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/code-with-zain-hunzai/travel-with-zain/HEAD/img/14.avif


--------------------------------------------------------------------------------
/img/5.avif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/code-with-zain-hunzai/travel-with-zain/HEAD/img/5.avif


--------------------------------------------------------------------------------
/img/swiper 2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/code-with-zain-hunzai/travel-with-zain/HEAD/img/swiper 2.jpg


--------------------------------------------------------------------------------
/img/swiper1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/code-with-zain-hunzai/travel-with-zain/HEAD/img/swiper1.jpg


--------------------------------------------------------------------------------
/img/swiper3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/code-with-zain-hunzai/travel-with-zain/HEAD/img/swiper3.jpg


--------------------------------------------------------------------------------
/img/swiper4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/code-with-zain-hunzai/travel-with-zain/HEAD/img/swiper4.jpg


--------------------------------------------------------------------------------
/.github/workflows/static.yml:
--------------------------------------------------------------------------------
 1 | # Simple workflow for deploying static content to GitHub Pages
 2 | name: Deploy static content to Pages
 3 | 
 4 | on:
 5 |   # Runs on pushes targeting the default branch
 6 |   push:
 7 |     branches: ["main"]
 8 | 
 9 |   # Allows you to run this workflow manually from the Actions tab
10 |   workflow_dispatch:
11 | 
12 | # Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
13 | permissions:
14 |   contents: read
15 |   pages: write
16 |   id-token: write
17 | 
18 | # Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
19 | # However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
20 | concurrency:
21 |   group: "pages"
22 |   cancel-in-progress: false
23 | 
24 | jobs:
25 |   # Single deploy job since we're just deploying
26 |   deploy:
27 |     environment:
28 |       name: github-pages
29 |       url: ${{ steps.deployment.outputs.page_url }}
30 |     runs-on: ubuntu-latest
31 |     steps:
32 |       - name: Checkout
33 |         uses: actions/checkout@v4
34 |       - name: Setup Pages
35 |         uses: actions/configure-pages@v4
36 |       - name: Upload artifact
37 |         uses: actions/upload-pages-artifact@v3
38 |         with:
39 |           # Upload entire repository
40 |           path: '.'
41 |       - name: Deploy to GitHub Pages
42 |         id: deployment
43 |         uses: actions/deploy-pages@v4
44 | 


--------------------------------------------------------------------------------
/js/script.js:
--------------------------------------------------------------------------------
 1 | let header = document.getElementById("header")
 2 | let menu = document.querySelector("#menu-icon")
 3 | let oderList = document.querySelector(".oder-list")
 4 | 
 5 | menu.onclick = () => {
 6 |     menu.classList.toggle("fa-times")
 7 |     oderList.classList.toggle('active')
 8 | }
 9 | window.onscroll = () => {
10 |     menu.classList.remove("fa-times")
11 |     oderList.classList.remove('active')
12 | }
13 | var swiper = new Swiper(".home", {
14 |     spaceBetween: 30,
15 |     centeredSlides: true,
16 |     autoplay: {
17 |         delay: 4000,
18 |         disableOnInteraction: false,
19 |     },
20 |     pagination: {
21 |         el: ".swiper-pagination",
22 |         clickable: true,
23 |     },
24 |     navigation: {
25 |         nextEl: ".swiper-button-next",
26 |         prevEl: ".swiper-button-prev",
27 |     },
28 | });
29 | 
30 | // swiper
31 | 
32 | var swiper = new Swiper(".coming-container", {
33 |     spaceBetween: 20,
34 |     loop: true,
35 |     autoplay: {
36 |         delay: 1000,
37 |         disableOnInteraction: false,
38 |     },
39 |     breakpoints: {
40 |         0: {
41 |             slidesPerView: 2,
42 |         },
43 |         568: {
44 |             slidesPerView: 3,
45 |         },
46 |         786: {
47 |             slidesPerView: 4,
48 |         },
49 |         968: {
50 |             slidesPerView: 5,
51 |         },
52 |     }
53 | });
54 | 
55 | swiper.el.addEventListener("mouseenter", function () {
56 |     swiper.autoplay.stop();
57 | });
58 | 
59 | swiper.el.addEventListener("mouseleave", function () {
60 |     swiper.autoplay.start();
61 | });


--------------------------------------------------------------------------------
/css/style.css:
--------------------------------------------------------------------------------
  1 | @import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;400;500;600;700;800;900&family=Montserrat+Alternates:ital,wght@0,600;0,700;0,800;0,900;1,600;1,700;1,800;1,900&family=Montserrat+Subrayada:wght@400;700&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');
  2 | 
  3 | * {
  4 |     margin: 0;
  5 |     padding: 0;
  6 |     box-sizing: border-box;
  7 | }
  8 | 
  9 | :root {
 10 |     --main-color: #ff2c1f;
 11 |     --text-color: #020307;
 12 |     --bg-color: #fff;
 13 | }
 14 | 
 15 | html::-webkit-scrollbar {
 16 |     width: 0.5rem;
 17 |     background: var(--text-color);
 18 | }
 19 | 
 20 | html::-webkit-scrollbar-thumb {
 21 |     background: var(--main-color);
 22 |     border-radius: 5rem;
 23 | }
 24 | 
 25 | body {
 26 |     background-color: black;
 27 |     color: white;
 28 | }
 29 | 
 30 | section {
 31 |     padding: 4.5rem 0 1.5rem;
 32 | 
 33 | }
 34 | 
 35 | header {
 36 |     position: absolute;
 37 |     width: 100%;
 38 |     top: 0;
 39 |     right: 0;
 40 |     z-index: 1000;
 41 |     display: flex;
 42 |     align-items: center;
 43 |     justify-content: space-between;
 44 |     padding: 20px 194px;
 45 |     transition: 0.2s;
 46 | 
 47 | }
 48 | 
 49 | .logo {
 50 |     font-size: 1.1rem;
 51 |     font-weight: 800;
 52 |     color: white;
 53 |     display: flex;
 54 |     align-items: center;
 55 |     column-gap: 0.5rem;
 56 | }
 57 | 
 58 | header .logo {
 59 |     text-decoration: none;
 60 | }
 61 | 
 62 | .logo .travel {
 63 |     font-size: 24px;
 64 |     color: #0b5877;
 65 |     text-decoration: none;
 66 | }
 67 | 
 68 | .logo .travel a {
 69 |     text-decoration: none;
 70 | }
 71 | 
 72 | .oder-list {
 73 |     display: flex;
 74 |     column-gap: 5rem;
 75 |     list-style: none;
 76 | }
 77 | 
 78 | .oder-list li {
 79 |     position: relative;
 80 | }
 81 | 
 82 | .oder-list a {
 83 |     font-size: 1rem;
 84 |     font-weight: 500;
 85 |     color: white;
 86 |     text-decoration: none;
 87 | }
 88 | 
 89 | .oder-list a::after {
 90 |     content: '';
 91 |     width: 0;
 92 |     height: 2px;
 93 |     background: red;
 94 |     position: absolute;
 95 |     bottom: -4px;
 96 |     left: 0;
 97 |     transition: 0.4s all linear;
 98 | 
 99 | }
100 | 
101 | .oder-list a:hover::after,
102 | .oder-list .home-active::after {
103 |     width: 100%;
104 | }
105 | 
106 | #menu-icon {
107 |     font-size: 24px;
108 |     color: white;
109 |     cursor: pointer;
110 |     z-index: 1000001;
111 |     display: none;
112 | }
113 | 
114 | .btn {
115 |     padding: 0.7rem 1.4rem;
116 |     background-color: rgb(255, 0, 0);
117 |     color: white;
118 |     font-weight: 400;
119 |     border-radius: 14px;
120 |     text-decoration: none;
121 | }
122 | 
123 | .btn:hover {
124 |     background-color: #dd3b13;
125 |     transition: 0.3s ease-in-out;
126 | }
127 | 
128 | /* home section */
129 | 
130 | 
131 | .container {
132 |     width: 100%;
133 |     min-height: 610px;
134 |     position: relative;
135 |     display: flex;
136 |     align-items: center;
137 |     background: linear-gradient(rgb(2, 3, 7, 0.9), rgb(0, 0, 0, 0.8));
138 | 
139 | }
140 | 
141 | .bg-img img {
142 |     position: absolute;
143 |     width: 100%;
144 |     height: 100%;
145 |     object-fit: cover;
146 |     object-position: center;
147 |     z-index: -1;
148 | 
149 | }
150 | 
151 | .swiper-pagination-bullet {
152 |     width: 6px !important;
153 |     height: 6px !important;
154 |     border-radius: 0.2rem !important;
155 |     background: rgb(224, 213, 213) !important;
156 |     opacity: 1 !important;
157 | }
158 | 
159 | .home-text {
160 |     margin-top: 12%;
161 |     margin-left: 14%;
162 | }
163 | 
164 | .home-text span {
165 |     color: white;
166 |     font-weight: 500;
167 |     text-transform: uppercase;
168 | }
169 | 
170 | .home-text h1 {
171 |     color: white;
172 |     font-size: 4rem;
173 |     font-weight: 700;
174 |     margin-bottom: 1rem;
175 | }
176 | 
177 | .swiper-pagination-bullet-active {
178 |     width: 1rem !important;
179 |     background: rgb(212, 6, 6) !important;
180 | }
181 | 
182 | .heading {
183 |     max-width: 946px;
184 |     margin-left: auto;
185 |     margin-right: auto;
186 |     font-size: 1.2rem;
187 |     font-weight: 700;
188 |     text-transform: uppercase;
189 |     border-bottom: 1px solid red;
190 | }
191 | 
192 | .travellers-container {
193 |     max-width: 968px;
194 |     margin-right: auto;
195 |     margin-left: auto;
196 |     display: grid;
197 |     grid-template-columns: repeat(auto-fit, minmax(180px, auto));
198 |     gap: 3.5rem;
199 |     margin-top: 2rem;
200 | 
201 | }
202 | 
203 | .box .box-img {
204 |     width: 100%;
205 |     height: 270px;
206 | }
207 | 
208 | .box .box-img img {
209 |     width: 100%;
210 |     height: 100%;
211 |     object-fit: cover;
212 | }
213 | 
214 | .box .box-img img:hover {
215 |     transform: translateY(-10px);
216 |     /* transition: linear; */
217 | }
218 | 
219 | .box h3 {
220 |     font-size: 1.3rem;
221 |     font-weight: 500;
222 | }
223 | 
224 | .box span {
225 |     font-size: 16px;
226 | }
227 | 
228 | .coming-container {
229 |     display: grid;
230 |     grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
231 |     gap: 1rem;
232 |     max-width: 968px;
233 |     margin-left: auto;
234 |     margin-right: auto;
235 |     margin-top: 2rem;
236 | }
237 | 
238 | .coming-container .box-img img:hover {
239 |     transform: translateY(0);
240 | }
241 | 
242 | .coming-container .box {
243 |     width: 250px;
244 | }
245 | 
246 | .newsletter {
247 |     max-width: 968px;
248 |     margin-left: auto;
249 |     margin-right: auto;
250 |     display: flex;
251 |     flex-direction: column;
252 |     align-items: center;
253 |     justify-content: center;
254 |     row-gap: 2rem;
255 | }
256 | 
257 | .newsletter h2 {
258 |     font-size: 1.3rem;
259 |     text-align: center;
260 |     font-weight: 600;
261 | }
262 | 
263 | .newsletter form {
264 |     background-color: white;
265 |     padding: 10px;
266 |     border-radius: 0.3rem;
267 |     display: flex;
268 |     align-items: center;
269 | }
270 | 
271 | .newsletter form input {
272 |     border: none;
273 |     outline: none;
274 | }
275 | 
276 | .email {
277 |     width: 280px;
278 | }
279 | 
280 | .newsletter form input::placeholder {
281 |     font-size: 0.8rem;
282 |     font-weight: 500;
283 |     color: black;
284 | }
285 | 
286 | .newsletter .btn {
287 |     text-transform: uppercase;
288 |     font-weight: 500;
289 |     cursor: pointer;
290 | }
291 | 
292 | .footer {
293 |     max-width: 968px;
294 |     margin-left: auto;
295 |     margin-right: auto;
296 |     display: flex;
297 |     justify-content: space-between;
298 | }
299 | 
300 | .social {
301 |     display: flex;
302 |     align-items: center;
303 |     column-gap: 0.5rem;
304 |     text-decoration: none;
305 | }
306 | 
307 | .social .bx {
308 |     background: white;
309 |     padding: 2px;
310 |     font-size: 2rem;
311 |     border-radius: 50%;
312 |     border: 4px solid rgb(2, 3, 7, 0.4);
313 |     color: red;
314 | }
315 | 
316 | .social .bx:hover {
317 |     background: #c76a53;
318 |     transition: 0.3s all linear;
319 | }
320 | 
321 | .copyright {
322 |     padding: 20px;
323 |     text-align: center;
324 | 
325 | }
326 | 
327 | @media(max-width:1890px) {
328 |     .home-text {
329 |         margin-bottom: 100px;
330 |     }
331 | }
332 | 
333 | @media(max-width: 1080px) {
334 |     .home-text {
335 |         padding: 0 100px;
336 |     }
337 | }
338 | 
339 | @media(max-width: 991px) {
340 |     header {
341 |         padding: 18px 4%;
342 |     }
343 | 
344 |     section {
345 |         padding: 50px 4%;
346 |     }
347 | 
348 |     .home-text {
349 |         padding: 0 4%;
350 |     }
351 | 
352 |     .home-text h1 {
353 |         font-size: 3rem;
354 |     }
355 | }
356 | 
357 | @media(max-width:700px) {
358 |     header {
359 |         padding: 12px 4%;
360 |         background: #fff;
361 |         color: black;
362 |     }
363 | 
364 |     #menu-icon {
365 |         display: initial;
366 |         color: var(--text-color);
367 |     }
368 | 
369 |     header.shadow #menu-icon {
370 |         color: var(--text-color);
371 |     }
372 | 
373 |     .oder-list {
374 |         position: absolute;
375 |         top: -570%;
376 |         left: 0;
377 |         right: 0;
378 |         display: flex;
379 |         flex-direction: column;
380 |         background: var(--bg-color);
381 |         row-gap: 1.3rem;
382 |         padding: 20px;
383 |         box-shadow: 4px 4px 0 4px rgb(14, 55, 54 /15%);
384 |         transition: 0.2s all linear;
385 |         text-align: center;
386 |     }
387 | 
388 |     .oder-list a {
389 |         color: var(--text-color);
390 |     }
391 | 
392 |     .oder-list a:hover {
393 |         color: var(--main-color);
394 |         border-bottom: 1px solid var(--main-color);
395 |     }
396 | 
397 |     .oder-list a::after {
398 |         display: none;
399 |     }
400 | 
401 |     .oder-list.active {
402 |         top: 100%;
403 |     }
404 | 
405 |     .home-text h1 {
406 |         font-size: 2.4rem
407 |     }
408 | }
409 | 
410 | @media (max-width:520px) {
411 |     .newsletter form .email {
412 |         width: auto;
413 |     }
414 | 
415 |     .footer {
416 |         flex-direction: column;
417 |         align-items: center;
418 |         row-gap: 1rem;
419 |     }
420 | }
421 | 
422 | @media (max-width:400px) {
423 |     header {
424 |         padding: 6px 4%;
425 |     }
426 | 
427 |     .home-text h1 {
428 |         font-size: 1.7rem;
429 |     }
430 | }


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |     <meta charset="UTF-8">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
  8 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
  9 |     <link rel="stylesheet" href="css/style.css">
 10 |     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/boxicons@latest/css/boxicons.min.css">
 11 |     <script src="js/script.js" defer></script>
 12 |     <title>travel</title>
 13 | </head>
 14 | 
 15 | <body>
 16 |     <header id="header">
 17 |         <a href="#" class="logo">
 18 |             <i class="travel fas fa-plane-departure"></i>travel
 19 |         </a>
 20 |         <div class="menu fas fa-bars" id="menu-icon"></div>
 21 | 
 22 |         <ul class="oder-list">
 23 |             <li><a href="#Home" class="home-active">Home</a></li>
 24 |             <li><a href="#About">About</a></li>
 25 |             <li><a href="#Contact">Contact</a></li>
 26 |             <li><a href="#Newsletter">Newsletter</a></li>
 27 |         </ul>
 28 |         <a href="#" class="btn">Sign In</a>
 29 |     </header>
 30 |     <!-- home -->
 31 |     <section class="home swiper" id="home">
 32 |         <div class="swiper-wrapper">
 33 |             <div class="swiper-slide container bg-img">
 34 |                 <img src="img/swiper1.jpg" alt="">
 35 |                 <div class="home-text">
 36 |                     <h1>Travel let's go <br>tour of world</h1>
 37 |                     <a href="#" class="btn">Book now</a>
 38 |                 </div>
 39 |             </div>
 40 | 
 41 |             <!-- box2 -->
 42 |             <div class="swiper-slide container bg-img">
 43 |                 <img src="img/swiper 2.jpg" alt="">
 44 |                 <div class="home-text">
 45 |                     <h1>Travel let's go <br>tour of world</h1>
 46 |                     <a href="#" class="btn">Book now</a>
 47 |                 </div>
 48 |             </div>
 49 | 
 50 |             <!-- box3 -->
 51 |             <div class="swiper-slide container bg-img">
 52 |                 <img src="img/swiper3.jpg" alt="">
 53 |                 <div class="home-text">
 54 |                     <h1>Travel let's go <br>tour of world</h1>
 55 |                     <a href="#" class="btn">Book now</a>
 56 |                 </div>
 57 |             </div>
 58 |         </div>
 59 | 
 60 |         <div class="swiper-pagination"></div>
 61 | 
 62 |     </section>
 63 |     <!-- section tour -->
 64 |     <section class="tour" id="tour">
 65 |         <h2 class="heading">Tour this week</h2>
 66 |         <div class="travellers-container">
 67 |             <!-- box-1 -->
 68 |             <div class="box">
 69 |                 <div class="box-img">
 70 |                     <img src="img/1.jpg" alt="">
 71 |                     <h3>Location</h3>
 72 |                     <span>somewhere on Earth</span>
 73 |                 </div>
 74 |             </div>
 75 |             <!-- box-2 -->
 76 |             <div class="box">
 77 |                 <div class="box-img">
 78 |                     <img src="img/2.jpg" alt="">
 79 |                     <h3>Location</h3>
 80 |                     <span>somewhere on Earth</span>
 81 |                 </div>
 82 |             </div>
 83 |             <!-- box-3 -->
 84 |             <div class="box">
 85 |                 <div class="box-img">
 86 |                     <img src="img/3.jpg" alt="">
 87 |                     <h3>Location</h3>
 88 |                     <span>somewhere on Earth</span>
 89 |                 </div>
 90 |             </div>
 91 |             <!-- box-4 -->
 92 |             <div class="box">
 93 |                 <div class="box-img">
 94 |                     <img src="img/4.jpg" alt="">
 95 |                     <h3>Location</h3>
 96 |                     <span>somewhere on Earth</span>
 97 |                 </div>
 98 |             </div>
 99 |             <!-- box-5 -->
100 |             <div class="box">
101 |                 <div class="box-img">
102 |                     <img src="img/5.avif" alt="">
103 |                     <h3>Location</h3>
104 |                     <span>somewhere on Earth</span>
105 |                 </div>
106 |             </div>
107 |             <!-- box-6 -->
108 |             <div class="box">
109 |                 <div class="box-img">
110 |                     <img src="img/6.jpg" alt="">
111 |                     <h3>Location</h3>
112 |                     <span>somewhere on Earth</span>
113 |                 </div>
114 |             </div>
115 |             <!-- box-7 -->
116 |             <div class="box">
117 |                 <div class="box-img">
118 |                     <img src="img/7.jpg" alt="">
119 |                     <h3>Location</h3>
120 |                     <span>somewhere on Earth</span>
121 |                 </div>
122 |             </div>
123 | 
124 |             <!-- box-8 -->
125 |             <div class="box">
126 |                 <div class="box-img">
127 |                     <img src="img/11.jpg" alt="">
128 |                     <h3>Location</h3>
129 |                     <span>somewhere on Earth</span>
130 |                 </div>
131 |             </div>
132 |     </section>
133 |     <!-- coming tours -->
134 |     <section class="coming" id="coming">
135 |         <h2 class="heading">Coming soon tours</h2>
136 |         <div class="coming-container swiper">
137 |             <div class="swiper-wrapper">
138 |                 <!-- box1-1 -->
139 |                 <div class="swiper-slide box">
140 |                     <div class="box-img">
141 |                         <img src="img/1.jpg" alt="">
142 |                     </div>
143 |                     <h3>Location</h3>
144 |                     <span>somewhere on Earth</span>
145 |                 </div>
146 |                 <!-- box-2 -->
147 |                 <div class="swiper-slide box">
148 |                     <div class="box-img">
149 |                         <img src="img/2.jpg" alt="">
150 |                         <h3>Location</h3>
151 |                         <span>somewhere on Earth</span>
152 |                     </div>
153 |                 </div>
154 |                 <!-- box-3 -->
155 |                 <div class="swiper-slide box">
156 |                     <div class="box-img">
157 |                         <img src="img/3.jpg" alt="">
158 |                         <h3>The mountains are calling</h3>
159 |                         <span>somewhere on Earth</span>
160 |                     </div>
161 |                 </div>
162 |                 <!-- box-4 -->
163 |                 <div class="swiper-slide box">
164 |                     <div class="box-img">
165 |                         <img src="img/12.jpg" alt="">
166 |                         <h3>Location</h3>
167 |                         <span>somewhere on Earth</span>
168 |                     </div>
169 |                 </div>
170 |                 <!-- box-5 -->
171 |                 <div class="swiper-slide box">
172 |                     <div class="box-img">
173 |                         <img src="img/5.avif" alt="">
174 |                         <h3>Location</h3>
175 |                         <span>somewhere on Earth</span>
176 |                     </div>
177 |                 </div>
178 |                 <!-- box-6 -->
179 |                 <div class="swiper-slide box">
180 |                     <div class="box-img">
181 |                         <img src="img/6.jpg" alt="">
182 |                         <h3>Location</h3>
183 |                         <span>somewhere on Earth</span>
184 |                     </div>
185 |                 </div>
186 |                 <!-- box-7 -->
187 |                 <div class="swiper-slide box">
188 |                     <div class="box-img">
189 |                         <img src="img/7.jpg" alt="">
190 |                         <h3>Location</h3>
191 |                         <span>somewhere on Earth</span>
192 |                     </div>
193 |                 </div>
194 | 
195 |                 <!-- box-8 -->
196 |                 <div class="swiper-slide box">
197 |                     <div class="box-img">
198 |                         <img src="img/11.jpg" alt="">
199 |                         <h3>Location</h3>
200 |                         <span>somewhere on Earth</span>
201 |                     </div>
202 |                 </div>
203 |             </div>
204 |         </div>
205 |     </section>
206 | 
207 |     <!-- Newsletters -->
208 |     <section class="newsletter" id="newsletter">
209 |         <h2>Subscribe to get <br>Newsletter</h2>
210 |         <form action="">
211 |             <input type="email" class="email" placeholder="Enter Email..." required>
212 |             <input type="submit" value="Subscribe" class="btn">
213 |         </form>
214 |     </section>
215 |     <!-- footer -->
216 |     <section class="footer" id="footer">
217 |         <a href="#" class="logo">
218 |             <i class="travel fas fa-plane-departure"></i>travel
219 |         </a>
220 |         <div class="social">
221 |             <a href="#"><i class='bx bxl-facebook-circle'></i></a>
222 |             <a href="#"><i class='bx bxl-instagram'></i></a>
223 |             <a href="#"><i class='bx bxl-twitter'></i></a>
224 |             <a href="#"><i class='bx bxl-tiktok'></i></a>
225 |         </div>
226 |     </section>
227 |     <div class="copyright">
228 |         <p><i class='bx bx-copyright'></i>2024 || All Right resevred.</p>
229 |     </div>
230 |     <!-- swiper -->
231 |     <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
232 | </body>
233 | 
234 | </html>


--------------------------------------------------------------------------------