Spaces:
Running
Running
File size: 12,946 Bytes
3ba4663 | 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 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Down South Smash Burgers & Wings</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">
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');
body {
font-family: 'Poppins', sans-serif;
background-color: #fff9f2;
}
.hero {
background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('https://images.unsplash.com/photo-1568901346375-23c9450c58cd?ixlib=rb-4.0.3');
background-size: cover;
background-position: center;
}
.menu-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}
.footer-links li:hover {
color: #f59e0b;
}
/* Custom animation for the logo */
@keyframes sizzle {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
.logo-animate:hover {
animation: sizzle 0.5s ease-in-out;
}
</style>
</head>
<body>
<!-- Header/Navigation -->
<header class="bg-red-800 text-white sticky top-0 z-50 shadow-lg">
<div class="container mx-auto px-4 py-3 flex justify-between items-center">
<div class="flex items-center space-x-2">
<div class="logo-animate">
<i class="fas fa-hamburger text-2xl text-amber-400"></i>
</div>
<h1 class="text-xl md:text-2xl font-bold">
<span class="text-amber-400">DOWN SOUTH</span> SMASH BURGERS
</h1>
</div>
<!-- Mobile Menu Button -->
<button id="mobile-menu-button" class="md:hidden text-white focus:outline-none">
<i class="fas fa-bars text-2xl"></i>
</button>
<!-- Desktop Navigation -->
<nav class="hidden md:flex space-x-6">
<a href="#home" class="hover:text-amber-400 transition">Home</a>
<a href="#menu" class="hover:text-amber-400 transition">Menu</a>
<a href="#about" class="hover:text-amber-400 transition">About</a>
<a href="#locations" class="hover:text-amber-400 transition">Locations</a>
<a href="#contact" class="hover:text-amber-400 transition">Contact</a>
</nav>
</div>
<!-- Mobile Menu -->
<div id="mobile-menu" class="hidden md:hidden bg-red-900 px-4 py-3">
<nav class="flex flex-col space-y-3">
<a href="#home" class="hover:text-amber-400 transition">Home</a>
<a href="#menu" class="hover:text-amber-400 transition">Menu</a>
<a href="#about" class="hover:text-amber-400 transition">About</a>
<a href="#locations" class="hover:text-amber-400 transition">Locations</a>
<a href="#contact" class="hover:text-amber-400 transition">Contact</a>
</nav>
</div>
</header>
<!-- Hero Section -->
<section id="home" class="hero flex items-center justify-center text-white h-screen">
<div class="container mx-auto px-4 text-center">
<h2 class="text-4xl md:text-6xl font-bold mb-6">
<span class="text-amber-400">DOWN SOUTH</span> SMASH BURGERS & WINGS
</h2>
<p class="text-xl md:text-2xl mb-8">Authentic southern flavors smashed between two buns!</p>
<div class="flex flex-col md:flex-row justify-center space-y-4 md:space-y-0 md:space-x-4">
<a href="#menu" class="bg-amber-500 hover:bg-amber-600 text-red-900 font-bold py-3 px-6 rounded-full transition duration-300 transform hover:scale-105">
<i class="fas fa-utensils mr-2"></i>View Menu
</a>
<a href="#locations" class="bg-transparent border-2 border-white hover:bg-red-800 text-white font-bold py-3 px-6 rounded-full transition duration-300 transform hover:scale-105">
<i class="fas fa-map-marker-alt mr-2"></i>Find Us
</a>
</div>
</div>
</section>
<!-- Specials Section -->
<section class="bg-amber-50 py-12">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold text-center text-red-800 mb-8">Today's Specials</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<!-- Special 1 -->
<div class="bg-white rounded-lg overflow-hidden shadow-lg transition duration-300 transform hover:scale-105">
<div class="h-48 bg-gray-300 relative">
<img src="https://images.unsplash.com/photo-1586190848861-99aa4a171e90?ixlib=rb-4.0.3" alt="Double Smash Burger" class="w-full h-full object-cover">
<div class="absolute top-4 right-4 bg-red-700 text-white px-3 py-1 rounded-full font-bold text-sm">
$12.99
</div>
</div>
<div class="p-6">
<h3 class="text-xl font-bold text-red-800 mb-2">Double Smash Deluxe</h3>
<p class="text-gray-600">Two smashed patties, American cheese, caramelized onions, pickles, and our signature Down South sauce.</p>
</div>
</div>
<!-- Special 2 -->
<div class="bg-white rounded-lg overflow-hidden shadow-lg transition duration-300 transform hover:scale-105">
<div class="h-48 bg-gray-300 relative">
<img src="https://images.unsplash.com/photo-1561758033-d89a9ad46330?ixlib=rb-4.0.3" alt="Hot Wings" class="w-full h-full object-cover">
<div class="absolute top-4 right-4 bg-red-800 text-white px-3 py-1 rounded-full font-bold text-sm">
$9.99
</div>
</div>
<div class="p-6">
<h3 class="text-xl font-bold text-red-800 mb-2">Hot Honey Wings</h3>
<p class="text-gray-600">Crispy wings tossed in our sweet & spicy hot honey sauce, served with ranch and celery.</p>
</div>
</div>
<!-- Special 3 -->
<div class="bg-white rounded-lg overflow-hidden shadow-lg transition duration-300 transform hover:scale-105">
<div class="h-48 bg-gray-300 relative">
<img src="https://images.unsplash.com/photo-1559849453-2cf0062c1720?ixlib=rb-4.0.3" alt="Burger Combo" class="w-full h-full object-cover">
<div class="absolute top-4 right-4 bg-red-900 text-white px-3 py-1 rounded-full font-bold text-sm">
$14.99
</div>
</div>
<div class="p-6">
<h3 class="text-xl font-bold text-red-800 mb-2">Smash Combo</h3>
<p class="text-gray-600">Single smash burger with fries and drink. Upgrade to a Double Smash for $2 more.</p>
</div>
</div>
</div>
</div>
</section>
<!-- Menu Section -->
<section id="menu" class="py-16 bg-white">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold text-center text-red-800 mb-8">Our Menu</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<!-- Burgers Column -->
<div>
<h3 class="text-2xl font-semibold text-amber-600 border-b-2 border-amber-600 pb-2 mb-6">
<i class="fas fa-hamburger mr-2"></i>Smash Burgers
</h3>
<!-- Menu Item -->
<div class="menu-card bg-amber-50 p-6 rounded-lg mb-6 transition duration-300">
<div class="flex justify-between items-start">
<div>
<h4 class="font-bold text-lg text-red-800">Classic Smash</h4>
<p class="text-gray-600">Smashed patty, American cheese, pickles, onions, Down South sauce</p>
</div>
<span class="font-bold text-red-800">$8.99</span>
</div>
</div>
<!-- Menu Item -->
<div class="menu-card bg-amber-50 p-6 rounded-lg mb-6 transition duration-300">
<div class="flex justify-between items-start">
<div>
<h4 class="font-bold text-lg text-red-800">Bacon Double Smash</h4>
<p class="text-gray-600">Two smashed patties, cheddar, crispy bacon, BBQ sauce, onion rings</p>
</div>
<span class="font-bold text-red-800">$12.99</span>
</div>
</div>
<!-- Menu Item -->
<div class="menu-card bg-amber-50 p-6 rounded-lg mb-6 transition duration-300">
<div class="flex justify-between items-start">
<div>
<h4 class="font-bold text-lg text-red-800">Hot & Spicy Smash</h4>
<p class="text-gray-600">Smashed patty, pepper jack, jalapeños, spicy mayo, crispy onions</p>
</div>
<span class="font-bold text-red-800">$10.99</span>
</div>
</div>
<!-- Menu Item -->
<div class="menu-card bg-amber-50 p-6 rounded-lg mb-6 transition duration-300">
<div class="flex justify-between items-start">
<div>
<h4 class="font-bold text-lg text-red-800">Southern Pimento Cheese</h4>
<p class="text-gray-600">Smashed patty, homemade pimento cheese, bacon jam, brioche bun</p>
</div>
<span class="font-bold text-red-800">$11.99</span>
</div>
</div>
</div>
<!-- Wings Column -->
<div>
<h3 class="text-2xl font-semibold text-amber-600 border-b-2 border-amber-600 pb-2 mb-6">
<i class="fas fa-drumstick-bite mr-2"></i>Wings
</h3>
<!-- Menu Item -->
<div class="menu-card bg-amber-50 p-6 rounded-lg mb-6 transition duration-300">
<div class="flex justify-between items-start">
<div>
<h4 class="font-bold text-lg text-red-800">Classic Buffalo (6pc)</h4>
<p class="text-gray-600">Hand-breaded wings tossed in our signature buffalo sauce</p>
</div>
<span class="font-bold text-red-800">$7.99</span>
</div>
</div>
<!-- Menu Item -->
<div class="menu-card bg-amber-50 p-6 rounded-lg mb-6 transition duration-300">
<div class="flex justify-between items-start">
<div>
<h4 class="font-bold text-lg text-red-800">Sweet Heat BBQ
<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=LEGENDZEATZ/dsmb" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html> |