Hey there, web enthusiasts! 🌟 Today, I’m excited to share a simple single-page yet beautiful tourist Landing Page Design Template that you can create using just HTML, CSS, and a sprinkle of JavaScript (thanks to Bootstrap). Whether you're a beginner or just looking for a quick project, this template is perfect for practicing your skills and building something practical.
Let’s dive into what this project is all about and how you can create it step by step!
What’s This Project About?
This landing page is designed for a travel or tourist company. It’s simple design clean, responsive, and packed with essential sections like:
1. A hero section with a sliding carousel to showcase stunning travel destinations.
2. A “Top Values” section to highlight key features (like global destinations, flight deals, etc.).
3. A “Choose Your tourist” section with interactive cards for different tourist packages.
4. A newsletter subscription form to keep users updated.
5. A footer for copyright information.
It’s fully responsive, so it looks great on all devices—phones, tablets, and desktops!
How Does It Work?
Here’s a quick breakdown of the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>tourist Landing Page</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" />
</head>
The Navbar
The navigation bar is fixed at the top and stays visible while scrolling. It includes:
- A brand logo (`Your website Logo Travel`).
- Links for Home, tourists, and Contact.
- A collapsible menu for smaller screens.
<nav class="navbar navbar-expand-lg navbar-dark fixed-top">
<div class="container">
<a class="navbar-brand" href="#">Azores Travel</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a class="nav-link" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#">tourists</a></li>
<li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
</ul>
</div>
</div>
</nav>
The Hero Section (Carousel)
The hero section uses a Bootstrap Carousel to display two slides:
- Each slide has a background image, a heading, a description, and a Book Now button.
- Custom controls (arrows) are added for navigation.
<header>
<div id="carouselExample" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://placehold.co/1200x600" class="d-block w-100" alt="Slide 1">
<div class="carousel-caption">
<h5>Explore the sights of the Azores</h5>
<p>A place where nature and adventure unite</p>
<a href="#" class="btn btn-book">Book Now</a>
</div>
</div>
<!-- Second slide -->
</div>
<div class="carousel-controls">
<button type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
<span><i class="fa-solid fa-arrow-left-long"></i></span>
</button>
<button type="button" data-bs-target="#carouselExample" data-bs-slide="next">
<span><i class="fa-solid fa-arrow-right-long"></i></span>
</button>
</div>
</div>
</header>
The “Top Values” Section
This section uses Bootstrap’s grid system to display four key features:
- Each feature has an icon, a title, and a short description.
- The icons are from Bootstrap Icons and Font Awesome.
<section class="top-values">
<h2>Top Values for You</h2>
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="icon-wrapper"><i class="bi bi-globe"></i></div>
<h5>Global Destinations</h5>
<p>Explore the best destinations worldwide.</p>
</div>
<!-- Repeat for other features -->
</div>
</div>
</section>
The “Choose Your tourist” Section
This section displays tourist packages as interactive cards:
- Each card has an image, a title, a price, and an arrow (`→`) to indicate interactivity.
- A See All button is included at the bottom.
<section class="choose-tourist">
<h2>Choose your tourist</h2>
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="card">
<img src="https://placehold.co/300x200" alt="Nature tourist">
<div class="card-body">
<h5>Alone with Nature</h5>
<p>$100/person</p>
<span class="card-arrow">→</span>
</div>
</div>
</div>
<!-- Repeat for other cards -->
</div>
<a href="#" class="btn btn-dark">See All</a>
</div>
</section>
The Newsletter Section
A simple form allows users to subscribe to the newsletter:
- It includes an email input field and a Subscribe button.
<section class="subscribe">
<h2>Subscribe to Our Newsletter</h2>
<p>Get the latest travel deals and updates.</p>
<form>
<input type="email" placeholder="Enter your email">
<button class="btn btn-primary">Subscribe</button>
</form>
</section>
The Footer
The footer is minimal, with just a copyright notice.
<footer>
<p>© 2025 Html code Examples.com Travel. All Rights Reserved.</p>
</footer>
Try It Yourself!
Here’s the complete code for the tourist Simple Landing Page Design Template:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>tourist Landing Page</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" />
<style>
/* Custom CSS styles */
</style>
</head>
<body>
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-dark fixed-top">
<div class="container">
<a class="navbar-brand" href="#">Azores Travel</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a class="nav-link" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#">tourists</a></li>
<li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
</ul>
</div>
</div>
</nav>
<!-- Hero Section -->
<header>
<div id="carouselExample" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://placehold.co/1200x600" class="d-block w-100" alt="Slide 1">
<div class="carousel-caption">
<h5>Explore the sights of the Azores</h5>
<p>A place where nature and adventure unite</p>
<a href="#" class="btn btn-book">Book Now</a>
</div>
</div>
<!-- Second slide -->
</div>
<div class="carousel-controls">
<button type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
<span><i class="fa-solid fa-arrow-left-long"></i></span>
</button>
<button type="button" data-bs-target="#carouselExample" data-bs-slide="next">
<span><i class="fa-solid fa-arrow-right-long"></i></span>
</button>
</div>
</div>
</header>
<!-- Top Values Section -->
<section class="top-values">
<h2>Top Values for You</h2>
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="icon-wrapper"><i class="bi bi-globe"></i></div>
<h5>Global Destinations</h5>
<p>Explore the best destinations worldwide.</p>
</div>
<!-- Repeat for other features -->
</div>
</div>
</section>
<!-- Choose Your tourist Section -->
<section class="choose-tourist">
<h2>Choose your tourist</h2>
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="card">
<img src="https://placehold.co/300x200" alt="Nature tourist">
<div class="card-body">
<h5>Alone with Nature</h5>
<p>$100/person</p>
<span class="card-arrow">→</span>
</div>
</div>
</div>
<!-- Repeat for other cards -->
</div>
<a href="#" class="btn btn-dark">See All</a>
</div>
</section>
<!-- Newsletter Section -->
<section class="subscribe">
<h2>Subscribe to Our Newsletter</h2>
<p>Get the latest travel deals and updates.</p>
<form>
<input type="email" placeholder="Enter your email">
<button class="btn btn-primary">Subscribe</button>
</form>
</section>
<!-- Footer -->
<footer>
<p>© 2025 Azores Travel. All Rights Reserved.</p>
</footer>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Done.!
This project is a great way to practice HTML, CSS, and Bootstrap. It’s beginner-friendly, and you can customize it further by adding your own images, colors, and content. Have fun coding, and let me know if you have any questions! 😊
Feel free to share this with your audience! 🚀