ma / index.html
stryder4096's picture
- Initial Deployment
5e2580f verified
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mike Anderson's Restaurant - Louisiana Cuisine</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">
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700;800&family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
'cajun-red': '#8B0000',
'gold': '#D4AF37',
'cream': '#FFF8E1',
'dark-green': '#1A3C27',
},
fontFamily: {
'playfair': ['Playfair Display', 'serif'],
'poppins': ['Poppins', 'sans-serif'],
}
}
}
}
</script>
<style>
.hero-bg {
background-image: url('https://images.squarespace-cdn.com/content/v1/5b36b03f4611a07e438e9bb8/1531663199241-PECB0HLAEA7XBYRXUQ6L/Main+Header+MA1.jpg');
background-size: cover;
background-position: center;
}
.divider-bg {
background-image: url('https://images.squarespace-cdn.com/content/v1/5b36b03f4611a07e438e9bb8/1669868797476-H8HAFFT0QLNZHJRIGEZ8/banner-09.jpg');
background-size: cover;
background-position: center;
}
.tradition-bg {
background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('https://images.squarespace-cdn.com/content/v1/5b36b03f4611a07e438e9bb8/6fb1da2f-c7cd-476b-9370-cbef3bc348a7/IMG_3276.PNG');
background-size: cover;
background-position: center;
}
.location-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
</style>
</head>
<body class="font-poppins bg-cream text-dark-green">
<!-- Header -->
<header class="bg-cajun-red text-cream py-4 px-6 sticky top-0 z-50 shadow-lg">
<div class="container mx-auto flex flex-col md:flex-row justify-between items-center">
<div class="flex items-center mb-4 md:mb-0">
<h1 class="text-3xl font-playfair font-bold">MIKE ANDERSON'S</h1>
<span class="text-gold mx-2">|</span>
<p class="text-sm italic">Louisiana Seafood</p>
</div>
<nav class="flex flex-wrap justify-center gap-4 md:gap-8">
<a href="#locations" class="hover:text-gold transition">Locations</a>
<a href="#menu" class="hover:text-gold transition">Menu</a>
<a href="#about" class="hover:text-gold transition">Our Story</a>
<a href="#reservations" class="hover:text-gold transition">Reservations</a>
</nav>
</div>
</header>
<!-- Hero Section -->
<section id="hero" class="hero-bg h-screen flex items-center relative">
<div class="absolute inset-0 bg-black bg-opacity-40"></div>
<div class="container mx-auto px-6 relative z-10 text-center text-cream">
<div class="max-w-3xl mx-auto">
<p class="text-gold font-semibold tracking-widest mb-4">THREE LEGENDARY LOCATIONS</p>
<h2 class="text-4xl md:text-6xl font-playfair font-bold mb-8">WHERE LOUISIANA</h2>
<div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-10">
<div class="bg-cajun-red bg-opacity-80 py-4 px-6 rounded-lg">
<i class="fas fa-glass-cheers text-3xl text-gold mb-2"></i>
<h3 class="text-xl font-semibold">CELEBRATES</h3>
</div>
<div class="bg-cajun-red bg-opacity-80 py-4 px-6 rounded-lg">
<i class="fas fa-users text-3xl text-gold mb-2"></i>
<h3 class="text-xl font-semibold">GATHERS TOGETHER</h3>
</div>
<div class="bg-cajun-red bg-opacity-80 py-4 px-6 rounded-lg">
<i class="fas fa-camera text-3xl text-gold mb-2"></i>
<h3 class="text-xl font-semibold">CREATES MEMORIES</h3>
</div>
<div class="bg-cajun-red bg-opacity-80 py-4 px-6 rounded-lg">
<i class="fas fa-heart text-3xl text-gold mb-2"></i>
<h3 class="text-xl font-semibold">IS FAMILY</h3>
</div>
</div>
<div class="flex flex-wrap justify-center gap-4">
<a href="https://mikeandersons.com/locations-baton-rouge" class="bg-gold text-cajun-red font-bold py-3 px-6 rounded-full hover:bg-opacity-90 transition">BATON ROUGE</a>
<a href="https://mikeandersons.com/locations-gonzales" class="bg-gold text-cajun-red font-bold py-3 px-6 rounded-full hover:bg-opacity-90 transition">GONZALES</a>
<a href="https://mikeandersons.com/locations-prairieville" class="bg-gold text-cajun-red font-bold py-3 px-6 rounded-full hover:bg-opacity-90 transition">PRAIRIEVILLE</a>
</div>
</div>
</div>
</section>
<!-- Call to Action -->
<section id="announcement-bar" class="bg-dark-green text-cream py-8">
<div class="container mx-auto px-6 text-center">
<h2 class="text-2xl md:text-3xl font-playfair font-bold mb-4">CALL FOR RESERVATIONS & TO-GEAUX ORDERS</h2>
<p class="max-w-2xl mx-auto mb-6">Experience authentic Louisiana cuisine at any of our three locations. Reserve your table or order your favorite dishes to-go!</p>
</div>
</section>
<!-- Locations Section -->
<section id="locations" class="py-16">
<div class="container mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-playfair font-bold text-center mb-12">OUR LOCATIONS</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<!-- Baton Rouge -->
<div class="location-card bg-white rounded-xl shadow-lg overflow-hidden transition-all duration-300">
<div class="h-48 overflow-hidden">
<img src="https://images.squarespace-cdn.com/content/v1/5b36b03f4611a07e438e9bb8/32542d97-b505-46e3-9ff2-67ebfc27f1a7/thelocations-07.png" alt="Baton Rouge" class="w-full h-full object-cover">
</div>
<div class="p-6">
<h3 class="text-2xl font-playfair font-bold text-cajun-red mb-2">BATON ROUGE</h3>
<div class="flex flex-col gap-4 mt-6">
<a href="https://www.toasttab.com/mike-andersons-seafood-restaurant-baton-rouge" class="bg-cajun-red text-cream py-2 px-4 rounded-lg text-center font-semibold hover:bg-opacity-90 transition">
<i class="fas fa-shopping-cart mr-2"></i>ORDER ONLINE
</a>
<a href="tel:+12257667823" class="border-2 border-cajun-red text-cajun-red py-2 px-4 rounded-lg text-center font-semibold hover:bg-cajun-red hover:text-cream transition">
<i class="fas fa-phone mr-2"></i>CALL BATON ROUGE
</a>
<a href="https://mikeandersons.com/locations-baton-rouge" class="text-gold font-semibold hover:underline text-center">
<i class="fas fa-book-open mr-2"></i>VIEW MENU
</a>
</div>
</div>
</div>
<!-- Gonzales -->
<div class="location-card bg-white rounded-xl shadow-lg overflow-hidden transition-all duration-300">
<div class="h-48 overflow-hidden">
<img src="https://images.squarespace-cdn.com/content/v1/5b36b03f4611a07e438e9bb8/6427cc51-fd8b-4c0a-8a52-26e6bc70f13e/thelocations-08.png" alt="Gonzales" class="w-full h-full object-cover">
</div>
<div class="p-6">
<h3 class="text-2xl font-playfair font-bold text-cajun-red mb-2">GONZALES</h3>
<div class="flex flex-col gap-4 mt-6">
<a href="https://mikeandersons.alohaorderonline.com/" class="bg-cajun-red text-cream py-2 px-4 rounded-lg text-center font-semibold hover:bg-opacity-90 transition">
<i class="fas fa-shopping-cart mr-2"></i>ORDER ONLINE
</a>
<a href="tel:+12257436453" class="border-2 border-cajun-red text-cajun-red py-2 px-4 rounded-lg text-center font-semibold hover:bg-cajun-red hover:text-cream transition">
<i class="fas fa-phone mr-2"></i>CALL GONZALES
</a>
<a href="https://mikeandersons.com/locations-gonzales" class="text-gold font-semibold hover:underline text-center">
<i class="fas fa-book-open mr-2"></i>VIEW MENU
</a>
</div>
</div>
</div>
<!-- Prairieville -->
<div class="location-card bg-white rounded-xl shadow-lg overflow-hidden transition-all duration-300">
<div class="h-48 overflow-hidden">
<img src="https://images.squarespace-cdn.com/content/v1/5b36b03f4611a07e438e9bb8/32542d97-b505-46e3-9ff2-67ebfc27f1a7/thelocations-07.png" alt="Prairieville" class="w-full h-full object-cover">
</div>
<div class="p-6">
<h3 class="text-2xl font-playfair font-bold text-cajun-red mb-2">PRAIRIEVILLE</h3>
<div class="flex flex-col gap-4 mt-6">
<a href="#" class="bg-cajun-red text-cream py-2 px-4 rounded-lg text-center font-semibold hover:bg-opacity-90 transition">
<i class="fas fa-shopping-cart mr-2"></i>ORDER ONLINE
</a>
<a href="tel:+12257667823" class="border-2 border-cajun-red text-cajun-red py-2 px-4 rounded-lg text-center font-semibold hover:bg-cajun-red hover:text-cream transition">
<i class="fas fa-phone mr-2"></i>CALL PRAIRIEVILLE
</a>
<a href="https://mikeandersons.com/locations-prairieville" class="text-gold font-semibold hover:underline text-center">
<i class="fas fa-book-open mr-2"></i>VIEW MENU
</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Divider -->
<div class="divider-bg h-24 w-full"></div>
<!-- Tradition Section -->
<section id="about" class="py-16 tradition-bg text-cream">
<div class="container mx-auto px-6">
<div class="max-w-4xl mx-auto text-center">
<img src="https://images.squarespace-cdn.com/content/v1/5b36b03f4611a07e438e9bb8/00ef4029-dc54-4bc3-84fd-02953b75f6b3/tradition-06.png" alt="Tradition" class="mx-auto mb-8 h-24">
<h2 class="text-3xl md:text-4xl font-playfair font-bold mb-6">
OVER FORTY YEARS OF UNBEATABLE LOUISIANA CUISINE & UNFORGETTABLE MEMORIES CONTINUE, WITH YOU.
</h2>
<p class="text-lg mb-8 max-w-2xl mx-auto">
Since 1980, Mike Anderson's has been serving authentic Louisiana seafood in a family-friendly atmosphere. Our recipes have been passed down through generations, creating unforgettable dining experiences.
</p>
<a href="https://mikeandersons.com/about" class="bg-gold text-cajun-red font-bold py-3 px-8 rounded-full inline-block hover:bg-opacity-90 transition">
EXPERIENCE THE LEGACY OF MIKE ANDERSON
</a>
</div>
</div>
</section>
<!-- Family Traditions -->
<section class="py-16">
<div class="container mx-auto px-6">
<div class="flex flex-col md:flex-row items-center gap-8">
<div class="md:w-1/2">
<img src="https://images.squarespace-cdn.com/content/v1/5b36b03f4611a07e438e9bb8/1669863451776-KH2PCBYXC0CDGRYHNOFC/familytraditions-05.png" alt="Family Traditions" class="w-full rounded-lg shadow-lg">
</div>
<div class="md:w-1/2">
<h2 class="text-3xl font-playfair font-bold text-cajun-red mb-4">FAMILY TRADITIONS</h2>
<p class="text-lg mb-4">
At Mike Anderson's, we believe that great food brings people together. Our family has been serving Louisiana for over four decades, and we treat every guest like family.
</p>
<p class="text-lg mb-6">
From our signature seafood platters to our famous bread pudding, every dish is prepared with the same care and attention that Mike Anderson himself brought to the kitchen.
</p>
<div class="grid grid-cols-2 gap-4">
<div class="bg-cajun-red bg-opacity-10 p-4 rounded-lg">
<i class="fas fa-fish text-3xl text-gold mb-2"></i>
<h3 class="font-bold">Fresh Seafood</h3>
<p class="text-sm">Daily deliveries from Gulf waters</p>
</div>
<div class="bg-cajun-red bg-opacity-10 p-4 rounded-lg">
<i class="fas fa-utensils text-3xl text-gold mb-2"></i>
<h3 class="font-bold">Authentic Recipes</h3>
<p class="text-sm">Generations of Louisiana tradition</p>
</div>
<div class="bg-cajun-red bg-opacity-10 p-4 rounded-lg">
<i class="fas fa-users text-3xl text-gold mb-2"></i>
<h3 class="font-bold">Family Atmosphere</h3>
<p class="text-sm">Where everyone feels at home</p>
</div>
<div class="bg-cajun-red bg-opacity-10 p-4 rounded-lg">
<i class="fas fa-calendar-star text-3xl text-gold mb-2"></i>
<h3 class="font-bold">Celebrations</h3>
<p class="text-sm">Creating memories since 1980</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Divider -->
<div class="divider-bg h-24 w-full"></div>
<!-- Footer -->
<footer class="bg-dark-green text-cream py-12">
<div class="container mx-auto px-6">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
<div>
<h3 class="text-2xl font-playfair font-bold mb-4">MIKE ANDERSON'S</h3>
<p class="mb-4">Authentic Louisiana seafood since 1980</p>
<div class="flex gap-4">
<a href="#" class="text-gold hover:text-cream"><i class="fab fa-facebook-f"></i></a>
<a href="#" class="text-gold hover:text-cream"><i class="fab fa-instagram"></i></a>
<a href="#" class="text-gold hover:text-cream"><i class="fab fa-twitter"></i></a>
</div>
</div>
<div>
<h4 class="text-xl font-semibold mb-4">LOCATIONS</h4>
<ul class="space-y-2">
<li><a href="https://mikeandersons.com/locations-baton-rouge" class="hover:text-gold">Baton Rouge</a></li>
<li><a href="https://mikeandersons.com/locations-gonzales" class="hover:text-gold">Gonzales</a></li>
<li><a href="https://mikeandersons.com/locations-prairieville" class="hover:text-gold">Prairieville</a></li>
</ul>
</div>
<div>
<h4 class="text-xl font-semibold mb-4">QUICK LINKS</h4>
<ul class="space-y-2">
<li><a href="#hero" class="hover:text-gold">Home</a></li>
<li><a href="#locations" class="hover:text-gold">Locations</a></li>
<li><a href="#announcement-bar" class="hover:text-gold">Reservations</a></li>
<li><a href="#about" class="hover:text-gold">Our Story</a></li>
</ul>
</div>
<div>
<h4 class="text-xl font-semibold mb-4">CONTACT</h4>
<p class="mb-2">Have questions? We'd love to hear from you!</p>
<a href="mailto:info@mikeandersons.com" class="text-gold hover:underline">info@mikeandersons.com</a>
</div>
</div>
<div class="border-t border-cream border-opacity-20 mt-12 pt-6 text-center">
<p>&copy; 2023 Mike Anderson's Restaurant. All rights reserved.</p>
</div>
</div>
</footer>
<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=stryder4096/ma" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>