fox / index.html
thetwistedpixie's picture
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The Fox & Hounds | Acton Turville</title>
<meta name="description" content="A traditional countryside pub in Acton Turville offering great food, drinks, and hospitality in a warm, inviting atmosphere.">
<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>
.hero-image {
background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('http://static.photos/nature/1200x630/42');
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);
}
.testimonial-card {
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}
.testimonial-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}
.gallery-image {
transition: all 0.3s ease;
}
.gallery-image:hover {
transform: scale(1.03);
}
</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="hero-image h-screen 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-6xl font-serif font-bold mb-4">Welcome to The Fox & Hounds</h1>
<p class="text-xl md:text-2xl mb-8">A traditional countryside pub in the heart of Acton Turville</p>
<div class="flex flex-col md:flex-row justify-center gap-4">
<a href="menu.html" class="bg-accent hover:bg-dark text-light font-bold py-3 px-6 rounded-full transition duration-300">View Our Menu</a>
<a href="contact.html" class="border-2 border-light hover:bg-primary hover:border-primary text-light font-bold py-3 px-6 rounded-full transition duration-300">Book a Table</a>
</div>
</div>
</section>
<!-- About Section -->
<section class="py-16 bg-light">
<div class="container mx-auto px-4">
<div class="flex flex-col md:flex-row items-center">
<div class="md:w-1/2 mb-8 md:mb-0 md:pr-8" data-aos="fade-right">
<img src="http://static.photos/indoor/640x360/1" alt="Pub interior" class="rounded-lg shadow-lg w-full">
</div>
<div class="md:w-1/2 md:pl-8" data-aos="fade-left">
<h2 class="text-3xl font-serif font-bold mb-4">Our Story</h2>
<p class="text-lg mb-4">Established in 1823, The Fox & Hounds has been serving the community of Acton Turville for nearly two centuries. Our pub combines traditional charm with modern comforts to create a welcoming atmosphere for all.</p>
<p class="text-lg mb-6">We pride ourselves on serving locally sourced, seasonal food alongside a carefully curated selection of beers, wines, and spirits.</p>
<a href="about.html" class="inline-block bg-primary hover:bg-secondary text-light font-bold py-2 px-6 rounded-full transition duration-300">Learn More</a>
</div>
</div>
</div>
</section>
<!-- Menu Highlights Section -->
<section class="py-16 bg-secondary text-light">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-serif font-bold mb-12 text-center" data-aos="fade-up">Our Menu Highlights</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<!-- Starters -->
<div class="bg-primary rounded-lg p-6 menu-category" data-aos="fade-up" data-aos-delay="100">
<div class="flex justify-between items-center mb-4">
<h3 class="text-xl font-serif font-bold">Starters</h3>
<i data-feather="coffee" class="text-accent"></i>
</div>
<ul class="space-y-3">
<li class="border-b border-accent pb-2">Homemade Scotch Egg with Piccalilli</li>
<li class="border-b border-accent pb-2">Potted Duck with Toast</li>
<li class="border-b border-accent pb-2">Soup of the Day with Crusty Bread</li>
</ul>
<a href="menu.html" class="inline-block mt-4 text-accent hover:text-light transition">View All Starters →</a>
</div>
<!-- Mains -->
<div class="bg-primary rounded-lg p-6 menu-category" data-aos="fade-up" data-aos-delay="200">
<div class="flex justify-between items-center mb-4">
<h3 class="text-xl font-serif font-bold">Main Courses</h3>
<i data-feather="dinner" class="text-accent"></i>
</div>
<ul class="space-y-3">
<li class="border-b border-accent pb-2">Beef & Ale Pie with Mash</li>
<li class="border-b border-accent pb-2">Pan-Fried Sea Bass with Seasonal Vegetables</li>
<li class="border-b border-accent pb-2">Wild Mushroom Risotto</li>
</ul>
<a href="menu.html" class="inline-block mt-4 text-accent hover:text-light transition">View All Mains →</a>
</div>
<!-- Desserts -->
<div class="bg-primary rounded-lg p-6 menu-category" data-aos="fade-up" data-aos-delay="300">
<div class="flex justify-between items-center mb-4">
<h3 class="text-xl font-serif font-bold">Desserts</h3>
<i data-feather="pie-chart" class="text-accent"></i>
</div>
<ul class="space-y-3">
<li class="border-b border-accent pb-2">Sticky Toffee Pudding with Custard</li>
<li class="border-b border-accent pb-2">Local Cheese Board with Chutney</li>
<li class="border-b border-accent pb-2">Chocolate Brownie with Ice Cream</li>
</ul>
<a href="menu.html" class="inline-block mt-4 text-accent hover:text-light transition">View All Desserts →</a>
</div>
</div>
<div class="text-center mt-12" data-aos="fade-up">
<a href="menu.html" class="inline-block bg-accent hover:bg-dark text-light font-bold py-3 px-8 rounded-full transition duration-300">View Full Menu</a>
</div>
</div>
</section>
<!-- Events Section -->
<section class="py-16 bg-light">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-serif font-bold mb-12 text-center" data-aos="fade-up">Upcoming Events</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Event 1 -->
<div class="bg-white rounded-lg shadow-lg overflow-hidden" data-aos="fade-up" data-aos-delay="100">
<img src="http://static.photos/event/640x360/1" alt="Live Music Night" class="w-full h-48 object-cover">
<div class="p-6">
<div class="flex justify-between items-center mb-2">
<span class="text-sm text-accent font-bold">Friday, June 10</span>
<span class="text-sm bg-primary text-light px-2 py-1 rounded">7:30 PM</span>
</div>
<h3 class="text-xl font-serif font-bold mb-2">Live Music Night</h3>
<p class="text-gray-600 mb-4">Join us for an evening of live music featuring local artists. Free entry, great atmosphere!</p>
<a href="events.html" class="text-accent hover:text-dark font-bold">More Details →</a>
</div>
</div>
<!-- Event 2 -->
<div class="bg-white rounded-lg shadow-lg overflow-hidden" data-aos="fade-up" data-aos-delay="200">
<img src="http://static.photos/event/640x360/2" alt="Quiz Night" class="w-full h-48 object-cover">
<div class="p-6">
<div class="flex justify-between items-center mb-2">
<span class="text-sm text-accent font-bold">Wednesday, June 15</span>
<span class="text-sm bg-primary text-light px-2 py-1 rounded">8:00 PM</span>
</div>
<h3 class="text-xl font-serif font-bold mb-2">Pub Quiz Night</h3>
<p class="text-gray-600 mb-4">Test your knowledge with our famous pub quiz. Teams of up to 6, £2 entry per person.</p>
<a href="events.html" class="text-accent hover:text-dark font-bold">More Details →</a>
</div>
</div>
<!-- Event 3 -->
<div class="bg-white rounded-lg shadow-lg overflow-hidden" data-aos="fade-up" data-aos-delay="300">
<img src="http://static.photos/event/640x360/3" alt="Sunday Roast" class="w-full h-48 object-cover">
<div class="p-6">
<div class="flex justify-between items-center mb-2">
<span class="text-sm text-accent font-bold">Every Sunday</span>
<span class="text-sm bg-primary text-light px-2 py-1 rounded">12-4 PM</span>
</div>
<h3 class="text-xl font-serif font-bold mb-2">Sunday Roast</h3>
<p class="text-gray-600 mb-4">Our famous Sunday roasts with all the trimmings. Booking recommended.</p>
<a href="events.html" class="text-accent hover:text-dark font-bold">More Details →</a>
</div>
</div>
</div>
<div class="text-center mt-12" data-aos="fade-up">
<a href="events.html" class="inline-block bg-primary hover:bg-secondary text-light font-bold py-3 px-8 rounded-full transition duration-300">View All Events</a>
</div>
</div>
</section>
<!-- Gallery Section -->
<section class="py-16 bg-primary text-light">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-serif font-bold mb-12 text-center" data-aos="fade-up">Our Gallery</h2>
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
<div class="overflow-hidden rounded-lg gallery-image" data-aos="fade-up" data-aos-delay="100">
<img src="http://static.photos/indoor/640x360/4" alt="Pub interior" class="w-full h-full object-cover hover:opacity-90 transition">
</div>
<div class="overflow-hidden rounded-lg gallery-image" data-aos="fade-up" data-aos-delay="150">
<img src="http://static.photos/food/640x360/1" alt="Food" class="w-full h-full object-cover hover:opacity-90 transition">
</div>
<div class="overflow-hidden rounded-lg gallery-image" data-aos="fade-up" data-aos-delay="200">
<img src="http://static.photos/outdoor/640x360/1" alt="Pub garden" class="w-full h-full object-cover hover:opacity-90 transition">
</div>
<div class="overflow-hidden rounded-lg gallery-image" data-aos="fade-up" data-aos-delay="250">
<img src="http://static.photos/drinks/640x360/1" alt="Drinks" class="w-full h-full object-cover hover:opacity-90 transition">
</div>
<div class="overflow-hidden rounded-lg gallery-image" data-aos="fade-up" data-aos-delay="300">
<img src="http://static.photos/event/640x360/4" alt="Event" class="w-full h-full object-cover hover:opacity-90 transition">
</div>
<div class="overflow-hidden rounded-lg gallery-image" data-aos="fade-up" data-aos-delay="350">
<img src="http://static.photos/indoor/640x360/5" alt="Pub interior" class="w-full h-full object-cover hover:opacity-90 transition">
</div>
<div class="overflow-hidden rounded-lg gallery-image" data-aos="fade-up" data-aos-delay="400">
<img src="http://static.photos/food/640x360/2" alt="Food" class="w-full h-full object-cover hover:opacity-90 transition">
</div>
<div class="overflow-hidden rounded-lg gallery-image" data-aos="fade-up" data-aos-delay="450">
<img src="http://static.photos/outdoor/640x360/2" alt="Pub garden" class="w-full h-full object-cover hover:opacity-90 transition">
</div>
</div>
<div class="text-center mt-12" data-aos="fade-up">
<a href="gallery.html" class="inline-block bg-accent hover:bg-dark text-light font-bold py-3 px-8 rounded-full transition duration-300">View Full Gallery</a>
</div>
</div>
</section>
<!-- Testimonials Section -->
<section class="py-16 bg-light">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-serif font-bold mb-12 text-center" data-aos="fade-up">What Our Customers Say</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<!-- Testimonial 1 -->
<div class="bg-white p-6 rounded-lg testimonial-card" data-aos="fade-up" data-aos-delay="100">
<div class="flex items-center mb-4">
<div class="w-12 h-12 rounded-full bg-primary flex items-center justify-center text-light font-bold mr-4">JS</div>
<div>
<h4 class="font-bold">John Smith</h4>
<div class="flex text-accent">
<i data-feather="star" class="w-4 h-4 fill-current"></i>
<i data-feather="star" class="w-4 h-4 fill-current"></i>
<i data-feather="star" class="w-4 h-4 fill-current"></i>
<i data-feather="star" class="w-4 h-4 fill-current"></i>
<i data-feather="star" class="w-4 h-4 fill-current"></i>
</div>
</div>
</div>
<p class="text-gray-600">"The Sunday roast is absolutely fantastic! The beef was cooked to perfection and the Yorkshire puddings were enormous. Highly recommend!"</p>
</div>
<!-- Testimonial 2 -->
<div class="bg-white p-6 rounded-lg testimonial-card" data-aos="fade-up" data-aos-delay="200">
<div class="flex items-center mb-4">
<div class="w-12 h-12 rounded-full bg-primary flex items-center justify-center text-light font-bold mr-4">EP</div>
<div>
<h4 class="font-bold">Emma Parker</h4>
<div class="flex text-accent">
<i data-feather="star" class="w-4 h-4 fill-current"></i>
<i data-feather="star" class="w-4 h-4 fill-current"></i>
<i data-feather="star" class="w-4 h-4 fill-current"></i>
<i data-feather="star" class="w-4 h-4 fill-current"></i>
<i data-feather="star" class="w-4 h-4 fill-current"></i>
</div>
</div>
</div>
<p class="text-gray-600">"Lovely atmosphere and fantastic food. The staff are so friendly and welcoming. We come here regularly and it never disappoints."</p>
</div>
<!-- Testimonial 3 -->
<div class="bg-white p-6 rounded-lg testimonial-card" data-aos="fade-up" data-aos-delay="300">
<div class="flex items-center mb-4">
<div class="w-12 h-12 rounded-full bg-primary flex items-center justify-center text-light font-bold mr-4">TW</div>
<div>
<h4 class="font-bold">Thomas Wilson</h4>
<div class="flex text-accent">
<i data-feather="star" class="w-4 h-4 fill-current"></i>
<i data-feather="star" class="w-4 h-4 fill-current"></i>
<i data-feather="star" class="w-4 h-4 fill-current"></i>
<i data-feather="star" class="w-4 h-4 fill-current"></i>
<i data-feather="star" class="w-4 h-4 fill-current"></i>
</div>
</div>
</div>
<p class="text-gray-600">"The best pub in the area! Great selection of local ales and the food is always excellent. The garden is perfect for summer evenings."</p>
</div>
</div>
</div>
</section>
<!-- Contact & Hours Section -->
<section class="py-16 bg-secondary text-light">
<div class="container mx-auto px-4">
<div class="flex flex-col md:flex-row">
<!-- Contact Info -->
<div class="md:w-1/2 mb-8 md:mb-0 md:pr-8" data-aos="fade-right">
<h2 class="text-3xl font-serif font-bold mb-6">Contact Us</h2>
<div class="space-y-4">
<div class="flex items-start">
<i data-feather="map-pin" class="mr-4 text-accent mt-1"></i>
<div>
<h3 class="font-bold">Address</h3>
<p>High Street, Acton Turville,<br>Gloucestershire, GL9 1HJ</p>
</div>
</div>
<div class="flex items-start">
<i data-feather="phone" class="mr-4 text-accent mt-1"></i>
<div>
<h3 class="font-bold">Phone</h3>
<p>01454 238765</p>
</div>
</div>
<div class="flex items-start">
<i data-feather="mail" class="mr-4 text-accent mt-1"></i>
<div>
<h3 class="font-bold">Email</h3>
<p>info@foxandhoundsactonturville.org</p>
</div>
</div>
<div class="flex items-start">
<i data-feather="clock" class="mr-4 text-accent mt-1"></i>
<div>
<h3 class="font-bold">Opening Hours</h3>
<p>Monday - Thursday: 11am - 11pm<br>
Friday - Saturday: 11am - 12am<br>
Sunday: 12pm - 10:30pm</p>
</div>
</div>
</div>
<div class="mt-6 flex space-x-4">
<a href="#" class="hover:text-accent transition"><i data-feather="facebook"></i></a>
<a href="#" class="hover:text-accent transition"><i data-feather="instagram"></i></a>
<a href="#" class="hover:text-accent transition"><i data-feather="twitter"></i></a>
</div>
</div>
<!-- Map -->
<div class="md:w-1/2" data-aos="fade-left">
<h2 class="text-3xl font-serif font-bold mb-6">Find Us</h2>
<div class="aspect-w-16 aspect-h-9 bg-gray-300 rounded-lg overflow-hidden">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2482.768293184127!2d-2.273987684229343!3d51.5253791796369!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4871a7a0a6a3a7d5%3A0x1e3a1b1b1b1b1b1b!2sThe%20Fox%20%26%20Hounds!5e0!3m2!1sen!2suk!4v1623345678909!5m2!1sen!2suk" width="100%" height="100%" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
</div>
</div>
</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 Acton Turville. All rights reserved.</p>
</div>
<div class="flex flex-col md:flex-row md:space-x-8 space-y-2 md:space-y-0 text-sm">
<a href="privacy.html" class="hover:text-accent transition">Privacy Policy</a>
<a href="terms.html" class="hover:text-accent transition">Terms of Service</a>
<a href="sitemap.html" class="hover:text-accent transition">Sitemap</a>
</div>
</div>
</div>
</footer>
<!-- Scripts -->
<script>
// Mobile menu toggle
document.getElementById('mobile-menu-button').addEventListener('click', function() {
const menu = document.getElementById('mobile-menu');
menu.classList.toggle('hidden');
});
// Initialize animations
AOS.init({
duration: 800,
easing: 'ease-in-out',
once: true
});
// Initialize feather icons
feather.replace();
</script>
</body>
</html>