Bootstrap
Bootstrap5
Travel
Html
Css
Template de voyage Bootstrap 5 avec design élégant et moderne.
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="copyright" content="MEZGANI Said" />
<meta name="author" content="AngularForAll" />
<meta name="robots" content="noindex, nofollow" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Website Travel Bootstrap 5 | AngularForAll</title>
<!-- Bootstrap 5 + Icons -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', sans-serif;
background-color: #fafbfc;
color: #1e293b;
}
/* Navbar */
.navbar {
padding: 1rem 0;
background: rgba(255, 255, 255, 0.95) !important;
backdrop-filter: blur(10px);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}
.navbar-brand {
font-weight: 700;
font-size: 1.8rem;
color: #0f766e !important;
}
.navbar-brand span {
color: #f59e0b;
}
.nav-link {
font-weight: 500;
color: #334155 !important;
margin: 0 0.3rem;
transition: color 0.2s;
}
.nav-link:hover {
color: #0f766e !important;
}
/* Hero Section */
.hero-section {
background: linear-gradient(135deg, #0f766e 0%, #14b8a6 50%, #5eead4 100%);
padding: 5rem 0 6rem;
margin-top: -1px;
border-radius: 0 0 3rem 3rem;
position: relative;
overflow: hidden;
}
.hero-section::before {
content: '';
position: absolute;
top: -50px;
right: -50px;
width: 400px;
height: 400px;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
}
.hero-section::after {
content: '';
position: absolute;
bottom: -80px;
left: -30px;
width: 300px;
height: 300px;
background: rgba(255, 255, 255, 0.08);
border-radius: 50%;
}
.hero-title {
font-weight: 800;
font-size: 3.2rem;
line-height: 1.2;
color: white;
text-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.hero-subtitle {
font-size: 1.2rem;
color: rgba(255, 255, 255, 0.95);
font-weight: 400;
}
/* Search Box */
.search-box {
background: white;
border-radius: 60px;
padding: 0.5rem 0.5rem 0.5rem 1.5rem;
box-shadow: 0 20px 35px -8px rgba(0, 0, 0, 0.15);
max-width: 550px;
}
.search-box .form-control {
border: none;
padding: 0.8rem 0;
font-size: 1rem;
}
.search-box .form-control:focus {
box-shadow: none;
}
.btn-search {
background: #0f766e;
color: white;
border-radius: 50px;
padding: 0.8rem 2rem;
font-weight: 600;
border: none;
transition: all 0.2s;
}
.btn-search:hover {
background: #0d5f58;
transform: scale(1.02);
}
/* Section Title */
.section-title {
font-weight: 700;
font-size: 2.2rem;
color: #0f172a;
margin-bottom: 0.5rem;
}
.section-subtitle {
color: #64748b;
font-size: 1.1rem;
font-weight: 400;
}
/* Destination Cards */
.dest-card {
border: none;
border-radius: 24px;
overflow: hidden;
box-shadow: 0 12px 24px -8px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
height: 100%;
background: white;
}
.dest-card:hover {
transform: translateY(-8px);
box-shadow: 0 24px 36px -12px rgba(15, 118, 110, 0.15);
}
.card-img-wrapper {
position: relative;
height: 240px;
overflow: hidden;
}
.card-img-wrapper img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s;
}
.dest-card:hover .card-img-wrapper img {
transform: scale(1.08);
}
.card-badge {
position: absolute;
top: 16px;
right: 16px;
background: #f59e0b;
color: white;
padding: 0.35rem 1rem;
border-radius: 30px;
font-weight: 600;
font-size: 0.9rem;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.price-tag {
font-weight: 700;
font-size: 1.6rem;
color: #0f766e;
}
.rating {
color: #fbbf24;
letter-spacing: 2px;
}
/* Activity Cards */
.activity-card {
border: none;
border-radius: 20px;
background: white;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.04);
padding: 1.5rem;
transition: all 0.2s;
height: 100%;
}
.activity-card:hover {
box-shadow: 0 16px 30px -8px rgba(15, 118, 110, 0.1);
background: #f0fdfa;
}
.activity-icon {
width: 60px;
height: 60px;
background: #e0f2f1;
border-radius: 18px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1.2rem;
}
.activity-icon i {
font-size: 2rem;
color: #0f766e;
}
/* Testimonial Card */
.testi-card {
background: white;
border-radius: 24px;
padding: 2rem;
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.04);
border: 1px solid #f1f5f9;
}
.avatar {
width: 60px;
height: 60px;
border-radius: 50%;
object-fit: cover;
border: 3px solid #14b8a6;
}
/* Newsletter */
.newsletter-box {
background: linear-gradient(120deg, #0f766e, #14b8a6);
border-radius: 32px;
padding: 3.5rem 2.5rem;
color: white;
}
.newsletter-input {
background: rgba(255,255,255,0.15);
border: 1px solid rgba(255,255,255,0.3);
color: white;
border-radius: 50px;
padding: 0.9rem 1.5rem;
}
.newsletter-input::placeholder {
color: rgba(255,255,255,0.8);
}
.newsletter-input:focus {
background: rgba(255,255,255,0.2);
color: white;
box-shadow: none;
border-color: white;
}
.btn-subscribe {
background: white;
color: #0f766e;
border-radius: 50px;
padding: 0.9rem 2rem;
font-weight: 700;
border: none;
}
.btn-subscribe:hover {
background: #f8fafc;
}
/* Footer */
footer {
background: #0f172a;
color: #cbd5e1;
padding: 3rem 0 2rem;
}
.footer-link {
color: #94a3b8;
text-decoration: none;
font-size: 0.95rem;
transition: color 0.2s;
}
.footer-link:hover {
color: #5eead4;
}
.social-icon {
background: #1e293b;
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #cbd5e1;
transition: all 0.2s;
}
.social-icon:hover {
background: #0f766e;
color: white;
}
/* Responsive */
@media (max-width: 768px) {
.hero-title {
font-size: 2.3rem;
}
.section-title {
font-size: 1.9rem;
}
.newsletter-box {
padding: 2rem 1.5rem;
}
}
</style>
</head>
<body>
<!-- ==================== NAVBAR ==================== -->
<nav class="navbar navbar-expand-lg sticky-top">
<div class="container">
<a class="navbar-brand" href="#">
<i class="bi bi-globe-americas me-2"></i>Horizon<span>Voyages</span>
</a>
<button class="navbar-toggler border-0" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav mx-auto mb-2 mb-lg-0">
<li class="nav-item"><a class="nav-link active" href="#">Accueil</a></li>
<li class="nav-item"><a class="nav-link" href="#">Destinations</a></li>
<li class="nav-item"><a class="nav-link" href="#">Circuits</a></li>
<li class="nav-item"><a class="nav-link" href="#">Offres</a></li>
<li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
</ul>
<div class="d-flex gap-3">
<a href="#" class="btn btn-outline-success rounded-pill px-4"><i class="bi bi-person"></i> Connexion</a>
<a href="#" class="btn btn-success rounded-pill px-4" style="background:#0f766e; border-color:#0f766e;">Inscription</a>
</div>
</div>
</div>
</nav>
<!-- ==================== HERO ==================== -->
<section class="hero-section">
<div class="container position-relative" style="z-index: 2;">
<div class="row align-items-center">
<div class="col-lg-6 text-white">
<span class="badge bg-light bg-opacity-25 text-white mb-3 px-3 py-2 rounded-pill">
<i class="bi bi-star-fill me-1"></i> Agence certifiée
</span>
<h1 class="hero-title mb-3">Explorez le monde <br>avec Horizon</h1>
<p class="hero-subtitle mb-4">Des voyages sur mesure, des souvenirs inoubliables. Votre aventure commence ici.</p>
<!-- Search -->
<div class="search-box d-flex align-items-center">
<i class="bi bi-search text-secondary ms-2"></i>
<input type="text" class="form-control" placeholder="Où souhaitez-vous aller ?">
<button class="btn btn-search"><i class="bi bi-arrow-right"></i> Rechercher</button>
</div>
<div class="d-flex gap-4 mt-4">
<div><i class="bi bi-check-circle-fill text-warning"></i> <span class="small">Paiement 3x sans frais</span></div>
<div><i class="bi bi-shield-check"></i> <span class="small">Garantie annulation</span></div>
</div>
</div>
<div class="col-lg-6 text-center text-lg-end mt-4 mt-lg-0">
<img src="https://placehold.co/600x450/14b8a6/white?text=Travel+With+Us"
alt="Travel illustration" class="img-fluid rounded-4 shadow-lg"
onerror="this.src='https://placehold.co/600x450/0f766e/ffffff?text=Horizon+Voyages'">
</div>
</div>
</div>
</section>
<!-- ==================== DESTINATIONS POPULAIRES ==================== -->
<section class="container my-5 pt-4">
<div class="d-flex justify-content-between align-items-end mb-4">
<div>
<h2 class="section-title">Destinations populaires</h2>
<p class="section-subtitle">Les coups de cœur de nos voyageurs</p>
</div>
<a href="#" class="text-decoration-none fw-semibold" style="color:#0f766e;">Voir tout <i class="bi bi-arrow-right"></i></a>
</div>
<div class="row g-4">
<!-- Carte 1 -->
<div class="col-md-6 col-lg-4">
<div class="dest-card">
<div class="card-img-wrapper">
<img src="https://images.pexels.com/photos/2087391/pexels-photo-2087391.jpeg?auto=compress&cs=tinysrgb&w=600"
alt="Bali" onerror="this.src='https://placehold.co/400x300/0f766e/white?text=Bali'">
<span class="card-badge"><i class="bi bi-fire"></i> Top vente</span>
</div>
<div class="card-body p-4">
<div class="d-flex justify-content-between align-items-start">
<h5 class="fw-bold mb-1">Bali, Indonésie</h5>
<div class="rating">★★★★★ <span class="text-secondary ms-1">4.9</span></div>
</div>
<p class="text-secondary small"><i class="bi bi-geo-alt-fill"></i> Ubud, Seminyak</p>
<p class="text-secondary">Rizières, temples sacrés et plages de sable fin. Une île magique.</p>
<div class="d-flex justify-content-between align-items-center mt-3">
<span class="price-tag">1 290€</span>
<span class="text-secondary">/ 8 jours</span>
<a href="#" class="btn btn-outline-success rounded-pill px-4" style="border-color:#0f766e; color:#0f766e;">Voir</a>
</div>
</div>
</div>
</div>
<!-- Carte 2 -->
<div class="col-md-6 col-lg-4">
<div class="dest-card">
<div class="card-img-wrapper">
<img src="https://images.pexels.com/photos/699466/pexels-photo-699466.jpeg?auto=compress&cs=tinysrgb&w=600"
alt="Santorini" onerror="this.src='https://placehold.co/400x300/14b8a6/white?text=Santorini'">
<span class="card-badge bg-info"><i class="bi bi-gem"></i> Luxe</span>
</div>
<div class="card-body p-4">
<div class="d-flex justify-content-between">
<h5 class="fw-bold mb-1">Santorin, Grèce</h5>
<div class="rating">★★★★☆ <span class="text-secondary ms-1">4.8</span></div>
</div>
<p class="text-secondary small"><i class="bi bi-geo-alt-fill"></i> Oia, Fira</p>
<p class="text-secondary">Couchers de soleil légendaires et villages blancs surplombant la mer Égée.</p>
<div class="d-flex justify-content-between align-items-center mt-3">
<span class="price-tag">1 590€</span>
<span class="text-secondary">/ 7 jours</span>
<a href="#" class="btn btn-outline-success rounded-pill px-4" style="border-color:#0f766e; color:#0f766e;">Voir</a>
</div>
</div>
</div>
</div>
<!-- Carte 3 -->
<div class="col-md-6 col-lg-4">
<div class="dest-card">
<div class="card-img-wrapper">
<img src="https://images.pexels.com/photos/450441/pexels-photo-450441.jpeg?auto=compress&cs=tinysrgb&w=600"
alt="Kyoto" onerror="this.src='https://placehold.co/400x300/0d9488/white?text=Kyoto'">
</div>
<div class="card-body p-4">
<div class="d-flex justify-content-between">
<h5 class="fw-bold mb-1">Kyoto, Japon</h5>
<div class="rating">★★★★★ <span class="text-secondary ms-1">4.9</span></div>
</div>
<p class="text-secondary small"><i class="bi bi-geo-alt-fill"></i> Arashiyama, Gion</p>
<p class="text-secondary">Temples millénaires, forêts de bambous et culture traditionnelle.</p>
<div class="d-flex justify-content-between align-items-center mt-3">
<span class="price-tag">2 190€</span>
<span class="text-secondary">/ 10 jours</span>
<a href="#" class="btn btn-outline-success rounded-pill px-4" style="border-color:#0f766e; color:#0f766e;">Voir</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ==================== ACTIVITÉS ==================== -->
<section class="bg-light py-5 mt-4">
<div class="container">
<div class="text-center mb-5">
<h2 class="section-title">Voyagez selon vos envies</h2>
<p class="section-subtitle">Des expériences uniques conçues pour vous</p>
</div>
<div class="row g-4">
<div class="col-md-3 col-6">
<div class="activity-card text-center">
<div class="activity-icon mx-auto">
<i class="bi bi-umbrella"></i>
</div>
<h5 class="fw-bold">Séjours balnéaires</h5>
<p class="small text-secondary">Détente et plages paradisiaques</p>
</div>
</div>
<div class="col-md-3 col-6">
<div class="activity-card text-center">
<div class="activity-icon mx-auto">
<i class="bi bi-tree"></i>
</div>
<h5 class="fw-bold">Aventures nature</h5>
<p class="small text-secondary">Randonnées & parcs nationaux</p>
</div>
</div>
<div class="col-md-3 col-6">
<div class="activity-card text-center">
<div class="activity-icon mx-auto">
<i class="bi bi-bank"></i>
</div>
<h5 class="fw-bold">Escapades culturelles</h5>
<p class="small text-secondary">Musées et patrimoine</p>
</div>
</div>
<div class="col-md-3 col-6">
<div class="activity-card text-center">
<div class="activity-icon mx-auto">
<i class="bi bi-cup-straw"></i>
</div>
<h5 class="fw-bold">Lune de miel</h5>
<p class="small text-secondary">Voyages romantiques sur mesure</p>
</div>
</div>
</div>
</div>
</section>
<!-- ==================== TÉMOIGNAGES ==================== -->
<section class="container my-5 py-3">
<div class="row align-items-center">
<div class="col-lg-5 mb-4 mb-lg-0">
<span class="badge bg-success bg-opacity-10 text-success mb-2 px-3 py-2 rounded-pill">Témoignages</span>
<h2 class="section-title">Ce que nos voyageurs disent</h2>
<p class="text-secondary">+5000 clients satisfaits. Rejoignez la communauté Horizon.</p>
<a href="#" class="btn btn-outline-success rounded-pill mt-3 px-4">Tous les avis <i class="bi bi-arrow-right"></i></a>
</div>
<div class="col-lg-7">
<div class="testi-card">
<div class="d-flex gap-3">
<img src="https://placehold.co/100x100/14b8a6/white?text=MC" class="avatar" alt="avatar" onerror="this.src='https://placehold.co/100/0f766e/white?text=M'">
<div>
<div class="rating mb-1">★★★★★</div>
<p class="fst-italic">"Une agence à l'écoute, un voyage au Japon parfaitement organisé. Nous avons adoré chaque instant. Merci Horizon !"</p>
<h6 class="fw-bold mb-0">Marie C.</h6>
<small class="text-secondary">Voyage à Kyoto</small>
</div>
</div>
<hr class="my-3">
<div class="d-flex gap-3">
<img src="https://placehold.co/100x100/f59e0b/white?text=PL" class="avatar" alt="avatar" onerror="this.src='https://placehold.co/100/0f766e/white?text=P'">
<div>
<div class="rating mb-1">★★★★★</div>
<p class="fst-italic">"Séjour à Bali inoubliable. Des conseils précieux et un rapport qualité-prix exceptionnel."</p>
<h6 class="fw-bold mb-0">Paul L.</h6>
<small class="text-secondary">Voyage à Bali</small>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ==================== NEWSLETTER ==================== -->
<section class="container mb-5">
<div class="newsletter-box">
<div class="row align-items-center">
<div class="col-lg-7">
<h3 class="fw-bold text-white">Prêt à partir ?</h3>
<p class="text-white-50 mb-lg-0">Inscrivez-vous et recevez nos offres exclusives en avant-première.</p>
</div>
<div class="col-lg-5">
<div class="d-flex flex-column flex-sm-row gap-2">
<input type="email" class="form-control newsletter-input" placeholder="Votre email">
<button class="btn btn-subscribe">S'abonner</button>
</div>
<small class="text-white-50 mt-2 d-block">Nous ne spammons pas.</small>
</div>
</div>
</div>
</section>
<!-- ==================== FOOTER ==================== -->
<footer>
<div class="container">
<div class="row gy-4">
<div class="col-md-4">
<h4 class="text-white fw-bold"><i class="bi bi-globe-americas me-2"></i>Horizon<span style="color:#f59e0b;">Voyages</span></h4>
<p class="small" style="color:#94a3b8;">Créateur de voyages d'exception depuis 2015. Agence immatriculée en France.</p>
<div class="d-flex gap-3 mt-3">
<a href="#" class="social-icon" aria-label="Facebook"><i class="bi bi-facebook"></i></a>
<a href="#" class="social-icon" aria-label="Instagram"><i class="bi bi-instagram"></i></a>
<a href="#" class="social-icon" aria-label="Twitter"><i class="bi bi-twitter-x"></i></a>
</div>
</div>
<div class="col-6 col-md-2">
<h6 class="text-white fw-semibold">Destinations</h6>
<ul class="list-unstyled">
<li class="mb-2"><a href="#" class="footer-link">Europe</a></li>
<li class="mb-2"><a href="#" class="footer-link">Asie</a></li>
<li class="mb-2"><a href="#" class="footer-link">Amériques</a></li>
<li class="mb-2"><a href="#" class="footer-link">Afrique</a></li>
</ul>
</div>
<div class="col-6 col-md-2">
<h6 class="text-white fw-semibold">Infos</h6>
<ul class="list-unstyled">
<li class="mb-2"><a href="#" class="footer-link">FAQ</a></li>
<li class="mb-2"><a href="#" class="footer-link">Assurances</a></li>
<li class="mb-2"><a href="#" class="footer-link">Paiement</a></li>
<li class="mb-2"><a href="#" class="footer-link">Blog</a></li>
</ul>
</div>
<div class="col-md-3">
<h6 class="text-white fw-semibold">Contact</h6>
<p class="small" style="color:#94a3b8;"><i class="bi bi-telephone me-2"></i> +33 1 42 68 53 00</p>
<p class="small" style="color:#94a3b8;"><i class="bi bi-envelope me-2"></i> bonjour@horizonvoyages.fr</p>
<p class="small" style="color:#94a3b8;"><i class="bi bi-geo-alt me-2"></i> 12 rue du Voyage, Paris</p>
</div>
</div>
<hr class="opacity-25 mt-4">
<div class="d-flex flex-wrap justify-content-between small text-secondary">
<span>© 2026 Horizon Voyages. Tous droits réservés.</span>
<span>
<a href="#" class="footer-link me-3">Mentions légales</a>
<a href="#" class="footer-link">CGV</a>
</span>
</div>
</div>
</footer>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>