Build a beautiful travel website using HTML, Tailwind CSS & JavaScript. Follow this simple guide with steps, features, and beginner-friendly code.
Table of Contents
Are you planning to build a stunning travel website without using any complex frameworks? You’re at the right place. In this blog, we will learn how to create a responsive Travel Website Template using HTML, Tailwind CSS, and JavaScript. Whether you are a beginner or just brushing up on your frontend skills, this guide is made with simple words and easy steps.
By the end of this blog, you'll have a beautiful landing page for a travel agency or tour operator that works smoothly on all devices.
Pre-requisites
Before we start, make sure you know the basics of:
- HTML – for structure
- Tailwind CSS – for styling
- JavaScript – for interactive elements
- Code Editor like VS Code
- Basic folder setup for HTML projects
You also need a working internet connection to include the Tailwind CSS CDN.
Source Code
Step 1 (HTML Code):
First, let’s start with HTML. In this step, we’ll create the full layout of the website. We will use Tailwind CSS for quick styling and the AOS (Animate on Scroll) plugin to add smooth animations.
What you’ll do in this step:
- Set up the website layout
- Use Tailwind CSS for design
- Add AOS for scroll animations
Action:
Copy the below HTML code and paste it into your index.html file.
Step 2 (CSS Code):
After setting up HTML, now we’ll move to CSS. While Tailwind handles most of the styling, we’ll use some custom CSS to enhance certain parts like:
- The scroll bar
- FAQ icons
- Hero background image
What you’ll do in this step:
- Create a smooth and styled scrollbar
- Add custom styles for icons and background
- Use your creativity with colors and shapes
Action:
Copy the CSS code below and paste it into your styles.css file.
body {
font-family: 'Inter', sans-serif;
background-color: #FDFBF8;
color: #333333;
}
h1,
h2,
h3,
.font-display {
font-family: 'Playfair Display', serif;
}
.nav-scrolled {
background-color: rgba(253, 251, 248, 0.85);
backdrop-filter: blur(12px);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}
.nav-transparent {
background-color: transparent;
}
.testimonial-slider {
transition: transform 0.5s ease-in-out;
}
.hero-bg {
background-image: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.2) 60%, rgba(0, 0, 0, 0.6) 100%), url('https://images.unsplash.com/photo-1473625247510-8ceb1760943f?q=80&w=2070&auto=format&fit=crop');
}
.faq-icon {
transition: transform 0.3s ease;
}
.faq-item.open .faq-icon {
transform: rotate(180deg);
}
.contact-bg {
background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23e5e7eb' fill-opacity='0.4'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
background-color: #f3f4f6;
}
.scroller {
-webkit-mask: linear-gradient(90deg, transparent, white 20%, white 80%, transparent);
mask: linear-gradient(90deg, transparent, white 20%, white 80%, transparent);
}
.scroller-inner {
display: flex;
flex-wrap: nowrap;
width: max-content;
animation: scroll 30s linear infinite;
}
.scroller:hover .scroller-inner {
animation-play-state: paused;
}
@keyframes scroll {
to {
transform: translate(calc(-50%));
}
} Step 3 (JavaScript Code):
Now comes the final and most exciting step—JavaScript. Here, we’ll add powerful interactive features to make your travel website more dynamic and user-friendly.
What you’ll build with JavaScript:
- Sticky Navbar on scroll
- Testimonial Slider for customer reviews
- FAQ Accordion to show/hide answers
- Photo Gallery Lightbox for image popups
Action:
Copy the JavaScript code below and paste it into your script.js file.
AOS.init({
duration: 800,
once: true,
offset: 50,
});
document.addEventListener('DOMContentLoaded', function () {
// 1. Navbar Scroll Behavior
const navbar = document.getElementById('navbar');
const logo = document.getElementById('logo');
const navLinks = document.querySelectorAll('.nav-link');
window.addEventListener('scroll', () => {
if (window.scrollY > 50) {
navbar.classList.add('nav-scrolled');
navbar.classList.remove('nav-transparent');
logo.classList.remove('text-white');
logo.classList.add('text-teal-800');
navLinks.forEach(link => {
link.classList.remove('text-white');
link.classList.add('text-teal-800');
});
} else {
navbar.classList.remove('nav-scrolled');
navbar.classList.add('nav-transparent');
logo.classList.add('text-white');
logo.classList.remove('text-teal-800');
navLinks.forEach(link => {
link.classList.add('text-white');
link.classList.remove('text-teal-800');
});
}
});
// 2. Mobile Menu Toggle
const mobileMenuButton = document.getElementById('mobile-menu-button');
const mobileMenu = document.getElementById('mobile-menu');
const mobileNavLinks = document.querySelectorAll('.mobile-nav-link');
mobileMenuButton.addEventListener('click', () => {
mobileMenu.classList.toggle('hidden');
});
mobileNavLinks.forEach(link => {
link.addEventListener('click', () => {
mobileMenu.classList.add('hidden');
});
});
// 3. Testimonial Slider
const slider = document.getElementById('testimonial-slider');
const prevBtn = document.getElementById('prev-testimonial');
const nextBtn = document.getElementById('next-testimonial');
if (slider) {
let currentIndex = 0;
const testimonials = slider.children;
const totalTestimonials = testimonials.length;
function updateSliderPosition() {
slider.style.transform = `translateX(-${currentIndex * 100}%)`;
}
nextBtn.addEventListener('click', () => {
currentIndex = (currentIndex + 1) % totalTestimonials;
updateSliderPosition();
});
prevBtn.addEventListener('click', () => {
currentIndex = (currentIndex - 1 + totalTestimonials) % totalTestimonials;
updateSliderPosition();
});
setInterval(() => { nextBtn.click(); }, 6000);
}
// 4. FAQ Accordion
const faqItems = document.querySelectorAll('.faq-item');
faqItems.forEach(item => {
const question = item.querySelector('.faq-question');
question.addEventListener('click', () => {
const answer = item.querySelector('.faq-answer');
const wasOpen = item.classList.contains('open');
// Close all other items
faqItems.forEach(i => {
i.classList.remove('open');
i.querySelector('.faq-answer').classList.add('hidden');
});
// Toggle current item
if (!wasOpen) {
item.classList.add('open');
answer.classList.remove('hidden');
}
});
});
// 5. Photo Gallery Lightbox
const lightbox = document.getElementById('lightbox');
const lightboxImg = document.getElementById('lightbox-img');
const lightboxClose = document.getElementById('lightbox-close');
const galleryImages = document.querySelectorAll('.gallery-img');
galleryImages.forEach(img => {
img.addEventListener('click', () => {
lightbox.classList.remove('hidden');
lightboxImg.src = img.src;
document.body.style.overflow = 'hidden';
});
});
function closeLightbox() {
lightbox.classList.add('hidden');
document.body.style.overflow = 'auto';
}
lightboxClose.addEventListener('click', closeLightbox);
lightbox.addEventListener('click', (e) => {
if (e.target === lightbox) { closeLightbox(); }
});
// 6. Contact Form Validation
const contactForm = document.getElementById('contact-form');
const formFeedback = document.getElementById('form-feedback');
contactForm.addEventListener('submit', function (e) {
e.preventDefault();
formFeedback.innerHTML = `<div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded relative" role="alert">
<strong class="font-bold">Thank you!</strong>
<span class="block sm:inline"> Your message has been sent. We'll be in touch shortly.</span>
</div>`;
contactForm.reset();
});
});Final Output:
Conclusion:
Creating a travel website template using HTML, Tailwind CSS, and JavaScript is simple and effective, even for beginners. With this step-by-step guide, you’ve now built a clean, responsive, and modern travel website.
This template can be used for:
- Travel Agencies
- Tour Packages
- Travel Blogs
- Holiday Planners
You can add more sections like packages, sliders, or even integrate a booking system using backend languages.
That’s a wrap!
I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.
Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
Thanks!
Faraz 😊
