Bootstrap
Bootstrap5
Restauration
Html
Css
Template de restauration 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>Restaurant 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=Playfair+Display:wght@400;600;700;800&family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Poppins', sans-serif;
background-color: #fdfbf7;
color: #2c1810;
}
h1, h2, h3, h4, h5, .navbar-brand, .section-title {
font-family: 'Playfair Display', serif;
}
/* Navbar */
.navbar {
padding: 1rem 0;
background: rgba(255, 255, 255, 0.98) !important;
backdrop-filter: blur(10px);
box-shadow: 0 2px 20px rgba(0, 0, 0, 0.05);
}
.navbar-brand {
font-weight: 700;
font-size: 1.8rem;
color: #8b4513 !important;
}
.navbar-brand span {
color: #d4a373;
font-size: 1.4rem;
}
.nav-link {
font-weight: 500;
color: #4a3520 !important;
margin: 0 0.5rem;
transition: color 0.2s;
}
.nav-link:hover {
color: #8b4513 !important;
}
.btn-reservation {
background: #8b4513;
color: white;
border-radius: 40px;
padding: 0.6rem 1.8rem;
font-weight: 600;
border: none;
transition: all 0.2s;
}
.btn-reservation:hover {
background: #6b3410;
transform: scale(1.03);
}
/* Hero Section */
.hero-section {
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.4)),
url('https://images.pexels.com/photos/260922/pexels-photo-260922.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2');
background-size: cover;
background-position: center 30%;
padding: 7rem 0;
margin-top: -1px;
position: relative;
}
.hero-title {
font-weight: 800;
font-size: 4rem;
color: white;
text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
margin-bottom: 1rem;
}
.hero-subtitle {
font-size: 1.4rem;
color: #f5e6d3;
font-weight: 300;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
/* Section Title */
.section-title {
font-weight: 700;
font-size: 2.5rem;
color: #2c1810;
margin-bottom: 0.5rem;
}
.section-subtitle {
color: #8b4513;
font-size: 1.1rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 3px;
}
.divider {
width: 80px;
height: 3px;
background: #d4a373;
margin: 1rem auto;
}
/* Menu Cards */
.menu-card {
border: none;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
transition: all 0.3s ease;
height: 100%;
background: white;
}
.menu-card:hover {
transform: translateY(-8px);
box-shadow: 0 20px 40px rgba(139, 69, 19, 0.1);
}
.menu-img-wrapper {
position: relative;
height: 220px;
overflow: hidden;
}
.menu-img-wrapper img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s;
}
.menu-card:hover .menu-img-wrapper img {
transform: scale(1.1);
}
.price-badge {
position: absolute;
top: 15px;
right: 15px;
background: #8b4513;
color: white;
padding: 0.5rem 1.2rem;
border-radius: 30px;
font-weight: 700;
font-size: 1.2rem;
box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}
.menu-category {
color: #d4a373;
font-weight: 600;
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 2px;
}
/* Specialités Cards */
.specialty-card {
background: white;
border-radius: 24px;
padding: 2rem 1.5rem;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.05);
border: 1px solid #f0e6d8;
transition: all 0.3s;
height: 100%;
text-align: center;
}
.specialty-card:hover {
border-color: #d4a373;
box-shadow: 0 20px 40px rgba(139, 69, 19, 0.08);
}
.specialty-icon {
width: 80px;
height: 80px;
background: #fdf6ef;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.5rem;
}
.specialty-icon i {
font-size: 2.5rem;
color: #8b4513;
}
/* Chef Section */
.chef-section {
background: #fdf6ef;
border-radius: 40px;
padding: 3rem;
}
.chef-img {
border-radius: 30px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
border: 5px solid white;
}
/* Testimonial */
.testi-card {
background: white;
border-radius: 24px;
padding: 2rem;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
border-left: 5px solid #8b4513;
}
.stars {
color: #fbbf24;
letter-spacing: 3px;
}
.avatar-testi {
width: 60px;
height: 60px;
border-radius: 50%;
object-fit: cover;
border: 3px solid #d4a373;
}
/* Reservation Box */
.reservation-box {
background: linear-gradient(135deg, #8b4513 0%, #6b3410 100%);
border-radius: 40px;
padding: 3.5rem 2.5rem;
color: white;
}
.reservation-input {
background: rgba(255,255,255,0.1);
border: 1px solid rgba(255,255,255,0.3);
color: white;
border-radius: 50px;
padding: 0.9rem 1.5rem;
}
.reservation-input::placeholder {
color: rgba(255,255,255,0.7);
}
.reservation-input:focus {
background: rgba(255,255,255,0.15);
color: white;
box-shadow: none;
border-color: #d4a373;
}
.btn-reserve {
background: #d4a373;
color: #2c1810;
border-radius: 50px;
padding: 0.9rem 2rem;
font-weight: 700;
border: none;
}
.btn-reserve:hover {
background: #c4925f;
}
/* Footer */
footer {
background: #1a0f0a;
color: #d4c4b5;
padding: 3rem 0 2rem;
}
.footer-link {
color: #b8a898;
text-decoration: none;
font-size: 0.95rem;
transition: color 0.2s;
}
.footer-link:hover {
color: #d4a373;
}
.social-icon {
background: #2c1810;
width: 45px;
height: 45px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #d4c4b5;
transition: all 0.2s;
}
.social-icon:hover {
background: #8b4513;
color: white;
}
.opening-hours {
background: #2c1810;
border-radius: 20px;
padding: 1.5rem;
}
/* Responsive */
@media (max-width: 768px) {
.hero-title {
font-size: 2.8rem;
}
.hero-subtitle {
font-size: 1.1rem;
}
.section-title {
font-size: 2rem;
}
.chef-section {
padding: 2rem 1rem;
}
.reservation-box {
padding: 2rem 1.5rem;
}
}
@media (max-width: 576px) {
.hero-title {
font-size: 2.2rem;
}
}
</style>
</head>
<body>
<!-- ==================== NAVBAR ==================== -->
<nav class="navbar navbar-expand-lg sticky-top">
<div class="container">
<a class="navbar-brand" href="#">
<i class="bi bi-egg-fried me-2"></i>Le Gourmet<span>.</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="#">La Carte</a></li>
<li class="nav-item"><a class="nav-link" href="#">Menu</a></li>
<li class="nav-item"><a class="nav-link" href="#">À propos</a></li>
<li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
</ul>
<a href="#" class="btn btn-reservation"><i class="bi bi-calendar-check me-2"></i>Réserver</a>
</div>
</div>
</nav>
<!-- ==================== HERO ==================== -->
<section class="hero-section d-flex align-items-center">
<div class="container">
<div class="row">
<div class="col-lg-7 text-white">
<span class="badge bg-light bg-opacity-25 text-white mb-3 px-4 py-2 rounded-pill">
<i class="bi bi-star-fill me-1"></i> Restaurant étoilé 2026
</span>
<h1 class="hero-title">Une expérience<br>gustative unique</h1>
<p class="hero-subtitle mb-4">Cuisine française raffinée dans un cadre d'exception</p>
<div class="d-flex gap-3">
<a href="#" class="btn btn-light btn-lg rounded-pill px-4 py-3 fw-semibold">Découvrir la carte</a>
<a href="#" class="btn btn-outline-light btn-lg rounded-pill px-4 py-3">Réserver une table</a>
</div>
</div>
</div>
</div>
</section>
<!-- ==================== NOS SPÉCIALITÉS ==================== -->
<section class="container my-5 pt-4">
<div class="text-center mb-5">
<span class="section-subtitle">Notre signature</span>
<h2 class="section-title">Les spécialités du chef</h2>
<div class="divider"></div>
<p class="text-secondary">Des plats préparés avec passion et des produits de saison</p>
</div>
<div class="row g-4">
<!-- Menu 1 -->
<div class="col-md-6 col-lg-4">
<div class="menu-card">
<div class="menu-img-wrapper">
<img src="https://images.pexels.com/photos/1640777/pexels-photo-1640777.jpeg?auto=compress&cs=tinysrgb&w=600"
alt="Plat 1" onerror="this.src='https://placehold.co/400x300/8b4513/white?text=Plat'">
<span class="price-badge">42€</span>
</div>
<div class="card-body p-4">
<span class="menu-category"><i class="bi bi-egg-fried me-1"></i> Entrée</span>
<h5 class="fw-bold mt-2 mb-2">Foie gras maison</h5>
<p class="text-secondary small">Chutney de figues, pain brioché toasté</p>
<a href="#" class="text-decoration-none fw-semibold" style="color:#8b4513;">Commander <i class="bi bi-arrow-right"></i></a>
</div>
</div>
</div>
<!-- Menu 2 -->
<div class="col-md-6 col-lg-4">
<div class="menu-card">
<div class="menu-img-wrapper">
<img src="https://images.pexels.com/photos/769289/pexels-photo-769289.jpeg?auto=compress&cs=tinysrgb&w=600"
alt="Plat 2" onerror="this.src='https://placehold.co/400x300/6b3410/white?text=Plat'">
<span class="price-badge">58€</span>
</div>
<div class="card-body p-4">
<span class="menu-category"><i class="bi bi-cup-straw me-1"></i> Plat</span>
<h5 class="fw-bold mt-2 mb-2">Filet de bœuf Rossini</h5>
<p class="text-secondary small">Sauce truffée, écrasé de pommes de terre</p>
<a href="#" class="text-decoration-none fw-semibold" style="color:#8b4513;">Commander <i class="bi bi-arrow-right"></i></a>
</div>
</div>
</div>
<!-- Menu 3 -->
<div class="col-md-6 col-lg-4">
<div class="menu-card">
<div class="menu-img-wrapper">
<img src="https://images.pexels.com/photos/1126359/pexels-photo-1126359.jpeg?auto=compress&cs=tinysrgb&w=600"
alt="Plat 3" onerror="this.src='https://placehold.co/400x300/d4a373/white?text=Dessert'">
<span class="price-badge">16€</span>
</div>
<div class="card-body p-4">
<span class="menu-category"><i class="bi bi-cake2 me-1"></i> Dessert</span>
<h5 class="fw-bold mt-2 mb-2">Tarte fine aux pommes</h5>
<p class="text-secondary small">Glace vanille bourbon, caramel beurre salé</p>
<a href="#" class="text-decoration-none fw-semibold" style="color:#8b4513;">Commander <i class="bi bi-arrow-right"></i></a>
</div>
</div>
</div>
</div>
</section>
<!-- ==================== SERVICES ==================== -->
<section class="bg-light py-5 mt-4">
<div class="container">
<div class="row g-4">
<div class="col-md-4">
<div class="specialty-card">
<div class="specialty-icon">
<i class="bi bi-flower1"></i>
</div>
<h5 class="fw-bold mb-3">Produits frais</h5>
<p class="text-secondary small">Ingrédients de saison sélectionnés auprès de producteurs locaux.</p>
</div>
</div>
<div class="col-md-4">
<div class="specialty-card">
<div class="specialty-icon">
<i class="bi bi-cup-hot"></i>
</div>
<h5 class="fw-bold mb-3">Carte des vins</h5>
<p class="text-secondary small">Plus de 150 références, conseils personnalisés par notre sommelier.</p>
</div>
</div>
<div class="col-md-4">
<div class="specialty-card">
<div class="specialty-icon">
<i class="bi bi-calendar-heart"></i>
</div>
<h5 class="fw-bold mb-3">Événements privés</h5>
<p class="text-secondary small">Organisation de repas d'affaires, anniversaires et mariages.</p>
</div>
</div>
</div>
</div>
</section>
<!-- ==================== LE CHEF ==================== -->
<section class="container my-5 py-4">
<div class="chef-section">
<div class="row align-items-center">
<div class="col-lg-5 mb-4 mb-lg-0">
<img src="https://images.pexels.com/photos/3814446/pexels-photo-3814446.jpeg?auto=compress&cs=tinysrgb&w=600"
alt="Chef" class="img-fluid chef-img"
onerror="this.src='https://placehold.co/500x600/8b4513/white?text=Chef+Antoine'">
</div>
<div class="col-lg-7">
<span class="section-subtitle">Notre chef étoilé</span>
<h2 class="section-title mb-3">Antoine Dubois</h2>
<p class="lead text-secondary">"La cuisine est une histoire de passion et de partage."</p>
<p class="text-secondary">Formé dans les plus grandes maisons parisiennes, le chef Antoine Dubois vous propose une cuisine française revisitée, alliant tradition et modernité. Chaque assiette raconte une histoire, celle des produits nobles sublimés par des associations audacieuses.</p>
<div class="d-flex gap-4 mt-4">
<div><i class="bi bi-trophy-fill" style="color:#d4a373;"></i> <strong>1 étoile Michelin</strong> (2024-2026)</div>
<div><i class="bi bi-award-fill" style="color:#d4a373;"></i> <strong>Meilleur Chef</strong> Gault&Millau 2025</div>
</div>
</div>
</div>
</div>
</section>
<!-- ==================== TÉMOIGNAGES ==================== -->
<section class="container my-5">
<div class="text-center mb-5">
<span class="section-subtitle">Avis clients</span>
<h2 class="section-title">Ce qu'ils en pensent</h2>
<div class="divider"></div>
</div>
<div class="row g-4">
<div class="col-md-6">
<div class="testi-card">
<div class="stars mb-3">★★★★★</div>
<p class="fst-italic mb-4">"Un dîner d'exception ! Le foie gras était divin, le service impeccable. Nous reviendrons sans hésiter."</p>
<div class="d-flex align-items-center gap-3">
<img src="https://placehold.co/100/d4a373/white?text=SB" class="avatar-testi" alt="avatar" onerror="this.src='https://placehold.co/100/8b4513/white?text=S'">
<div>
<h6 class="fw-bold mb-0">Sophie B.</h6>
<small class="text-secondary">Dîner d'anniversaire</small>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="testi-card">
<div class="stars mb-3">★★★★★</div>
<p class="fst-italic mb-4">"Le cadre est magnifique et la cuisine raffinée. Le chef est venu nous saluer, un vrai moment de plaisir."</p>
<div class="d-flex align-items-center gap-3">
<img src="https://placehold.co/100/d4a373/white?text=MD" class="avatar-testi" alt="avatar" onerror="this.src='https://placehold.co/100/6b3410/white?text=M'">
<div>
<h6 class="fw-bold mb-0">Marc D.</h6>
<small class="text-secondary">Repas d'affaires</small>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ==================== RÉSERVATION ==================== -->
<section class="container mb-5">
<div class="reservation-box">
<div class="row align-items-center">
<div class="col-lg-7">
<h3 class="fw-bold text-white display-6">Réservez votre table</h3>
<p class="text-white-50 mb-lg-0">Une expérience gastronomique vous attend. Réservez en ligne en quelques clics.</p>
<div class="opening-hours mt-4 d-inline-block">
<p class="mb-1 text-white"><i class="bi bi-clock me-2"></i> <strong>Horaires d'ouverture</strong></p>
<p class="small text-white-50 mb-1">Mardi - Samedi : 12h00 - 14h30 / 19h00 - 22h30</p>
<p class="small text-white-50 mb-0">Dimanche - Lundi : Fermé</p>
</div>
</div>
<div class="col-lg-5">
<div class="bg-white bg-opacity-10 p-4 rounded-4">
<div class="mb-3">
<input type="text" class="form-control reservation-input" placeholder="Nom complet">
</div>
<div class="mb-3">
<input type="email" class="form-control reservation-input" placeholder="Email">
</div>
<div class="row mb-3">
<div class="col-6">
<input type="date" class="form-control reservation-input" aria-label="Date de réservation">
</div>
<div class="col-6">
<select class="form-select reservation-input" aria-label="Heure de réservation">
<option selected>Heure</option>
<option>12:00</option>
<option>12:30</option>
<option>19:00</option>
<option>20:00</option>
</select>
</div>
</div>
<div class="mb-3">
<input type="number" class="form-control reservation-input" placeholder="Nombre de personnes" min="1" max="10">
</div>
<button class="btn btn-reserve w-100"><i class="bi bi-calendar-check me-2"></i>Réserver maintenant</button>
</div>
</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-egg-fried me-2"></i>Le Gourmet<span style="color:#d4a373;">.</span></h4>
<p class="small" style="color:#b8a898;">Restaurant gastronomique français depuis 2018.</p>
<p class="small" style="color:#b8a898;"><i class="bi bi-geo-alt-fill me-1"></i> 24 rue de la Gastronomie, 75008 Paris</p>
<p class="small" style="color:#b8a898;"><i class="bi bi-telephone me-1"></i> +33 1 42 68 99 00</p>
<div class="d-flex gap-3 mt-3">
<a href="#" class="social-icon" aria-label="Instagram"><i class="bi bi-instagram"></i></a>
<a href="#" class="social-icon" aria-label="Facebook"><i class="bi bi-facebook"></i></a>
<a href="#" class="social-icon" aria-label="Tripadvisor"><i class="bi bi-tripadvisor"></i></a>
</div>
</div>
<div class="col-6 col-md-2">
<h6 class="text-white fw-semibold">Menu</h6>
<ul class="list-unstyled">
<li class="mb-2"><a href="#" class="footer-link">La carte</a></li>
<li class="mb-2"><a href="#" class="footer-link">Menus dégustation</a></li>
<li class="mb-2"><a href="#" class="footer-link">Carte des vins</a></li>
<li class="mb-2"><a href="#" class="footer-link">Brunch</a></li>
</ul>
</div>
<div class="col-6 col-md-2">
<h6 class="text-white fw-semibold">À propos</h6>
<ul class="list-unstyled">
<li class="mb-2"><a href="#" class="footer-link">Notre histoire</a></li>
<li class="mb-2"><a href="#" class="footer-link">Le chef</a></li>
<li class="mb-2"><a href="#" class="footer-link">Recrutement</a></li>
<li class="mb-2"><a href="#" class="footer-link">Presse</a></li>
</ul>
</div>
<div class="col-md-3">
<h6 class="text-white fw-semibold">Newsletter</h6>
<p class="small" style="color:#b8a898;">Recevez nos actualités et offres spéciales.</p>
<div class="input-group">
<input type="email" class="form-control bg-dark border-0 text-white" placeholder="Email" aria-label="Email" style="border-radius: 20px 0 0 20px;">
<button class="btn" style="background:#8b4513; color:white; border-radius: 0 20px 20px 0;" aria-label="Envoyer"><i class="bi bi-send"></i></button>
</div>
</div>
</div>
<hr class="opacity-25 mt-4">
<div class="d-flex flex-wrap justify-content-between small" style="color:#8a7a6c;">
<span>© 2026 Le Gourmet. Tous droits réservés.</span>
<span>
<a href="#" class="footer-link me-3">Mentions légales</a>
<a href="#" class="footer-link">Politique de confidentialité</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>