Voyage
Luxe
Bootstrap 5
Responsive
Html
Css
Tourisme
Template
Destinations
Galerie
Agence Voyage
Premium
Template Bootstrap 5 agence de voyage haut de gamme Wanderlux. Galerie destinations, filtres par style de séjour et design premium pour tourisme de luxe.
<!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 05090000 | 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">
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700;900&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<style>
:root {
--primary: #FF385C;
--primary-dark: #E31C5F;
--dark: #222222;
--gray: #717171;
--light-gray: #F7F7F7;
--border: #DDDDDD;
--gold: #FFD700;
--gradient: linear-gradient(135deg, #FF385C 0%, #E31C5F 100%);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
color: var(--dark);
overflow-x: hidden;
background: #fff;
}
h1, h2, h3, .display-font {
font-family: 'Playfair Display', serif;
}
/* Mobile-First Navbar */
.navbar {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-bottom: 1px solid rgba(0,0,0,0.05);
padding: 12px 0;
}
.navbar-brand {
font-family: 'Playfair Display', serif;
font-size: 1.8rem;
font-weight: 900;
background: var(--gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.mobile-search-btn {
background: var(--light-gray);
border: 1px solid var(--border);
border-radius: 50px;
padding: 8px 16px;
font-size: 0.85rem;
color: var(--gray);
width: 100%;
}
.user-menu-btn {
background: white;
border: 1px solid var(--border);
border-radius: 50px;
padding: 6px 12px;
display: flex;
align-items: center;
gap: 8px;
transition: all 0.3s;
}
.user-menu-btn:hover {
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
/* Hero Section */
.hero {
position: relative;
min-height: 600px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
overflow: hidden;
display: flex;
align-items: center;
padding: 80px 0 40px;
}
.hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="rgba(255,255,255,0.05)" d="M0,96L48,112C96,128,192,160,288,186.7C384,213,480,235,576,213.3C672,192,768,128,864,128C960,128,1056,192,1152,208C1248,224,1344,192,1392,176L1440,160L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>') no-repeat bottom;
background-size: cover;
}
.hero-content {
position: relative;
z-index: 2;
}
.hero-badge {
display: inline-block;
background: rgba(255,255,255,0.2);
backdrop-filter: blur(10px);
padding: 8px 20px;
border-radius: 50px;
color: white;
font-size: 0.9rem;
font-weight: 500;
margin-bottom: 20px;
}
.hero h1 {
color: white;
font-size: clamp(2.5rem, 8vw, 5rem);
font-weight: 900;
line-height: 1.1;
margin-bottom: 20px;
}
.hero p {
color: rgba(255,255,255,0.9);
font-size: clamp(1rem, 3vw, 1.25rem);
line-height: 1.6;
margin-bottom: 30px;
}
/* Search Form */
.search-container {
background: white;
border-radius: 24px;
padding: 8px;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
max-width: 800px;
}
.search-field {
border: none;
background: transparent;
padding: 16px 20px;
font-size: 0.95rem;
width: 100%;
outline: none;
}
.search-divider {
width: 1px;
background: var(--border);
height: 40px;
}
.btn-search {
background: var(--gradient);
border: none;
border-radius: 50%;
width: 56px;
height: 56px;
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.3s, box-shadow 0.3s;
}
.btn-search:hover {
transform: scale(1.05);
box-shadow: 0 10px 30px rgba(255,56,92,0.4);
}
/* Stats */
.stats-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-top: 40px;
}
.stat-item {
color: white;
text-align: center;
}
.stat-number {
font-size: 2rem;
font-weight: 700;
font-family: 'Playfair Display', serif;
}
.stat-label {
font-size: 0.85rem;
opacity: 0.8;
}
/* Section Titles */
.section-title {
font-size: clamp(2rem, 5vw, 3rem);
font-weight: 700;
margin-bottom: 15px;
}
.section-subtitle {
color: var(--gray);
font-size: 1.1rem;
max-width: 600px;
}
/* Category Pills - Horizontal Scroll */
.categories-scroll {
display: flex;
gap: 12px;
overflow-x: auto;
padding: 10px 0 20px;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.categories-scroll::-webkit-scrollbar {
display: none;
}
.category-pill {
flex-shrink: 0;
padding: 12px 24px;
border-radius: 50px;
background: white;
border: 1px solid var(--border);
font-size: 0.9rem;
font-weight: 500;
cursor: pointer;
transition: all 0.3s;
white-space: nowrap;
display: flex;
align-items: center;
gap: 8px;
}
.category-pill:hover,
.category-pill.active {
background: var(--dark);
color: white;
border-color: var(--dark);
transform: translateY(-2px);
box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}
.category-pill i {
font-size: 1.2rem;
}
/* Property Cards */
.property-card {
position: relative;
border: none;
border-radius: 20px;
overflow: hidden;
background: white;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
cursor: pointer;
margin-bottom: 20px;
}
.property-card:hover {
transform: translateY(-8px);
box-shadow: 0 30px 60px rgba(0,0,0,0.15);
}
.property-image-wrapper {
position: relative;
height: 320px;
overflow: hidden;
}
.property-image {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s;
}
.property-card:hover .property-image {
transform: scale(1.1);
}
.property-badge {
position: absolute;
top: 16px;
left: 16px;
background: white;
padding: 6px 14px;
border-radius: 50px;
font-size: 0.8rem;
font-weight: 600;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.btn-favorite {
position: absolute;
top: 16px;
right: 16px;
background: white;
border: none;
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
cursor: pointer;
transition: all 0.3s;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.btn-favorite:hover {
transform: scale(1.1);
}
.btn-favorite.liked {
color: var(--primary);
}
.property-info {
padding: 20px;
}
.property-title {
font-size: 1.1rem;
font-weight: 600;
margin-bottom: 8px;
display: -webkit-box;
line-clamp: 2;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.property-location {
color: var(--gray);
font-size: 0.9rem;
margin-bottom: 12px;
display: flex;
align-items: center;
gap: 4px;
}
.property-features {
display: flex;
gap: 15px;
margin-bottom: 12px;
font-size: 0.85rem;
color: var(--gray);
}
.property-features span {
display: flex;
align-items: center;
gap: 4px;
}
.property-rating {
display: flex;
align-items: center;
gap: 8px;
}
.stars {
color: var(--gold);
}
.rating-score {
font-weight: 600;
font-size: 0.9rem;
}
.property-price {
font-size: 1.3rem;
font-weight: 700;
font-family: 'Playfair Display', serif;
}
.property-price small {
font-weight: 400;
font-size: 0.9rem;
color: var(--gray);
font-family: 'Inter', sans-serif;
}
/* Featured Section */
.featured-destination {
position: relative;
border-radius: 24px;
overflow: hidden;
height: 500px;
margin-bottom: 30px;
}
.featured-destination img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s;
}
.featured-destination:hover img {
transform: scale(1.05);
}
.featured-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 40px;
background: linear-gradient(transparent, rgba(0,0,0,0.8));
color: white;
}
/* Testimonials */
.testimonial-card {
background: white;
border-radius: 20px;
padding: 30px;
box-shadow: 0 10px 40px rgba(0,0,0,0.05);
transition: all 0.3s;
}
.testimonial-card:hover {
box-shadow: 0 20px 60px rgba(0,0,0,0.1);
transform: translateY(-5px);
}
.testimonial-avatar {
width: 60px;
height: 60px;
border-radius: 50%;
object-fit: cover;
margin-bottom: 15px;
}
/* Newsletter */
.newsletter {
background: var(--dark);
border-radius: 30px;
padding: 60px 40px;
color: white;
position: relative;
overflow: hidden;
}
.newsletter::before {
content: '';
position: absolute;
top: -50%;
right: -50%;
width: 100%;
height: 100%;
background: radial-gradient(circle, rgba(255,56,92,0.3) 0%, transparent 70%);
}
.newsletter-content {
position: relative;
z-index: 1;
}
.input-newsletter {
background: rgba(255,255,255,0.1);
border: 1px solid rgba(255,255,255,0.2);
border-radius: 50px;
padding: 16px 24px;
color: white;
font-size: 1rem;
backdrop-filter: blur(10px);
}
.input-newsletter::placeholder {
color: rgba(255,255,255,0.6);
}
.input-newsletter:focus {
outline: none;
border-color: var(--primary);
background: rgba(255,255,255,0.15);
}
.btn-subscribe {
background: var(--gradient);
border: none;
border-radius: 50px;
padding: 16px 32px;
font-weight: 600;
transition: all 0.3s;
}
.btn-subscribe:hover {
transform: translateY(-2px);
box-shadow: 0 10px 30px rgba(255,56,92,0.4);
}
/* Footer */
.footer {
background: var(--light-gray);
padding: 80px 0 30px;
}
.footer-brand {
font-family: 'Playfair Display', serif;
font-size: 2rem;
font-weight: 900;
background: var(--gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 20px;
}
.footer-links h6 {
font-weight: 600;
margin-bottom: 20px;
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 1px;
}
.footer-links a {
display: block;
color: var(--gray);
text-decoration: none;
margin-bottom: 12px;
font-size: 0.9rem;
transition: all 0.3s;
}
.footer-links a:hover {
color: var(--dark);
transform: translateX(5px);
}
.social-icons a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
background: white;
color: var(--dark);
margin-right: 10px;
transition: all 0.3s;
}
.social-icons a:hover {
background: var(--gradient);
color: white;
transform: translateY(-3px);
}
/* Back to Top */
.back-to-top {
position: fixed;
bottom: 30px;
right: 30px;
background: var(--gradient);
color: white;
width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
box-shadow: 0 10px 30px rgba(255,56,92,0.3);
transition: all 0.3s;
z-index: 999;
}
.back-to-top:hover {
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(255,56,92,0.5);
color: white;
}
/* Animations */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.animate-fade-up {
animation: fadeInUp 0.6s ease-out;
}
/* Mobile Optimizations */
@media (max-width: 768px) {
.hero {
min-height: auto;
padding: 100px 0 60px;
}
.search-container {
border-radius: 16px;
padding: 8px;
}
.search-field {
padding: 14px 16px;
font-size: 0.9rem;
}
.btn-search {
width: 48px;
height: 48px;
}
.stats-grid {
grid-template-columns: repeat(3, 1fr);
gap: 10px;
margin-top: 30px;
}
.stat-number {
font-size: 1.5rem;
}
.stat-label {
font-size: 0.75rem;
}
.property-image-wrapper {
height: 250px;
}
.featured-destination {
height: 350px;
}
.newsletter {
border-radius: 20px;
padding: 40px 20px;
}
}
@media (max-width: 576px) {
.property-image-wrapper {
height: 220px;
}
.featured-destination {
height: 280px;
}
.section-title {
font-size: 1.8rem;
}
}
</style>
</head>
<body>
<!-- Navbar -->
<nav class="navbar navbar-expand-lg fixed-top">
<div class="container">
<a class="navbar-brand" href="#">
<i class="bi bi-gem me-2"></i>Wanderlux
</a>
<!-- Mobile Search Trigger -->
<button class="btn mobile-search-btn d-lg-none mx-3" data-bs-toggle="modal" data-bs-target="#searchModal">
<i class="bi bi-search me-2"></i>Où allez-vous ?
</button>
<div class="d-flex align-items-center gap-2">
<a href="#" class="btn btn-link text-dark d-none d-md-block">Devenez hôte</a>
<div class="dropdown">
<button class="user-menu-btn dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-label="list">
<i class="bi bi-list"></i>
<i class="bi bi-person-circle fs-5"></i>
</button>
<ul class="dropdown-menu dropdown-menu-end">
<li><a class="dropdown-item" href="#">S'inscrire</a></li>
<li><a class="dropdown-item" href="#">Se connecter</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Centre d'aide</a></li>
</ul>
</div>
</div>
</div>
</nav>
<!-- Hero Section -->
<section class="hero">
<div class="container hero-content">
<div class="row align-items-center">
<div class="col-lg-7">
<span class="hero-badge animate-fade-up">
<i class="bi bi-star-fill me-2"></i>Agence de voyage n°1 en 2024
</span>
<h1 class="animate-fade-up" style="animation-delay: 0.2s;">
Voyagez autrement,<br>vivez pleinement
</h1>
<p class="animate-fade-up" style="animation-delay: 0.4s;">
Des expériences uniques dans les plus beaux endroits du monde.
Séjours d'exception, service premium, souvenirs inoubliables.
</p>
<!-- Search Form Desktop -->
<div class="search-container d-none d-lg-block animate-fade-up" style="animation-delay: 0.6s;">
<div class="row align-items-center g-0">
<div class="col-md-4">
<input type="text" class="search-field" placeholder="Destination">
</div>
<div class="col-auto">
<div class="search-divider"></div>
</div>
<div class="col-md-3">
<input type="date" class="search-field" placeholder="Dates">
</div>
<div class="col-auto">
<div class="search-divider"></div>
</div>
<div class="col-md-3">
<input type="number" class="search-field" placeholder="Voyageurs" min="1">
</div>
<div class="col-md-2">
<button class="btn-search" aria-label="search">
<i class="bi bi-search text-white fs-5"></i>
</button>
</div>
</div>
</div>
<!-- Stats -->
<div class="stats-grid animate-fade-up" style="animation-delay: 0.8s;">
<div class="stat-item">
<div class="stat-number">500+</div>
<div class="stat-label">Destinations</div>
</div>
<div class="stat-item">
<div class="stat-number">50k+</div>
<div class="stat-label">Voyageurs satisfaits</div>
</div>
<div class="stat-item">
<div class="stat-number">4.9</div>
<div class="stat-label">Note moyenne</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Search Modal for Mobile -->
<div class="modal fade" id="searchModal" tabindex="-1">
<div class="modal-dialog modal-fullscreen-sm-down">
<div class="modal-content rounded-4">
<div class="modal-header border-0">
<h5 class="modal-title fw-bold">Rechercher</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="close"></button>
</div>
<div class="modal-body">
<div class="mb-3">
<label class="form-label fw-semibold">Destination</label>
<input type="text" class="form-control rounded-pill" placeholder="Où allez-vous ?">
</div>
<div class="mb-3">
<label class="form-label fw-semibold">Dates</label>
<input type="date" class="form-control rounded-pill" aria-label="Dates">
</div>
<div class="mb-4">
<label class="form-label fw-semibold">Voyageurs</label>
<input type="number" class="form-control rounded-pill" min="1" value="1" aria-label="Voyageurs">
</div>
<button class="btn btn-dark rounded-pill w-100 py-3 fw-semibold">
<i class="bi bi-search me-2"></i>Rechercher
</button>
</div>
</div>
</div>
</div>
<!-- Main Content -->
<main class="container-fluid px-3 px-md-4" style="max-width: 1400px; margin: 0 auto;">
<!-- Categories -->
<section class="py-5">
<div class="d-flex justify-content-between align-items-center mb-4">
<div>
<h2 class="section-title mb-2">Explorez par style</h2>
<p class="section-subtitle">Trouvez l'hébergement qui vous ressemble</p>
</div>
<button class="btn btn-outline-dark rounded-pill px-4 d-none d-md-flex align-items-center">
<i class="bi bi-sliders me-2"></i>Filtres
</button>
</div>
<div class="categories-scroll">
<div class="category-pill active">
<i class="bi bi-grid"></i>Tout découvrir
</div>
<div class="category-pill">
<i class="bi bi-water"></i>Bord de mer
</div>
<div class="category-pill">
<i class="bi bi-tree"></i>Nature
</div>
<div class="category-pill">
<i class="bi bi-building"></i>Design
</div>
<div class="category-pill">
<i class="bi bi-cup-hot"></i>Chalets
</div>
<div class="category-pill">
<i class="bi bi-umbrella"></i>Tropiques
</div>
<div class="category-pill">
<i class="bi bi-snow"></i>Montagne
</div>
<div class="category-pill">
<i class="bi bi-palette"></i>Artistique
</div>
<div class="category-pill">
<i class="bi bi-house-heart"></i>Luxe
</div>
</div>
</section>
<!-- Featured Destination -->
<section class="py-4">
<div class="featured-destination">
<img src="public/mosquee.jpeg" alt="Maldives">
<div class="featured-overlay">
<span class="badge bg-light text-dark mb-3 px-3 py-2">
<i class="bi bi-lightning-charge-fill text-warning me-1"></i>Populaire
</span>
<h3 class="display-5 fw-bold">Maldives</h3>
<p class="lead">Villas sur pilotis et eaux cristallines</p>
<button class="btn btn-light rounded-pill px-4">Découvrir <i class="bi bi-arrow-right ms-2"></i></button>
</div>
</div>
</section>
<!-- Properties Grid -->
<section class="py-4">
<h2 class="section-title mb-2">Séjours recommandés</h2>
<p class="section-subtitle mb-4">Des hébergements sélectionnés avec soin pour vous</p>
<div class="row g-4">
<!-- Property 1 -->
<div class="col-md-6 col-lg-4">
<div class="property-card">
<div class="property-image-wrapper">
<img src="public/rabat.jpg" class="property-image" alt="Villa Bali">
<span class="property-badge">Coup de cœur</span>
<button class="btn-favorite" onclick="toggleFavorite(this)" aria-label="like">
<i class="bi bi-heart"></i>
</button>
</div>
<div class="property-info">
<h5 class="property-title">Villa d'exception avec piscine à débordement</h5>
<div class="property-location">
<i class="bi bi-geo-alt"></i>Bali, Indonésie
</div>
<div class="property-features">
<span><i class="bi bi-people"></i> 4 pers.</span>
<span><i class="bi bi-door-open"></i> 2 ch.</span>
<span><i class="bi bi-droplet"></i> Piscine</span>
</div>
<div class="d-flex justify-content-between align-items-center">
<div class="property-rating">
<div class="stars">
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
</div>
<span class="rating-score">4.98</span>
</div>
<div class="property-price">
380€ <small>/ nuit</small>
</div>
</div>
</div>
</div>
</div>
<!-- Property 2 -->
<div class="col-md-6 col-lg-4">
<div class="property-card">
<div class="property-image-wrapper">
<img src="public/rabat2.jpg" class="property-image" alt="Suite Tokyo">
<span class="property-badge">Nouveau</span>
<button class="btn-favorite" onclick="toggleFavorite(this)" aria-label="like">
<i class="bi bi-heart"></i>
</button>
</div>
<div class="property-info">
<h5 class="property-title">Penthouse avec vue panoramique sur Tokyo</h5>
<div class="property-location">
<i class="bi bi-geo-alt"></i>Tokyo, Japon
</div>
<div class="property-features">
<span><i class="bi bi-people"></i> 2 pers.</span>
<span><i class="bi bi-door-open"></i> 1 ch.</span>
<span><i class="bi bi-wifi"></i> WiFi</span>
</div>
<div class="d-flex justify-content-between align-items-center">
<div class="property-rating">
<div class="stars">
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-half"></i>
</div>
<span class="rating-score">4.85</span>
</div>
<div class="property-price">
290€ <small>/ nuit</small>
</div>
</div>
</div>
</div>
</div>
<!-- Property 3 -->
<div class="col-md-6 col-lg-4">
<div class="property-card">
<div class="property-image-wrapper">
<img src="public/casablanca.jpg" class="property-image" alt="Resort Maldives">
<span class="property-badge">Luxe</span>
<button class="btn-favorite liked" onclick="toggleFavorite(this)" aria-label="like">
<i class="bi bi-heart-fill"></i>
</button>
</div>
<div class="property-info">
<h5 class="property-title">Bungalow sur l'eau aux Maldives</h5>
<div class="property-location">
<i class="bi bi-geo-alt"></i>Atoll de Malé, Maldives
</div>
<div class="property-features">
<span><i class="bi bi-people"></i> 2 pers.</span>
<span><i class="bi bi-door-open"></i> 1 ch.</span>
<span><i class="bi bi-water"></i> Plage privée</span>
</div>
<div class="d-flex justify-content-between align-items-center">
<div class="property-rating">
<div class="stars">
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
</div>
<span class="rating-score">5.0</span>
</div>
<div class="property-price">
950€ <small>/ nuit</small>
</div>
</div>
</div>
</div>
</div>
<!-- Property 4 -->
<div class="col-md-6 col-lg-4">
<div class="property-card">
<div class="property-image-wrapper">
<img src="public/rabat2.jpg" class="property-image" alt="Chalet Suisse">
<span class="property-badge">Montagne</span>
<button class="btn-favorite" onclick="toggleFavorite(this)" aria-label="like">
<i class="bi bi-heart"></i>
</button>
</div>
<div class="property-info">
<h5 class="property-title">Chalet authentique avec vue sur les Alpes</h5>
<div class="property-location">
<i class="bi bi-geo-alt"></i>Zermatt, Suisse
</div>
<div class="property-features">
<span><i class="bi bi-people"></i> 6 pers.</span>
<span><i class="bi bi-door-open"></i> 3 ch.</span>
<span><i class="bi bi-fire"></i> Cheminée</span>
</div>
<div class="d-flex justify-content-between align-items-center">
<div class="property-rating">
<div class="stars">
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star"></i>
</div>
<span class="rating-score">4.76</span>
</div>
<div class="property-price">
520€ <small>/ nuit</small>
</div>
</div>
</div>
</div>
</div>
<!-- Property 5 -->
<div class="col-md-6 col-lg-4">
<div class="property-card">
<div class="property-image-wrapper">
<img src="public/casablanca.jpg" class="property-image" alt="Loft NYC">
<span class="property-badge">Design</span>
<button class="btn-favorite" onclick="toggleFavorite(this)" aria-label="like">
<i class="bi bi-heart"></i>
</button>
</div>
<div class="property-info">
<h5 class="property-title">Loft industriel au cœur de Manhattan</h5>
<div class="property-location">
<i class="bi bi-geo-alt"></i>New York, États-Unis
</div>
<div class="property-features">
<span><i class="bi bi-people"></i> 4 pers.</span>
<span><i class="bi bi-door-open"></i> 2 ch.</span>
<span><i class="bi bi-building"></i> Terrasse</span>
</div>
<div class="d-flex justify-content-between align-items-center">
<div class="property-rating">
<div class="stars">
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
</div>
<span class="rating-score">4.92</span>
</div>
<div class="property-price">
610€ <small>/ nuit</small>
</div>
</div>
</div>
</div>
</div>
<!-- Property 6 -->
<div class="col-md-6 col-lg-4">
<div class="property-card">
<div class="property-image-wrapper">
<img src="public/rabat.jpg" class="property-image" alt="Maison Santorin">
<span class="property-badge">Populaire</span>
<button class="btn-favorite liked" onclick="toggleFavorite(this)" aria-label="like">
<i class="bi bi-heart-fill"></i>
</button>
</div>
<div class="property-info">
<h5 class="property-title">Maison troglodyte avec vue sur la caldeira</h5>
<div class="property-location">
<i class="bi bi-geo-alt"></i>Santorin, Grèce
</div>
<div class="property-features">
<span><i class="bi bi-people"></i> 3 pers.</span>
<span><i class="bi bi-door-open"></i> 2 ch.</span>
<span><i class="bi bi-sun"></i> Coucher de soleil</span>
</div>
<div class="d-flex justify-content-between align-items-center">
<div class="property-rating">
<div class="stars">
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
</div>
<span class="rating-score">4.99</span>
</div>
<div class="property-price">
720€ <small>/ nuit</small>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="text-center mt-5">
<button class="btn btn-dark rounded-pill px-5 py-3 fw-semibold">
Voir toutes les destinations <i class="bi bi-arrow-right ms-2"></i>
</button>
</div>
</section>
<!-- Testimonials -->
<section class="py-5">
<h2 class="section-title mb-2">Ce que disent nos voyageurs</h2>
<p class="section-subtitle mb-4">La satisfaction de nos clients est notre plus grande fierté</p>
<div class="row g-4">
<div class="col-md-4">
<div class="testimonial-card">
<img src="public/avatar.png" class="testimonial-avatar" alt="Sophie">
<div class="stars mb-3">
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
</div>
<p class="mb-3">"Une expérience absolument magique ! La villa était encore plus belle que sur les photos. Le service conciergerie était impeccable. Nous reviendrons sans hésiter."</p>
<strong>Sophie L.</strong>
<p class="text-muted small">Séjour à Bali</p>
</div>
</div>
<div class="col-md-4">
<div class="testimonial-card">
<img src="public/avatar.png" class="testimonial-avatar" alt="Thomas">
<div class="stars mb-3">
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
</div>
<p class="mb-3">"Wanderlux a rendu notre lune de miel inoubliable. Les détails, l'attention portée à chaque aspect du voyage... Tout était parfait du début à la fin."</p>
<strong>Thomas & Marie</strong>
<p class="text-muted small">Lune de miel aux Maldives</p>
</div>
</div>
<div class="col-md-4">
<div class="testimonial-card">
<img src="public/avatar.png" class="testimonial-avatar" alt="Claire">
<div class="stars mb-3">
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-half"></i>
</div>
<p class="mb-3">"La qualité des hébergements proposés est exceptionnelle. On sent une vraie sélection, un vrai soin dans le choix des propriétés. C'est notre 3ème réservation !"</p>
<strong>Claire D.</strong>
<p class="text-muted small">Voyageuse fidèle</p>
</div>
</div>
</div>
</section>
<!-- Newsletter -->
<section class="newsletter my-5">
<div class="newsletter-content">
<div class="row align-items-center">
<div class="col-lg-6 mb-4 mb-lg-0">
<h2 class="display-5 fw-bold mb-3" style="font-family: 'Playfair Display', serif;">
Recevez nos offres exclusives
</h2>
<p class="lead opacity-75">
Inscrivez-vous à notre newsletter et découvrez en avant-première
nos nouvelles destinations et offres spéciales.
</p>
</div>
<div class="col-lg-6">
<div class="d-flex gap-3">
<input type="email" class="input-newsletter flex-grow-1" placeholder="votre@email.com">
<button class="btn btn-subscribe text-white">
S'inscrire
</button>
</div>
</div>
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer class="footer">
<div class="container">
<div class="row">
<div class="col-lg-4 mb-5">
<div class="footer-brand">Wanderlux</div>
<p class="text-muted mb-4">L'excellence du voyage sur mesure. Des expériences uniques créées par des experts passionnés.</p>
<div class="social-icons">
<a href="#" aria-label="instagram"><i class="bi bi-instagram"></i></a>
<a href="#" aria-label="facebook"><i class="bi bi-facebook"></i></a>
<a href="#" aria-label="twitter"><i class="bi bi-twitter-x"></i></a>
<a href="#" aria-label="youtube"><i class="bi bi-youtube"></i></a>
</div>
</div>
<div class="col-6 col-md-4 col-lg-2 footer-links">
<h6>Destinations</h6>
<a href="#">Europe</a>
<a href="#">Asie</a>
<a href="#">Amériques</a>
<a href="#">Afrique</a>
<a href="#">Océanie</a>
</div>
<div class="col-6 col-md-4 col-lg-2 footer-links">
<h6>À propos</h6>
<a href="#">Notre histoire</a>
<a href="#">Carrières</a>
<a href="#">Presse</a>
<a href="#">Blog voyage</a>
<a href="#">Partenaires</a>
</div>
<div class="col-6 col-md-4 col-lg-2 footer-links">
<h6>Support</h6>
<a href="#">Centre d'aide</a>
<a href="#">Contact</a>
<a href="#">FAQ</a>
<a href="#">Annulation</a>
<a href="#">Assurance</a>
</div>
<div class="col-6 col-md-4 col-lg-2 footer-links">
<h6>Légal</h6>
<a href="#">Confidentialité</a>
<a href="#">CGV</a>
<a href="#">Cookies</a>
<a href="#">Mentions légales</a>
</div>
</div>
<hr class="my-4">
<div class="d-flex flex-column flex-md-row justify-content-between align-items-center">
<p class="text-muted small mb-3 mb-md-0">© 2024 Wanderlux. Tous droits réservés. Fait avec ❤️ pour les voyageurs.</p>
<div class="d-flex gap-3"></div>
</div>
</div>
</footer>
<!-- Back to Top -->
<a href="#" class="back-to-top" aria-label="go top">
<i class="bi bi-arrow-up"></i>
</a>
<!-- Scripts -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
// Category Pills
document.querySelectorAll('.category-pill').forEach(pill => {
pill.addEventListener('click', function() {
document.querySelectorAll('.category-pill').forEach(p => p.classList.remove('active'));
this.classList.add('active');
});
});
// Favorite Toggle
function toggleFavorite(button) {
const icon = button.querySelector('i');
if (icon.classList.contains('bi-heart')) {
icon.classList.remove('bi-heart');
icon.classList.add('bi-heart-fill');
button.classList.add('liked');
} else {
icon.classList.remove('bi-heart-fill');
icon.classList.add('bi-heart');
button.classList.remove('liked');
}
// Animation
button.style.transform = 'scale(1.3)';
setTimeout(() => {
button.style.transform = 'scale(1)';
}, 200);
}
// Smooth scroll for back to top
document.querySelector('.back-to-top').addEventListener('click', function(e) {
e.preventDefault();
window.scrollTo({
top: 0,
behavior: 'smooth'
});
});
// Show/hide back to top button
window.addEventListener('scroll', function() {
const backToTop = document.querySelector('.back-to-top');
if (window.scrollY > 500) {
backToTop.style.opacity = '1';
backToTop.style.visibility = 'visible';
} else {
backToTop.style.opacity = '0';
backToTop.style.visibility = 'hidden';
}
});
// Intersection Observer for animations
const observerOptions = {
threshold: 0.1,
rootMargin: '0px 0px -50px 0px'
};
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.style.opacity = '1';
entry.target.style.transform = 'translateY(0)';
}
});
}, observerOptions);
document.querySelectorAll('.property-card, .testimonial-card').forEach(el => {
el.style.opacity = '0';
el.style.transform = 'translateY(30px)';
el.style.transition = 'all 0.6s ease-out';
observer.observe(el);
});
</script>
</body>
</html>
Télécharger le fichier source