Hello fellow developers !!!
Unleash your coding prowess as we craft a dazzling Responsive Travel Website. Copy-paste the HTML/CSS snippets into your editor and watch the magic unfold. Elevate user experience, add flair, and let your creativity roam free.
Feel free to adjust the text further to suit your preferences!!!
Preview
.png)
Click here to download images :- Download
HTML Code Structure :-
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>ADVENTURE</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- Navbar -->
<nav class="navbar">
<h1 class="logo"><a href="#" style="color: white;">TRAVEL</a></h1>
<ul class="nav-links">
<a href="#">Home</a>
<a href="#tours">Tours</a>
<a href="#explore">Explore</a>
<a href="#about">About</a>
<a href="#" class="ctn">Contact</a>
</ul>
<img src="./img/menu-btn.png" alt="" class="menu-btn">
</nav>
<header>
<div class="header-content">
<h2>Explore The colorful World</h2>
<div class="line"></div>
<h1>A WONDERFUL GIFT</h1>
<a href="#" class="ctn">Learn More</a>
</div>
</header>
<!--==Events==-->
<section class="events" id="tours">
<div class="title">
<h1>Upcoming Events</h1>
<div class="line"></div>
</div>
<div class="row">
<div class="col">
<img src="img/img1.png">
<h4>Everest camp Trek</h4>
<p> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Cumque ex aperiam explicabo animi
quod earum consectetur accusamus aut nobis sit iusto, vitae veniam quasi voluptas asperiores
dignissimos quo tempora modi!</p>
<a href="#" class="ctn">Learn More</a>
</div>
<div class="col">
<img src="img/img2.png">
<h4>walking holidays</h4>
<p> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Cumque ex aperiam explicabo
animi quod earum consectetur accusamus aut nobis sit iusto, vitae veniam quasi voluptas
asperiores dignissimos quo tempora modi!</p>
<a href="#" class="ctn">Learn More</a>
</div>
</div>
</section>
<section class="explore" id="explore">
<div class="explore-content">
<h1>EXPLORE THE WORLD</h1>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus quo eius cupiditate ut
placeat rem iusto labore, illo odit consequatur quaerat eligendi laborum molestias quod
voluptatum sequi aut voluptas incidunt.</p>
<a href="#" class="ctn">Learn More</a>
</div>
</section>
<section class="tours">
<div class="row">
<div class="col content-col">
<h1>UPCOMING TOURS & DESTINATION</h1>
<div class="line"></div>
<P>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iure rem dolores magni placeat doloribus?
Fuga magni esse qui itaque. Quam iusto quas, eveniet autem ipsum eos adipisci dignissimos
repudiandae. Tempora.</P>
<a href="#" class="ctn">Learn More</a>
</div>
<div class="col image-col">
<div class="image-gallery">
<img src="img/img3.png" alt="">
<img src="img/img4.png" alt="">
<img src="img/img5.png" alt="">
<img src="img/img6.png" alt="">
</div>
</div>
</div>
</section>
<section class="footer" id="about">
<p>Mumbai, Maharashtra, India | Phone : +91 02228812293 | Email: riddhi86@yahoo.co.in</p>
<p>Copyright @ 2023 LOADS OF LOGIC</p>
</section>
<script>
const menubtn = document.querySelector('.menu-btn')
const navlinks = document.querySelector('.nav-links')
menubtn.addEventListener('click', () => {
navlinks.classList.toggle('mobile-menu')
})
</script>
</body>
</html>
CSS Code Structure :-
style.css
@import url("<img src = 'https://images.unsplash.com/photo-1485470733090-0aae1788d5af?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=917&q=80'>");
@import url('https://fonts.googleapis.com/css2?family=Poppins');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins';
}
a {
text-decoration: none;
}
ul {
list-style: none;
}
body,
html {
overflow-x: hidden;
}
.active {
color: #fc036b;
text-decoration: underline;
font-weight: blod;
}
header {
width: 100vw;
height: 100vh;
background-image: url(img/header-bg.png);
background-position: bottom;
background-size: cover;
display: flex;
align-items: flex-end;
justify-content: center;
}
.header-content {
margin-bottom: 150px;
color: whitesmoke;
text-align: center;
}
.header-content h2 {
font-size: 4vmin;
}
.line {
width: 150px;
height: 4px;
background: crimson;
margin: 10px auto;
border-radius: Spx;
}
.header-content h1 {
font-size: 7vmin;
margin-bottom: 30px;
}
.ctn {
padding: 8px 15px;
background: #fc036b;
border-radius: 30px;
color: whitesmoke;
}
.navbar {
position: absolute;
top: 0;
left: 0;
display: flex;
width: 100%;
justify-content: space-between;
padding: 30px 65px 20px 65px;
color: whitesmoke;
}
.navbar .logo{
background: -webkit-linear-gradient(90deg,rgba(255, 255, 255, 0.801), rgba(255, 255, 255, 0.4));
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 3rem;
}
.nav-links {
display: flex;
align-items: center;
}
.nav-links a {
color: white;
margin: 0 30px;
}
.menu-btn {
position: absolute;
top: 35px;
right: 30px;
width: 30px;
cursor: pointer;
display: none;
}
section {
width: 80%;
margin: 80px auto;
}
.title {
text-align: center;
font-size: 4vmin;
color: rgb(73, 73, 126);
}
.row {
display: flex;
align-items: center;
width: 100%;
justify-content: space-between;
}
.row .col {
display: flex;
flex-direction: column;
align-items: center;
}
.events .row {
margin-top: 50px;
}
h4 {
font-size: 3vmin;
color: #484872;
margin: 20px auto;
}
p {
color: #484872;
padding: 0px 40px;
}
.events .ctn {
margin-top: 30px;
}
.explore {
width: 100%;
height: 100vh;
background-image: URL("img/bg2.png");
background-position: center;
background-size: cover;
background-repeat: no-repeat;
display: flex;
align-self: center;
}
.explore-content {
width: 60%;
padding: 60px;
color: whitesmoke;
display: flex;
align-items: center;
flex-direction: column;
margin-top: 150px;
}
.explore-content h1 {
font-size: 7vmin;
}
.explore-content p {
color: rgb(221, 221, 221);
}
.explore-content .ctn {
margin-top: 40px;
}
.explore-content .line {
margin-bottom: 50px;
}
.content-col{
width: 40%;
}
.image-col{
width: 60%;
}
.tours .image-gallery{
display: flex;
flex-wrap:wrap ;
width: 100%;
align-items: center;
}
.image-gallery img{
max-width: 300px;
margin: 10px;
}
.content-col h1{
font-size: 7vmin;
color: #484872;
}
.content-col .line{
margin-left: -1px;
}
.content-col p{
padding: 0;
margin: 30px auto;
}
.content-col .ctn{
margin-left: -100px;
}
.footer{
width: 100%;
min-height: 100px;
padding: 20px 80px;
margin: 0;
background: #484872;
text-align: center;
}
.footer p{
color: whitesmoke;
margin: 20px auto;
}
/* Mobile device*/
@media(max-width:850px) {
.menu-btn {
display: block;
}
.navbar {
padding: 0;
}
.logo {
position: absolute;
top: 20px;
left: 30px;
}
.navbar .logo{
font-size: 38px;
}
.nav-links {
flex-direction: column;
width: 100%;
height: 100vh;
justify-content: center;
background: #484872;
margin-top: -900px;
transition: all 0.5s ease;
}
.mobile-menu {
margin-top: 0px;
}
.nav-links a {
margin: 30px auto;
}
.row{
flex-direction: column;
}
.row .col{
margin: 20px auto;
}
.col img{
max-width: 90%;
}
.explore-content{
width: 100%;
}
.tours .col{
width: 100%;
}
.image-gallery{
justify-content: center;
align-items: center;
}
.image-gallery img{
width: 90%;
}
.footer{
padding: 10px;
}
}
/*Animations*/
img{
transition: transform .3s ease;
}
img:hover{
transform: scale(1.1);
}
.ctn:hover{
background-color: whitesmoke;
color: red;
box-shadow: 2px 2px 5px #00000056;
}
.navbar .nav-links a:hover{
border-radius: 0.5rem;
font-weight: 500;
color: #fc036b;
padding: 6px;
cursor: pointer;
background-color: rgb(248, 248, 248);
}
Crafting an Irresistible Web Experience
Our journey isn't just about coding; it's about creating an immersive experience. Imagine users being captivated by seamless navigation, stunning visuals, and information presented with finesse. It's not just a website; it's a journey waiting to be explored.
Beyond the Basics
Don't stop at the basics. Let your creativity soar. Add interactive elements, consider animations, and think about how you can elevate the user experience. Remember, the web is your canvas, and coding is your paintbrush.
In Conclusion
Creating a responsive travel website isn't just about code; it's about crafting an experience. As developers, we have the power to shape the online world, one line of code at a time. So, let's embark on this coding expedition together!
Happy coding, explorers !!!
Follow Us