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.
Index.html
Complete Responsive adventure & tour Website Design
adventure
never stop
exploring
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis ipsa,
nostrum non dolor tempore corrupti farhan perspiciatis consequatur adipisci ullam.
get started
make tour
amazing
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis ipsa,
nostrum non dolor tempore corrupti farhan perspiciatis consequatur adipisci ullam.
get started
exploring the
new world
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis ipsa,
nostrum non dolor tempore corrupti farhan perspiciatis consequatur adipisci ullam.
get started
adventure idea!
memorable outdoor experiences
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!
Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Voluptatem expedita corrupti officia velit soluta ab quod reprehenderit. Numquam, sed ad.
read more
featured products
popular packages
Kayaking
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis ipsa,
$350 - 550
explore me
exploring new places
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis ipsa,
$350 - 550
explore me
hiking
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis ipsa,
$350 - 550
explore me
mountaineering
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis ipsa,
$350 - 550
explore me
surfing
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis ipsa,
$350 - 550
explore me
cycling
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis ipsa,
$350 - 550
explore me
Client's reviews
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Aliquam soluta dolorem consequatur farhan aut tenetur iure omnis
adipisci odio! Voluptatem.
edward bey
designer
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Aliquam soluta dolorem consequatur farhan aut tenetur iure omnis
adipisci odio! Voluptatem.
lina bey
web development
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Aliquam soluta dolorem consequatur farhan aut tenetur iure omnis
adipisci odio! Voluptatem.
edward bey
web designer
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Aliquam soluta dolorem consequatur farhan aut tenetur iure omnis
adipisci odio! Voluptatem.
jenna bey
font end
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Aliquam soluta dolorem consequatur farhan aut tenetur iure omnis
adipisci odio! Voluptatem.
edward bey
back end
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Aliquam soluta dolorem consequatur farhan aut tenetur iure omnis
adipisci odio! Voluptatem.
lisa bey
full stack
what we offer
complete guide
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis ipsa,
read more...
custom packages
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis ipsa,
read more...
adventure trail
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis ipsa,
read more...
various adventures
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis ipsa,
read more...
our daily post
blog title goes here...
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Commodi unde aut ducimus consectetur quam labore mollitia
natus voluptatum dolore laboriosam!
read more
blog title goes here...
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Commodi unde aut ducimus consectetur quam labore mollitia
natus voluptatum dolore laboriosam!
read more
blog title goes here...
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Commodi unde aut ducimus consectetur quam labore mollitia
natus voluptatum dolore laboriosam!
read more
blog title goes here...
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Commodi unde aut ducimus consectetur quam labore mollitia
natus voluptatum dolore laboriosam!
read more
blog title goes here...
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Commodi unde aut ducimus consectetur quam labore mollitia
natus voluptatum dolore laboriosam!
read more
blog title goes here...
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Commodi unde aut ducimus consectetur quam labore mollitia
natus voluptatum dolore laboriosam!
read more
subscribe now
Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Totam dicta atque, explicabo facere perferendis ex enim vel eligendi. Repellat, at.
created by dailywebdesign || all rights reserved
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 |