Spaces:
Running
Running
Please make this website way better than it is https://foxandhoundsactonturvilledotorg.wordpress.com/?fbclid=IwdGRjcAMnPz9jbGNrAyc_OWV4dG4DYWVtAjExAAEermHz6YaTYK52UM3GOMEEkZuE-D4haz_7XtuEcEq31nFQcfSB9_kEl_0LlGk_aem_NFy_h0WaQuzosgEJEGBSfA - Initial Deployment
d1efa38 verified | <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Menu | The Fox & Hounds Acton Turville</title> | |
| <meta name="description" content="Explore our delicious menu featuring locally sourced ingredients and traditional pub favorites at The Fox & Hounds."> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <!-- Tailwind CSS --> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#283618', | |
| secondary: '#606C38', | |
| accent: '#DDA15E', | |
| light: '#FEFAE0', | |
| dark: '#BC6C25' | |
| }, | |
| fontFamily: { | |
| sans: ['Montserrat', 'sans-serif'], | |
| serif: ['Playfair Display', 'serif'], | |
| }, | |
| } | |
| } | |
| } | |
| </script> | |
| <!-- Fonts --> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&family=Playfair+Display:wght@400;500;600;700&display=swap" rel="stylesheet"> | |
| <!-- AOS Animation --> | |
| <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> | |
| <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> | |
| <!-- Feather Icons --> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <style> | |
| .menu-hero { | |
| background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('http://static.photos/food/1200x630/3'); | |
| background-size: cover; | |
| background-position: center; | |
| background-repeat: no-repeat; | |
| } | |
| .menu-category { | |
| transition: all 0.3s ease; | |
| } | |
| .menu-category:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); | |
| } | |
| .menu-item { | |
| transition: all 0.3s ease; | |
| } | |
| .menu-item:hover { | |
| background-color: rgba(221, 161, 94, 0.1); | |
| } | |
| .dietary-icon { | |
| width: 20px; | |
| height: 20px; | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| border-radius: 50%; | |
| margin-right: 4px; | |
| font-size: 10px; | |
| font-weight: bold; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-light font-sans text-primary"> | |
| <!-- Navigation --> | |
| <nav class="bg-primary text-light shadow-lg sticky top-0 z-50"> | |
| <div class="container mx-auto px-4 py-3"> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <i data-feather="home" class="text-accent"></i> | |
| <a href="index.html" class="text-xl font-serif font-bold">The Fox & Hounds</a> | |
| </div> | |
| <!-- Mobile menu button --> | |
| <div class="md:hidden"> | |
| <button id="mobile-menu-button" class="text-light focus:outline-none"> | |
| <i data-feather="menu"></i> | |
| </button> | |
| </div> | |
| <!-- Desktop Menu --> | |
| <div class="hidden md:flex space-x-8"> | |
| <a href="index.html" class="hover:text-accent transition">Home</a> | |
| <a href="about.html" class="hover:text-accent transition">About</a> | |
| <a href="menu.html" class="hover:text-accent transition">Menu</a> | |
| <a href="events.html" class="hover:text-accent transition">Events</a> | |
| <a href="gallery.html" class="hover:text-accent transition">Gallery</a> | |
| <a href="contact.html" class="hover:text-accent transition">Contact</a> | |
| </div> | |
| </div> | |
| <!-- Mobile Menu --> | |
| <div id="mobile-menu" class="hidden md:hidden mt-4 pb-4"> | |
| <a href="index.html" class="block py-2 hover:text-accent transition">Home</a> | |
| <a href="about.html" class="block py-2 hover:text-accent transition">About</a> | |
| <a href="menu.html" class="block py-2 hover:text-accent transition">Menu</a> | |
| <a href="events.html" class="block py-2 hover:text-accent transition">Events</a> | |
| <a href="gallery.html" class="block py-2 hover:text-accent transition">Gallery</a> | |
| <a href="contact.html" class="block py-2 hover:text-accent transition">Contact</a> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="menu-hero h-96 flex items-center justify-center text-center text-light"> | |
| <div class="container mx-auto px-4" data-aos="fade-up"> | |
| <h1 class="text-4xl md:text-5xl font-serif font-bold mb-4">Our Menu</h1> | |
| <p class="text-xl md:text-2xl">Seasonal dishes made with locally sourced ingredients</p> | |
| </div> | |
| </section> | |
| <!-- Menu Navigation --> | |
| <section class="py-8 bg-secondary text-light sticky top-16 z-40 shadow-md"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex overflow-x-auto space-x-6 py-2 hide-scrollbar"> | |
| <a href="#starters" class="whitespace-nowrap hover:text-accent transition">Starters</a> | |
| <a href="#mains" class="whitespace-nowrap hover:text-accent transition">Main Courses</a> | |
| <a href="#desserts" class="whitespace-nowrap hover:text-accent transition">Desserts</a> | |
| <a href="#sides" class="whitespace-nowrap hover:text-accent transition">Sides</a> | |
| <a href="#drinks" class="whitespace-nowrap hover:text-accent transition">Drinks</a> | |
| <a href="#wine" class="whitespace-nowrap hover:text-accent transition">Wine List</a> | |
| <a href="#kids" class="whitespace-nowrap hover:text-accent transition">Kids Menu</a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Menu Sections --> | |
| <section class="py-16 bg-light"> | |
| <div class="container mx-auto px-4"> | |
| <!-- Starters --> | |
| <div id="starters" class="mb-16" data-aos="fade-up"> | |
| <div class="flex items-center mb-8"> | |
| <h2 class="text-3xl font-serif font-bold">Starters</h2> | |
| <div class="ml-4 w-16 h-px bg-accent"></div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> | |
| <!-- Starter 1 --> | |
| <div class="bg-white p-6 rounded-lg shadow-md menu-category"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h3 class="text-xl font-serif font-bold">Homemade Scotch Egg</h3> | |
| <span class="text-accent font-bold">£6.50</span> | |
| </div> | |
| <p class="text-gray-600 mb-3">Free-range egg wrapped in our special-recipe sausage meat, served with piccalilli</p> | |
| <div class="flex"> | |
| <span class="dietary-icon bg-green-100 text-green-800">GF</span> | |
| <span class="dietary-icon bg-blue-100 text-blue-800">DF</span> | |
| </div> | |
| </div> | |
| <!-- Starter 2 --> | |
| <div class="bg-white p-6 rounded-lg shadow-md menu-category"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h3 class="text-xl font-serif font-bold">Potted Duck</h3> | |
| <span class="text-accent font-bold">£7.50</span> | |
| </div> | |
| <p class="text-gray-600 mb-3">Slow-cooked duck with orange and spices, served with toasted sourdough</p> | |
| <div class="flex"> | |
| <span class="dietary-icon bg-yellow-100 text-yellow-800">N</span> | |
| </div> | |
| </div> | |
| <!-- Starter 3 --> | |
| <div class="bg-white p-6 rounded-lg shadow-md menu-category"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h3 class="text-xl font-serif font-bold">Soup of the Day</h3> | |
| <span class="text-accent font-bold">£5.50</span> | |
| </div> | |
| <p class="text-gray-600 mb-3">Seasonal homemade soup served with crusty bread and butter</p> | |
| <div class="flex"> | |
| <span class="dietary-icon bg-green-100 text-green-800">V</span> | |
| <span class="dietary-icon bg-blue-100 text-blue-800">DF</span> | |
| </div> | |
| </div> | |
| <!-- Starter 4 --> | |
| <div class="bg-white p-6 rounded-lg shadow-md menu-category"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h3 class="text-xl font-serif font-bold">Baked Camembert</h3> | |
| <span class="text-accent font-bold">£8.50</span> | |
| </div> | |
| <p class="text-gray-600 mb-3">Whole baked camembert with garlic, rosemary and honey, served with bread and crackers</p> | |
| <div class="flex"> | |
| <span class="dietary-icon bg-green-100 text-green-800">V</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Mains --> | |
| <div id="mains" class="mb-16" data-aos="fade-up"> | |
| <div class="flex items-center mb-8"> | |
| <h2 class="text-3xl font-serif font-bold">Main Courses</h2> | |
| <div class="ml-4 w-16 h-px bg-accent"></div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> | |
| <!-- Main 1 --> | |
| <div class="bg-white p-6 rounded-lg shadow-md menu-category"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h3 class="text-xl font-serif font-bold">Beef & Ale Pie</h3> | |
| <span class="text-accent font-bold">£14.50</span> | |
| </div> | |
| <p class="text-gray-600 mb-3">Slow-cooked local beef in rich ale gravy, topped with flaky pastry, served with mash and seasonal vegetables</p> | |
| <div class="flex"> | |
| <span class="dietary-icon bg-yellow-100 text-yellow-800">N</span> | |
| </div> | |
| </div> | |
| <!-- Main 2 --> | |
| <div class="bg-white p-6 rounded-lg shadow-md menu-category"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h3 class="text-xl font-serif font-bold">Pan-Fried Sea Bass</h3> | |
| <span class="text-accent font-bold">£16.50</span> | |
| </div> | |
| <p class="text-gray-600 mb-3">Fresh sea bass with lemon butter sauce, crushed new potatoes and samphire</p> | |
| <div class="flex"> | |
| <span class="dietary-icon bg-green-100 text-green-800">GF</span> | |
| <span class="dietary-icon bg-blue-100 text-blue-800">DF</span> | |
| </div> | |
| </div> | |
| <!-- Main 3 --> | |
| <div class="bg-white p-6 rounded-lg shadow-md menu-category"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h3 class="text-xl font-serif font-bold">Wild Mushroom Risotto</h3> | |
| <span class="text-accent font-bold">£13.50</span> | |
| </div> | |
| <p class="text-gray-600 mb-3">Creamy arborio rice with wild mushrooms, parmesan and truffle oil</p> | |
| <div class="flex"> | |
| <span class="dietary-icon bg-green-100 text-green-800">V</span> | |
| </div> | |
| </div> | |
| <!-- Main 4 --> | |
| <div class="bg-white p-6 rounded-lg shadow-md menu-category"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h3 class="text-xl font-serif font-bold">Sunday Roast</h3> | |
| <span class="text-accent font-bold">£15.50</span> | |
| </div> | |
| <p class="text-gray-600 mb-3">Slow-roasted beef, Yorkshire pudding, roast potatoes, seasonal vegetables and gravy</p> | |
| <div class="flex"> | |
| <span class="dietary-icon bg-yellow-100 text-yellow-800">N</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Desserts --> | |
| <div id="desserts" class="mb-16" data-aos="fade-up"> | |
| <div class="flex items-center mb-8"> | |
| <h2 class="text-3xl font-serif font-bold">Desserts</h2> | |
| <div class="ml-4 w-16 h-px bg-accent"></div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> | |
| <!-- Dessert 1 --> | |
| <div class="bg-white p-6 rounded-lg shadow-md menu-category"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h3 class="text-xl font-serif font-bold">Sticky Toffee Pudding</h3> | |
| <span class="text-accent font-bold">£6.50</span> | |
| </div> | |
| <p class="text-gray-600 mb-3">Warm date sponge with toffee sauce and vanilla ice cream</p> | |
| <div class="flex"> | |
| <span class="dietary-icon bg-yellow-100 text-yellow-800">N</span> | |
| </div> | |
| </div> | |
| <!-- Dessert 2 --> | |
| <div class="bg-white p-6 rounded-lg shadow-md menu-category"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h3 class="text-xl font-serif font-bold">Local Cheese Board</h3> | |
| <span class="text-accent font-bold">£8.50</span> | |
| </div> | |
| <p class="text-gray-600 mb-3">Selection of three local cheeses with crackers, chutney and grapes</p> | |
| <div class="flex"> | |
| <span class="dietary-icon bg-green-100 text-green-800">V</span> | |
| </div> | |
| </div> | |
| <!-- Dessert 3 --> | |
| <div class="bg-white p-6 rounded-lg shadow-md menu-category"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h3 class="text-xl font-serif font-bold">Chocolate Brownie</h3> | |
| <span class="text-accent font-bold">£6.00</span> | |
| </div> | |
| <p class="text-gray-600 mb-3">Rich chocolate brownie with chocolate sauce and clotted cream</p> | |
| <div class="flex"> | |
| <span class="dietary-icon bg-yellow-100 text-yellow-800">N</span> | |
| </div> | |
| </div> | |
| <!-- Dessert 4 --> | |
| <div class="bg-white p-6 rounded-lg shadow-md menu-category"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h3 class="text-xl font-serif font-bold">Eton Mess</h3> | |
| <span class="text-accent font-bold">£5.50</span> | |
| </div> | |
| <p class="text-gray-600 mb-3">Classic combination of meringue, strawberries and cream</p> | |
| <div class="flex"> | |
| <span class="dietary-icon bg-yellow-100 text-yellow-800">N</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Sides --> | |
| <div id="sides" class="mb-16" data-aos="fade-up"> | |
| <div class="flex items-center mb-8"> | |
| <h2 class="text-3xl font-serif font-bold">Sides</h2> | |
| <div class="ml-4 w-16 h-px bg-accent"></div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> | |
| <!-- Side 1 --> | |
| <div class="bg-white p-6 rounded-lg shadow-md menu-category"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h3 class="text-xl font-serif font-bold">Hand-cut Chips</h3> | |
| <span class="text-accent font-bold">£3.50</span> | |
| </div> | |
| <p class="text-gray-600 mb-3">Thick-cut chips cooked in beef dripping</p> | |
| <div class="flex"> | |
| <span class="dietary-icon bg-yellow-100 text-yellow-800">N</span> | |
| </div> | |
| </div> | |
| <!-- Side 2 --> | |
| <div class="bg-white p-6 rounded-lg shadow-md menu-category"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h3 class="text-xl font-serif font-bold">Seasonal Vegetables</h3> | |
| <span class="text-accent font-bold">£3.00</span> | |
| </div> | |
| <p class="text-gray-600 mb-3">Selection of market-fresh seasonal vegetables</p> | |
| <div class="flex"> | |
| <span class="dietary-icon bg-green-100 text-green-800">V</span> | |
| <span class="dietary-icon bg-blue-100 text-blue-800">DF</span> | |
| </div> | |
| </div> | |
| <!-- Side 3 --> | |
| <div class="bg-white p-6 rounded-lg shadow-md menu-category"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h3 class="text-xl font-serif font-bold">Garlic Bread</h3> | |
| <span class="text-accent font-bold">£3.00</span> | |
| </div> | |
| <p class="text-gray-600 mb-3">Freshly baked garlic bread with parsley butter</p> | |
| <div class="flex"> | |
| <span class="dietary-icon bg-green-100 text-green-800">V</span> | |
| </div> | |
| </div> | |
| <!-- Side 4 --> | |
| <div class="bg-white p-6 rounded-lg shadow-md menu-category"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h3 class="text-xl font-serif font-bold">Side Salad</h3> | |
| <span class="text-accent font-bold">£3.00</span> | |
| </div> | |
| <p class="text-gray-600 mb-3">Mixed leaves with cherry tomatoes, cucumber and balsamic dressing</p> | |
| <div class="flex"> | |
| <span class="dietary-icon bg-green-100 text-green-800">V</span> | |
| <span class="dietary-icon bg-blue-100 text-blue-800">DF</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Dietary Key --> | |
| <div class="bg-primary text-light p-6 rounded-lg mb-16" data-aos="fade-up"> | |
| <h3 class="text-xl font-serif font-bold mb-4">Dietary Information</h3> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-4"> | |
| <div class="flex items-center"> | |
| <span class="dietary-icon bg-green-100 text-green-800">V</span> | |
| <span class="ml-2">Vegetarian</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <span class="dietary-icon bg-blue-100 text-blue-800">DF</span> | |
| <span class="ml-2">Dairy Free</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <span class="dietary-icon bg-yellow-100 text-yellow-800">N</span> | |
| <span class="ml-2">Contains Nuts</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <span class="dietary-icon bg-green-100 text-green-800">GF</span> | |
| <span class="ml-2">Gluten Free</span> | |
| </div> | |
| </div> | |
| <p class="mt-4 text-sm">Please inform your server of any allergies or dietary requirements. While we take every care to avoid cross-contamination, we cannot guarantee that any dish is completely free from any allergen.</p> | |
| </div> | |
| <!-- Download Menu --> | |
| <div class="text-center" data-aos="fade-up"> | |
| <a href="#" class="inline-block bg-accent hover:bg-dark text-light font-bold py-3 px-8 rounded-full transition duration-300"> | |
| <div class="flex items-center"> | |
| <i data-feather="download" class="mr-2"></i> | |
| Download Full Menu (PDF) | |
| </div> | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-primary text-light py-8"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="mb-4 md:mb-0"> | |
| <div class="flex items-center space-x-2"> | |
| <i data-feather="home" class="text-accent"></i> | |
| <a href="index.html" class="text-xl font-serif font-bold">The Fox & Hounds</a> | |
| </div> | |
| <p class="text-sm mt-2">© 2023 The Fox & Hounds Act | |
| </body> | |
| </html> |