Hi everybody! Using HTML, CSS, and JavaScript, you will learn
how to create a responsive websites the best travel agency website design using HTML CSS And JAVASCRIPT in this Blog.
Using standard JavaScript, users can use the navigation buttons on the web design moving car animation  website design to navigate through each slide. The clip-path property is utilized for the transition on the slide. I hope that when you design a website with online moving car animation , this video will be helpful.
You can download all of the source files and codes from this location. The code from the text editors must be copied and pasted. Try it out first by watching the video tutorial. It will assist you in comprehending everything. After that, if your code isn’t working right, look at the source codes provided and compare them to your own. It will assist you in comprehending everything, including your errors.
Index.html
<!DOCTYPE html>
<html lang="en">
<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">
<title>Complete Responsive adventure & tour Website Design </title>
<link
rel="stylesheet"
href="https://unpkg.com/swiper@7/swiper-bundle.min.css"
/>
<!-- font awsome cdn link -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<!-- custom css file link -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- header section start -->
<section class="header" id="header">
<a href="#" class="logo"> <i class="fas fa-hiking"></i> adventure </a>
<nav class="navbar">
<div id="nav-close" class="fas fa-times"></div>
<a href="#home">home</a>
<a href="#about">about</a>
<a href="#shop">shop</a>
<a href="#packages">packages</a>
<a href="#reviews">reviews</a>
<a href="#blogs">blogs</a>
</nav>
<div class="icons">
<div id="menu-btn" class="fas fa-bars"></div>
<a href="#" class="fas fa-shopping-cart"></a>
</div>
</section>
<!-- header section ends -->
<!-- home section starts -->
<section class="home" id="home">
<div class="swiper home-slider">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="box" style="background: url(img/home-bg-1.jpg) no-repeat;">
<div class="content">
<span>never stop </span>
<h3>exploring</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis ipsa,
nostrum non dolor tempore corrupti farhan perspiciatis consequatur adipisci ullam.</p>
<a href="#" class="btn">get started</a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="box second" style="background: url(img/home-bg-2.jpg) no-repeat;">
<div class="content">
<span>make tour </span>
<h3>amazing</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis ipsa,
nostrum non dolor tempore corrupti farhan perspiciatis consequatur adipisci ullam.</p>
<a href="#" class="btn">get started</a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="box thrid" style="background: url(img/home-bg-3.jpg) no-repeat;">
<div class="content">
<span>exploring the </span>
<h3>new world</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis ipsa,
nostrum non dolor tempore corrupti farhan perspiciatis consequatur adipisci ullam.</p>
<a href="#" class="btn">get started</a>
</div>
</div>
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
</section>
<!-- home section ends here -->
<!-- category section ends here -->
<section class="category">
<h1 class="heading">adventure <span>idea!</span></h1>
<div class="box-container">
<div class="box">
<img decoding="async" src="img/category-1.jpg">
<h3>Bungee jump</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis ipsa,</p>
<a href="#" class="btn">read more...</a>
</div>
<div class="box">
<img decoding="async" src="img/category-2.jpg">
<h3>Zip lines</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis ipsa,</p>
<a href="#" class="btn">read more...</a>
</div>
<div class="box">
<img decoding="async" src="img/category-3.jpg">
<h3>Canoeing</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis ipsa,</p>
<a href="#" class="btn">read more...</a>
</div>
<div class="box">
<img decoding="async" src="img/category-4.jpg">
<h3>Kayaking</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis ipsa,</p>
<a href="#" class="btn">read more...</a>
</div>
</div>
</section>
<!-- category section ends here -->
<!-- about section starts here -->
<section class="about" id="about">
<div class="img">
<img decoding="async" src="img/about-img.jpg" alt="">
</div>
<div class="content">
<h3>memorable outdoor experiences</h3>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Officia minus id sequi quibusdam. Possimus dolores iusto quam officiis dignissimos quo! Lorem ipsum dolor sit amet consectetur adipisicing elit
farhan debitis id nulla consequatur incidunt, ipsum aliquam facere maiores voluptates architecto!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Voluptatem expedita corrupti officia velit soluta ab quod reprehenderit. Numquam, sed ad.</p>
<a href="#" class="btn">read more</a>
</div>
</section>
<!-- about section ends here -->
<!-- shop section starts here -->
<section class="shop" id="shop">
<h1 class="heading">featured <span>products</span></h1>
<div class="swiper product-slider">
<div class="swiper-wrapper">
<div class="swiper-slide slide">
<div class="img">
<img decoding="async" src="img/product-1.jpg" alt="">
<div class="icons">
<a href="#" class="fas fa-shopping-cart"></a>
<a href="#" class="fas fa-eye"></a>
<a href="#" class="fas fa-share"></a>
</div>
</div>
<div class="content">
<h3>survival kits</h3>
<div class="price"> $10.00 - $30.00</div>
<div class="starts">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-half-alt"></i>
</div>
</div>
</div>
<div class="swiper-slide slide">
<div class="img">
<img decoding="async" src="img/product-2.jpg" alt="">
<div class="icons">
<a href="#" class="fas fa-shopping-cart"></a>
<a href="#" class="fas fa-eye"></a>
<a href="#" class="fas fa-share"></a>
</div>
</div>
<div class="content">
<h3>survival kits</h3>
<div class="price"> $10.00 - $30.00</div>
<div class="starts">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-half-alt"></i>
</div>
</div>
</div>
<div class="swiper-slide slide">
<div class="img">
<img decoding="async" src="img/product-3.jpg" alt="">
<div class="icons">
<a href="#" class="fas fa-shopping-cart"></a>
<a href="#" class="fas fa-eye"></a>
<a href="#" class="fas fa-share"></a>
</div>
</div>
<div class="content">
<h3>survival kits</h3>
<div class="price"> $10.00 - $30.00</div>
<div class="starts">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-half-alt"></i>
</div>
</div>
</div>
<div class="swiper-slide slide">
<div class="img">
<img decoding="async" src="img/product-4.jpg" alt="">
<div class="icons">
<a href="#" class="fas fa-shopping-cart"></a>
<a href="#" class="fas fa-eye"></a>
<a href="#" class="fas fa-share"></a>
</div>
</div>
<div class="content">
<h3>survival kits</h3>
<div class="price"> $10.00 - $30.00</div>
<div class="starts">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-half-alt"></i>
</div>
</div>
</div>
<div class=" swiper-slide slide">
<div class="img">
<img decoding="async" src="img/product-5.jpg" alt="">
<div class="icons">
<a href="#" class="fas fa-shopping-cart"></a>
<a href="#" class="fas fa-eye"></a>
<a href="#" class="fas fa-share"></a>
</div>
</div>
<div class="content">
<h3>survival kits</h3>
<div class="price"> $10.00 - $30.00</div>
<div class="starts">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-half-alt"></i>
</div>
</div>
</div>
<div class="swiper-slide slide">
<div class="img">
<img decoding="async" src="img/product-6.jpg" alt="">
<div class="icons">
<a href="#" class="fas fa-shopping-cart"></a>
<a href="#" class="fas fa-eye"></a>
<a href="#" class="fas fa-share"></a>
</div>
</div>
<div class="content">
<h3>survival kits</h3>
<div class="price"> $10.00 - $30.00</div>
<div class="starts">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-half-alt"></i>
</div>
</div>
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
</section>
<!-- shop section ends here -->
<!-- packages section starts here -->
<section class="packages" id="packages">
<div class="heading">popular <span>packages</span></div>
<div class="box-container">
<div class="box">
<div class="img">
<img decoding="async" src="img/img-1.jpg">
</div>
<div class="content">
<h3>Kayaking</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis ipsa,</p>
<div class="price">$350 - 550</div>
<a href="#" class="btn">explore me</a>
</div>
</div>
<div class="box">
<div class="img">
<img decoding="async" src="img/img-2.jpg">
</div>
<div class="content">
<h3>exploring new places</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis ipsa,</p>
<div class="price">$350 - 550</div>
<a href="#" class="btn">explore me</a>
</div>
</div>
<div class="box">
<div class="img">
<img decoding="async" src="img/img-3.jpg">
</div>
<div class="content">
<h3>hiking</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis ipsa,</p>
<div class="price">$350 - 550</div>
<a href="#" class="btn">explore me</a>
</div>
</div>
<div class="box">
<div class="img">
<img decoding="async" src="img/img-4.jpg">
</div>
<div class="content">
<h3>mountaineering</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis ipsa,</p>
<div class="price">$350 - 550</div>
<a href="#" class="btn">explore me</a>
</div>
</div>
<div class="box">
<div class="img">
<img decoding="async" src="img/img-5.jpg">
</div>
<div class="content">
<h3>surfing</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis ipsa,</p>
<div class="price">$350 - 550</div>
<a href="#" class="btn">explore me</a>
</div>
</div>
<div class="box">
<div class="img">
<img decoding="async" src="img/img-6.jpg">
</div>
<div class="content">
<h3>cycling</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis ipsa,</p>
<div class="price">$350 - 550</div>
<a href="#" class="btn">explore me</a>
</div>
</div>
</div>
</section>
<!-- packages section ends here -->
<!-- reviews section starts here -->
<section class="reviews" id="reviews">
<h1 class="heading">Client's <span>reviews</span></h1>
<div class="swiper review-slider">
<div class="swiper-wrapper">
<div class="swiper-slide slide">
<p class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit.
Aliquam soluta dolorem consequatur farhan aut tenetur iure omnis
adipisci odio! Voluptatem.</p>
<div class="user">
<img decoding="async" src="img/pic-1.png">
<div class="info">
<h3>edward bey</h3>
<span>designer</span>
</div>
</div>
</div>
<div class="swiper-slide slide">
<p class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit.
Aliquam soluta dolorem consequatur farhan aut tenetur iure omnis
adipisci odio! Voluptatem.</p>
<div class="user">
<img decoding="async" src="img/pic-2.png">
<div class="info">
<h3>lina bey</h3>
<span>web development</span>
</div>
</div>
</div>
<div class="swiper-slide slide">
<p class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit.
Aliquam soluta dolorem consequatur farhan aut tenetur iure omnis
adipisci odio! Voluptatem.</p>
<div class="user">
<img decoding="async" src="img/pic-3.png">
<div class="info">
<h3>edward bey</h3>
<span>web designer</span>
</div>
</div>
</div>
<div class="swiper-slide slide">
<p class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit.
Aliquam soluta dolorem consequatur farhan aut tenetur iure omnis
adipisci odio! Voluptatem.</p>
<div class="user">
<img decoding="async" src="img/pic-4.png">
<div class="info">
<h3>jenna bey</h3>
<span>font end</span>
</div>
</div>
</div>
<div class="swiper-slide slide">
<p class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit.
Aliquam soluta dolorem consequatur farhan aut tenetur iure omnis
adipisci odio! Voluptatem.</p>
<div class="user">
<img decoding="async" src="img/pic-5.png">
<div class="info">
<h3>edward bey</h3>
<span>back end</span>
</div>
</div>
</div>
<div class="swiper-slide slide">
<p class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit.
Aliquam soluta dolorem consequatur farhan aut tenetur iure omnis
adipisci odio! Voluptatem.</p>
<div class="user">
<img decoding="async" src="img/pic-6.png">
<div class="info">
<h3>lisa bey</h3>
<span>full stack</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- service section ends here -->
<section class="services">
<h1 class="heading">what we <span>offer</span></h1>
<div class="box-container">
<div class="box">
<img decoding="async" src="img/serv-1.png">
<h3>complete guide</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis ipsa,</p>
<a href="#" class="btn">read more...</a>
</div>
<div class="box">
<img decoding="async" src="img/serv-2.png">
<h3>custom packages</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis ipsa,</p>
<a href="#" class="btn">read more...</a>
</div>
<div class="box">
<img decoding="async" src="img/serv-3.png">
<h3>family trips</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis ipsa,</p>
<a href="#" class="btn">read more...</a>
</div>
<div class="box">
<img decoding="async" src="img/serv-4.png">
<h3>train guides</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis ipsa,</p>
<a href="#" class="btn">read more...</a>
</div>
<div class="box">
<img decoding="async" src="img/serv-5.png">
<h3>adventure trail</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis ipsa,</p>
<a href="#" class="btn">read more...</a>
</div>
<div class="box">
<img decoding="async" src="img/serv-6.png">
<h3>various adventures</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis ipsa,</p>
<a href="#" class="btn">read more...</a>
</div>
</div>
</section>
<!-- services section ends here -->
<!-- blogs section starts here -->
<section class="blogs" id="blogs">
<h1 class="heading">our daily <span>post</span></h1>
<div class="swiper blogs-slider">
<div class="swiper-wrapper">
<div class="swiper-slide slide">
<img decoding="async" src="img/img-1.jpg" alt="">
<div class="icons">
<a href="#"><i class="fas fa-calendar"></i> 1st jan,2022</a>
<a href="#"><i class="fas fa-user"></i>by admin </a>
</div>
<h3>blog title goes here...</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Commodi unde aut ducimus consectetur quam labore mollitia
natus voluptatum dolore laboriosam!</p>
<a href="#" class="btn">read more</a>
</div>
<div class="swiper-slide slide">
<img decoding="async" src="img/img-2.jpg" alt="">
<div class="icons">
<a href="#"><i class="fas fa-calendar"></i> 1st jan,2022</a>
<a href="#"><i class="fas fa-user"></i>by admin </a>
</div>
<h3>blog title goes here...</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Commodi unde aut ducimus consectetur quam labore mollitia
natus voluptatum dolore laboriosam!</p>
<a href="#" class="btn">read more</a>
</div>
<div class="swiper-slide slide">
<img decoding="async" src="img/img-3.jpg" alt="">
<div class="icons">
<a href="#"><i class="fas fa-calendar"></i> 1st jan,2022</a>
<a href="#"><i class="fas fa-user"></i>by admin </a>
</div>
<h3>blog title goes here...</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Commodi unde aut ducimus consectetur quam labore mollitia
natus voluptatum dolore laboriosam!</p>
<a href="#" class="btn">read more</a>
</div>
<div class="swiper-slide slide">
<img decoding="async" src="img/img-4.jpg" alt="">
<div class="icons">
<a href="#"><i class="fas fa-calendar"></i> 1st jan,2022</a>
<a href="#"><i class="fas fa-user"></i>by admin </a>
</div>
<h3>blog title goes here...</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Commodi unde aut ducimus consectetur quam labore mollitia
natus voluptatum dolore laboriosam!</p>
<a href="#" class="btn">read more</a>
</div>
<div class="swiper-slide slide">
<img decoding="async" src="img/img-5.jpg" alt="">
<div class="icons">
<a href="#"><i class="fas fa-calendar"></i> 1st jan,2022</a>
<a href="#"><i class="fas fa-user"></i>by admin </a>
</div>
<h3>blog title goes here...</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Commodi unde aut ducimus consectetur quam labore mollitia
natus voluptatum dolore laboriosam!</p>
<a href="#" class="btn">read more</a>
</div>
<div class="swiper-slide slide">
<img decoding="async" src="img/img-6.jpg" alt="">
<div class="icons">
<a href="#"><i class="fas fa-calendar"></i> 1st jan,2022</a>
<a href="#"><i class="fas fa-user"></i>by admin </a>
</div>
<h3>blog title goes here...</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Commodi unde aut ducimus consectetur quam labore mollitia
natus voluptatum dolore laboriosam!</p>
<a href="#" class="btn">read more</a>
</div>
</div>
</div>
</section>
<!-- blogs section ends here -->
<!-- newsletter section starts here -->
<section class="newsletter">
<div class="content">
<h1 class="heading">subscribe <span>now</span></h1>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Totam dicta atque, explicabo facere perferendis ex enim vel eligendi. Repellat, at.</p>
<form action="">
<input type="email" name="" id="" placeholder="enter your email address" class="email">
<input type="submit" class="btn" value="subscribe">
</form>
</div>
</section>
<!-- newsletter section ends here -->
<!-- clients section starts here -->
<section class="clients">
<div class="swiper clients-slider">
<div class="swiper-wrapper">
<div class="swiper-slide slide"><img decoding="async" src="img/client-logo-1.png" alt=""></div>
<div class="swiper-slide slide"><img decoding="async" src="img/client-logo-2.png" alt=""></div>
<div class="swiper-slide slide"><img decoding="async" src="img/client-logo-3.png" alt=""></div>
<div class="swiper-slide slide"><img decoding="async" src="img/client-logo-4.png" alt=""></div>
</div>
</div>
</section>
<!-- clients section ends here -->
<!-- footer section starts here -->
<section class="footer">
<div class="box-container">
<div class="box">
<h3>quick links</h3>
<a href="#home">home</a>
<a href="#about">about</a>
<a href="#shop">shop</a>
<a href="#packages">packages</a>
<a href="#reviews">reviews</a>
<a href="#blogs">blogs</a>
</div>
<div class="box">
<h3>extra links</h3>
<a href="#">my account</a>
<a href="#">my order</a>
<a href="#">my whishlist</a>
<a href="#">ask question</a>
<a href="#">privacy policy</a>
</div>
<div class="box">
<h3>contact info</h3>
<a href="#"><i class="fas fa-phone"></i>+111-222-7867</a>
<a href="#"><i class="fas fa-phone"></i>+222-333-4444</a>
<a href="#"><i class="fas fa-envelope"></i>shaikhfarhan@gmail.com</a>
<a href="#"><i class="fas fa-map"></i>mumbai, india - 401203</a>
</div>
<div class="box">
<h3>follow us</h3>
<a href="#"><i class="fab fa-facebook-f"></i>facebook</a>
<a href="#"><i class="fab fa-twitter"></i>twitter</a>
<a href="#"><i class="fab fa-instagram"></i>instagram</a>
<a href="#"><i class="fab fa-linkedin"></i>linkedin</a>
<a href="#"><i class="fab fa-github"></i>github</a>
</div>
</div>
<div class="credit">created by <span>dailywebdesign</span> || all rights reserved</div>
</section>
<script src="https://unpkg.com/swiper@7/swiper-bundle.min.js"></script>
<!-- custom js file link -->
<script src="main.js"></script>
</body>
</html>
style.css
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;1,100;1,300&display=swap');
*{
font-family: 'Poppins', sans-serif;
margin: 0;
padding: 0;
/* -webkit-box-sizing: border-box; */
box-sizing: border-box;
outline: none;
border: none;
text-decoration: none;
text-transform: capitalize;
/* -webkit-transition: 2s linear; */
transition: 2s linear;
}
html{
font-size: 62.5%;
overflow-x: hidden;
scroll-behavior: smooth;
scroll-padding-top: 5rem;
}
html::-webkit-scrollbar{
width:1rem;
}
html::-webkit-scrollbar-track{
background: #fff;
}
html::-webkit-scrollbar-thumb{
background: #10221b;
}
section{
padding:5rem 9%;
}
.btn{
margin-top:1rem;
display: inline-block;
border: 0.2rem solid #10221b;
color: #10221b;
cursor:pointer;
background:none;
font-size:1.7rem;
padding:1rem 3rem;
}
.btn:hover{
background: #10221b;
color: #fff;
}
.heading{
text-align: center;
margin-bottom:2.5rem;
font-size: 4rem;
color: #10221b;
}
.heading span{
color: #219150;
}
.header{
position: fixed;
top: 0;
left: 0;
right: 0;
padding: 2rem 9%;
z-index: 1000;
display:-webkit-box;
display:-ms-flexbox;
display:flex;
/* -webkit-box-align: center; */
/* -ms-flex-align: center; */
align-items: center;
}
.header.active{
background: #fff;
/* -webkit-box-shadow:0 0.5rem 1rem rgba(0, 0, 0, 0.1); */
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
}
.header .logo{
margin-right: auto;
font-size: 2.5rem;
color: #10221b;
font-weight: bolder;
}
.header .logo i{
color: #219150;
}
.header .navbar a{
margin-left: 2rem;
font-size: 1.7rem;
color: #10221b;
}
.header .navbar a:hover{
color: #219150;
}
.header .navbar #nav-close{
font-size: 5rem;
cursor: pointer;
color: #10221b;
display: none;
}
.header .icons a,
.header .icons div{
font-size: 3.5rem;
margin-left: 2rem;
cursor: pointer;
color: #10221b;
}
.header .icons a:hover,
.header .icons div:hover{
color: #219150;
}
.header #menu-btn{
display: none;
}
.home{
padding:0;
}
.home .box{
min-height: 100vh;
display:-webkit-box;
display: -ms-flexbox;
display: flex;
/* -webkit-box-align: center; */
/* -ms-flex-align: center; */
align-items: center;
background-size: cover !important;
background-position: center !important;
/* -webkit-box-pack: end; */
/* -ms-flex-pack: end; */
justify-content: flex-end;
padding:2rem 9%;
}
.home .box.second{
/* -webkit-box-pack: start; */
/* -ms-flex-pack: start; */
justify-content: flex-start;
}
.home .box .content{
width:50rem;
}
.home .box .content span{
font-size:4rem;
color: #10221b;
}
.home .box .content h3{
font-size:6rem;
color: #219150;
padding-top: .5rem;
text-transform: uppercase;
}
.home .box .content p{
line-height: 2;
color: #10221b;
font-size: 1.5rem;
padding: 1rem 0;
}
.swiper-button-next::after,
.swiper-button-prev::after{
font-size: 3rem;
color: #10221b;
}
.category .box-container{
display: -ms-grid;
display:grid;
/* -ms-grid-columns: (minmax(29rem, 1fr))[auto-fit]; */
grid-template-columns: repeat(auto-fit, minmax(29rem, 1fr));
gap:1.5rem;
}
.category .box-container .box{
text-align:center;
padding:1rem;
}
.category .box-container .box img{
height:20rem;
width:20rem;
border-radius:50%;
margin-bottom:1rem;
}
.category .box-container .box h3{
font-size:2rem;
color: #219150;
}
.category .box-container .box p{
font-size:1.5rem;
color: #10221b;
padding:1rem 0;
line-height:2;
}
.about{
background: #eee;
display: -webkit-box;
display: -ms-flexbox;
display:flex;
/* -webkit-box-align: center; */
/* -ms-flex-align: center; */
align-items: center;
/* -ms-flex-wrap: wrap; */
flex-wrap: wrap;
gap:2rem;
}
.about .img{
/* -webkit-box-flex: 1; */
/* -ms-flex:1 1 42rem; */
flex:1 1 42rem;
padding-right: 5rem;
padding-bottom: 5rem;
}
.about .img img{
width: 100%;
/* -webkit-box-shadow:4rem 4rem 0 rgba(0, 0, 0, 0.1); */
box-shadow:4rem 4rem 0 rgba(0, 0, 0, 0.1);
}
.about .content{
/* -webkit-box-flex: 1; */
/* -ms-flex: 1 1 42rem; */
flex: 1 1 42rem;
}
.about .content h3{
font-size: 3rem;
color: #219150;
}
.about .content p{
font-size:1.5rem;
color: #10221b;
padding: 1rem 0;
line-height:2;
}
.shop .slide{
border: 0.2rem solid #10221b;
}
.shop .slide:hover .img .icons{
/* -webkit-transform: translateY(0); */
transform: translateY(0);
}
.shop .slide .img{
position: relative;
overflow: hidden;
height:30rem;
width:100%;
}
.shop .slide .img img{
height: 100%;
width: 100%;
/* -o-object-fit: cover; */
object-fit: cover;
}
.shop .slide .img .icons{
width: 100%;
position: absolute;
bottom: 2rem;
left:0;
text-align: center;
z-index:10;
/* -webkit-transform: translateY(7rem); */
transform:translateY(7rem);
}
.shop .slide .img .icons a{
height:4.5rem;
width:4.5rem;
line-height: 4.5rem;
font-size: 1.7rem;
background: #102210;
color: #fff;
margin:0.2rem;
}
.shop .slide .img .icons a:hover{
background: #219150;
}
.shop .slide .content{
padding: 1rem 0;
text-align: center;
}
.shop .slide .content h3{
font-size:2rem;
color: #10221b;
}
.shop .slide .content .price{
padding:1rem 0;
padding-top: .5rem;
font-size:2rem;
color: #219150;
}
.shop .slide .content .starts i{
font-size: 1.7rem;
color: #10221b;
}
.packages{
background: #fff;
}
.packages .box-container{
display: grid;
display: -ms-grid;
/* -ms-grid-columns: (minmax(32rem, 1fr))[auto-fit]; */
grid-template-columns: repeat(auto-fit, minmax(32rem, 1fr));
gap: 1.5rem;
}
.packages .box-container .box{
text-align: center;
background: #fff;
border:0.2rem solid #10221b;
/* -webkit-box-shadow:0 0.5rem 1rem rgba(0, 0, 0, 0.1); */
/* box-shadow:0 0.5rem 1 rgba(0, 0, 0, 0.1); */
border-radius: .5rem;
}
.packages .box-container .box:hover{
background: #10221b;
}
.packages .box-container .box:hover .content > *{
color: #fff;
}
.packages .box-container .box:hover .btn{
border-color: #fff;
}
.packages .box-container .box:hover .btn:hover{
background: #fff;
color: #10221b;
}
.packages .box-container .box .img{
height:25rem;
overflow:hidden;
padding: 2rem;
padding-bottom: 0;
border-radius: .5rem;
}
.packages .box-container .box .img img{
height:100%;
width:100%;
/* -o-object-fit: cover; */
object-fit: cover;
border-radius: .5rem;
}
.packages .box-container .box .content{
padding:2rem;
}
.packages .box-container .box .content h3{
font-size:2rem;
color: #10221b;
}
.packages .box-container .box .content p{
font-size:1.5rem;
color: #10221b;
padding: 1rem 0;
line-height:2;
}
.packages .box-container .box .content .price{
font-size: 2rem;
color: #219150;
}
.services{
background: #eee;
}
.services .box-container{
display: grid;
display: -ms-grid;
/* -ms-grid-columns: (minmax(31rem, 1fr))[auto-fit]; */
grid-template-columns: repeat(auto-fit, minmax(31rem, 1fr));
gap: 1.5rem;
}
.services .box-container .box{
text-align: center;
padding: 2rem;
border: 0.2rem solid #10221b;
border-radius:.5rem;
background: #fff;
}
.services .box-container .box:hover{
background: #10221b;
}
.services .box-container .box:hover img{
/* -webkit-filter: invert(1); */
filter:invert(1);
}
.services .box-container .box:hover p{
color: #fff;
}
.services .box-container .box:hover .btn{
border-color: #fff;
color: #fff;
}
.services .box-container .box:hover .btn:hover{
background: #fff;
color: #10221b;
}
.services .box-container .box img{
height:10rem;
margin-bottom:1rem;
}
.services .box-container .box h3{
font-size: 2rem;
color: #219150;
}
.services .box-container .box p{
font-size: 1.5rem;
color: #10221b;
padding: 1rem 0;
line-height:2;
}
.reviews .slide .text{
padding: 2rem;
font-size: 1.5rem;
font-style: italic;
background: #eee;
border-radius: .5rem;
color: #10221b;
line-height:2;
position: relative;
z-index: 0;
margin-bottom: 3rem;
}
.reviews .slide .text::before{
content: "";
position: absolute;
bottom:-1.5rem;
left: .7rem;
height:3rem;
width: 3rem;
background: #eee;
/* -webkit-transform: rotate(45deg); */
transform: rotate(45deg);
}
.reviews .slide .user{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
/* -webkit-box-align: center; */
/* -ms-flex-align: center; */
align-items: center;
gap:1rem;
}
.reviews .slide .user img{
height:7rem;
width:7rem;
border-radius: 50%;
}
.reviews .slide .user h3{
font-size: 2rem;
color: #10221b;
}
.reviews .slide .user span{
color: #219150;
font-size: 1.5rem;
}
.blogs .slide{
text-align: center;
padding:2rem;
}
.blogs .slide img{
height:25rem;
width: 100%;
/* -o-object-fit: cover; */
object-fit: cover;
border-radius: .5rem;
}
.blogs .slide .icons{
background: #10221b;
border-radius: .5rem;
padding: 1rem;
position: relative;
top: -2rem;
display: inline-block;
}
.blogs .slide .icons a{
font-size: 1.4rem;
color: #fff;
margin: 0 1rem;
}
.blogs .slide .icons a:hover{
color: #219150;
}
.blogs .slide .icons a i{
padding-right: .5rem;
color: #219150;
}
.blogs .slide h3{
font-size:2rem;
color: #10221b;
}
.blogs .slide p{
font-size: 1.4rem;
padding:1rem 0;
line-height:2;
color: #10221b;
}
.newsletter{
background: #eee;
}
.newsletter .content{
max-width: 70rem;
margin: 1rem auto;
text-align: center
}
.newsletter .content p{
font-size: 1.5rem;
line-height: 2;
color: #10221b;
}
.newsletter .content form{
margin-top: 2rem;
background: #fff;
border-radius: 5rem;
border: 0.2rem solid #10221b;
padding:.7rem;
display: -webkit-box;
display: -ms-flexbox;
display:flex;
}
.newsletter .content form .email{
width:100%;
background:none;
text-transform: none;
font-size: 1.6rem;
color: #10221b;
padding:0 1.3rem;
}
.newsletter .content form .btn{
margin-top:0;
border-radius: 5rem;
background: #10221b;
color: #fff;
}
.newsletter .content form .btn:hover{
background: none;
color: #10221b;
}
.clients .slide{
text-align: center;
}
.clients .slide img{
height: 12rem;
}
.footer{
/* background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0.5))),
url(../images/footer-bg.jpg) no-repeat; */
background: linear-gradient(rgba(0, 0, 0, 0.5),rgba(0, 0, 0, 0.5)),url(img/footer-bg.jpg)no-repeat;
background-size: cover;
background-position: center;
background-attachment: fixed;
}
.footer .box-container{
display: -ms-grid;
display:grid;
/* -ms-grid-columns: (minmax(25rem, 1fr))[auto-fit]; */
grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
gap:1rem;
}
.footer .box-container .box h3{
font-size: 2rem;
padding:1.5rem 0;
color:#fff;
}
.footer .box-container .box a{
display:block;
font-size: 1.4rem;
color: #fff;
padding:1rem 0;
}
.footer .box-container .box a i{
color: #219150;
padding-right: .5rem;
}
.footer .box-container .box a:hover{
color: #219150;
}
.footer .box-container .box a:hover i{
padding-right: 2rem;
}
.footer .credit{
text-align: center;
margin-top:2.5rem;
padding: 1rem;
padding-top: 2.5rem;
font-size: 2rem;
color: #fff;
}
.footer .credit span{
color: #219150;
}
/* media queries */
@media (max-width:1200px){
.header{
padding: 2rem;
}
section{
padding: 3rem 2rem;
}
}
@media (max-width:991px){
html{
font-size: 55%;
scroll-padding-top: 7rem;
}
.home .box{
padding: 2rem;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content:center;
background-position: right !important;
}
.home .box.second{
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
background-position: left !important;
}
.home .box .content{
text-align: center;
}
.home .box .content span{
font-size:3rem;
}
.home .box .content h3{
font-size:4rem;
}
}
@media (max-width:768px){
.header #menu-btn{
display: inline-block;
}
.header .navbar{
position: fixed;
top: 0;
left: -110%;
background:#fff;
z-index: 1000;
width:35rem;
height: 100%;
display:-webkit-box;
display:-ms-flexbox;
display:flex;
--webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-flow: column;
flex-flow: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content:center;
}
.header .navbar a{
margin: 1rem 0;
font-size: 3rem;
}
.header .navbar #nav-close{
display: block;
position: absolute;
top: 1rem;
right:2rem;
}
.header .navbar.active{
left: 0;
-webkit-box-shadow:0 0 0 100vw rgba(0, 0, 0, 0.8);
box-shadow: 0 0 0 100vw rgba(0, 0, 0, 0.8);
}
.swiper-button-next::after,
.swiper-button-prev::after{
display:none;
}
}
@media (max-width:450px){
html{
font-size: 50%;
}
.heading{
font-size:3rem;
}
}
main.js
let navbar = document.querySelector('.header .navbar');
document.querySelector('#menu-btn').onclick = () =>{
navbar.classList.add('active');
}
document.querySelector('#nav-close').onclick = () =>{
navbar.classList.remove('active');
}
window.onscroll = () =>{
navbar.classList.remove('active');
if(window.scrollY > 0){
document.querySelector('.header').classList.add('active');
}else{
document.querySelector('.header').classList.add('active');
}
};
window.onload = () =>{
if(window.scrollY > 0){
document.querySelector('.header').classList.add('active');
}else{
document.querySelector('.header').classList.add('active');
}
};
var swiper = new Swiper(".home-slider", {
loop:true,
grabCursor:true,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});
var swiper = new Swiper(".product-slider", {
loop:true,
grabCursor:true,
spaceBetween: 20,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
breakpoints: {
0: {
slidesPerView: 1,
},
640: {
slidesPerView: 2,
},
768: {
slidesPerView: 3,
},
1024: {
slidesPerView: 4,
},
},
});
var swiper = new Swiper(".review-slider", {
loop:true,
grabCursor:true,
spaceBetween: 20,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
breakpoints: {
0: {
slidesPerView: 1,
},
640: {
slidesPerView: 2,
},
768: {
slidesPerView: 3,
},
},
});
var swiper = new Swiper(".blogs-slider", {
loop:true,
grabCursor:true,
spaceBetween: 10,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
breakpoints: {
0: {
slidesPerView: 1,
},
768: {
slidesPerView: 2,
},
991: {
slidesPerView: 3,
},
},
});
var swiper = new Swiper(".clients-slider", {
loop:true,
grabCursor:true,
spaceBetween: 20,
breakpoints: {
0: {
slidesPerView: 1,
},
640: {
slidesPerView: 2,
},
768: {
slidesPerView: 3,
},
1024: {
slidesPerView: 4,
},
},
});
images
 |
| best travel agency websites |
 |
| best travel agency websites |
 |
| best travel agency websites |
 |
| best travel agency websites |
 |
| best travel agency websites |
 |
| best travel agency websites |
 |
| best travel agency websites |
 |
| best travel agency websites |
 |
| best travel agency websites |
 |
| best travel agency websites |
 |
| best travel agency websites |
 |
| best travel agency websites |
 |
| best travel agency websites |
 |
| best travel agency websites |
 |
| best travel agency websites |
 |
| best travel agency websites |
 |
| best travel agency websites |
 |
| best travel agency websites |
 |
| best travel agency websites |
 |
| best travel agency websites |
 |
| best travel agency websites |
 |
| best travel agency websites |
 |
| best travel agency websites |
 |
| best travel agency websites |
 |
| best travel agency websites |
 |
| best travel agency websites |
 |
| best travel agency websites |
 |
| best travel agency websites |
 |
| best travel agency websites |
 |
| best travel agency websites |
 |
| best travel agency websites |
 |
| best travel agency websites |
 |
| best travel agency websites |
 |
| best travel agency websites |
 |
| best travel agency websites |
 |
| best travel agency websites |
 |
| best travel agency websites |