Voyage
Wanderlust
Bootstrap 5
Responsive
Html
Css
Tourisme
Template
Destinations
Hero Section
Agence Voyage
Aventure
Template agence de voyage Bootstrap 5 Wanderlust avec hero plein écran, grille destinations et recherche. Design aventure pour sites touristiques et séjours.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="copyright" content="AngularForAll" />
<meta name="author" content="AngularForAll" />
<meta name="robots" content="noindex, nofollow" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="Cache-Control" content="public, max-age=604800" />
<title>Template Travel Bootstrap5 2026 05090095 | AngularForAll</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@1.11.0/font/bootstrap-icons.css">
<style>
:root {
--airbnb-pink: #FF385C;
--dark-bg: #000000;
--light-gray: #F7F7F7;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
}
.navbar {
background: white;
box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}
.navbar-brand {
font-size: 1.8rem;
font-weight: 700;
color: var(--airbnb-pink) !important;
}
.search-bar {
border: 1px solid #DDDDDD;
border-radius: 40px;
padding: 8px 24px;
box-shadow: 0 2px 4px rgba(0,0,0,0.08);
cursor: pointer;
transition: box-shadow 0.2s;
}
.search-bar:hover {
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.hero-section {
background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)),
url('public/mosquee.jpeg');
background-size: cover;
background-position: center;
height: 400px;
color: white;
position: relative;
}
.category-btn {
border: none;
background: transparent;
padding: 8px 16px;
margin: 0 4px;
color: #717171;
font-weight: 500;
border-bottom: 2px solid transparent;
transition: all 0.3s;
white-space: nowrap;
}
.category-btn:hover, .category-btn.active {
color: black;
border-bottom: 2px solid black;
}
.card {
border: none;
border-radius: 12px;
overflow: hidden;
transition: transform 0.3s;
}
.card:hover {
transform: scale(1.02);
}
.card-image {
height: 280px;
object-fit: cover;
border-radius: 12px;
}
.heart-icon {
position: absolute;
top: 17px;
right: 17px;
color: white;
font-size: 1.5rem;
cursor: pointer;
}
.rating-badge {
position: absolute;
top: 17px;
right: 60px;
background: white;
color: black;
border-radius: 8px;
padding: 2px 8px;
font-size: 0.8rem;
font-weight: 500;
}
.price {
font-weight: 600;
margin-top: 8px;
}
.card-title {
font-size: 0.95rem;
font-weight: 600;
margin-bottom: 4px;
color: #222222;
}
.card-text {
font-size: 0.9rem;
color: #717171;
}
.explore-btn {
background: linear-gradient(90deg, #E61E4D 0%, #D70466 100%);
border: none;
border-radius: 8px;
padding: 12px 24px;
color: white;
font-weight: 500;
transition: opacity 0.3s;
}
.explore-btn:hover {
opacity: 0.9;
color: white;
}
.filter-btn {
border: 1px solid #DDDDDD;
border-radius: 12px;
padding: 14px 24px;
background: white;
font-weight: 500;
transition: all 0.3s;
}
.filter-btn:hover {
border-color: black;
}
.newsletter-section {
background: black;
color: white;
border-radius: 16px;
padding: 60px 40px;
margin: 40px 0;
}
.newsletter-input {
border-radius: 8px;
padding: 12px 20px;
border: 1px solid #ccc;
width: 100%;
}
.footer-link {
color: #222222;
text-decoration: none;
font-size: 0.9rem;
}
.footer-link:hover {
text-decoration: underline;
color: #222222;
}
.carousel-item img {
height: 400px;
object-fit: cover;
border-radius: 16px;
}
@media (max-width: 768px) {
.hero-section {
height: 60vh;
}
.search-bar {
width: 100%;
}
}
</style>
</head>
<body>
<!-- Header -->
<header>
<nav class="navbar navbar-expand-lg fixed-top">
<div class="container">
<a class="navbar-brand" href="#">
<i class="bi bi-airplane"></i> wanderlust
</a>
<div class="d-none d-md-flex mx-auto search-bar">
<div class="d-flex align-items-center">
<span class="me-3 fw-bold">Où allez-vous ?</span>
<span class="mx-3 border-start ps-3">Dates flexibles</span>
<span class="mx-3 border-start ps-3">Voyageurs</span>
<span class="ms-3 bg-danger rounded-circle p-2 d-flex align-items-center justify-content-center" style="width: 32px; height: 32px;">
<i class="bi bi-search text-white" style="font-size: 0.8rem;"></i>
</span>
</div>
</div>
<div class="d-flex align-items-center">
<a href="#" class="text-dark me-3 text-decoration-none small">Devenez hôte</a>
<button class="btn btn-outline-secondary rounded-pill px-3" aria-label="chercher">
<i class="bi bi-globe2 me-1"></i>
</button>
<button class="btn btn-outline-secondary rounded-pill ms-2 px-3" aria-label="profil">
<i class="bi bi-list me-2"></i>
<i class="bi bi-person-circle"></i>
</button>
</div>
</div>
</nav>
</header>
<!-- Hero Section -->
<section class="hero-section d-flex align-items-center">
<div class="container text-center text-white">
<h1 class="display-3 fw-bold mb-4">Partez à l'aventure</h1>
<p class="lead mb-4">Découvrez des logements uniques et des expériences inoubliables partout dans le monde</p>
<button class="explore-btn">Explorer les destinations</button>
</div>
</section>
<!-- Main Content -->
<main class="container mt-5 pt-5">
<!-- Categories -->
<section class="mb-5">
<div class="d-flex overflow-auto pb-3">
<button class="category-btn active"><i class="bi bi-compass me-2"></i>Tous</button>
<button class="category-btn"><i class="bi bi-water me-2"></i>Plages</button>
<button class="category-btn"><i class="bi bi-tree me-2"></i>Campagne</button>
<button class="category-btn"><i class="bi bi-building me-2"></i>Design</button>
<button class="category-btn"><i class="bi bi-umbrella me-2"></i>Tropiques</button>
<button class="category-btn"><i class="bi bi-snow me-2"></i>Arctique</button>
<button class="category-btn"><i class="bi bi-house me-2"></i>Maisons</button>
<button class="category-btn"><i class="bi bi-palette me-2"></i>Artistiques</button>
<button class="category-btn"><i class="bi bi-cup-hot me-2"></i>Chalets</button>
</div>
<div class="d-flex justify-content-between align-items-center mt-3">
<h2 class="h4 mb-0">Logements populaires</h2>
<button class="filter-btn">
<i class="bi bi-sliders me-2"></i>Filtres
</button>
</div>
</section>
<!-- Property Cards -->
<section class="row g-4 mb-5">
<div class="col-md-4 col-sm-6">
<div class="card position-relative">
<i class="bi bi-heart heart-icon"></i>
<span class="rating-badge"><i class="bi bi-star-fill text-warning"></i> 4.92</span>
<img src="public/mosquee.jpeg" class="card-image w-100" alt="Villa Bali">
<div class="card-body px-2">
<h5 class="card-title">Villa luxueuse à Bali, Indonésie</h5>
<p class="card-text">Vue sur l'océan • Piscine à débordement</p>
<p class="price">443€ <small class="text-muted fw-normal">/ nuit</small></p>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="card position-relative">
<i class="bi bi-heart-fill heart-icon text-danger"></i>
<span class="rating-badge"><i class="bi bi-star-fill text-warning"></i> 4.88</span>
<img src="public/casablanca.jpg" class="card-image w-100" alt="Chalet Suisse">
<div class="card-body px-2">
<h5 class="card-title">Chalet cosy dans les Alpes suisses</h5>
<p class="card-text">Montagne • Cheminée • Spa</p>
<p class="price">298€ <small class="text-muted fw-normal">/ nuit</small></p>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="card position-relative">
<i class="bi bi-heart heart-icon"></i>
<span class="rating-badge"><i class="bi bi-star-fill text-warning"></i> 4.95</span>
<img src="public/rabat.jpg" class="card-image w-100" alt="Appartement Tokyo">
<div class="card-body px-2">
<h5 class="card-title">Appartement design à Tokyo</h5>
<p class="card-text">Centre-ville • Vue panoramique</p>
<p class="price">189€ <small class="text-muted fw-normal">/ nuit</small></p>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="card position-relative">
<i class="bi bi-heart heart-icon"></i>
<span class="rating-badge"><i class="bi bi-star-fill text-warning"></i> 4.85</span>
<img src="public/rabat2.jpg" class="card-image w-100" alt="Maison Santorin">
<div class="card-body px-2">
<h5 class="card-title">Maison troglodyte à Santorin</h5>
<p class="card-text">Coucher de soleil • Piscine privée</p>
<p class="price">567€ <small class="text-muted fw-normal">/ nuit</small></p>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="card position-relative">
<i class="bi bi-heart heart-icon"></i>
<span class="rating-badge"><i class="bi bi-star-fill text-warning"></i> 4.90</span>
<img src="public/casablanca.jpg" class="card-image w-100" alt="Loft New York">
<div class="card-body px-2">
<h5 class="card-title">Loft moderne à New York</h5>
<p class="card-text">Manhattan • Terrasse sur le toit</p>
<p class="price">345€ <small class="text-muted fw-normal">/ nuit</small></p>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="card position-relative">
<i class="bi bi-heart heart-icon"></i>
<span class="rating-badge"><i class="bi bi-star-fill text-warning"></i> 4.93</span>
<img src="public/rabat.jpg" class="card-image w-100" alt="Studio Stockholm">
<div class="card-body px-2">
<h5 class="card-title">Studio scandinave à Stockholm</h5>
<p class="card-text">Bord de mer • Sauna privé</p>
<p class="price">234€ <small class="text-muted fw-normal">/ nuit</small></p>
</div>
</div>
</div>
</section>
<!-- Destinations Carousel -->
<section class="mb-5">
<h2 class="mb-4">Destinations tendance</h2>
<div id="destinationsCarousel" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner rounded-4">
<div class="carousel-item active">
<img src="public/rabat.jpg" class="d-block w-100" alt="Paris">
<div class="carousel-caption">
<h3>Paris, France</h3>
<p>La ville lumière vous attend</p>
</div>
</div>
<div class="carousel-item">
<img src="public/rabat2.jpg" class="d-block w-100" alt="Maldives">
<div class="carousel-caption">
<h3>Maldives</h3>
<p>Évasion tropicale garantie</p>
</div>
</div>
<div class="carousel-item">
<img src="public/casablanca.jpg" class="d-block w-100" alt="Kyoto">
<div class="carousel-caption">
<h3>Kyoto, Japon</h3>
<p>Tradition et sérénité</p>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#destinationsCarousel"
data-bs-slide="prev" aria-label="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#destinationsCarousel"
data-bs-slide="next" aria-label="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
</button>
</div>
</section>
<!-- Newsletter -->
<section class="newsletter-section text-center">
<h2 class="display-5 fw-bold mb-3">Prêt à voyager ?</h2>
<p class="lead mb-4">Inscrivez-vous pour recevoir des offres exclusives et des inspirations de voyage</p>
<div class="row justify-content-center">
<div class="col-md-6">
<div class="input-group">
<input type="email" class="newsletter-input" placeholder="Votre adresse email">
<button class="btn btn-danger px-4 rounded-end">S'inscrire</button>
</div>
</div>
</div>
</section>
<!-- Features -->
<section class="row text-center mb-5">
<div class="col-md-4 mb-4">
<div class="p-4">
<i class="bi bi-shield-check display-4 text-danger"></i>
<h4 class="mt-3">Réservation sécurisée</h4>
<p class="text-muted">Paiement 100% sécurisé et protection des voyageurs</p>
</div>
</div>
<div class="col-md-4 mb-4">
<div class="p-4">
<i class="bi bi-headset display-4 text-danger"></i>
<h4 class="mt-3">Support 24/7</h4>
<p class="text-muted">Notre équipe est disponible à tout moment</p>
</div>
</div>
<div class="col-md-4 mb-4">
<div class="p-4">
<i class="bi bi-trophy display-4 text-danger"></i>
<h4 class="mt-3">Meilleurs prix</h4>
<p class="text-muted">Garantie du meilleur prix sur toutes les réservations</p>
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer class="bg-light pt-5 pb-4">
<div class="container">
<div class="row">
<div class="col-md-3 mb-4">
<h5 class="fw-bold mb-3"><i class="bi bi-airplane text-danger"></i> wanderlust</h5>
<p class="text-muted small">Votre agence de voyage pour des expériences uniques et authentiques partout dans le monde.</p>
<div class="d-flex gap-3 fs-5">
<a href="#" class="text-dark" aria-label="facebook"><i class="bi bi-facebook"></i></a>
<a href="#" class="text-dark" aria-label="instagram"><i class="bi bi-instagram"></i></a>
<a href="#" class="text-dark" aria-label="twitter"><i class="bi bi-twitter"></i></a>
</div>
</div>
<div class="col-md-3 mb-4">
<h6 class="fw-bold mb-3">Destinations</h6>
<a href="#" class="footer-link d-block mb-2">Europe</a>
<a href="#" class="footer-link d-block mb-2">Asie</a>
<a href="#" class="footer-link d-block mb-2">Amériques</a>
<a href="#" class="footer-link d-block mb-2">Afrique</a>
<a href="#" class="footer-link d-block mb-2">Océanie</a>
</div>
<div class="col-md-3 mb-4">
<h6 class="fw-bold mb-3">À propos</h6>
<a href="#" class="footer-link d-block mb-2">Qui sommes-nous</a>
<a href="#" class="footer-link d-block mb-2">Carrières</a>
<a href="#" class="footer-link d-block mb-2">Presse</a>
<a href="#" class="footer-link d-block mb-2">Blog</a>
<a href="#" class="footer-link d-block mb-2">Partenaires</a>
</div>
<div class="col-md-3 mb-4">
<h6 class="fw-bold mb-3">Assistance</h6>
<a href="#" class="footer-link d-block mb-2">Centre d'aide</a>
<a href="#" class="footer-link d-block mb-2">Annulation</a>
<a href="#" class="footer-link d-block mb-2">COVID-19</a>
<a href="#" class="footer-link d-block mb-2">Accessibilité</a>
<a href="#" class="footer-link d-block mb-2">Confidentialité</a>
</div>
</div>
<hr class="my-4">
<div class="d-flex justify-content-between align-items-center flex-wrap">
<p class="text-muted small mb-0">© 2024 Wanderlust. Tous droits réservés.</p>
<div class="d-flex gap-3">
<a href="#" class="footer-link small">Confidentialité</a>
<a href="#" class="footer-link small">Conditions</a>
<a href="#" class="footer-link small">Plan du site</a>
</div>
</div>
</div>
</footer>
<!-- Scripts -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
// Category buttons active state
document.querySelectorAll('.category-btn').forEach(btn => {
btn.addEventListener('click', function() {
document.querySelectorAll('.category-btn').forEach(b => b.classList.remove('active'));
this.classList.add('active');
});
});
// Heart icon toggle
document.querySelectorAll('.heart-icon').forEach(icon => {
icon.addEventListener('click', function(e) {
e.preventDefault();
if (this.classList.contains('bi-heart')) {
this.classList.remove('bi-heart');
this.classList.add('bi-heart-fill', 'text-danger');
} else {
this.classList.remove('bi-heart-fill', 'text-danger');
this.classList.add('bi-heart');
}
this.style.transform = 'scale(1.2)';
setTimeout(() => {
this.style.transform = 'scale(1)';
}, 200);
});
});
</script>
</body>
</html>
Télécharger le fichier source