|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Savory Bites | Fine Dining Experience</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
|
|
|
.hero { |
|
|
background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80'); |
|
|
background-size: cover; |
|
|
background-position: center; |
|
|
} |
|
|
|
|
|
.menu-item:hover .menu-img { |
|
|
transform: scale(1.05); |
|
|
} |
|
|
|
|
|
.menu-img { |
|
|
transition: transform 0.3s ease; |
|
|
} |
|
|
|
|
|
.testimonial-card { |
|
|
box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
|
|
|
.reservation-form input, .reservation-form select { |
|
|
border-bottom: 2px solid #e5e7eb; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.reservation-form input:focus, .reservation-form select:focus { |
|
|
border-bottom-color: #d1a054; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="font-sans text-gray-800"> |
|
|
|
|
|
<header class="fixed w-full bg-white shadow-md z-50"> |
|
|
<div class="container mx-auto px-4 py-3 flex justify-between items-center"> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-utensils text-3xl text-amber-600 mr-2"></i> |
|
|
<h1 class="text-2xl font-bold text-gray-800">Savory <span class="text-amber-600">Bites</span></h1> |
|
|
</div> |
|
|
|
|
|
<nav class="hidden md:flex space-x-8"> |
|
|
<a href="#home" class="text-amber-600 font-medium">Home</a> |
|
|
<a href="#about" class="hover:text-amber-600 transition">About</a> |
|
|
<a href="#menu" class="hover:text-amber-600 transition">Menu</a> |
|
|
<a href="#gallery" class="hover:text-amber-600 transition">Gallery</a> |
|
|
<a href="#contact" class="hover:text-amber-600 transition">Contact</a> |
|
|
</nav> |
|
|
|
|
|
<div class="hidden md:flex items-center space-x-4"> |
|
|
<a href="#reservation" class="bg-amber-600 hover:bg-amber-700 text-white px-6 py-2 rounded-full transition">Reservations</a> |
|
|
<div class="relative"> |
|
|
<i class="fas fa-shopping-cart text-xl text-gray-700 cursor-pointer"></i> |
|
|
<span class="absolute -top-2 -right-2 bg-amber-600 text-white text-xs w-5 h-5 flex items-center justify-center rounded-full">0</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<button id="mobile-menu-button" class="md:hidden text-gray-700"> |
|
|
<i class="fas fa-bars text-2xl"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="mobile-menu" class="hidden md:hidden bg-white py-4 px-4 shadow-lg"> |
|
|
<div class="flex flex-col space-y-4"> |
|
|
<a href="#home" class="text-amber-600 font-medium">Home</a> |
|
|
<a href="#about" class="hover:text-amber-600 transition">About</a> |
|
|
<a href="#menu" class="hover:text-amber-600 transition">Menu</a> |
|
|
<a href="#gallery" class="hover:text-amber-600 transition">Gallery</a> |
|
|
<a href="#contact" class="hover:text-amber-600 transition">Contact</a> |
|
|
<a href="#reservation" class="bg-amber-600 hover:bg-amber-700 text-white px-6 py-2 rounded-full transition text-center">Reservations</a> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<section id="home" class="hero min-h-screen flex items-center pt-20"> |
|
|
<div class="container mx-auto px-4 text-center md:text-left"> |
|
|
<div class="max-w-2xl mx-auto md:mx-0"> |
|
|
<span class="text-amber-400 font-medium tracking-wider">PREMIUM RESTAURANT</span> |
|
|
<h1 class="text-4xl md:text-6xl font-bold text-white mt-4 mb-6">Experience Culinary <span class="text-amber-400">Excellence</span></h1> |
|
|
<p class="text-gray-200 text-lg mb-8">Discover our carefully crafted menu featuring the finest ingredients and innovative culinary techniques.</p> |
|
|
<div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4 justify-center md:justify-start"> |
|
|
<a href="#menu" class="bg-amber-600 hover:bg-amber-700 text-white px-8 py-3 rounded-full transition">View Menu</a> |
|
|
<a href="#reservation" class="bg-transparent border-2 border-white hover:bg-white hover:text-gray-800 text-white px-8 py-3 rounded-full transition">Book a Table</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="about" class="py-20 bg-gray-50"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="flex flex-col md:flex-row items-center"> |
|
|
<div class="md:w-1/2 mb-12 md:mb-0 md:pr-12"> |
|
|
<div class="relative"> |
|
|
<img src="https://images.unsplash.com/photo-1555396273-367ea4eb4db5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" alt="Restaurant interior" class="rounded-lg shadow-xl w-full"> |
|
|
<div class="absolute -bottom-6 -right-6 bg-white p-4 rounded-lg shadow-lg hidden md:block"> |
|
|
<div class="flex items-center"> |
|
|
<div class="bg-amber-100 p-3 rounded-full mr-4"> |
|
|
<i class="fas fa-award text-amber-600 text-2xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="font-bold text-gray-800">Award Winning</p> |
|
|
<p class="text-sm text-gray-600">Best Restaurant 2023</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="md:w-1/2"> |
|
|
<span class="text-amber-600 font-medium tracking-wider">OUR STORY</span> |
|
|
<h2 class="text-3xl md:text-4xl font-bold text-gray-800 mt-2 mb-6">Crafting Culinary Experiences Since 1995</h2> |
|
|
<p class="text-gray-600 mb-6">Founded by Chef Michael Savory, our restaurant has been serving exceptional cuisine for over 25 years. What began as a small bistro has grown into one of the city's most celebrated dining destinations.</p> |
|
|
<p class="text-gray-600 mb-8">We pride ourselves on using locally-sourced, seasonal ingredients to create dishes that are both innovative and rooted in tradition. Our team of passionate chefs works tirelessly to deliver unforgettable dining experiences.</p> |
|
|
<div class="grid grid-cols-2 gap-6 mb-8"> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-seedling text-amber-600 text-xl mr-3"></i> |
|
|
<span class="font-medium">Fresh Ingredients</span> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-wine-glass-alt text-amber-600 text-xl mr-3"></i> |
|
|
<span class="font-medium">Extensive Wine List</span> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-utensils text-amber-600 text-xl mr-3"></i> |
|
|
<span class="font-medium">Seasonal Menus</span> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-user-tie text-amber-600 text-xl mr-3"></i> |
|
|
<span class="font-medium">Expert Chefs</span> |
|
|
</div> |
|
|
</div> |
|
|
<a href="#reservation" class="inline-block bg-amber-600 hover:bg-amber-700 text-white px-8 py-3 rounded-full transition">Reserve a Table</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 bg-white"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="text-center mb-16"> |
|
|
<span class="text-amber-600 font-medium tracking-wider">SPECIAL SELECTIONS</span> |
|
|
<h2 class="text-3xl md:text-4xl font-bold text-gray-800 mt-2">Our Signature Dishes</h2> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="bg-gray-50 rounded-xl overflow-hidden shadow-lg hover:shadow-xl transition"> |
|
|
<div class="h-48 overflow-hidden"> |
|
|
<img src="https://images.unsplash.com/photo-1544025162-d76694265947?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1469&q=80" alt="Grilled Salmon" class="w-full h-full object-cover"> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<div class="flex justify-between items-start mb-3"> |
|
|
<h3 class="text-xl font-bold text-gray-800">Grilled Salmon</h3> |
|
|
<span class="bg-amber-100 text-amber-800 px-3 py-1 rounded-full text-sm font-medium">$24</span> |
|
|
</div> |
|
|
<p class="text-gray-600 mb-4">Fresh Atlantic salmon with lemon butter sauce, served with seasonal vegetables.</p> |
|
|
<button class="text-amber-600 font-medium flex items-center"> |
|
|
Add to Order <i class="fas fa-plus ml-2"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-50 rounded-xl overflow-hidden shadow-lg hover:shadow-xl transition"> |
|
|
<div class="h-48 overflow-hidden"> |
|
|
<img src="https://images.unsplash.com/photo-1559847844-5315695dadae?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1398&q=80" alt="Filet Mignon" class="w-full h-full object-cover"> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<div class="flex justify-between items-start mb-3"> |
|
|
<h3 class="text-xl font-bold text-gray-800">Filet Mignon</h3> |
|
|
<span class="bg-amber-100 text-amber-800 px-3 py-1 rounded-full text-sm font-medium">$38</span> |
|
|
</div> |
|
|
<p class="text-gray-600 mb-4">Premium cut beef tenderloin with red wine reduction and truffle mashed potatoes.</p> |
|
|
<button class="text-amber-600 font-medium flex items-center"> |
|
|
Add to Order <i class="fas fa-plus ml-2"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-50 rounded-xl overflow-hidden shadow-lg hover:shadow-xl transition"> |
|
|
<div class="h-48 overflow-hidden"> |
|
|
<img src="https://images.unsplash.com/photo-1473093295043-cdd812d0e601?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Truffle Pasta" class="w-full h-full object-cover"> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<div class="flex justify-between items-start mb-3"> |
|
|
<h3 class="text-xl font-bold text-gray-800">Truffle Pasta</h3> |
|
|
<span class="bg-amber-100 text-amber-800 px-3 py-1 rounded-full text-sm font-medium">$22</span> |
|
|
</div> |
|
|
<p class="text-gray-600 mb-4">Handmade fettuccine with wild mushrooms, black truffle, and parmesan cream.</p> |
|
|
<button class="text-amber-600 font-medium flex items-center"> |
|
|
Add to Order <i class="fas fa-plus ml-2"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="text-center mt-12"> |
|
|
<a href="#menu" class="inline-block border-2 border-amber-600 text-amber-600 hover:bg-amber-600 hover:text-white px-8 py-3 rounded-full transition">View Full Menu</a> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="menu" class="py-20 bg-gray-50"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="text-center mb-16"> |
|
|
<span class="text-amber-600 font-medium tracking-wider">DELICIOUS OFFERINGS</span> |
|
|
<h2 class="text-3xl md:text-4xl font-bold text-gray-800 mt-2">Our Menu</h2> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex justify-center mb-12"> |
|
|
<div class="inline-flex rounded-lg border border-gray-200 bg-white shadow-sm"> |
|
|
<button data-category="starters" class="menu-tab active px-6 py-3 border-r border-gray-200 text-amber-600 font-medium">Starters</button> |
|
|
<button data-category="mains" class="menu-tab px-6 py-3 border-r border-gray-200 text-gray-600 hover:text-amber-600">Main Courses</button> |
|
|
<button data-category="desserts" class="menu-tab px-6 py-3 text-gray-600 hover:text-amber-600">Desserts</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="menu-content"> |
|
|
|
|
|
<div id="starters" class="menu-category grid md:grid-cols-2 gap-8"> |
|
|
|
|
|
<div class="menu-item bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition"> |
|
|
<div class="flex"> |
|
|
<div class="w-24 h-24 overflow-hidden rounded-lg mr-6"> |
|
|
<img src="https://images.unsplash.com/photo-1510626176961-4b21dde57d97?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" alt="Bruschetta" class="menu-img w-full h-full object-cover"> |
|
|
</div> |
|
|
<div class="flex-1"> |
|
|
<div class="flex justify-between items-start mb-2"> |
|
|
<h3 class="text-lg font-bold text-gray-800">Bruschetta</h3> |
|
|
<span class="text-amber-600 font-medium">$9</span> |
|
|
</div> |
|
|
<p class="text-gray-600 text-sm">Toasted bread topped with tomatoes, garlic, and fresh basil.</p> |
|
|
<button class="mt-3 text-amber-600 text-sm font-medium flex items-center"> |
|
|
Add to Order <i class="fas fa-plus ml-1"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="menu-item bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition"> |
|
|
<div class="flex"> |
|
|
<div class="w-24 h-24 overflow-hidden rounded-lg mr-6"> |
|
|
<img src="https://images.unsplash.com/photo-1601050690597-df0568f70950?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Calamari" class="menu-img w-full h-full object-cover"> |
|
|
</div> |
|
|
<div class="flex-1"> |
|
|
<div class="flex justify-between items-start mb-2"> |
|
|
<h3 class="text-lg font-bold text-gray-800">Crispy Calamari</h3> |
|
|
<span class="text-amber-600 font-medium">$12</span> |
|
|
</div> |
|
|
<p class="text-gray-600 text-sm">Lightly fried squid served with lemon aioli and marinara sauce.</p> |
|
|
<button class="mt-3 text-amber-600 text-sm font-medium flex items-center"> |
|
|
Add to Order <i class="fas fa-plus ml-1"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="menu-item bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition"> |
|
|
<div class="flex"> |
|
|
<div class="w-24 h-24 overflow-hidden rounded-lg mr-6"> |
|
|
<img src="https://images.unsplash.com/photo-1603105037880-880cd4edfb1d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" alt="Soup" class="menu-img w-full h-full object-cover"> |
|
|
</div> |
|
|
<div class="flex-1"> |
|
|
<div class="flex justify-between items-start mb-2"> |
|
|
<h3 class="text-lg font-bold text-gray-800">Creamy Mushroom Soup</h3> |
|
|
<span class="text-amber-600 font-medium">$8</span> |
|
|
</div> |
|
|
<p class="text-gray-600 text-sm">Wild mushroom soup with truffle oil and crusty bread.</p> |
|
|
<button class="mt-3 text-amber-600 text-sm font-medium flex items-center"> |
|
|
Add to Order <i class="fas fa-plus ml-1"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="menu-item bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition"> |
|
|
<div class="flex"> |
|
|
<div class="w-24 h-24 overflow-hidden rounded-lg mr-6"> |
|
|
<img src="https://images.unsplash.com/photo-1601050690771-4d15a6033c7b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" alt="Salad" class="menu-img w-full h-full object-cover"> |
|
|
</div> |
|
|
<div class="flex-1"> |
|
|
<div class="flex justify-between items-start mb-2"> |
|
|
<h3 class="text-lg font-bold text-gray-800">Caprese Salad</h3> |
|
|
<span class="text-amber-600 font-medium">$10</span> |
|
|
</div> |
|
|
<p class="text-gray-600 text-sm">Fresh mozzarella, tomatoes, and basil drizzled with balsamic glaze.</p> |
|
|
<button class="mt-3 text-amber-600 text-sm font-medium flex items-center"> |
|
|
Add to Order <i class="fas fa-plus ml-1"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="mains" class="menu-category hidden grid md:grid-cols-2 gap-8"> |
|
|
|
|
|
<div class="menu-item bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition"> |
|
|
<div class="flex"> |
|
|
<div class="w-24 h-24 overflow-hidden rounded-lg mr-6"> |
|
|
<img src="https://images.unsplash.com/photo-1544025162-d76694265947?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1469&q=80" alt="Salmon" class="menu-img w-full h-full object-cover"> |
|
|
</div> |
|
|
<div class="flex-1"> |
|
|
<div class="flex justify-between items-start mb-2"> |
|
|
<h3 class="text-lg font-bold text-gray-800">Grilled Salmon</h3> |
|
|
<span class="text-amber-600 font-medium">$24</span> |
|
|
</div> |
|
|
<p class="text-gray-600 text-sm">Atlantic salmon with lemon butter sauce and seasonal vegetables.</p> |
|
|
<button class="mt-3 text-amber-600 text-sm font-medium flex items-center"> |
|
|
Add to Order <i class="fas fa-plus ml-1"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="menu-item bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition"> |
|
|
<div class="flex"> |
|
|
<div class="w-24 h-24 overflow-hidden rounded-lg mr-6"> |
|
|
<img src="https://images.unsplash.com/photo-1559847844-5315695dadae?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1398&q=80" alt="Steak" class="menu-img w-full h-full object-cover"> |
|
|
</div> |
|
|
<div class="flex-1"> |
|
|
<div class="flex justify-between items-start mb-2"> |
|
|
<h3 class="text-lg font-bold text-gray-800">Filet Mignon</h3> |
|
|
<span class="text-amber-600 font-medium">$38</span> |
|
|
</div> |
|
|
<p class="text-gray-600 text-sm">Premium beef tenderloin with red wine reduction and truffle mash.</p> |
|
|
<button class="mt-3 text-amber-600 text-sm font-medium flex items-center"> |
|
|
Add to Order <i class="fas fa-plus ml-1"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="menu-item bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition"> |
|
|
<div class="flex"> |
|
|
<div class="w-24 h-24 overflow-hidden rounded-lg mr-6"> |
|
|
<img src="https://images.unsplash.com/photo-1603105037880-880cd4edfb1d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" alt="Pasta" class="menu-img w-full h-full object-cover"> |
|
|
</div> |
|
|
<div class="flex-1"> |
|
|
<div class="flex justify-between items-start mb-2"> |
|
|
<h3 class="text-lg font-bold text-gray-800">Truffle Pasta</h3> |
|
|
<span class="text-amber-600 font-medium">$22</span> |
|
|
</div> |
|
|
<p class="text-gray-600 text-sm">Handmade fettuccine with wild mushrooms and black truffle.</p> |
|
|
<button class="mt-3 text-amber-600 text-sm font-medium flex items-center"> |
|
|
Add to Order <i class="fas fa-plus ml-1"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="menu-item bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition"> |
|
|
<div class="flex"> |
|
|
<div class="w-24 h-24 overflow-hidden rounded-lg mr-6"> |
|
|
<img src="https://images.unsplash.com/photo-1601050690801-28c5d54c8ab1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" alt="Risotto" class="menu-img w-full h-full object-cover"> |
|
|
</div> |
|
|
<div class="flex-1"> |
|
|
<div class="flex justify-between items-start mb-2"> |
|
|
<h3 class="text-lg font-bold text-gray-800">Mushroom Risotto</h3> |
|
|
<span class="text-amber-600 font-medium">$20</span> |
|
|
</div> |
|
|
<p class="text-gray-600 text-sm">Creamy arborio rice with wild mushrooms and parmesan.</p> |
|
|
<button class="mt-3 text-amber-600 text-sm font-medium flex items-center"> |
|
|
Add to Order <i class="fas fa-plus ml-1"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="desserts" class="menu-category hidden grid md:grid-cols-2 gap-8"> |
|
|
|
|
|
<div class="menu-item bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition"> |
|
|
<div class="flex"> |
|
|
<div class="w-24 h-24 overflow-hidden rounded-lg mr-6"> |
|
|
<img src="https://images.unsplash.com/photo-1551024506-0bccd828d307?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1557&q=80" alt="Chocolate Cake" class="menu-img w-full h-full object-cover"> |
|
|
</div> |
|
|
<div class="flex-1"> |
|
|
<div class="flex justify-between items-start mb-2"> |
|
|
<h3 class="text-lg font-bold text-gray-800">Chocolate Lava Cake</h3> |
|
|
<span class="text-amber-600 font-medium">$9</span> |
|
|
</div> |
|
|
<p class="text-gray-600 text-sm">Warm chocolate cake with a molten center, served with vanilla ice cream.</p> |
|
|
<button class="mt-3 text-amber-600 text-sm font-medium flex items-center"> |
|
|
Add to Order <i class="fas fa-plus ml-1"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="menu-item bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition"> |
|
|
<div class="flex"> |
|
|
<div class="w-24 h-24 overflow-hidden rounded-lg mr-6"> |
|
|
<img src="https://images.unsplash.com/photo-1497034825429-c343d7c6a68f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" alt="Cheesecake" class="menu-img w-full h-full object-cover"> |
|
|
</div> |
|
|
<div class="flex-1"> |
|
|
<div class="flex justify-between items-start mb-2"> |
|
|
<h3 class="text-lg font-bold text-gray-800">New York Cheesecake</h3> |
|
|
<span class="text-amber-600 font-medium">$8</span> |
|
|
</div> |
|
|
<p class="text-gray-600 text-sm">Classic creamy cheesecake with berry compote.</p> |
|
|
<button class="mt-3 text-amber-600 text-sm font-medium flex items-center"> |
|
|
Add to Order <i class="fas fa-plus ml-1"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="menu-item bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition"> |
|
|
<div class="flex"> |
|
|
<div class="w-24 h-24 overflow-hidden rounded-lg mr-6"> |
|
|
<img src="https://images.unsplash.com/photo-1562440499-64c9a111f4aa?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" alt="Tiramisu" class="menu-img w-full h-full object-cover"> |
|
|
</div> |
|
|
<div class="flex-1"> |
|
|
<div class="flex justify-between items-start mb-2"> |
|
|
<h3 class="text-lg font-bold text-gray-800">Tiramisu</h3> |
|
|
<span class="text-amber-600 font-medium">$8</span> |
|
|
</div> |
|
|
<p class="text-gray-600 text-sm">Layers of coffee-soaked ladyfingers and mascarpone cream.</p> |
|
|
<button class="mt-3 text-amber-600 text-sm font-medium flex items-center"> |
|
|
Add to Order <i class="fas fa-plus ml-1"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="menu-item bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition"> |
|
|
<div class="flex"> |
|
|
<div class="w-24 h-24 overflow-hidden rounded-lg mr-6"> |
|
|
<img src="https://images.unsplash.com/photo-1571115177098-24ec42ed204d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" alt="Creme Brulee" class="menu-img w-full h-full object-cover"> |
|
|
</div> |
|
|
<div class="flex-1"> |
|
|
<div class="flex justify-between items-start mb-2"> |
|
|
<h3 class="text-lg font-bold text-gray-800">Crème Brûlée</h3> |
|
|
<span class="text-amber-600 font-medium">$9</span> |
|
|
</div> |
|
|
<p class="text-gray-600 text-sm">Rich custard topped with a layer of caramelized sugar.</p> |
|
|
<button class="mt-3 text-amber-600 text-sm font-medium flex items-center"> |
|
|
Add to Order <i class="fas fa-plus ml-1"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="gallery" class="py-16 bg-white"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="text-center mb-12"> |
|
|
<span class="text-amber-600 font-medium tracking-wider">VISUAL DELIGHTS</span> |
|
|
<h2 class="text-3xl md:text-4xl font-bold text-gray-800 mt-2">Our Gallery</h2> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-4"> |
|
|
<div class="overflow-hidden rounded-lg h-48"> |
|
|
<img src="https://images.unsplash.com/photo-1544025162-d76694265947?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1469&q=80" alt="Food 1" class="w-full h-full object-cover hover:scale-105 transition duration-300"> |
|
|
</div> |
|
|
<div class="overflow-hidden rounded-lg h-48"> |
|
|
<img src="https://images.unsplash.com/photo-1559847844-5315695dadae?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1398&q=80" alt="Food 2" class="w-full h-full object-cover hover:scale-105 transition duration-300"> |
|
|
</div> |
|
|
<div class="overflow-hidden rounded-lg h-48"> |
|
|
<img src="https://images.unsplash.com/photo-1473093295043-cdd812d0e601?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Food 3" class="w-full h-full object-cover hover:scale-105 transition duration-300"> |
|
|
</div> |
|
|
<div class="overflow-hidden rounded-lg h-48"> |
|
|
<img src="https://images.unsplash.com/photo-1553105038-2fcd8455b861?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" alt="Food 4" class="w-full h-full object-cover hover:scale-105 transition duration-300"> |
|
|
</div> |
|
|
<div class="overflow-hidden rounded-lg h-48"> |
|
|
<img src="https://images.unsplash.com/photo-1559847844-5315695dadae?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1398&q=80" alt="Food 5" class="w-full h-full object-cover hover:scale-105 transition duration-300"> |
|
|
</div> |
|
|
<div class="overflow-hidden rounded-lg h-48"> |
|
|
<img src="https://images.unsplash.com/photo-1553105038-2fcd8455b861?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" alt="Food 6" class="w-full h-full object-cover hover:scale-105 transition duration-300"> |
|
|
</div> |
|
|
<div class="overflow-hidden rounded-lg h-48"> |
|
|
<img src="https://images.unsplash.com/photo-1473093295043-cdd812d0e601?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Food 7" class="w-full h-full object-cover hover:scale-105 transition duration-300"> |
|
|
</div> |
|
|
<div class="overflow-hidden rounded-lg h-48"> |
|
|
<img src="https://images.unsplash.com/photo-1544025162-d76694265947?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1469&q=80" alt="Food 8" class="w-full h-full object-cover hover:scale-105 transition duration-300"> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-20 bg-amber-50"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="text-center mb-16"> |
|
|
<span class="text-amber-600 font-medium tracking-wider">HAPPY CUSTOMERS</span> |
|
|
<h2 class="text-3xl md:text-4xl font-bold text-gray-800 mt-2">What Our Guests Say</h2> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="testimonial-card bg-white p-8 rounded-xl"> |
|
|
<div class="flex items-center mb-6"> |
|
|
<div class="w-16 h-16 rounded-full overflow-hidden mr-4"> |
|
|
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Sarah J." class="w-full h-full object-cover"> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold text-gray-800">Sarah J.</h4> |
|
|
<div class="flex text-amber-400"> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-gray-600 italic">"The filet mignon was cooked to perfection, and the service was impeccable. We celebrated our anniversary here and it was truly memorable."</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="testimonial-card bg-white p-8 rounded-xl"> |
|
|
<div class="flex items-center mb-6"> |
|
|
<div class="w-16 h-16 rounded-full overflow-hidden mr-4"> |
|
|
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Michael T." class="w-full h-full object-cover"> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold text-gray-800">Michael T.</h4> |
|
|
<div class="flex text-amber-400"> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-gray-600 italic">"As a food critic, I've dined at many restaurants, but Savory Bites stands out. The truffle pasta is divine and the wine pairing suggestions were spot on."</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="testimonial-card bg-white p-8 rounded-xl"> |
|
|
<div class="flex items-center mb-6"> |
|
|
<div class="w-16 h-16 rounded-full overflow-hidden mr-4"> |
|
|
<img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Emily R." class="w-full h-full object-cover"> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold text-gray-800">Emily R.</h4> |
|
|
<div class="flex text-amber-400"> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star-half-alt"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-gray-600 italic">"The ambiance is perfect for date night. We loved the chocolate lava cake - it's the best dessert I've had in years! Will definitely be back."</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="reservation" class="py-20 bg-gray-800 text-white"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="flex flex-col md:flex-row"> |
|
|
<div class="md:w-1/2 mb-12 md:mb-0 md:pr-12"> |
|
|
<span class="text-amber-400 font-medium tracking-wider">RESERVE A TABLE</span> |
|
|
<h2 class="text-3xl md:text-4xl font-bold mt-2 mb-6">Book Your Dining Experience</h2> |
|
|
<p class="text-gray-300 mb-8">Secure your table at Savory Bites for an unforgettable culinary journey. Our reservation team is available to accommodate your dining preferences and special requests.</p> |
|
|
|
|
|
<div class="grid grid-cols-2 gap-6 mb-8"> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-phone-alt text-amber-400 text-xl mr-4"></i> |
|
|
<div> |
|
|
<p class="text-gray-400 text-sm">RESERVATIONS</p> |
|
|
<p class="font-medium">(555) 123-4567</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-clock text-amber-400 text-xl mr-4"></i> |
|
|
<div> |
|
|
<p class="text-gray-400 text-sm">OPENING HOURS</p> |
|
|
<p class="font-medium">Mon-Sun: 11AM - 10PM</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-map-marker-alt text-amber-400 text-xl mr-4"></i> |
|
|
<div> |
|
|
<p class="text-gray-400 text-sm">LOCATION</p> |
|
|
<p class="font-medium">123 Gourmet Ave, Foodville</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-utensils text-amber-400 text-xl mr-4"></i> |
|
|
<div> |
|
|
<p class="text-gray-400 text-sm">CUISINE</p> |
|
|
<p class="font-medium">Contemporary International</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gray-700 p-6 rounded-lg"> |
|
|
<h3 class="text-xl font-bold mb-4">Private Dining & Events</h3> |
|
|
<p class="text-gray-300 mb-4">Our private dining room accommodates up to 30 guests for special occasions, corporate events, and celebrations.</p> |
|
|
<a href="#" class="text-amber-400 font-medium hover:text-amber-300 transition">Inquire Now <i class="fas fa-arrow-right ml-1"></i></a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="md:w-1/2"> |
|
|
<form class="reservation-form bg-white text-gray-800 p-8 rounded-lg shadow-xl"> |
|
|
<h3 class="text-2xl font-bold mb-6">Make a Reservation</h3> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6"> |
|
|
<div> |
|
|
<label class="block text-gray-700 mb-2">Full Name</label> |
|
|
<input type="text" class="w-full py-2 outline-none" placeholder="Your Name"> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-gray-700 mb-2">Email</label> |
|
|
<input type="email" class="w-full py-2 outline-none" placeholder="Your Email"> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-gray-700 mb-2">Phone</label> |
|
|
<input type="tel" class="w-full py-2 outline-none" placeholder="Your Phone"> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-gray-700 mb-2">Number of Guests</label> |
|
|
<select class="w-full py-2 outline-none"> |
|
|
<option>1 person</option> |
|
|
<option>2 people</option> |
|
|
<option>3 people</option> |
|
|
<option>4 people</option> |
|
|
<option>5+ people</option> |
|
|
</select> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-gray-700 mb-2">Date</label> |
|
|
<input type="date" class="w-full py-2 outline-none"> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-gray-700 mb-2">Time</label> |
|
|
<select class="w-full py-2 outline-none"> |
|
|
<option>11:00 AM</option> |
|
|
<option>12:00 PM</option> |
|
|
<option>1:00 PM</option> |
|
|
<option>2:00 PM</option> |
|
|
<option>5:00 PM</option> |
|
|
<option>6:00 PM</option> |
|
|
<option>7:00 PM</option> |
|
|
<option>8:00 PM</option> |
|
|
<option>9:00 PM</option> |
|
|
</select> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<label class="block text-gray-700 mb-2">Special Requests</label> |
|
|
<textarea class="w-full py-2 outline-none border-b-2 border-gray-200" rows="3" placeholder="Dietary restrictions, allergies, celebrations, etc."></textarea> |
|
|
</div> |
|
|
|
|
|
<button type="submit" class="w-full bg-amber-600 hover:bg-amber-700 text-white py-3 rounded-full transition">Book Table</button> |
|
|
</form> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="contact" class="py-20 bg-white"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="text-center mb-16"> |
|
|
<span class="text-amber-600 font-medium tracking-wider">GET IN TOUCH</span> |
|
|
<h2 class="text-3xl md:text-4xl font-bold text-gray-800 mt-2">Contact Us</h2> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-12"> |
|
|
<div class="bg-gray-50 p-8 rounded-lg text-center"> |
|
|
<div class="bg-amber-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4"> |
|
|
<i class="fas fa-map-marker-alt text-amber-600 text-2xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-gray-800 mb-2">Address</h3> |
|
|
<p class="text-gray-600">123 Gourmet Avenue<br>Foodville, CA 90210</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gray-50 p-8 rounded-lg text-center"> |
|
|
<div class="bg-amber-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4"> |
|
|
<i class="fas fa-phone-alt text-amber-600 text-2xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-gray-800 mb-2">Phone</h3> |
|
|
<p class="text-gray-600">Reservations: (555) 123-4567<br>General Inquiries: (555) 765-4321</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gray-50 p-8 rounded-lg text-center"> |
|
|
<div class="bg-amber-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4"> |
|
|
<i class="fas fa-envelope text-amber-600 text-2xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-gray-800 mb-2">Email</h3> |
|
|
<p class="text-gray-600">reservations@savorybites.com<br>info@savorybites.com</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="max-w-4xl mx-auto bg-gray-50 p-8 rounded-lg"> |
|
|
<form> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6"> |
|
|
<div> |
|
|
<label class="block text-gray-700 mb-2">Your Name</label> |
|
|
<input type="text" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-500"> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-gray-700 mb-2">Your Email</label> |
|
|
<input type="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-500"> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-gray-700 mb-2">Subject</label> |
|
|
<input type="text" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-500"> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-gray-700 mb-2">Phone</label> |
|
|
<input type="tel" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-500"> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mb-6"> |
|
|
<label class="block text-gray-700 mb-2">Message</label> |
|
|
<textarea class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-500" rows="5"></textarea> |
|
|
</div> |
|
|
<button type="submit" class="bg-amber-600 hover:bg-amber-700 text-white px-8 py-3 rounded-full transition">Send Message</button> |
|
|
</form> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 bg-amber-50"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="max-w-4xl mx-auto text-center"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Join Our Newsletter</h2> |
|
|
<p class="text-gray-600 mb-8">Subscribe to receive updates on special events, seasonal menus, and exclusive offers.</p> |
|
|
|
|
|
<form class="flex flex-col sm:flex-row max-w-md mx-auto sm:max-w-xl"> |
|
|
<input type="email" placeholder="Your email address" class="flex-grow px-6 py-3 rounded-full sm:rounded-r-none border-2 border-amber-300 focus:outline-none focus:border-amber-500 mb-3 sm:mb-0"> |
|
|
<button type="submit" class="bg-amber-600 hover:bg-amber-700 text-white px-8 py-3 rounded-full sm:rounded-l-none transition">Subscribe</button> |
|
|
</form> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<footer class="bg-gray-900 text-white py-12"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8"> |
|
|
<div> |
|
|
<div class="flex items-center mb-4"> |
|
|
<i class="fas fa-utensils text-3xl text-amber-600 mr-2"></i> |
|
|
<h3 class="text-2xl font-bold">Savory <span class="text-amber-600">Bites</span></h3> |
|
|
</div> |
|
|
<p class="text-gray-400 mb-4">Experience culinary excellence at our award-winning restaurant in the heart of the city.</p> |
|
|
<div class="flex space-x-4"> |
|
|
<a href="#" class="text-gray-400 hover:text-amber-400 transition"><i class="fab fa-facebook-f"></i></a> |
|
|
<a href="#" class="text-gray-400 hover:text-amber-400 transition"><i class="fab fa-twitter"></i></a> |
|
|
<a href="#" class="text-gray-400 hover:text-amber-400 transition"><i class="fab fa-instagram"></i></a> |
|
|
<a href="#" class="text-gray-400 hover:text-amber-400 transition"><i class="fab fa-tripadvisor"></i></a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h4 class="text-lg font-bold mb-4">Quick Links</h4> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#home" class="text-gray-400 hover:text-amber-400 transition">Home</a></li> |
|
|
<li><a href="#about" class="text-gray-400 hover:text-amber-400 transition">About Us</a></li> |
|
|
<li><a href="#menu" class="text-gray-400 hover:text-amber-400 transition">Our Menu</a></li> |
|
|
<li><a href="#gallery" class="text-gray-400 hover:text-amber-400 transition">Gallery</a></li> |
|
|
<li><a href="#contact" class="text-gray-400 hover:text-amber-400 transition">Contact</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h4 class="text-lg font-bold mb-4">Opening Hours</h4> |
|
|
<ul class="space-y-2 text-gray-400"> |
|
|
<li class="flex justify-between"><span>Monday - Friday</span> <span>11AM - 10PM</span></li> |
|
|
<li class="flex justify-between"><span>Saturday</span> <span>10AM - 11PM</span></li> |
|
|
<li class="flex justify-between"><span>Sunday</span> <span>10AM - 9PM</span></li> |
|
|
<li class="pt-4 text-amber-400">Happy Hour: 3PM - 6PM Daily</li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h4 class="text-lg font-bold mb-4">Contact Info</h4> |
|
|
<ul class="space-y-3 text-gray-400"> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-map-marker-alt text-amber-400 mt-1 mr-3"></i> |
|
|
<span>123 Gourmet Avenue, Foodville, CA 90210</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-phone-alt text-amber-400 mr-3"></i> |
|
|
<span>(555) 123-4567</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-envelope text-amber-400 mr-3"></i> |
|
|
<span>info@savorybites.com</span> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="border-t border-gray-800 pt-8 flex flex-col md:flex-row justify-between items-center"> |
|
|
<p class="text-gray-500 mb-4 md:mb-0">© 2023 Savory Bites. All rights reserved.</p> |
|
|
<div class="flex space-x-6"> |
|
|
<a href="#" class="text-gray-500 hover:text-amber-400 transition">Privacy Policy</a> |
|
|
<a href="#" class="text-gray-500 hover:text-amber-400 transition">Terms of Service</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
|
|
|
<button id="back-to-top" class="fixed bottom-8 right-8 bg-amber-600 text-white w-12 h-12 rounded-full flex items-center justify-center shadow-lg hover:bg-amber-700 transition hidden"> |
|
|
<i class="fas fa-arrow-up"></i> |
|
|
</button> |
|
|
|
|
|
<script> |
|
|
|
|
|
const mobileMenuButton = document.getElementById('mobile-menu-button'); |
|
|
const mobileMenu = document.getElementById('mobile-menu'); |
|
|
|
|
|
mobileMenuButton.addEventListener('click', () => { |
|
|
mobileMenu.classList.toggle('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
const menuTabs = document.querySelectorAll('.menu-tab'); |
|
|
const menuCategories = document.querySelectorAll('.menu-category'); |
|
|
|
|
|
menuTabs.forEach(tab => { |
|
|
tab.addEventListener('click', () => { |
|
|
|
|
|
menuTabs.forEach(t => t.classList.remove('active', 'text-amber-600')); |
|
|
tab.classList.add('active', 'text-amber-600'); |
|
|
|
|
|
|
|
|
menuCategories.forEach(category => { |
|
|
category.classList.add('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
const categoryId = tab.getAttribute('data-category'); |
|
|
document.getElementById(categoryId).classList.remove('hidden'); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
const backToTopButton = document.getElementById('back-to-top'); |
|
|
|
|
|
window.addEventListener('scroll', () => { |
|
|
if (window.pageYOffset > 300) { |
|
|
backToTopButton.classList.remove('hidden'); |
|
|
} else { |
|
|
backToTopButton.classList.add('hidden'); |
|
|
} |
|
|
}); |
|
|
|
|
|
backToTopButton.addEventListener('click', () => { |
|
|
window.scrollTo({ top: 0, behavior: 'smooth' }); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
|
|
anchor.addEventListener('click', function(e) { |
|
|
e.preventDefault(); |
|
|
|
|
|
const targetId = this.getAttribute('href'); |
|
|
const targetElement = document.querySelector(targetId); |
|
|
|
|
|
if (targetElement) { |
|
|
window.scrollTo({ |
|
|
top: targetElement.offsetTop - 80, |
|
|
behavior: 'smooth' |
|
|
}); |
|
|
|
|
|
|
|
|
mobileMenu.classList.add('hidden'); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
const addToCartButtons = document.querySelectorAll('button:contains("Add to Order")'); |
|
|
const cartCount = document.querySelector('.fa-shopping-cart + span'); |
|
|
let cartItems = 0; |
|
|
|
|
|
addToCartButtons.forEach(button => { |
|
|
button.addEventListener('click', () => { |
|
|
cartItems++; |
|
|
cartCount.textContent = cartItems; |
|
|
|
|
|
|
|
|
cartCount.classList.add('animate-ping'); |
|
|
setTimeout(() => { |
|
|
cartCount.classList.remove('animate-ping'); |
|
|
}, 500); |
|
|
|
|
|
|
|
|
const notification = document.createElement('div'); |
|
|
notification.className = 'fixed bottom-4 left-1/2 transform -translate-x-1/2 bg-green-500 text-white px-4 py-2 rounded-lg shadow-lg'; |
|
|
notification.textContent = 'Item added to cart!'; |
|
|
document.body.appendChild(notification); |
|
|
|
|
|
setTimeout(() => { |
|
|
notification.classList.add('opacity-0', 'translate-y-4', 'transition-all', 'duration-300'); |
|
|
setTimeout(() => { |
|
|
notification.remove(); |
|
|
}, 300); |
|
|
}, 2000); |
|
|
}); |
|
|
}); |
|
|
</script> |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=falls/hadi" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
