File size: 17,544 Bytes
4e5a272 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 | <!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 Pub - Tormartin</title>
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
<link rel="stylesheet" href="style.css">
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<custom-navbar></custom-navbar>
<main>
<!-- Hero Section -->
<section class="relative h-screen flex items-center justify-center">
<div class="absolute inset-0 bg-black opacity-50"></div>
<div class="relative z-10 text-center text-white px-4">
<h1 class="text-5xl md:text-7xl font-bold mb-6">The Fox & Hounds</h1>
<p class="text-xl md:text-2xl mb-8">Traditional Pub in the Heart of Tormartin</p>
<a href="#menu" class="bg-amber-700 hover:bg-amber-800 text-white font-bold py-3 px-8 rounded-full text-lg transition duration-300">View Our Menu</a>
</div>
</section>
<!-- About Section -->
<section id="about" class="py-20 bg-amber-50">
<div class="container mx-auto px-4">
<div class="flex flex-col md:flex-row items-center gap-12">
<div class="md:w-1/2">
<img src="http://static.photos/pub/640x360/123" alt="The Fox & Hounds Pub" class="rounded-lg shadow-lg w-full">
</div>
<div class="md:w-1/2">
<h2 class="text-4xl font-bold mb-6 text-amber-900">Welcome to Our Pub</h2>
<p class="text-lg mb-6 text-gray-700">Nestled in the charming village of Tormartin, The Fox & Hounds has been serving locals and visitors alike for generations. Our cozy atmosphere, traditional decor, and warm hospitality make us the perfect spot to unwind after a long day.</p>
<p class="text-lg mb-6 text-gray-700">Whether you're looking for a hearty meal, a refreshing pint, or just a friendly place to chat with neighbors, we've got you covered. Our menu features classic British pub fare made with locally-sourced ingredients whenever possible.</p>
<div class="flex flex-wrap gap-4">
<div class="flex items-center">
<div class="bg-amber-500 w-3 h-3 rounded-full mr-2"></div>
<span>Fresh Local Ingredients</span>
</div>
<div class="flex items-center">
<div class="bg-amber-500 w-3 h-3 rounded-full mr-2"></div>
<span>Traditional Atmosphere</span>
</div>
<div class="flex items-center">
<div class="bg-amber-500 w-3 h-3 rounded-full mr-2"></div>
<span>Friendly Staff</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Menu Section -->
<section id="menu" class="py-20">
<div class="container mx-auto px-4">
<h2 class="text-4xl font-bold text-center mb-16 text-amber-900">Our Menu</h2>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
<div>
<h3 class="text-2xl font-bold mb-6 text-amber-800 border-b-2 border-amber-500 pb-2">Main Courses</h3>
<div class="space-y-6">
<div class="flex justify-between items-start pb-4 border-b border-gray-200">
<div>
<h4 class="font-bold text-lg">Traditional Fish & Chips</h4>
<p class="text-gray-600">Fresh cod in crispy batter served with chunky chips and mushy peas</p>
</div>
<span class="font-bold text-amber-700">£12.95</span>
</div>
<div class="flex justify-between items-start pb-4 border-b border-gray-200">
<div>
<h4 class="font-bold text-lg">Bangers & Mash</h4>
<p class="text-gray-600">Homemade sausages with creamy mashed potatoes and onion gravy</p>
</div>
<span class="font-bold text-amber-700">£11.50</span>
</div>
<div class="flex justify-between items-start pb-4 border-b border-gray-200">
<div>
<h4 class="font-bold text-lg">Beef & Ale Pie</h4>
<p class="text-gray-600">Slow-cooked beef in rich ale sauce with shortcrust pastry</p>
</div>
<span class="font-bold text-amber-700">£14.95</span>
</div>
<div class="flex justify-between items-start pb-4 border-b border-gray-200">
<div>
<h4 class="font-bold text-lg">Grilled Salmon</h4>
<p class="text-gray-600">Fresh salmon fillet with lemon butter sauce and seasonal vegetables</p>
</div>
<span class="font-bold text-amber-700">£16.50</span>
</div>
</div>
</div>
<div>
<h3 class="text-2xl font-bold mb-6 text-amber-800 border-b-2 border-amber-500 pb-2">Drinks</h3>
<div class="space-y-6">
<div class="flex justify-between items-start pb-4 border-b border-gray-200">
<div>
<h4 class="font-bold text-lg">Local Craft Beer</h4>
<p class="text-gray-600">Rotating selection from regional breweries</p>
</div>
<span class="font-bold text-amber-700">£4.20</span>
</div>
<div class="flex justify-between items-start pb-4 border-b border-gray-200">
<div>
<h4 class="font-bold text-lg">Classic Cider</h4>
<p class="text-gray-600">West Country cider on draft</p>
</div>
<span class="font-bold text-amber-700">£3.90</span>
</div>
<div class="flex justify-between items-start pb-4 border-b border-gray-200">
<div>
<h4 class="font-bold text-lg">House Wine</h4>
<p class="text-gray-600">Red or White - Glass</p>
</div>
<span class="font-bold text-amber-700">£4.50</span>
</div>
<div class="flex justify-between items-start pb-4 border-b border-gray-200">
<div>
<h4 class="font-bold text-lg">Premium Spirits</h4>
<p class="text-gray-600">Selection of whiskeys, gins, and vodkas</p>
</div>
<span class="font-bold text-amber-700">£5.50</span>
</div>
</div>
<h3 class="text-2xl font-bold mt-12 mb-6 text-amber-800 border-b-2 border-amber-500 pb-2">Desserts</h3>
<div class="space-y-6">
<div class="flex justify-between items-start pb-4 border-b border-gray-200">
<div>
<h4 class="font-bold text-lg">Sticky Toffee Pudding</h4>
<p class="text-gray-600">Warm sponge cake with toffee sauce and vanilla ice cream</p>
</div>
<span class="font-bold text-amber-700">£6.95</span>
</div>
<div class="flex justify-between items-start pb-4 border-b border-gray-200">
<div>
<h4 class="font-bold text-lg">Cheesecake</h4>
<p class="text-gray-600">Creamy New York style with berry compote</p>
</div>
<span class="font-bold text-amber-700">£6.50</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Events Section -->
<section id="events" class="py-20 bg-amber-100">
<div class="container mx-auto px-4">
<h2 class="text-4xl font-bold text-center mb-16 text-amber-900">Upcoming Events</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="bg-white rounded-lg shadow-md overflow-hidden">
<img src="http://static.photos/music/320x240/456" alt="Live Music Night" class="w-full h-48 object-cover">
<div class="p-6">
<h3 class="text-xl font-bold mb-2">Live Music Night</h3>
<p class="text-gray-600 mb-4">Every Friday at 8pm</p>
<p class="mb-4">Join us for an evening of acoustic performances by local artists. Great music, great company, and great drinks!</p>
<a href="#" class="text-amber-700 font-semibold hover:underline">Learn More</a>
</div>
</div>
<div class="bg-white rounded-lg shadow-md overflow-hidden">
<img src="http://static.photos/quiz/320x240/789" alt="Pub Quiz" class="w-full h-48 object-cover">
<div class="p-6">
<h3 class="text-xl font-bold mb-2">Pub Quiz</h3>
<p class="text-gray-600 mb-4">Wednesdays at 7:30pm</p>
<p class="mb-4">Test your knowledge every Wednesday evening. Teams of up to 6 people. Prizes for the winners!</p>
<a href="#" class="text-amber-700 font-semibold hover:underline">Learn More</a>
</div>
</div>
<div class="bg-white rounded-lg shadow-md overflow-hidden">
<img src="http://static.photos/seasonal/320x240/101" alt="Seasonal Specials" class="w-full h-48 object-cover">
<div class="p-6">
<h3 class="text-xl font-bold mb-2">Seasonal Specials</h3>
<p class="text-gray-600 mb-4">Throughout the year</p>
<p class="mb-4">Celebrate holidays with our special menus and themed events. Check back regularly for updates!</p>
<a href="#" class="text-amber-700 font-semibold hover:underline">Learn More</a>
</div>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="py-20">
<div class="container mx-auto px-4">
<div class="flex flex-col lg:flex-row gap-12">
<div class="lg:w-1/2">
<h2 class="text-4xl font-bold mb-8 text-amber-900">Visit Us</h2>
<div class="space-y-6">
<div class="flex items-start">
<div class="bg-amber-100 p-3 rounded-full mr-4">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-amber-700" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
</div>
<div>
<h3 class="font-bold text-lg mb-1">Address</h3>
<p class="text-gray-700">12 Main Street<br>Tormartin<br>County Antrim<br>BT41 2AB</p>
</div>
</div>
<div class="flex items-start">
<div class="bg-amber-100 p-3 rounded-full mr-4">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-amber-700" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
</svg>
</div>
<div>
<h3 class="font-bold text-lg mb-1">Phone</h3>
<p class="text-gray-700">+44 28 9123 4567</p>
</div>
</div>
<div class="flex items-start">
<div class="bg-amber-100 p-3 rounded-full mr-4">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-amber-700" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
<div>
<h3 class="font-bold text-lg mb-1">Opening Hours</h3>
<p class="text-gray-700">
Monday - Thursday: 11am - 11pm<br>
Friday - Saturday: 11am - 12am<br>
Sunday: 12pm - 10pm
</p>
</div>
</div>
</div>
</div>
<div class="lg:w-1/2">
<div class="bg-white rounded-lg shadow-lg p-8">
<h3 class="text-2xl font-bold mb-6 text-amber-900">Send Us a Message</h3>
<form>
<div class="mb-4">
<label class="block text-gray-700 mb-2" for="name">Name</label>
<input type="text" id="name" 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 class="mb-4">
<label class="block text-gray-700 mb-2" for="email">Email</label>
<input type="email" id="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 class="mb-4">
<label class="block text-gray-700 mb-2" for="message">Message</label>
<textarea id="message" rows="5" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-500"></textarea>
</div>
<button type="submit" class="w-full bg-amber-700 hover:bg-amber-800 text-white font-bold py-3 px-4 rounded-lg transition duration-300">Send Message</button>
</form>
</div>
</div>
</div>
</div>
</section>
</main>
<custom-footer></custom-footer>
<script src="components/navbar.js"></script>
<script src="components/footer.js"></script>
<script src="script.js"></script>
<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
</body>
</html> |