194 lines
12 KiB
HTML
194 lines
12 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>The Hearthstone Bistro - Authentic Comfort Cooking</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<style>
|
|
:root {
|
|
--primary-red: #A52A2A; /* Deep earthy red/brown */
|
|
--secondary-gold: #D4AF37; /* Muted gold for accents */
|
|
--dark-charcoal: #2C2C2C;
|
|
}
|
|
body {
|
|
font-family: 'Georgia', serif;
|
|
background-color: #F7F3F0;
|
|
color: var(--dark-charcoal);
|
|
}
|
|
.btn-primary {
|
|
background-color: var(--primary-red);
|
|
transition: background-color 0.3s, transform 0.1s;
|
|
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
|
|
}
|
|
.btn-primary:hover {
|
|
background-color: #8B0000;
|
|
transform: translateY(-2px);
|
|
}
|
|
.hero-card {
|
|
background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.5)), url('https://images.unsplash.com/photo-1552566267-238c7d627068?crop=entropy&cs=tinysrc&fit=max&fm=jpg&ixid=M301NTUyOXwwfDF8c2VhcmNofDEyfHxmb3J0Zm9yZCUyMGJhbmRyYW50fGVufDB8fHx8MTcxNzgyNTA1OXww&ixlib=rb-4.0.3&ixwdp=q2&format=jpg&natural=true');
|
|
background-size: cover;
|
|
background-position: center;
|
|
height: 70vh;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.menu-item-card {
|
|
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
|
border-bottom: 3px solid var(--secondary-gold);
|
|
}
|
|
.menu-item-card:hover {
|
|
transform: translateY(-5px);
|
|
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
|
|
}
|
|
.focus-ring {
|
|
outline: 4px solid var(--secondary-gold);
|
|
outline-offset: 2px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<header class="bg-white shadow-lg sticky top-0 z-10">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="flex justify-between items-center h-20">
|
|
<!-- Logo/Brand -->
|
|
<div class="text-3xl font-extrabold tracking-wider text-[var(--primary-red)]">
|
|
The Hearthstone Bistro
|
|
</div>
|
|
|
|
<!-- Navigation -->
|
|
<nav class="hidden md:flex space-x-8">
|
|
<a href="#menu" class="text-lg text-gray-700 hover:text-[var(--primary-red)] transition duration-150 p-2">Menu</a>
|
|
<a href="#about" class="text-lg text-gray-700 hover:text-[var(--primary-red)] transition duration-150 p-2">Our Story</a>
|
|
<a href="#gallery" class="text-lg text-gray-700 hover:text-[var(--primary-red)] transition duration-150 p-2">Gallery</a>
|
|
<a href="#contact" class="text-lg text-gray-700 hover:text-[var(--primary-red)] transition duration-150 p-2">Reservations</a>
|
|
</nav>
|
|
|
|
<!-- Mobile Menu Button -->
|
|
<div class="md:hidden">
|
|
<button id="menu-button" class="text-gray-700 hover:text-[var(--primary-red)] p-2 rounded-md focus:outline-none focus:ring-2 focus:ring-yellow-600">
|
|
<svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Mobile Menu Drawer (Hidden by default) -->
|
|
<div id="mobile-menu" class="md:hidden hidden bg-white shadow-xl border-t">
|
|
<div class="px-4 pt-2 pb-3 space-y-1">
|
|
<a href="#menu" class="block px-3 py-2 text-base font-medium text-gray-700 hover:bg-gray-100 border-l-4 border-transparent hover:border-[var(--primary-red)] focus:border-[var(--primary-red)]">Menu</a>
|
|
<a href="#about" class="block px-3 py-2 text-base font-medium text-gray-700 hover:bg-gray-100 border-l-4 border-transparent hover:border-[var(--primary-red)] focus:border-[var(--primary-red)]">Our Story</a>
|
|
<a href="#gallery" class="block px-3 py-2 text-base font-medium text-gray-700 hover:bg-gray-100 border-l-4 border-transparent hover:border-[var(--primary-red)] focus:border-[var(--primary-red)]">Gallery</a>
|
|
<a href="#contact" class="block px-3 py-2 text-base font-medium text-gray-700 hover:bg-gray-100 border-l-4 border-transparent hover:border-[var(--primary-red)] focus:border-[var(--primary-red)]">Reservations</a>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Hero Section -->
|
|
<main class="hero-card">
|
|
<div class="text-center text-white p-4 max-w-4xl mx-auto">
|
|
<h1 class="text-6xl md:text-8xl font-extrabold tracking-tight mb-4 animate-fadeInUp">
|
|
Taste the Warmth.
|
|
</h1>
|
|
<p class="text-xl md:text-2xl mb-8 font-serif italic opacity-90">
|
|
Where tradition meets the plate. Rustic Italian-inspired fare built on generations of genuine, heartfelt cooking.
|
|
</p>
|
|
<a href="#menu" class="inline-block px-10 py-4 text-xl font-bold text-white bg-[var(--primary-red)] rounded-lg shadow-xl focus:outline-none focus:ring-4 focus:ring-yellow-300 transform hover:scale-[1.02] transition duration-300">
|
|
View Today's Menu
|
|
</a>
|
|
</div>
|
|
</main>
|
|
|
|
<!-- About Section -->
|
|
<section id="about" class="py-16 md:py-24 bg-white">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
|
<div>
|
|
<h2 class="text-5xl font-bold mb-6 text-[var(--primary-red)] border-l-8 border-[var(--secondary-gold)] pl-3">
|
|
Our Story: A Return to Roots
|
|
</h2>
|
|
<p class="text-lg mb-6 leading-relaxed text-gray-600">
|
|
Hearthstone was born from a simple desire: to bring back the taste of home cooking. We believe that the best meals are made with patience, high-quality ingredients, and a whole lot of love. Our recipes are inspired by slow-cooked traditions, using local produce whenever possible.
|
|
</p>
|
|
<p class="text-lg leading-relaxed text-gray-600 mb-8 border-l-4 border-gray-200 pl-4 italic">
|
|
"More than just a meal, we offer a gathering place—a place to linger, to connect, and to savor the moment."
|
|
</p>
|
|
<a href="#contact" class="text-xl font-semibold text-[var(--primary-red)] hover:underline focus:text-black focus:ring-2 focus:ring-[var(--primary-red)] transition duration-150">
|
|
Read our full philosophy →
|
|
</a>
|
|
</div>
|
|
<!-- Image Placeholder - Rustic Kitchen Scene -->
|
|
<div class="rounded-xl shadow-2xl overflow-hidden transform hover:scale-[1.01] transition duration-500">
|
|
<img src="https://images.unsplash.com/photo-1555921400-02c35b9319c4?crop=entropy&cs=tinysrc&fit=max&fm=jpg&ixid=M301NTUyOXwwfDF8c2VhcmNofDEyfHxmb3J0Zm9yZCUyMG5ldyUyMG1ldmVufGVufDB8fHx8MTcxNzgyNTY2NHww&ixlib=rb-4.0.3&ixwdp=q2&format=jpg&natural=true"
|
|
alt="Rustic kitchen scene with simmering pots and wooden utensils"
|
|
class="w-full h-96 object-cover transition duration-500 ease-in-out">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Menu Section -->
|
|
<section id="menu" class="py-20 md:py-32 bg-gray-50">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="text-center mb-16">
|
|
<h2 class="text-6xl font-serif font-extrabold text-[var(--primary-red)] mb-3">
|
|
Our Culinary Offerings
|
|
</h2>
|
|
<p class="text-xl text-gray-600">
|
|
Crafted with tradition, seasoned with passion. Explore our seasonal favorites.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-10">
|
|
|
|
<!-- Menu Item 1: Signature Pasta -->
|
|
<div class="menu-item-card bg-white p-8 rounded-xl shadow-lg border-t-4 border-[var(--primary-red)] focus:outline-none focus:ring-4 focus:ring-opacity-50 focus:ring-[var(--primary-red)]" tabindex="0">
|
|
<h3 class="text-3xl font-bold text-[var(--primary-red)] mb-3">Slow-Braised Lamb Ragu</h3>
|
|
<p class="text-gray-600 mb-4 italic">Our signature slow-simmered ragu, rich with San Marzano tomatoes and tender chunks of lamb.</p>
|
|
<div class="flex justify-between items-center pt-2 border-t border-gray-200">
|
|
<span class="text-2xl font-bold text-gray-800">Pasta Fresca</span>
|
|
<span class="text-2xl font-bold text-[var(--primary-red)]">$24.00</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Menu Item 2: Rustic Main -->
|
|
<div class="menu-item-card bg-white p-8 rounded-xl shadow-lg border-t-4 border-[var(--primary-red)] focus:outline-none focus:ring-4 focus:ring-opacity-50 focus:ring-[var(--primary-red)]" tabindex="0">
|
|
<h3 class="text-3xl font-bold text-[var(--primary-red)] mb-3">Wood-Fired Herb Chicken</h3>
|
|
<p class="text-gray-600 mb-4 italic">Chicken roasted over mesquite wood, paired with roasted root vegetables and fresh herbs.</p>
|
|
<div class="flex justify-between items-center pt-2 border-t border-gray-200">
|
|
<span class="text-2xl font-bold text-gray-800">Served with Polenta</span>
|
|
<span class="text-2xl font-bold text-[var(--primary-red)]">$22.50</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Menu Item 3: Comfort Dish -->
|
|
<div class="menu-item-card bg-white p-8 rounded-xl shadow-lg border-t-4 border-[var(--primary-red)] focus:outline-none focus:ring-4 focus:ring-opacity-50 focus:ring-[var(--primary-red)]" tabindex="0">
|
|
<h3 class="text-3xl font-bold text-[var(--primary-red)] mb-3">Rustic Vegetable Lasagna</h3>
|
|
<p class="text-gray-600 mb-4 italic">Layers of seasonal vegetables, creamy ricotta, and our house-made tomato blend.</p>
|
|
<div class="flex justify-between items-center pt-2 border-t border-gray-200">
|
|
<span class="text-2xl font-bold text-gray-800">Vegetarian Main</span>
|
|
<span class="text-2xl font-bold text-[var(--primary-red)]">$21.00</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Call to Action Footer -->
|
|
<div class="text-center mt-16 p-8 bg-white rounded-xl shadow-inner border-l-8 border-[var(--secondary-gold)]">
|
|
<p class="text-2xl mb-4 font-serif">Curious about wine pairings or daily specials?</p>
|
|
<a href="#contact" class="inline-flex items-center px-8 py-3 text-lg font-semibold text-white bg-[var(--secondary-gold)] rounded-full hover:bg-yellow-700 focus:outline-none focus:ring-4 focus:ring-yellow-500 transition duration-200 shadow-md">
|
|
Book Your Table Now
|
|
<svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Gallery Section -->
|
|
<section id="gallery" class="py-20 md:py-24 bg-gray-100">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="text-center mb-12">
|
|
<h2 class="text-5xl font-serif font-bold text-[var(--primary-red)]">
|
|
A Glimpse Inside
|
|
</h2>
|
|
<p class="text-lg text-gray-600 mt-2">The ambiance, the ingredients, the moments.</p>
|
|
</div><div style="position:fixed;right:12px;bottom:12px;z-index:2147483647;background:rgba(17,24,39,.92);color:#fff;padding:8px 10px;border-radius:10px;font:12px/1.3 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;box-shadow:0 8px 20px rgba(0,0,0,.28)">Generated in 29.49s</div> |