Voyage
Maroc
Intelligence Artificielle
Bootstrap 5
Responsive
Html
Css
Tourisme
Template
Destinations
City Guide
Agence Voyage
Template agence de voyage Bootstrap 5 thème Maroc avec IA. Cartes destinations, filtres intelligents et design moderne pour sites touristiques et city guides.
<!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 AI Bootstrap5 2026 05090900 | AngularForAll</title>
<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Icons (Bootstrap Icons) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css">
<style>
:root {
--hd-primary: #0f172a;
--hd-secondary: #1e293b;
--hd-accent: #22c55e;
--hd-accent-soft: rgba(34, 197, 94, 0.12);
--hd-bg: #020617;
--hd-card-bg: #020617;
--hd-border: rgba(148, 163, 184, 0.25);
--hd-text-main: #e5e7eb;
--hd-text-muted: #9ca3af;
}
body {
background: radial-gradient(circle at top, #0b1120 0, #020617 55%, #000 100%);
color: var(--hd-text-main);
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.hd-blur {
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
}
.navbar {
border-bottom: 1px solid var(--hd-border);
background: linear-gradient(to right, rgba(15, 23, 42, 0.9), rgba(15, 23, 42, 0.7));
}
.navbar-brand span {
letter-spacing: 0.08em;
}
.badge-soft {
background-color: var(--hd-accent-soft);
color: var(--hd-accent);
border-radius: 999px;
font-size: 0.75rem;
padding: 0.25rem 0.75rem;
}
.hero {
padding-top: 5rem;
padding-bottom: 4rem;
}
.hero-title {
font-size: clamp(2.4rem, 4vw, 3.2rem);
font-weight: 700;
letter-spacing: -0.04em;
}
.hero-subtitle {
color: var(--hd-text-muted);
max-width: 34rem;
}
.hero-card {
border-radius: 1.5rem;
border: 1px solid var(--hd-border);
background: radial-gradient(circle at top left, rgba(56, 189, 248, 0.12), transparent 55%),
radial-gradient(circle at bottom right, rgba(34, 197, 94, 0.12), transparent 55%),
rgba(15, 23, 42, 0.9);
box-shadow: 0 24px 80px rgba(15, 23, 42, 0.9);
}
.hero-map {
border-radius: 1.25rem;
border: 1px solid rgba(148, 163, 184, 0.35);
background: radial-gradient(circle at top, #0b1120 0, #020617 60%);
position: relative;
overflow: hidden;
min-height: 260px;
}
.hero-map::before {
content: "";
position: absolute;
inset: 18%;
border-radius: 999px;
border: 1px dashed rgba(148, 163, 184, 0.4);
opacity: 0.7;
}
.hero-map-dot {
width: 10px;
height: 10px;
border-radius: 999px;
background: var(--hd-accent);
box-shadow: 0 0 0 6px rgba(34, 197, 94, 0.35);
position: absolute;
}
.hero-map-dot.dot-rabat { top: 32%; left: 38%; }
.hero-map-dot.dot-casa { top: 40%; left: 35%; }
.hero-map-dot.dot-marrakech { top: 55%; left: 42%; }
.hero-map-dot.dot-agadir { top: 68%; left: 30%; }
.hero-map-label {
position: absolute;
font-size: 0.75rem;
color: var(--hd-text-muted);
background: rgba(15, 23, 42, 0.9);
border-radius: 999px;
padding: 0.15rem 0.6rem;
border: 1px solid rgba(148, 163, 184, 0.4);
white-space: nowrap;
}
.hero-map-label.label-rabat { top: 26%; left: 44%; }
.hero-map-label.label-marrakech { top: 50%; left: 48%; }
.form-control,
.form-select {
background-color: rgba(15, 23, 42, 0.9);
border-color: rgba(148, 163, 184, 0.5);
color: var(--hd-text-main);
}
.form-control::placeholder {
color: rgba(148, 163, 184, 0.8);
}
.form-control:focus,
.form-select:focus {
border-color: var(--hd-accent);
box-shadow: 0 0 0 0.15rem rgba(34, 197, 94, 0.25);
background-color: rgba(15, 23, 42, 0.98);
color: var(--hd-text-main);
}
.btn-accent {
background: linear-gradient(135deg, #22c55e, #4ade80);
border: none;
color: #022c22;
font-weight: 600;
border-radius: 999px;
padding-inline: 1.5rem;
}
.btn-accent:hover {
background: linear-gradient(135deg, #16a34a, #22c55e);
color: #022c22;
}
.section-title {
font-size: 1.1rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--hd-text-muted);
font-weight: 600;
}
.card {
border-radius: 1.25rem;
border: 1px solid var(--hd-border);
background: radial-gradient(circle at top left, rgba(148, 163, 184, 0.12), transparent 55%),
rgba(15, 23, 42, 0.96);
color: var(--hd-text-main);
}
.card-img-top {
border-top-left-radius: 1.25rem;
border-top-right-radius: 1.25rem;
height: 180px;
object-fit: cover;
}
.chip {
display: inline-flex;
align-items: center;
gap: 0.35rem;
border-radius: 999px;
border: 1px solid rgba(148, 163, 184, 0.5);
padding: 0.25rem 0.75rem;
font-size: 0.75rem;
color: var(--hd-text-muted);
}
.chip i {
font-size: 0.9rem;
}
.footer {
border-top: 1px solid var(--hd-border);
background: linear-gradient(to right, rgba(15, 23, 42, 0.95), rgba(15, 23, 42, 0.85));
color: var(--hd-text-muted);
}
.footer a {
color: var(--hd-text-muted);
text-decoration: none;
}
.footer a:hover {
color: var(--hd-accent);
}
@media (max-width: 767.98px) {
.hero {
padding-top: 4rem;
}
.hero-card {
padding: 1.5rem;
}
}
</style>
</head>
<body>
<!-- NAVBAR -->
<nav class="navbar navbar-expand-lg navbar-dark fixed-top hd-blur">
<div class="container">
<a class="navbar-brand d-flex align-items-center gap-2" href="#">
<span class="d-inline-flex align-items-center justify-content-center rounded-circle bg-success bg-opacity-10 border border-success border-opacity-25" style="width: 32px; height: 32px;">
<i class="bi bi-compass text-success"></i>
</span>
<div class="d-flex flex-column">
<span class="fw-semibold">travel.ma</span>
<span class="small text-uppercase text-muted" style="letter-spacing: .16em;">Explorer le Maroc</span>
</div>
</a>
<button class="navbar-toggler border-0" type="button" data-bs-toggle="collapse" data-bs-target="#navMain" aria-label="toggle">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navMain">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0 align-items-lg-center">
<li class="nav-item">
<a class="nav-link active" href="#">Destinations</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Lieux à visiter</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Commerces</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">À propos</a>
</li>
<li class="nav-item ms-lg-3 mt-2 mt-lg-0">
<a class="btn btn-sm btn-outline-light rounded-pill px-3" href="#">
<i class="bi bi-building me-1"></i>
Ajouter mon commerce
</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- HERO -->
<main class="hero">
<div class="container">
<div class="row g-4 align-items-center">
<div class="col-lg-6">
<div class="mb-3">
<span class="badge-soft d-inline-flex align-items-center gap-2">
<i class="bi bi-geo-alt"></i>
Guide digital du Maroc
</span>
</div>
<h1 class="hero-title mb-3">
Explore les villes du Maroc,<br> découvre où sortir en un clic.
</h1>
<p class="hero-subtitle mb-4">
Visualise les villes, trouve les plages, forêts, monuments, activités et commerces autour de toi.
Un guide moderne, pensé pour les marocains et les voyageurs.
</p>
<div class="hero-card p-3 p-md-4 hd-blur">
<form class="row g-3 align-items-center">
<div class="col-12">
<label class="form-label small text-uppercase text-muted mb-1">Ville</label>
<div class="input-group">
<span class="input-group-text bg-transparent border-end-0 text-muted">
<i class="bi bi-search"></i>
</span>
<input type="text" class="form-control border-start-0" placeholder="Rabat, Casablanca, Marrakech...">
</div>
</div>
<div class="col-md-6">
<label class="form-label small text-uppercase text-muted mb-1">Type de lieu</label>
<select class="form-select" aria-label="Tous les lieux">
<option selected>Tous les lieux</option>
<option>Plages</option>
<option>Forêts & nature</option>
<option>Monuments historiques</option>
<option>Activités</option>
<option>Restaurants & cafés</option>
</select>
</div>
<div class="col-md-6">
<label class="form-label small text-uppercase text-muted mb-1">Quand</label>
<select class="form-select" aria-label="Ce week-end">
<option selected>Ce week-end</option>
<option>Aujourd’hui</option>
<option>Cette semaine</option>
<option>Plus tard</option>
</select>
</div>
<div class="col-12 d-flex flex-wrap gap-2 align-items-center">
<button type="submit" class="btn btn-accent">
<i class="bi bi-compass me-1"></i>
Explorer
</button>
<span class="small text-muted">
<i class="bi bi-geo-alt me-1"></i>
Ou <a href="#" class="link-light text-decoration-none">explorer autour de moi</a>
</span>
</div>
</form>
</div>
<div class="d-flex flex-wrap gap-2 mt-3">
<span class="chip">
<i class="bi bi-sun"></i>
Week-end à la plage
</span>
<span class="chip">
<i class="bi bi-tree"></i>
Forêts & randonnées
</span>
<span class="chip">
<i class="bi bi-bank"></i>
Monuments historiques
</span>
</div>
</div>
<div class="col-lg-6">
<div class="hero-map hd-blur">
<div class="position-absolute top-0 start-0 w-100 h-100 d-flex flex-column justify-content-between p-3">
<div class="d-flex justify-content-between align-items-center">
<span class="small text-uppercase text-muted" style="letter-spacing:.16em;">Carte du Maroc</span>
<span class="badge-soft d-inline-flex align-items-center gap-1">
<i class="bi bi-activity"></i>
Temps réel
</span>
</div>
<div class="d-flex justify-content-between align-items-end">
<div class="small text-muted">
<i class="bi bi-geo-alt me-1 text-success"></i>
Rabat, Casablanca, Marrakech, Agadir...
</div>
<div class="small text-muted">
<i class="bi bi-people me-1"></i>
+120 lieux ajoutés
</div>
</div>
</div>
<div class="hero-map-dot dot-rabat"></div>
<div class="hero-map-dot dot-casa"></div>
<div class="hero-map-dot dot-marrakech"></div>
<div class="hero-map-dot dot-agadir"></div>
<div class="hero-map-label label-rabat">Rabat</div>
<div class="hero-map-label label-marrakech">Marrakech</div>
</div>
</div>
</div>
<!-- SECTIONS -->
<section class="mt-5 pt-4">
<div class="d-flex justify-content-between align-items-center mb-3">
<div>
<div class="section-title mb-1">Destinations populaires</div>
<h2 class="h4 mb-0">Villes à explorer en ce moment</h2>
</div>
<a href="#" class="small text-muted text-decoration-none">
Voir toutes les villes <i class="bi bi-arrow-right-short"></i>
</a>
</div>
<div class="row g-4">
<div class="col-md-4">
<article class="card h-100">
<img src="public/mosquee.jpeg" class="card-img-top" alt="Rabat">
<div class="card-body">
<div class="d-flex justify-content-between align-items-center mb-2">
<h3 class="h5 mb-0">Rabat</h3>
<span class="badge-soft small d-inline-flex align-items-center gap-1">
<i class="bi bi-star-fill"></i> Recommandé
</span>
</div>
<p class="card-text small text-muted mb-3">
Médina, Kasbah des Oudayas, corniche, plages et lieux culturels à découvrir en une journée ou un week-end.
</p>
<div class="d-flex flex-wrap gap-2 small">
<span class="chip">
<i class="bi bi-water"></i> Plages
</span>
<span class="chip">
<i class="bi bi-bank"></i> Monuments
</span>
</div>
</div>
<div class="card-footer border-0 bg-transparent d-flex justify-content-between align-items-center small text-muted">
<span><i class="bi bi-geo-alt me-1"></i>Région Rabat-Salé-Kénitra</span>
<a href="#" class="text-decoration-none text-muted">
Voir la ville <i class="bi bi-arrow-right-short"></i>
</a>
</div>
</article>
</div>
<div class="col-md-4">
<article class="card h-100">
<img src="public/rabat.jpg" class="card-img-top" alt="Marrakech">
<div class="card-body">
<div class="d-flex justify-content-between align-items-center mb-2">
<h3 class="h5 mb-0">Marrakech</h3>
<span class="badge-soft small d-inline-flex align-items-center gap-1">
<i class="bi bi-fire"></i> Tendance
</span>
</div>
<p class="card-text small text-muted mb-3">
Place Jemaa el-Fna, jardins, riads, activités et excursions vers l’Atlas. Idéal pour un séjour de 3 à 5 jours.
</p>
<div class="d-flex flex-wrap gap-2 small">
<span class="chip">
<i class="bi bi-shop"></i> Souks
</span>
<span class="chip">
<i class="bi bi-tree"></i> Nature
</span>
</div>
</div>
<div class="card-footer border-0 bg-transparent d-flex justify-content-between align-items-center small text-muted">
<span><i class="bi bi-geo-alt me-1"></i>Région Marrakech-Safi</span>
<a href="#" class="text-decoration-none text-muted">
Voir la ville <i class="bi bi-arrow-right-short"></i>
</a>
</div>
</article>
</div>
<div class="col-md-4">
<article class="card h-100">
<img src="public/rabat2.jpg" class="card-img-top" alt="Agadir">
<div class="card-body">
<div class="d-flex justify-content-between align-items-center mb-2">
<h3 class="h5 mb-0">Agadir</h3>
<span class="badge-soft small d-inline-flex align-items-center gap-1">
<i class="bi bi-sun"></i> Bord de mer
</span>
</div>
<p class="card-text small text-muted mb-3">
Plages, corniche, surf, activités nautiques et sorties en famille. Parfait pour un séjour détente.
</p>
<div class="d-flex flex-wrap gap-2 small">
<span class="chip">
<i class="bi bi-water"></i> Plage
</span>
<span class="chip">
<i class="bi bi-activity"></i> Activités
</span>
</div>
</div>
<div class="card-footer border-0 bg-transparent d-flex justify-content-between align-items-center small text-muted">
<span><i class="bi bi-geo-alt me-1"></i>Région Souss-Massa</span>
<a href="#" class="text-decoration-none text-muted">
Voir la ville <i class="bi bi-arrow-right-short"></i>
</a>
</div>
</article>
</div>
</div>
</section>
<section class="mt-5 pt-4 pb-5">
<div class="row g-4 align-items-center">
<div class="col-lg-5">
<div class="section-title mb-1">Pour les commerces</div>
<h2 class="h4 mb-3">Donne de la visibilité à ton restaurant, café ou activité.</h2>
<p class="text-muted small mb-3">
Crée une fiche pour ton commerce, ajoute des photos, horaires, prix et reçois plus de visites
grâce à une présence ciblée dans ta ville.
</p>
<ul class="list-unstyled small text-muted mb-3">
<li class="mb-1"><i class="bi bi-check-circle text-success me-2"></i>Fiche commerce complète</li>
<li class="mb-1"><i class="bi bi-check-circle text-success me-2"></i>Mise en avant dans ta ville</li>
<li class="mb-1"><i class="bi bi-check-circle text-success me-2"></i>Contact direct par WhatsApp</li>
</ul>
<a href="#" class="btn btn-outline-light btn-sm rounded-pill px-3">
<i class="bi bi-building-add me-1"></i>
Ajouter mon commerce
</a>
</div>
<div class="col-lg-7">
<div class="row g-3">
<div class="col-6">
<div class="card h-100">
<div class="card-body">
<div class="mb-2">
<span class="badge-soft small d-inline-flex align-items-center gap-1">
<i class="bi bi-graph-up"></i> Visibilité
</span>
</div>
<h3 class="h6 mb-2">Fiche optimisée</h3>
<p class="small text-muted mb-0">
Photos, description, tags, horaires et localisation pour que les gens te trouvent facilement.
</p>
</div>
</div>
</div>
<div class="col-6">
<div class="card h-100">
<div class="card-body">
<div class="mb-2">
<span class="badge-soft small d-inline-flex align-items-center gap-1">
<i class="bi bi-whatsapp"></i> Contact
</span>
</div>
<h3 class="h6 mb-2">Contact direct</h3>
<p class="small text-muted mb-0">
Ajoute ton WhatsApp pour recevoir des demandes sans intermédiaire.
</p>
</div>
</div>
</div>
<div class="col-12">
<div class="card h-100">
<div class="card-body d-flex justify-content-between align-items-center">
<div>
<h3 class="h6 mb-1">Abonnements simples, sans engagement</h3>
<p class="small text-muted mb-0">
À partir de <strong>99 DH / mois</strong> pour une présence professionnelle dans ta ville.
</p>
</div>
<span class="badge-soft small d-inline-flex align-items-center gap-1">
<i class="bi bi-credit-card"></i> Mensuel
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</main>
<!-- FOOTER -->
<footer class="footer py-4">
<div class="container">
<div class="row gy-3 align-items-center">
<div class="col-md-6">
<div class="small">
© <span id="year">2026</span> travel.ma — Tous droits réservés.
</div>
<div class="small">
Conçu au Maroc pour explorer le Maroc.
</div>
</div>
<div class="col-md-6 d-flex justify-content-md-end gap-3 small">
<a href="#">Conditions</a>
<a href="#">Confidentialité</a>
<a href="#">Contact</a>
</div>
</div>
</div>
</footer>
<!-- Bootstrap 5 JS (optionnel pour le burger, mais aucun JS custom) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script>
// Juste pour l'année dynamique, tu peux supprimer si tu veux vraiment 0 JS
document.getElementById('year').textContent = new Date().getFullYear();
</script>
</body>
</html>
Télécharger le fichier source