Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Seafood Restaurant</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&family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet"> | |
| <style> | |
| :root { | |
| --primary: #1a2a57; | |
| --secondary: #f8a531; | |
| --light: #f8f9fa; | |
| --dark: #212529; | |
| --text: #555555; | |
| } | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| color: var(--text); | |
| } | |
| .font-playfair { | |
| font-family: 'Playfair Display', serif; | |
| } | |
| .bg-overlay { | |
| background: rgba(0, 0, 0, 0.5); | |
| } | |
| .nav-link:hover { | |
| color: var(--secondary) ; | |
| } | |
| .btn-primary { | |
| background-color: var(--secondary); | |
| color: white; | |
| transition: all 0.3s; | |
| } | |
| .btn-primary:hover { | |
| background-color: #e69528; | |
| transform: translateY(-3px); | |
| } | |
| .menu-item:hover .menu-img { | |
| transform: scale(1.05); | |
| } | |
| .menu-img { | |
| transition: transform 0.3s ease; | |
| } | |
| .testimonial-card { | |
| box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); | |
| transition: all 0.3s; | |
| } | |
| .testimonial-card:hover { | |
| transform: translateY(-10px); | |
| } | |
| .input-field:focus { | |
| outline: none; | |
| box-shadow: 0 0 0 2px var(--secondary); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Header/Navigation --> | |
| <header class="fixed w-full bg-white shadow-md z-50"> | |
| <div class="container mx-auto px-6 py-4"> | |
| <div class="flex justify-between items-center"> | |
| <div class="text-2xl font-bold text-gray-800"> | |
| <span class="text-3xl text-blue-900 font-playfair">Seafood</span> | |
| </div> | |
| <nav class="hidden md:flex space-x-8"> | |
| <a href="#" class="nav-link text-gray-800 hover:text-yellow-500 font-medium">Home</a> | |
| <a href="#" class="nav-link text-gray-800 hover:text-yellow-500 font-medium">About</a> | |
| <a href="#" class="nav-link text-gray-800 hover:text-yellow-500 font-medium">Menu</a> | |
| <a href="#" class="nav-link text-gray-800 hover:text-yellow-500 font-medium">Gallery</a> | |
| <a href="#" class="nav-link text-gray-800 hover:text-yellow-500 font-medium">Contact</a> | |
| </nav> | |
| <div class="hidden md:block"> | |
| <a href="#" class="btn-primary px-6 py-2 rounded-full font-medium">Reservation</a> | |
| </div> | |
| <button class="md:hidden text-gray-800 focus:outline-none"> | |
| <i class="fas fa-bars text-2xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section class="relative h-screen flex items-center justify-center bg-gray-900"> | |
| <div class="absolute inset-0 bg-overlay"></div> | |
| <img src="https://images.unsplash.com/photo-1510626176961-4b1d0f6d4e6d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" | |
| alt="Seafood Platter" class="absolute inset-0 w-full h-full object-cover"> | |
| <div class="relative z-10 text-center px-4"> | |
| <h1 class="text-4xl md:text-6xl font-playfair font-bold text-white mb-6">Fresh & Delicious Seafood</h1> | |
| <p class="text-xl text-white mb-8 max-w-2xl mx-auto">Experience the taste of the ocean with our premium selection of fresh seafood dishes</p> | |
| <div class="flex flex-col sm:flex-row justify-center gap-4"> | |
| <a href="#" class="btn-primary px-8 py-3 rounded-full font-medium text-lg">Our Menu</a> | |
| <a href="#" class="bg-transparent border-2 border-white text-white px-8 py-3 rounded-full font-medium text-lg hover:bg-white hover:text-gray-900 transition">Reservation</a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- About Section --> | |
| <section class="py-20 bg-gray-50"> | |
| <div class="container mx-auto px-6"> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-10 md:mb-0 md:pr-10"> | |
| <img src="https://images.unsplash.com/photo-1555396273-367ea4eb4db5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80" | |
| alt="About Us" class="rounded-lg shadow-xl w-full"> | |
| </div> | |
| <div class="md:w-1/2"> | |
| <h2 class="text-3xl md:text-4xl font-playfair font-bold text-gray-800 mb-6">Our Story</h2> | |
| <p class="text-gray-600 mb-4">Founded in 2010, our seafood restaurant has been serving the freshest catches from local fishermen and international suppliers. Our passion for quality and sustainability drives everything we do.</p> | |
| <p class="text-gray-600 mb-6">Each dish is carefully prepared by our award-winning chefs who bring out the natural flavors of the sea with innovative techniques and traditional recipes.</p> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 gap-6 mb-8"> | |
| <div class="flex items-start"> | |
| <div class="bg-yellow-500 p-3 rounded-full mr-4"> | |
| <i class="fas fa-fish text-white"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-gray-800 mb-1">Fresh Ingredients</h4> | |
| <p class="text-gray-600 text-sm">Daily deliveries from trusted suppliers</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-yellow-500 p-3 rounded-full mr-4"> | |
| <i class="fas fa-utensils text-white"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-gray-800 mb-1">Expert Chefs</h4> | |
| <p class="text-gray-600 text-sm">20+ years of culinary experience</p> | |
| </div> | |
| </div> | |
| </div> | |
| <a href="#" class="btn-primary px-8 py-3 rounded-full font-medium">Learn More</a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Menu Section --> | |
| <section class="py-20 bg-white"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-playfair font-bold text-gray-800 mb-4">Our Special Menu</h2> | |
| <p class="text-gray-600 max-w-2xl mx-auto">Discover our carefully curated selection of seafood dishes that will tantalize your taste buds</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Menu Item 1 --> | |
| <div class="menu-item bg-white rounded-lg overflow-hidden shadow-md hover:shadow-lg transition"> | |
| <div class="overflow-hidden"> | |
| <img src="https://images.unsplash.com/photo-1567620905732-2d1ec7ab7445?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1980&q=80" | |
| alt="Grilled Salmon" class="menu-img w-full h-64 object-cover"> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <h3 class="text-xl font-bold text-gray-800">Grilled Salmon</h3> | |
| <span class="text-yellow-500 font-bold">$24.99</span> | |
| </div> | |
| <p class="text-gray-600 mb-4">Fresh Atlantic salmon grilled to perfection with lemon butter sauce</p> | |
| <a href="#" class="text-yellow-500 font-medium flex items-center"> | |
| Order Now <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Menu Item 2 --> | |
| <div class="menu-item bg-white rounded-lg overflow-hidden shadow-md hover:shadow-lg transition"> | |
| <div class="overflow-hidden"> | |
| <img src="https://images.unsplash.com/photo-1519708227418-c8fd9a32b7a2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" | |
| alt="Lobster Thermidor" class="menu-img w-full h-64 object-cover"> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <h3 class="text-xl font-bold text-gray-800">Lobster Thermidor</h3> | |
| <span class="text-yellow-500 font-bold">$39.99</span> | |
| </div> | |
| <p class="text-gray-600 mb-4">Maine lobster cooked in creamy sauce with mushrooms and cheese</p> | |
| <a href="#" class="text-yellow-500 font-medium flex items-center"> | |
| Order Now <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Menu Item 3 --> | |
| <div class="menu-item bg-white rounded-lg overflow-hidden shadow-md hover:shadow-lg transition"> | |
| <div class="overflow-hidden"> | |
| <img src="https://images.unsplash.com/photo-1565557623262-b51c2513a641?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1971&q=80" | |
| alt="Seafood Paella" class="menu-img w-full h-64 object-cover"> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <h3 class="text-xl font-bold text-gray-800">Seafood Paella</h3> | |
| <span class="text-yellow-500 font-bold">$28.99</span> | |
| </div> | |
| <p class="text-gray-600 mb-4">Traditional Spanish rice dish with shrimp, mussels, clams and squid</p> | |
| <a href="#" class="text-yellow-500 font-medium flex items-center"> | |
| Order Now <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-12"> | |
| <a href="#" class="btn-primary px-8 py-3 rounded-full font-medium">View Full Menu</a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Services Section --> | |
| <section class="py-20 bg-gray-50"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-playfair font-bold text-gray-800 mb-4">Our Services</h2> | |
| <p class="text-gray-600 max-w-2xl mx-auto">We offer more than just great food - experience our exceptional services</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <!-- Service 1 --> | |
| <div class="bg-white p-8 rounded-lg shadow-md text-center hover:shadow-lg transition"> | |
| <div class="bg-blue-900 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-6"> | |
| <i class="fas fa-utensils text-white text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-800 mb-3">Fine Dining</h3> | |
| <p class="text-gray-600">Elegant atmosphere with impeccable service for special occasions or romantic dinners.</p> | |
| </div> | |
| <!-- Service 2 --> | |
| <div class="bg-white p-8 rounded-lg shadow-md text-center hover:shadow-lg transition"> | |
| <div class="bg-blue-900 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-6"> | |
| <i class="fas fa-truck text-white text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-800 mb-3">Delivery</h3> | |
| <p class="text-gray-600">Enjoy our delicious seafood at home with our fast and reliable delivery service.</p> | |
| </div> | |
| <!-- Service 3 --> | |
| <div class="bg-white p-8 rounded-lg shadow-md text-center hover:shadow-lg transition"> | |
| <div class="bg-blue-900 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-6"> | |
| <i class="fas fa-calendar-alt text-white text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-800 mb-3">Events</h3> | |
| <p class="text-gray-600">Host your private events with custom menus and dedicated service for groups.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials Section --> | |
| <section class="py-20 bg-white"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-playfair font-bold text-gray-800 mb-4">What Our Customers Say</h2> | |
| <p class="text-gray-600 max-w-2xl mx-auto">Hear from our satisfied guests about their dining experiences</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <!-- Testimonial 1 --> | |
| <div class="testimonial-card bg-white p-8 rounded-lg"> | |
| <div class="flex items-center mb-4"> | |
| <div class="text-yellow-500 mr-2"> | |
| <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> | |
| <p class="text-gray-600 mb-6">"The lobster bisque was absolutely divine! Best seafood I've had in years. The service was impeccable and the ambiance was perfect for our anniversary dinner."</p> | |
| <div class="flex items-center"> | |
| <img src="https://randomuser.me/api/portraits/women/43.jpg" alt="Sarah J." class="w-12 h-12 rounded-full mr-4"> | |
| <div> | |
| <h4 class="font-bold text-gray-800">Sarah J.</h4> | |
| <p class="text-gray-500 text-sm">Regular Customer</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Testimonial 2 --> | |
| <div class="testimonial-card bg-white p-8 rounded-lg"> | |
| <div class="flex items-center mb-4"> | |
| <div class="text-yellow-500 mr-2"> | |
| <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> | |
| <p class="text-gray-600 mb-6">"I ordered the seafood platter for delivery and everything arrived hot and fresh. The portions were generous and the flavors were outstanding. Will definitely order again!"</p> | |
| <div class="flex items-center"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Michael T." class="w-12 h-12 rounded-full mr-4"> | |
| <div> | |
| <h4 class="font-bold text-gray-800">Michael T.</h4> | |
| <p class="text-gray-500 text-sm">First-time Customer</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Testimonial 3 --> | |
| <div class="testimonial-card bg-white p-8 rounded-lg"> | |
| <div class="flex items-center mb-4"> | |
| <div class="text-yellow-500 mr-2"> | |
| <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> | |
| <p class="text-gray-600 mb-6">"We hosted our company holiday party here and it was fantastic! The staff handled everything perfectly and the food was a hit with all our guests. Highly recommend!"</p> | |
| <div class="flex items-center"> | |
| <img src="https://randomuser.me/api/portraits/women/65.jpg" alt="Jennifer L." class="w-12 h-12 rounded-full mr-4"> | |
| <div> | |
| <h4 class="font-bold text-gray-800">Jennifer L.</h4> | |
| <p class="text-gray-500 text-sm">Corporate Client</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section class="py-20 bg-gray-50"> | |
| <div class="container mx-auto px-6"> | |
| <div class="flex flex-col lg:flex-row"> | |
| <div class="lg:w-1/2 mb-10 lg:mb-0 lg:pr-10"> | |
| <h2 class="text-3xl md:text-4xl font-playfair font-bold text-gray-800 mb-6">Contact Us</h2> | |
| <p class="text-gray-600 mb-8">Have questions or want to make a reservation? Reach out to us through any of these channels or fill out the form.</p> | |
| <div class="space-y-6"> | |
| <div class="flex items-start"> | |
| <div class="bg-yellow-500 p-3 rounded-full mr-4"> | |
| <i class="fas fa-map-marker-alt text-white"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-gray-800 mb-1">Address</h4> | |
| <p class="text-gray-600">123 Ocean Avenue, Seaside City, SC 12345</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-yellow-500 p-3 rounded-full mr-4"> | |
| <i class="fas fa-phone-alt text-white"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-gray-800 mb-1">Phone</h4> | |
| <p class="text-gray-600">(123) 456-7890</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-yellow-500 p-3 rounded-full mr-4"> | |
| <i class="fas fa-envelope text-white"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-gray-800 mb-1">Email</h4> | |
| <p class="text-gray-600">info@seafoodrestaurant.com</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-yellow-500 p-3 rounded-full mr-4"> | |
| <i class="fas fa-clock text-white"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-gray-800 mb-1">Hours</h4> | |
| <p class="text-gray-600">Monday - Friday: 11am - 10pm</p> | |
| <p class="text-gray-600">Saturday - Sunday: 10am - 11pm</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-8"> | |
| <h4 class="font-bold text-gray-800 mb-4">Follow Us</h4> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="bg-blue-900 text-white p-3 rounded-full hover:bg-blue-800 transition"> | |
| <i class="fab fa-facebook-f"></i> | |
| </a> | |
| <a href="#" class="bg-blue-900 text-white p-3 rounded-full hover:bg-blue-800 transition"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| <a href="#" class="bg-blue-900 text-white p-3 rounded-full hover:bg-blue-800 transition"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="bg-blue-900 text-white p-3 rounded-full hover:bg-blue-800 transition"> | |
| <i class="fab fa-yelp"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="lg:w-1/2"> | |
| <form class="bg-white p-8 rounded-lg shadow-md"> | |
| <div class="mb-6"> | |
| <label for="name" class="block text-gray-700 font-medium mb-2">Full Name</label> | |
| <input type="text" id="name" class="input-field w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none"> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="email" class="block text-gray-700 font-medium mb-2">Email Address</label> | |
| <input type="email" id="email" class="input-field w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none"> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="phone" class="block text-gray-700 font-medium mb-2">Phone Number</label> | |
| <input type="tel" id="phone" class="input-field w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none"> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="subject" class="block text-gray-700 font-medium mb-2">Subject</label> | |
| <input type="text" id="subject" class="input-field w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none"> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="message" class="block text-gray-700 font-medium mb-2">Message</label> | |
| <textarea id="message" rows="4" class="input-field w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none"></textarea> | |
| </div> | |
| <button type="submit" class="btn-primary w-full py-3 rounded-full font-medium">Send Message</button> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Map Section --> | |
| <div class="h-96 w-full"> | |
| <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3022.215256264112!2d-73.9878449241874!3d40.74844097138998!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c259a9b3117469%3A0xd134e199a405a163!2sEmpire%20State%20Building!5e0!3m2!1sen!2sus!4v1689871712565!5m2!1sen!2sus" | |
| width="100%" height="100%" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe> | |
| </div> | |
| <!-- Newsletter Section --> | |
| <section class="py-16 bg-blue-900 text-white"> | |
| <div class="container mx-auto px-6"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="mb-6 md:mb-0"> | |
| <h3 class="text-2xl font-playfair font-bold mb-2">Subscribe to Our Newsletter</h3> | |
| <p class="text-blue-200">Get updates on special events, new menu items, and exclusive offers</p> | |
| </div> | |
| <form class="flex w-full md:w-auto"> | |
| <input type="email" placeholder="Your email address" class="px-4 py-3 rounded-l-lg w-full md:w-64 focus:outline-none text-gray-800"> | |
| <button type="submit" class="bg-yellow-500 px-6 py-3 rounded-r-lg font-medium hover:bg-yellow-600 transition">Subscribe</button> | |
| </form> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 text-white 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-xl font-playfair font-bold mb-4">Seafood Restaurant</h3> | |
| <p class="text-gray-400 mb-4">Bringing the freshest seafood from ocean to plate since 2010.</p> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-facebook-f"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-twitter"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-instagram"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-yelp"></i></a> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-lg mb-4">Quick Links</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Home</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">About Us</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Menu</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Gallery</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Contact</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-lg mb-4">Opening Hours</h4> | |
| <ul class="space-y-2 text-gray-400"> | |
| <li>Monday - Friday: 11am - 10pm</li> | |
| <li>Saturday: 10am - 11pm</li> | |
| <li>Sunday: 10am - 11pm</li> | |
| <li class="pt-4">Happy Hour: 3pm - 6pm Daily</li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-lg mb-4">Contact Info</h4> | |
| <ul class="space-y-2 text-gray-400"> | |
| <li>123 Ocean Avenue</li> | |
| <li>Seaside City, SC 12345</li> | |
| <li>Phone: (123) 456-7890</li> | |
| <li>Email: info@seafoodrestaurant.com</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-400"> | |
| <p>© 2023 Seafood Restaurant. All Rights Reserved. Designed by MatchThemes</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Mobile menu toggle | |
| document.querySelector('button[aria-label="Toggle menu"]').addEventListener('click', function() { | |
| const nav = document.querySelector('nav'); | |
| nav.classList.toggle('hidden'); | |
| nav.classList.toggle('flex'); | |
| }); | |
| // Testimonial carousel functionality | |
| let currentTestimonial = 0; | |
| const testimonials = document.querySelectorAll('.testimonial-card'); | |
| function showTestimonial(index) { | |
| testimonials.forEach((testimonial, i) => { | |
| testimonial.style.display = i === index ? 'block' : 'none'; | |
| }); | |
| } | |
| // Auto-rotate testimonials | |
| setInterval(() => { | |
| currentTestimonial = (currentTestimonial + 1) % testimonials.length; | |
| showTestimonial(currentTestimonial); | |
| }, 5000); | |
| // Initialize | |
| showTestimonial(0); | |
| </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=Harvinderkno/seafood" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |