HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Travel World</title>
<!-- CSS File -->
<link rel="stylesheet" href="shiv.css">
<!-- Font Awesome Icons -->
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
</head>
<body>
<!-- ================= NAVBAR ================= -->
<header>
<nav class="navbar">
<div class="logo">
<i class="fa-solid fa-plane"></i>
Travel<span>World</span>
</div>
<ul class="menu">
<li><a href="#home">Home</a></li>
<li><a href="#destinations">Destinations</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#offers">Offers</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
<a href="#contact" class="book-btn">Book Now</a>
</nav>
</header>
<!-- ================= BANNER ================= -->
<section class="hero" id="home">
<div class="hero-content">
<p>EXPLORE THE WORLD</p>
<h1>
Discover Your<br>
<span>Dream Destination</span>
</h1>
<p>
Travel with us and create unforgettable memories
with your family and friends.
</p>
<div class="hero-buttons">
<a href="#destinations" class="btn">Explore Now</a>
<a href="#offers" class="btn second-btn">View Offers</a>
</div>
</div>
</section>
<!-- ================= DESTINATIONS ================= -->
<section class="section" id="destinations">
<div class="section-title">
<p>POPULAR PLACES</p>
<h2>Top Destinations</h2>
</div>
<div class="destination-container">
<div class="destination-card">
<img src="https://images.unsplash.com/photo-1524492412937-b28074a5d7da"
alt="India">
<div class="card-content">
<h3>India</h3>
<p>Explore beautiful places and rich culture.</p>
<a href="#">Explore →</a>
</div>
</div>
<div class="destination-card">
<img src="https://images.unsplash.com/photo-1502602898657-3e91760cbb34"
alt="Paris">
<div class="card-content">
<h3>Paris</h3>
<p>Experience the beauty of the City of Love.</p>
<a href="#">Explore →</a>
</div>
</div>
<div class="destination-card">
<img src="https://images.unsplash.com/photo-1530789253388-582c481c54b0"
alt="Bali">
<div class="card-content">
<h3>Bali</h3>
<p>Enjoy beaches, nature and amazing adventures.</p>
<a href="#">Explore →</a>
</div>
</div>
</div>
</section>
<!-- ================= SERVICES ================= -->
<section class="services section" id="services">
<div class="section-title">
<p>WHAT WE OFFER</p>
<h2>Our Services</h2>
</div>
<div class="service-container">
<div class="service-card">
<i class="fa-solid fa-plane"></i>
<h3>Flight Booking</h3>
<p>
Easy and affordable flight booking
for your next journey.
</p>
</div>
<div class="service-card">
<i class="fa-solid fa-hotel"></i>
<h3>Hotel Booking</h3>
<p>
Find comfortable hotels at the
best prices.
</p>
</div>
<div class="service-card">
<i class="fa-solid fa-car"></i>
<h3>Car Rental</h3>
<p>
Rent a car and explore your
destination freely.
</p>
</div>
<div class="service-card">
<i class="fa-solid fa-map-location-dot"></i>
<h3>Tour Guide</h3>
<p>
Professional guides to make
your trip memorable.
</p>
</div>
</div>
</section>
<!-- ================= OFFERS ================= -->
<section class="offers section" id="offers">
<div class="offer-content">
<p>SPECIAL OFFER</p>
<h2>
Get Up To <span>30% OFF</span>
</h2>
<p>
Book your dream vacation today and
enjoy our special travel offers.
</p>
<a href="#contact" class="btn">Book Your Trip</a>
</div>
</section>
<!-- ================= GALLERY ================= -->
<section class="section">
<div class="section-title">
<p>TRAVEL MEMORIES</p>
<h2>Our Gallery</h2>
</div>
<div class="gallery">
<img src="https://images.unsplash.com/photo-1469474968028-56623f02e42e"
alt="Nature">
<img src="https://images.unsplash.com/photo-1507525428034-b723cf961d3e"
alt="Beach">
<img src="https://images.unsplash.com/photo-1500534623283-312aade485b7"
alt="Mountain">
<img src="https://images.unsplash.com/photo-1476514525535-07fb3b4ae5f1"
alt="Travel">
</div>
</section>
<!-- ================= CONTACT ================= -->
<section class="contact section" id="contact">
<div class="section-title">
<p>GET IN TOUCH</p>
<h2>Contact Us</h2>
</div>
<div class="contact-container">
<div class="contact-info">
<h3>Let's Plan Your Trip</h3>
<p>
Have questions about your next trip?
Contact us and our team will help you.
</p>
<p>
<i class="fa-solid fa-phone"></i>
+91 98765 43210
</p>
<p>
<i class="fa-solid fa-envelope"></i>
travelworld@gmail.com
</p>
<p>
<i class="fa-solid fa-location-dot"></i>
Mallawan, Hardoi, Uttar Pradesh
</p>
</div>
<form class="contact-form">
<input type="text" placeholder="Your Name">
<input type="email" placeholder="Your Email">
<input type="text" placeholder="Destination">
<textarea placeholder="Your Message"></textarea>
<button type="submit">Send Message</button>
</form>
</div>
</section>
<!-- ================= FOOTER ================= -->
<footer>
<div class="footer-container">
<div class="footer-box">
<h3>Travel<span>World</span></h3>
<p>
Making your travel dreams come true.
Explore the world with us.
</p>
</div>
<div class="footer-box">
<h3>Quick Links</h3>
<a href="#home">Home</a>
<a href="#destinations">Destinations</a>
<a href="#services">Services</a>
<a href="#offers">Offers</a>
</div>
<div class="footer-box">
<h3>Follow Us</h3>
<div class="social-links">
<a href="#"><i class="fab fa-facebook"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-youtube"></i></a>
</div>
</div>
</div>
<div class="copyright">
<p>
© 2026 TravelWorld. All Rights Reserved.
</p>
</div>
</footer>
</body>
</html>
CSS Code
/* ================= BASIC CSS ================= */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
font-family: Arial, sans-serif;
color: #333;
}
/* ================= NAVBAR ================= */
header {
width: 100%;
background: white;
position: sticky;
top: 0;
z-index: 1000;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.navbar {
max-width: 1200px;
margin: auto;
padding: 18px 20px;
display: flex;
align-items: center;
justify-content: space-between;
}
.logo {
font-size: 25px;
font-weight: bold;
}
.logo i {
margin-right: 5px;
}
.logo span,
.footer-box span {
color: #ff6b35;
}
.menu {
display: flex;
gap: 25px;
list-style: none;
}
.menu a {
text-decoration: none;
color: #333;
font-weight: bold;
}
.menu a:hover {
color: #ff6b35;
}
.book-btn,
.btn {
text-decoration: none;
background: #ff6b35;
color: white;
padding: 12px 22px;
border-radius: 25px;
}
.book-btn:hover,
.btn:hover {
background: #e85b28;
}
/* ================= HERO ================= */
.hero {
height: 600px;
background:
linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.45)),
url("https://images.unsplash.com/photo-1500530855697-b586d89ba3ee");
background-size: cover;
background-position: center;
display: flex;
align-items: center;
}
.hero-content {
max-width: 1200px;
width: 100%;
margin: auto;
padding: 20px;
color: white;
}
.hero-content > p:first-child {
font-weight: bold;
letter-spacing: 3px;
}
.hero h1 {
font-size: 55px;
margin: 15px 0;
}
.hero h1 span {
color: #ffb703;
}
.hero-buttons {
margin-top: 30px;
display: flex;
gap: 15px;
}
.second-btn {
background: white;
color: #333;
}
/* ================= COMMON SECTION ================= */
.section {
padding: 80px 20px;
max-width: 1200px;
margin: auto;
}
.section-title {
text-align: center;
margin-bottom: 45px;
}
.section-title p {
color: #ff6b35;
font-weight: bold;
letter-spacing: 2px;
}
.section-title h2 {
font-size: 38px;
margin-top: 8px;
}
/* ================= DESTINATIONS ================= */
.destination-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 25px;
}
.destination-card {
background: white;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 5px 20px rgba(0,0,0,0.1);
}
.destination-card img {
width: 100%;
height: 220px;
object-fit: cover;
}
.card-content {
padding: 20px;
}
.card-content h3 {
font-size: 24px;
margin-bottom: 10px;
}
.card-content p {
margin-bottom: 15px;
line-height: 1.6;
}
.card-content a {
color: #ff6b35;
text-decoration: none;
font-weight: bold;
}
/* ================= SERVICES ================= */
.services {
max-width: 100%;
background: #f5f9fc;
}
.service-container {
max-width: 1200px;
margin: auto;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
.service-card {
background: white;
text-align: center;
padding: 35px 20px;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0,0,0,0.08);
}
.service-card i {
font-size: 40px;
color: #ff6b35;
margin-bottom: 20px;
}
.service-card h3 {
margin-bottom: 12px;
}
.service-card p {
line-height: 1.6;
}
/* ================= OFFERS ================= */
.offers {
max-width: 100%;
text-align: center;
background:
linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.55)),
url("https://images.unsplash.com/photo-1507525428034-b723cf961d3e");
background-size: cover;
background-position: center;
color: white;
}
.offer-content {
max-width: 700px;
margin: auto;
}
.offer-content > p:first-child {
color: #ffb703;
font-weight: bold;
letter-spacing: 2px;
}
.offer-content h2 {
font-size: 45px;
margin: 15px 0;
}
.offer-content h2 span {
color: #ffb703;
}
.offer-content p {
line-height: 1.7;
margin-bottom: 25px;
}
/* ================= GALLERY ================= */
.gallery {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 15px;
}
.gallery img {
width: 100%;
height: 230px;
object-fit: cover;
border-radius: 10px;
}
.gallery img:hover {
transform: scale(1.03);
}
/* ================= CONTACT ================= */
.contact-container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 50px;
}
.contact-info h3 {
font-size: 28px;
margin-bottom: 20px;
}
.contact-info p {
margin: 18px 0;
line-height: 1.6;
}
.contact-info i {
color: #ff6b35;
width: 25px;
}
.contact-form {
display: flex;
flex-direction: column;
gap: 15px;
}
.contact-form input,
.contact-form textarea {
width: 100%;
padding: 14px;
border: 1px solid #ddd;
border-radius: 5px;
font-size: 16px;
}
.contact-form textarea {
height: 130px;
resize: none;
}
.contact-form button {
border: none;
padding: 14px;
background: #ff6b35;
color: white;
font-size: 16px;
border-radius: 5px;
cursor: pointer;
}
/* ================= FOOTER ================= */
footer {
background: #17202a;
color: white;
padding-top: 50px;
}
.footer-container {
max-width: 1200px;
margin: auto;
padding: 0 20px 40px;
display: grid;
grid-template-columns: 2fr 1fr 1fr;
gap: 40px;
}
.footer-box h3 {
margin-bottom: 20px;
font-size: 22px;
}
.footer-box p {
line-height: 1.7;
}
.footer-box a {
display: block;
color: #ddd;
text-decoration: none;
margin: 10px 0;
}
.footer-box a:hover {
color: #ff6b35;
}
.social-links {
display: flex;
gap: 15px;
}
.social-links a {
font-size: 20px;
}
.copyright {
text-align: center;
border-top: 1px solid #444;
padding: 20px;
}
/* ================= RESPONSIVE ================= */
@media (max-width: 900px) {
.menu {
gap: 12px;
}
.destination-container {
grid-template-columns: repeat(2, 1fr);
}
.service-container {
grid-template-columns: repeat(2, 1fr);
}
.gallery {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 600px) {
.navbar {
flex-direction: column;
gap: 15px;
}
.menu {
flex-wrap: wrap;
justify-content: center;
}
.book-btn {
display: none;
}
.hero {
height: 500px;
}
.hero h1 {
font-size: 38px;
}
.destination-container,
.service-container,
.gallery,
.contact-container {
grid-template-columns: 1fr;
}
.offer-content h2 {
font-size: 32px;
}
.footer-container {
grid-template-columns: 1fr;
}
}
