restaurant bistro fine-dining menu reservation elegant elegant
Restaurant Bistro
Elegant fine dining restaurant page with menu, reservations, and location details.
elegant Responsive
Live Preview
Sections
navbarheromenuabouthourslocationreservation-ctafooter
Patterns used
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>La Maison — Fine Dining Restaurant</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://webspire.de/webspire-tokens.css">
<link rel="stylesheet" href="https://webspire.de/webspire-components.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&family=Inter:wght@300;400;500;600&display=swap');
.font-display { font-family: 'Playfair Display', serif; }
body { font-family: 'Inter', sans-serif; }
/* Brand tokens — warm dark bistro: stone/amber */
:root {
--ws-color-accent: oklch(0.65 0.13 75); /* amber-400 */
--ws-color-accent-hover: oklch(0.72 0.13 75); /* amber-300 */
--ws-color-accent-subtle: oklch(0.55 0.10 55); /* amber-700 */
--ws-color-surface: oklch(0.22 0.01 60); /* stone-950 */
--ws-color-surface-alt: oklch(0.28 0.01 60); /* stone-900 */
--ws-color-text: oklch(1 0 0);
--ws-color-text-muted: oklch(0.70 0.01 60); /* stone-300 */
}
/* glass-frosted snippet — used on hero search */
.glass-frosted {
--glass-blur: 12px;
--glass-opacity: 0.15;
--glass-border-opacity: 0.2;
background: rgb(255 255 255 / var(--glass-opacity));
backdrop-filter: blur(var(--glass-blur));
-webkit-backdrop-filter: blur(var(--glass-blur));
border: 1px solid rgb(255 255 255 / var(--glass-border-opacity));
box-shadow: 0 4px 30px rgb(0 0 0 / 0.1);
}
@media (prefers-color-scheme: dark) {
.glass-frosted {
--glass-opacity: 0.1;
background: rgb(0 0 0 / var(--glass-opacity));
border-color: rgb(255 255 255 / 0.1);
}
}
@supports not (backdrop-filter: blur(1px)) {
.glass-frosted { background: rgb(240 240 240 / 0.92); }
}
/* Template-specific helpers */
.menu-divider { background: linear-gradient(90deg, transparent, #d4a574, transparent); height: 1px; }
</style>
</head>
<body class="bg-stone-50 text-stone-900 antialiased">
<!-- Navbar -->
<nav class="ws-navbar sticky top-0 z-50 bg-stone-950/95 backdrop-blur-sm border-b border-stone-800" aria-label="Main navigation">
<div class="max-w-6xl mx-auto flex items-center justify-between px-4 sm:px-6 py-4">
<a href="#" class="font-display text-2xl text-white tracking-wide">La Maison</a>
<ul class="hidden md:flex items-center gap-8 text-sm text-stone-300">
<li><a href="#menu" class="hover:text-amber-400 transition-colors">Menu</a></li>
<li><a href="#about" class="hover:text-amber-400 transition-colors">About</a></li>
<li><a href="#hours" class="hover:text-amber-400 transition-colors">Hours</a></li>
<li><a href="#location" class="hover:text-amber-400 transition-colors">Location</a></li>
</ul>
<a href="#reserve" class="hidden sm:inline-flex items-center px-5 py-2 text-sm font-medium text-stone-950 bg-amber-400 rounded hover:bg-amber-300 transition-colors">Reserve a Table</a>
<button class="md:hidden text-white p-2" aria-label="Open menu">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 6h16M4 12h16M4 18h16"/></svg>
</button>
</div>
</nav>
<!-- Hero -->
<section class="ws-hero relative min-h-[80vh] flex items-center justify-center bg-gradient-to-br from-stone-900 via-stone-800 to-amber-950">
<div class="absolute inset-0 bg-[radial-gradient(ellipse_at_top_right,rgba(180,130,70,0.15),transparent_60%)]"></div>
<div class="relative z-10 text-center px-4 max-w-3xl mx-auto">
<p class="text-amber-400 text-sm uppercase tracking-[0.3em] mb-4">Est. 1987</p>
<h1 class="font-display text-5xl sm:text-6xl lg:text-7xl text-white leading-tight mb-6">An Experience for Every Sense</h1>
<p class="text-stone-300 text-lg sm:text-xl max-w-xl mx-auto mb-10 leading-relaxed">Seasonal French cuisine crafted with locally sourced ingredients, served in an intimate atmosphere in the heart of the city.</p>
<div class="flex flex-col sm:flex-row gap-4 justify-center">
<a href="#reserve" class="px-8 py-3.5 text-sm font-semibold text-stone-950 bg-amber-400 rounded hover:bg-amber-300 transition-colors">Reserve a Table</a>
<a href="#menu" class="px-8 py-3.5 text-sm font-semibold text-white border border-stone-600 rounded hover:border-amber-400 hover:text-amber-400 transition-colors">View Our Menu</a>
</div>
</div>
</section>
<!-- Menu -->
<section id="menu" class="ws-cards py-24 px-4">
<div class="max-w-4xl mx-auto text-center mb-16">
<p class="text-amber-700 text-sm uppercase tracking-[0.2em] mb-3">Curated Selections</p>
<h2 class="font-display text-4xl sm:text-5xl mb-4">Our Menu</h2>
<p class="text-stone-500 max-w-lg mx-auto">Each dish tells a story of tradition, seasonality, and craftsmanship.</p>
</div>
<div class="max-w-3xl mx-auto space-y-16">
<!-- Starters -->
<div>
<h3 class="font-display text-2xl text-center mb-2">Starters</h3>
<div class="menu-divider mb-8"></div>
<div class="space-y-6">
<div class="flex justify-between items-baseline gap-4">
<div>
<h4 class="font-medium">French Onion Soup</h4>
<p class="text-sm text-stone-500 mt-1">Caramelized onions, gruyère crouton, beef consommé</p>
</div>
<span class="text-amber-800 font-display text-lg shrink-0">$16</span>
</div>
<div class="flex justify-between items-baseline gap-4">
<div>
<h4 class="font-medium">Tuna Tartare</h4>
<p class="text-sm text-stone-500 mt-1">Yellowfin tuna, avocado mousse, sesame tuile, ponzu</p>
</div>
<span class="text-amber-800 font-display text-lg shrink-0">$22</span>
</div>
<div class="flex justify-between items-baseline gap-4">
<div>
<h4 class="font-medium">Burrata & Heirloom Tomato</h4>
<p class="text-sm text-stone-500 mt-1">Fresh burrata, vine-ripened tomatoes, basil oil, fleur de sel</p>
</div>
<span class="text-amber-800 font-display text-lg shrink-0">$19</span>
</div>
</div>
</div>
<!-- Mains -->
<div>
<h3 class="font-display text-2xl text-center mb-2">Mains</h3>
<div class="menu-divider mb-8"></div>
<div class="space-y-6">
<div class="flex justify-between items-baseline gap-4">
<div>
<h4 class="font-medium">Filet Mignon</h4>
<p class="text-sm text-stone-500 mt-1">8oz center cut, truffle jus, pommes purée, seasonal vegetables</p>
</div>
<span class="text-amber-800 font-display text-lg shrink-0">$48</span>
</div>
<div class="flex justify-between items-baseline gap-4">
<div>
<h4 class="font-medium">Pan-Seared Branzino</h4>
<p class="text-sm text-stone-500 mt-1">Mediterranean sea bass, lemon beurre blanc, fennel, capers</p>
</div>
<span class="text-amber-800 font-display text-lg shrink-0">$42</span>
</div>
<div class="flex justify-between items-baseline gap-4">
<div>
<h4 class="font-medium">Duck Confit</h4>
<p class="text-sm text-stone-500 mt-1">Slow-cooked leg, cherry gastrique, roasted root vegetables</p>
</div>
<span class="text-amber-800 font-display text-lg shrink-0">$39</span>
</div>
</div>
</div>
<!-- Desserts -->
<div>
<h3 class="font-display text-2xl text-center mb-2">Desserts</h3>
<div class="menu-divider mb-8"></div>
<div class="space-y-6">
<div class="flex justify-between items-baseline gap-4">
<div>
<h4 class="font-medium">Crème Brûlée</h4>
<p class="text-sm text-stone-500 mt-1">Madagascar vanilla, caramelized sugar crust</p>
</div>
<span class="text-amber-800 font-display text-lg shrink-0">$14</span>
</div>
<div class="flex justify-between items-baseline gap-4">
<div>
<h4 class="font-medium">Chocolate Fondant</h4>
<p class="text-sm text-stone-500 mt-1">Valrhona dark chocolate, salted caramel, vanilla ice cream</p>
</div>
<span class="text-amber-800 font-display text-lg shrink-0">$16</span>
</div>
<div class="flex justify-between items-baseline gap-4">
<div>
<h4 class="font-medium">Tarte Tatin</h4>
<p class="text-sm text-stone-500 mt-1">Caramelized apple, puff pastry, crème fraîche</p>
</div>
<span class="text-amber-800 font-display text-lg shrink-0">$15</span>
</div>
</div>
</div>
</div>
</section>
<!-- About -->
<section id="about" class="ws-blog py-24 px-4 bg-stone-900 text-white">
<div class="max-w-6xl mx-auto grid md:grid-cols-2 gap-12 items-center">
<div class="aspect-[4/3] bg-gradient-to-br from-stone-700 to-stone-800 rounded-lg flex items-center justify-center">
<span class="text-stone-500 text-sm">Restaurant Interior Photo</span>
</div>
<div>
<p class="text-amber-400 text-sm uppercase tracking-[0.2em] mb-3">Our Story</p>
<h2 class="font-display text-3xl sm:text-4xl mb-6">A Tradition of Excellence</h2>
<p class="text-stone-300 leading-relaxed mb-4">Founded in 1987 by Chef Antoine Moreau, La Maison has been a cornerstone of fine dining in the city for over three decades. What began as a small bistro with twelve tables has grown into one of the most celebrated dining destinations in the region.</p>
<p class="text-stone-300 leading-relaxed mb-6">Our philosophy is simple: source the finest seasonal ingredients, prepare them with respect and creativity, and serve them in an atmosphere that feels like home. Every dish on our menu reflects this commitment.</p>
<p class="font-display text-xl italic text-amber-400">"Cooking is an act of love."</p>
<p class="text-stone-400 text-sm mt-2">— Chef Antoine Moreau</p>
</div>
</div>
</section>
<!-- Hours -->
<section id="hours" class="ws-stats py-24 px-4">
<div class="max-w-4xl mx-auto text-center">
<p class="text-amber-700 text-sm uppercase tracking-[0.2em] mb-3">Plan Your Visit</p>
<h2 class="font-display text-4xl sm:text-5xl mb-12">Opening Hours</h2>
<div class="grid sm:grid-cols-3 gap-8 max-w-2xl mx-auto">
<div class="p-6 bg-white rounded-lg shadow-sm border border-stone-100">
<h3 class="font-display text-lg mb-3">Lunch</h3>
<p class="text-stone-600 text-sm">Tuesday – Friday</p>
<p class="text-stone-900 font-medium mt-1">12:00 – 14:30</p>
</div>
<div class="p-6 bg-white rounded-lg shadow-sm border border-stone-100">
<h3 class="font-display text-lg mb-3">Dinner</h3>
<p class="text-stone-600 text-sm">Tuesday – Saturday</p>
<p class="text-stone-900 font-medium mt-1">18:00 – 22:30</p>
</div>
<div class="p-6 bg-white rounded-lg shadow-sm border border-stone-100">
<h3 class="font-display text-lg mb-3">Sunday Brunch</h3>
<p class="text-stone-600 text-sm">Every Sunday</p>
<p class="text-stone-900 font-medium mt-1">10:30 – 15:00</p>
</div>
</div>
<p class="text-stone-500 text-sm mt-8">Closed on Mondays. Private events available upon request.</p>
</div>
</section>
<!-- Location -->
<section id="location" class="ws-contact py-24 px-4 bg-stone-100">
<div class="max-w-6xl mx-auto grid md:grid-cols-2 gap-12">
<div>
<p class="text-amber-700 text-sm uppercase tracking-[0.2em] mb-3">Find Us</p>
<h2 class="font-display text-3xl sm:text-4xl mb-6">Location</h2>
<div class="space-y-4 text-stone-600">
<div>
<h3 class="font-medium text-stone-900 mb-1">Address</h3>
<p>42 Rue de la Paix<br>Paris, 75002, France</p>
</div>
<div>
<h3 class="font-medium text-stone-900 mb-1">Reservations</h3>
<p>+33 1 42 60 34 12</p>
<p>reservations@lamaison.com</p>
</div>
<div>
<h3 class="font-medium text-stone-900 mb-1">Getting Here</h3>
<p>Métro: Opéra (Lines 3, 7, 8)<br>Valet parking available for dinner service</p>
</div>
</div>
</div>
<div class="aspect-[4/3] bg-stone-300 rounded-lg flex items-center justify-center">
<span class="text-stone-500 text-sm">Map / Location Image</span>
</div>
</div>
</section>
<!-- Reservation CTA -->
<section id="reserve" class="ws-cta py-24 px-4 bg-stone-950 text-white text-center">
<div class="max-w-2xl mx-auto">
<p class="text-amber-400 text-sm uppercase tracking-[0.2em] mb-3">Make It Special</p>
<h2 class="font-display text-4xl sm:text-5xl mb-4">Reserve Your Table</h2>
<p class="text-stone-400 mb-10">For parties of 6 or more, please call us directly. Online reservations available for up to 5 guests.</p>
<a href="#" class="inline-flex items-center px-10 py-4 text-sm font-semibold text-stone-950 bg-amber-400 rounded hover:bg-amber-300 transition-colors">Book Now on OpenTable</a>
</div>
</section>
<!-- Footer -->
<footer class="ws-footer bg-stone-950 border-t border-stone-800 py-12 px-4">
<div class="max-w-6xl mx-auto flex flex-col sm:flex-row items-center justify-between gap-6">
<a href="#" class="font-display text-xl text-white">La Maison</a>
<div class="flex gap-6">
<a href="#" class="text-stone-400 hover:text-amber-400 transition-colors" aria-label="Instagram">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z"/></svg>
</a>
<a href="#" class="text-stone-400 hover:text-amber-400 transition-colors" aria-label="Facebook">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg>
</a>
</div>
<p class="text-stone-500 text-sm">© 2026 La Maison. All rights reserved.</p>
</div>
</footer>
</body>
</html>Elegant fine dining restaurant template with Playfair Display typography, warm amber accents, and a full menu layout with starters, mains, and desserts. Includes sticky navbar, about section, opening hours, and location details.