|
|
<!DOCTYPE html> |
|
|
<html lang="es"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>The New Tunk - Nightclub & Concert Venue</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> |
|
|
|
|
|
.hero { |
|
|
background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('https://images.unsplash.com/photo-1540039155733-5bb30b53aa14?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80'); |
|
|
background-size: cover; |
|
|
background-position: center; |
|
|
height: 90vh; |
|
|
} |
|
|
|
|
|
.event-card:hover { |
|
|
transform: translateY(-10px); |
|
|
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3); |
|
|
} |
|
|
|
|
|
.gallery-item { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.gallery-item:hover { |
|
|
transform: scale(1.05); |
|
|
z-index: 10; |
|
|
} |
|
|
|
|
|
.pulse { |
|
|
animation: pulse 2s infinite; |
|
|
} |
|
|
|
|
|
@keyframes pulse { |
|
|
0% { |
|
|
box-shadow: 0 0 0 0 rgba(236, 72, 153, 0.7); |
|
|
} |
|
|
70% { |
|
|
box-shadow: 0 0 0 10px rgba(236, 72, 153, 0); |
|
|
} |
|
|
100% { |
|
|
box-shadow: 0 0 0 0 rgba(236, 72, 153, 0); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
::-webkit-scrollbar { |
|
|
width: 8px; |
|
|
} |
|
|
|
|
|
::-webkit-scrollbar-track { |
|
|
background: #111827; |
|
|
} |
|
|
|
|
|
::-webkit-scrollbar-thumb { |
|
|
background: #ec4899; |
|
|
border-radius: 4px; |
|
|
} |
|
|
|
|
|
::-webkit-scrollbar-thumb:hover { |
|
|
background: #db2777; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-900 text-white font-sans"> |
|
|
|
|
|
<nav class="fixed w-full bg-gray-900 bg-opacity-90 z-50 border-b border-pink-600"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="flex items-center justify-between h-16"> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0"> |
|
|
<h1 class="text-2xl font-bold text-pink-500">THE NEW <span class="text-white">TUNK</span></h1> |
|
|
</div> |
|
|
</div> |
|
|
<div class="hidden md:block"> |
|
|
<div class="ml-10 flex items-baseline space-x-4"> |
|
|
<a href="#home" class="px-3 py-2 rounded-md text-sm font-medium text-white hover:bg-pink-900 transition">Home</a> |
|
|
<a href="#events" class="px-3 py-2 rounded-md text-sm font-medium text-white hover:bg-pink-900 transition">Events</a> |
|
|
<a href="#gallery" class="px-3 py-2 rounded-md text-sm font-medium text-white hover:bg-pink-900 transition">Gallery</a> |
|
|
<a href="#reservations" class="px-3 py-2 rounded-md text-sm font-medium text-white hover:bg-pink-900 transition">Reservations</a> |
|
|
<a href="#tickets" class="px-3 py-2 rounded-md text-sm font-medium text-white hover:bg-pink-900 transition">Tickets</a> |
|
|
<a href="#contact" class="px-3 py-2 rounded-md text-sm font-medium text-white hover:bg-pink-900 transition">Contact</a> |
|
|
</div> |
|
|
</div> |
|
|
<div class="md:hidden"> |
|
|
<button id="mobile-menu-button" class="text-gray-300 hover:text-white focus:outline-none"> |
|
|
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path> |
|
|
</svg> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="mobile-menu" class="hidden md:hidden bg-gray-800"> |
|
|
<div class="px-2 pt-2 pb-3 space-y-1 sm:px-3"> |
|
|
<a href="#home" class="block px-3 py-2 rounded-md text-base font-medium text-white hover:bg-pink-900">Home</a> |
|
|
<a href="#events" class="block px-3 py-2 rounded-md text-base font-medium text-white hover:bg-pink-900">Events</a> |
|
|
<a href="#gallery" class="block px-3 py-2 rounded-md text-base font-medium text-white hover:bg-pink-900">Gallery</a> |
|
|
<a href="#reservations" class="block px-3 py-2 rounded-md text-base font-medium text-white hover:bg-pink-900">Reservations</a> |
|
|
<a href="#tickets" class="block px-3 py-2 rounded-md text-base font-medium text-white hover:bg-pink-900">Tickets</a> |
|
|
<a href="#contact" class="block px-3 py-2 rounded-md text-base font-medium text-white hover:bg-pink-900">Contact</a> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<section id="home" class="hero flex items-center justify-center text-center pt-16"> |
|
|
<div class="max-w-4xl px-4"> |
|
|
<h1 class="text-5xl md:text-7xl font-bold mb-6 text-pink-500">THE NEW TUNK</h1> |
|
|
<p class="text-xl md:text-2xl mb-8">Where music, energy and unforgettable nights collide</p> |
|
|
<div class="flex flex-col sm:flex-row justify-center gap-4"> |
|
|
<a href="#events" class="bg-pink-600 hover:bg-pink-700 text-white font-bold py-3 px-6 rounded-full transition transform hover:scale-105"> |
|
|
UPCOMING EVENTS |
|
|
</a> |
|
|
<a href="#reservations" class="border-2 border-pink-600 text-pink-400 hover:bg-pink-900 hover:text-white font-bold py-3 px-6 rounded-full transition transform hover:scale-105"> |
|
|
BOOK A TABLE |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-20 bg-gray-800"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="lg:text-center"> |
|
|
<h2 class="text-base text-pink-600 font-semibold tracking-wide uppercase">EXPERIENCE</h2> |
|
|
<p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-white sm:text-4xl"> |
|
|
The Ultimate Nightlife Destination |
|
|
</p> |
|
|
<p class="mt-4 max-w-2xl text-xl text-gray-300 lg:mx-auto"> |
|
|
The New Tunk is more than just a club - it's a cultural phenomenon where music, art, and nightlife converge to create unforgettable experiences. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="mt-20"> |
|
|
<div class="grid grid-cols-1 gap-12 md:grid-cols-3"> |
|
|
<div class="text-center"> |
|
|
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-pink-500 text-white mx-auto mb-4"> |
|
|
<i class="fas fa-music text-xl"></i> |
|
|
</div> |
|
|
<h3 class="text-lg font-medium text-white">World-Class Sound</h3> |
|
|
<p class="mt-2 text-base text-gray-300"> |
|
|
Our custom-designed sound system delivers crystal clear audio at any volume, from intimate jazz to pounding EDM. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="text-center"> |
|
|
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-pink-500 text-white mx-auto mb-4"> |
|
|
<i class="fas fa-cocktail text-xl"></i> |
|
|
</div> |
|
|
<h3 class="text-lg font-medium text-white">Craft Cocktails</h3> |
|
|
<p class="mt-2 text-base text-gray-300"> |
|
|
Expert mixologists create innovative drinks using premium spirits and fresh ingredients. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="text-center"> |
|
|
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-pink-500 text-white mx-auto mb-4"> |
|
|
<i class="fas fa-star text-xl"></i> |
|
|
</div> |
|
|
<h3 class="text-lg font-medium text-white">VIP Experience</h3> |
|
|
<p class="mt-2 text-base text-gray-300"> |
|
|
Exclusive bottle service, private booths, and dedicated staff for those seeking luxury nightlife. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="events" class="py-20 bg-gray-900"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="text-base text-pink-600 font-semibold tracking-wide uppercase">UPCOMING</h2> |
|
|
<p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-white sm:text-4xl"> |
|
|
Events & Performances |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="event-card bg-gray-800 rounded-lg overflow-hidden shadow-lg transition duration-500 ease-in-out"> |
|
|
<div class="relative"> |
|
|
<img class="w-full h-64 object-cover" src="https://images.unsplash.com/photo-1501612780327-45045538702b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="DJ Night"> |
|
|
<div class="absolute top-4 right-4 bg-pink-600 text-white text-xs font-bold px-2 py-1 rounded-full"> |
|
|
SOLD OUT |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<div class="flex items-center text-yellow-400 mb-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> |
|
|
<span class="text-gray-400 text-sm ml-2">(48)</span> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-white mb-2">DJ Cosmic Waves</h3> |
|
|
<p class="text-gray-400 text-sm mb-4"><i class="far fa-calendar-alt mr-2"></i>Friday, June 10, 2023 | 10PM-4AM</p> |
|
|
<p class="text-gray-300 mb-4">International DJ sensation Cosmic Waves brings his signature blend of deep house and techno to The New Tunk.</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="text-pink-500 font-bold">$40-$120</span> |
|
|
<button class="bg-gray-700 hover:bg-gray-600 text-white text-sm font-bold py-2 px-4 rounded-full transition"> |
|
|
Join Waitlist |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="event-card bg-gray-800 rounded-lg overflow-hidden shadow-lg transition duration-500 ease-in-out"> |
|
|
<div class="relative"> |
|
|
<img class="w-full h-64 object-cover" src="https://images.unsplash.com/photo-1470229722913-7c0e2dbbafd3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Live Band"> |
|
|
<div class="absolute top-4 right-4 bg-green-600 text-white text-xs font-bold px-2 py-1 rounded-full"> |
|
|
TICKETS AVAILABLE |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<div class="flex items-center text-yellow-400 mb-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="far fa-star"></i> |
|
|
<span class="text-gray-400 text-sm ml-2">(36)</span> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-white mb-2">Neon Dreams Live</h3> |
|
|
<p class="text-gray-400 text-sm mb-4"><i class="far fa-calendar-alt mr-2"></i>Saturday, June 18, 2023 | 9PM-2AM</p> |
|
|
<p class="text-gray-300 mb-4">The chart-topping indie electronic band performs their hits in an intimate club setting.</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="text-pink-500 font-bold">$25-$75</span> |
|
|
<button class="bg-pink-600 hover:bg-pink-700 text-white text-sm font-bold py-2 px-4 rounded-full transition transform hover:scale-105 pulse"> |
|
|
Get Tickets |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="event-card bg-gray-800 rounded-lg overflow-hidden shadow-lg transition duration-500 ease-in-out"> |
|
|
<div class="relative"> |
|
|
<img class="w-full h-64 object-cover" src="https://images.unsplash.com/photo-1492684223066-81342ee5ff30?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Theme Party"> |
|
|
<div class="absolute top-4 right-4 bg-green-600 text-white text-xs font-bold px-2 py-1 rounded-full"> |
|
|
TICKETS AVAILABLE |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<div class="flex items-center text-yellow-400 mb-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> |
|
|
<span class="text-gray-400 text-sm ml-2">(112)</span> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-white mb-2">Retro Futurism Night</h3> |
|
|
<p class="text-gray-400 text-sm mb-4"><i class="far fa-calendar-alt mr-2"></i>Friday, June 24, 2023 | 10PM-4AM</p> |
|
|
<p class="text-gray-300 mb-4">A celebration of 80s synthwave and cyberpunk aesthetics with DJs spinning retro-futuristic beats.</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="text-pink-500 font-bold">$30-$90</span> |
|
|
<button class="bg-pink-600 hover:bg-pink-700 text-white text-sm font-bold py-2 px-4 rounded-full transition transform hover:scale-105"> |
|
|
Get Tickets |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="text-center mt-12"> |
|
|
<a href="#" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-full text-white bg-pink-600 hover:bg-pink-700 transition"> |
|
|
View All Events |
|
|
<i class="fas fa-arrow-right ml-2"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="gallery" class="py-20 bg-gray-800"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="text-base text-pink-600 font-semibold tracking-wide uppercase">MEMORIES</h2> |
|
|
<p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-white sm:text-4xl"> |
|
|
Our Gallery |
|
|
</p> |
|
|
<p class="mt-3 max-w-2xl mx-auto text-xl text-gray-300 sm:mt-4"> |
|
|
Relive the best moments from our past events |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4"> |
|
|
<div class="gallery-item rounded-lg overflow-hidden"> |
|
|
<img class="w-full h-48 object-cover hover:opacity-90" src="https://images.unsplash.com/photo-1549213783-8284d0336c4f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2071&q=80" alt="Club night"> |
|
|
</div> |
|
|
<div class="gallery-item rounded-lg overflow-hidden"> |
|
|
<img class="w-full h-48 object-cover hover:opacity-90" src="https://images.unsplash.com/photo-1496293455970-f8581aae0e3b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2013&q=80" alt="DJ performing"> |
|
|
</div> |
|
|
<div class="gallery-item rounded-lg overflow-hidden"> |
|
|
<img class="w-full h-48 object-cover hover:opacity-90" src="https://images.unsplash.com/photo-1514525253161-7a3d4f8351a7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80" alt="Crowd dancing"> |
|
|
</div> |
|
|
<div class="gallery-item rounded-lg overflow-hidden"> |
|
|
<img class="w-full h-48 object-cover hover:opacity-90" src="https://images.unsplash.com/photo-1470225620780-dba8ba36b745?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Light show"> |
|
|
</div> |
|
|
<div class="gallery-item rounded-lg overflow-hidden"> |
|
|
<img class="w-full h-48 object-cover hover:opacity-90" src="https://images.unsplash.com/photo-1470229722913-7c0e2dbbafd3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Live performance"> |
|
|
</div> |
|
|
<div class="gallery-item rounded-lg overflow-hidden"> |
|
|
<img class="w-full h-48 object-cover hover:opacity-90" src="https://images.unsplash.com/photo-1505236858219-8359eb29e329?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1982&q=80" alt="VIP section"> |
|
|
</div> |
|
|
<div class="gallery-item rounded-lg overflow-hidden"> |
|
|
<img class="w-full h-48 object-cover hover:opacity-90" src="https://images.unsplash.com/photo-1566737236500-c8ac43014a67?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Bar area"> |
|
|
</div> |
|
|
<div class="gallery-item rounded-lg overflow-hidden"> |
|
|
<img class="w-full h-48 object-cover hover:opacity-90" src="https://images.unsplash.com/photo-1533175265586-1d50617f4148?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Dance floor"> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="text-center mt-12"> |
|
|
<a href="#" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-full text-white bg-gray-700 hover:bg-gray-600 transition"> |
|
|
View More Photos |
|
|
<i class="fas fa-images ml-2"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="reservations" class="py-20 bg-gray-900"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="lg:grid lg:grid-cols-2 lg:gap-16 items-center"> |
|
|
<div class="mb-12 lg:mb-0"> |
|
|
<h2 class="text-base text-pink-600 font-semibold tracking-wide uppercase">EXCLUSIVE</h2> |
|
|
<p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-white sm:text-4xl"> |
|
|
Book Your VIP Experience |
|
|
</p> |
|
|
<p class="mt-4 text-lg text-gray-300"> |
|
|
Reserve your table or VIP booth for an unforgettable night. Our premium service includes: |
|
|
</p> |
|
|
<ul class="mt-6 space-y-4"> |
|
|
<li class="flex items-start"> |
|
|
<div class="flex-shrink-0"> |
|
|
<div class="flex items-center justify-center h-6 w-6 rounded-full bg-pink-500 text-white"> |
|
|
<i class="fas fa-check text-xs"></i> |
|
|
</div> |
|
|
</div> |
|
|
<p class="ml-3 text-base text-gray-300">Priority entry with no waiting lines</p> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<div class="flex-shrink-0"> |
|
|
<div class="flex items-center justify-center h-6 w-6 rounded-full bg-pink-500 text-white"> |
|
|
<i class="fas fa-check text-xs"></i> |
|
|
</div> |
|
|
</div> |
|
|
<p class="ml-3 text-base text-gray-300">Dedicated server and bottle service</p> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<div class="flex-shrink-0"> |
|
|
<div class="flex items-center justify-center h-6 w-6 rounded-full bg-pink-500 text-white"> |
|
|
<i class="fas fa-check text-xs"></i> |
|
|
</div> |
|
|
</div> |
|
|
<p class="ml-3 text-base text-gray-300">Premium view of the stage or DJ booth</p> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<div class="flex-shrink-0"> |
|
|
<div class="flex items-center justify-center h-6 w-6 rounded-full bg-pink-500 text-white"> |
|
|
<i class="fas fa-check text-xs"></i> |
|
|
</div> |
|
|
</div> |
|
|
<p class="ml-3 text-base text-gray-300">Complimentary coat check</p> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gray-800 p-8 rounded-lg shadow-xl"> |
|
|
<h3 class="text-2xl font-bold text-white mb-6">Make a Reservation</h3> |
|
|
<form> |
|
|
<div class="mb-4"> |
|
|
<label for="name" class="block text-sm font-medium text-gray-300 mb-1">Full Name</label> |
|
|
<input type="text" id="name" class="w-full px-4 py-2 rounded-lg bg-gray-700 border border-gray-600 text-white focus:ring-pink-500 focus:border-pink-500"> |
|
|
</div> |
|
|
<div class="mb-4"> |
|
|
<label for="email" class="block text-sm font-medium text-gray-300 mb-1">Email</label> |
|
|
<input type="email" id="email" class="w-full px-4 py-2 rounded-lg bg-gray-700 border border-gray-600 text-white focus:ring-pink-500 focus:border-pink-500"> |
|
|
</div> |
|
|
<div class="mb-4"> |
|
|
<label for="phone" class="block text-sm font-medium text-gray-300 mb-1">Phone Number</label> |
|
|
<input type="tel" id="phone" class="w-full px-4 py-2 rounded-lg bg-gray-700 border border-gray-600 text-white focus:ring-pink-500 focus:border-pink-500"> |
|
|
</div> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4"> |
|
|
<div> |
|
|
<label for="date" class="block text-sm font-medium text-gray-300 mb-1">Date</label> |
|
|
<input type="date" id="date" class="w-full px-4 py-2 rounded-lg bg-gray-700 border border-gray-600 text-white focus:ring-pink-500 focus:border-pink-500"> |
|
|
</div> |
|
|
<div> |
|
|
<label for="time" class="block text-sm font-medium text-gray-300 mb-1">Time</label> |
|
|
<select id="time" class="w-full px-4 py-2 rounded-lg bg-gray-700 border border-gray-600 text-white focus:ring-pink-500 focus:border-pink-500"> |
|
|
<option>9:00 PM</option> |
|
|
<option>9:30 PM</option> |
|
|
<option>10:00 PM</option> |
|
|
<option>10:30 PM</option> |
|
|
<option>11:00 PM</option> |
|
|
</select> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mb-4"> |
|
|
<label for="guests" class="block text-sm font-medium text-gray-300 mb-1">Number of Guests</label> |
|
|
<select id="guests" class="w-full px-4 py-2 rounded-lg bg-gray-700 border border-gray-600 text-white focus:ring-pink-500 focus:border-pink-500"> |
|
|
<option>1-2</option> |
|
|
<option>3-4</option> |
|
|
<option>5-6</option> |
|
|
<option>7-8</option> |
|
|
<option>9-10</option> |
|
|
<option>10+</option> |
|
|
</select> |
|
|
</div> |
|
|
<div class="mb-6"> |
|
|
<label for="requests" class="block text-sm font-medium text-gray-300 mb-1">Special Requests</label> |
|
|
<textarea id="requests" rows="3" class="w-full px-4 py-2 rounded-lg bg-gray-700 border border-gray-600 text-white focus:ring-pink-500 focus:border-pink-500"></textarea> |
|
|
</div> |
|
|
<button type="submit" class="w-full bg-pink-600 hover:bg-pink-700 text-white font-bold py-3 px-4 rounded-lg transition transform hover:scale-105"> |
|
|
Reserve Now |
|
|
</button> |
|
|
</form> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="tickets" class="py-20 bg-gray-800"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="text-base text-pink-600 font-semibold tracking-wide uppercase">GET YOUR</h2> |
|
|
<p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-white sm:text-4xl"> |
|
|
Tickets Online |
|
|
</p> |
|
|
<p class="mt-3 max-w-2xl mx-auto text-xl text-gray-300 sm:mt-4"> |
|
|
Skip the line and secure your spot for upcoming events |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gray-900 rounded-xl shadow-2xl overflow-hidden max-w-4xl mx-auto"> |
|
|
<div class="md:flex"> |
|
|
<div class="md:flex-shrink-0"> |
|
|
<img class="h-full w-full object-cover md:w-64" src="https://images.unsplash.com/photo-1501612780327-45045538702b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Event image"> |
|
|
</div> |
|
|
<div class="p-8"> |
|
|
<div class="uppercase tracking-wide text-sm text-pink-600 font-semibold">Friday, June 24 • 10PM-4AM</div> |
|
|
<h3 class="mt-2 text-2xl font-semibold text-white">Retro Futurism Night</h3> |
|
|
<p class="mt-3 text-gray-300">A celebration of 80s synthwave and cyberpunk aesthetics with DJs spinning retro-futuristic beats.</p> |
|
|
|
|
|
<div class="mt-6"> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0"> |
|
|
<i class="fas fa-map-marker-alt text-pink-500"></i> |
|
|
</div> |
|
|
<div class="ml-3"> |
|
|
<p class="text-sm text-gray-300">The New Tunk • 123 Nightlife Ave, City</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-6 pt-6 border-t border-gray-700"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div> |
|
|
<span class="text-2xl font-bold text-white">$30</span> |
|
|
<span class="text-sm text-gray-400 ml-1">General Admission</span> |
|
|
</div> |
|
|
<button class="bg-pink-600 hover:bg-pink-700 text-white font-bold py-2 px-6 rounded-full transition transform hover:scale-105"> |
|
|
Buy Ticket |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-12 grid grid-cols-1 md:grid-cols-3 gap-6"> |
|
|
<div class="bg-gray-900 rounded-lg overflow-hidden shadow-lg"> |
|
|
<div class="p-6"> |
|
|
<h3 class="text-lg font-semibold text-white">General Admission</h3> |
|
|
<p class="mt-2 text-gray-300 text-sm">Access to main dance floor and bars</p> |
|
|
<div class="mt-4"> |
|
|
<span class="text-xl font-bold text-pink-500">$20-$50</span> |
|
|
<span class="text-sm text-gray-400 ml-1">depending on event</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gray-900 rounded-lg overflow-hidden shadow-lg"> |
|
|
<div class="p-6"> |
|
|
<h3 class="text-lg font-semibold text-white">VIP Admission</h3> |
|
|
<p class="mt-2 text-gray-300 text-sm">Priority entry, VIP lounge access</p> |
|
|
<div class="mt-4"> |
|
|
<span class="text-xl font-bold text-pink-500">$60-$120</span> |
|
|
<span class="text-sm text-gray-400 ml-1">depending on event</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gray-900 rounded-lg overflow-hidden shadow-lg"> |
|
|
<div class="p-6"> |
|
|
<h3 class="text-lg font-semibold text-white">Bottle Service</h3> |
|
|
<p class="mt-2 text-gray-300 text-sm">Private table, dedicated server, premium spirits</p> |
|
|
<div class="mt-4"> |
|
|
<span class="text-xl font-bold text-pink-500">$300+</span> |
|
|
<span class="text-sm text-gray-400 ml-1">minimum spend</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="contact" class="py-20 bg-gray-900"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="lg:text-center mb-16"> |
|
|
<h2 class="text-base text-pink-600 font-semibold tracking-wide uppercase">GET IN TOUCH</h2> |
|
|
<p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-white sm:text-4xl"> |
|
|
Contact Us |
|
|
</p> |
|
|
<p class="mt-4 max-w-2xl text-xl text-gray-300 lg:mx-auto"> |
|
|
Have questions? Want to host an event? We'd love to hear from you. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-12"> |
|
|
<div> |
|
|
<h3 class="text-lg font-medium text-white mb-4">Contact Information</h3> |
|
|
<div class="space-y-4"> |
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0"> |
|
|
<i class="fas fa-map-marker-alt text-pink-500 mt-1"></i> |
|
|
</div> |
|
|
<div class="ml-3"> |
|
|
<p class="text-base text-gray-300">123 Nightlife Avenue</p> |
|
|
<p class="text-base text-gray-300">Downtown, City 10001</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0"> |
|
|
<i class="fas fa-phone-alt text-pink-500 mt-1"></i> |
|
|
</div> |
|
|
<div class="ml-3"> |
|
|
<p class="text-base text-gray-300">+1 (555) 123-4567</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0"> |
|
|
<i class="fas fa-envelope text-pink-500 mt-1"></i> |
|
|
</div> |
|
|
<div class="ml-3"> |
|
|
<p class="text-base text-gray-300">info@thenewtunk.com</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<h3 class="text-lg font-medium text-white mt-8 mb-4">Opening Hours</h3> |
|
|
<div class="space-y-2"> |
|
|
<div class="flex justify-between"> |
|
|
<span class="text-gray-300">Thursday</span> |
|
|
<span class="text-gray-300">9PM - 2AM</span> |
|
|
</div> |
|
|
<div class="flex justify-between"> |
|
|
<span class="text-gray-300">Friday</span> |
|
|
<span class="text-gray-300">10PM - 4AM</span> |
|
|
</div> |
|
|
<div class="flex justify-between"> |
|
|
<span class="text-gray-300">Saturday</span> |
|
|
<span class="text-gray-300">10PM - 4AM</span> |
|
|
</div> |
|
|
<div class="flex justify-between"> |
|
|
<span class="text-gray-300">Sunday</span> |
|
|
<span class="text-gray-300">Closed</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<h3 class="text-lg font-medium text-white mt-8 mb-4">Follow Us</h3> |
|
|
<div class="flex space-x-4"> |
|
|
<a href="#" class="text-gray-400 hover:text-pink-500 transition"> |
|
|
<i class="fab fa-facebook-f text-xl"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-pink-500 transition"> |
|
|
<i class="fab fa-twitter text-xl"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-pink-500 transition"> |
|
|
<i class="fab fa-instagram text-xl"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-pink-500 transition"> |
|
|
<i class="fab fa-tiktok text-xl"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h3 class="text-lg font-medium text-white mb-4">Send Us a Message</h3> |
|
|
<form> |
|
|
<div class="grid grid-cols-1 gap-6"> |
|
|
<div> |
|
|
<label for="contact-name" class="block text-sm font-medium text-gray-300 mb-1">Full Name</label> |
|
|
<input type="text" id="contact-name" class="w-full px-4 py-2 rounded-lg bg-gray-800 border border-gray-700 text-white focus:ring-pink-500 focus:border-pink-500"> |
|
|
</div> |
|
|
<div> |
|
|
<label for="contact-email" class="block text-sm font-medium text-gray-300 mb-1">Email</label> |
|
|
<input type="email" id="contact-email" class="w-full px-4 py-2 rounded-lg bg-gray-800 border border-gray-700 text-white focus:ring-pink-500 focus:border-pink-500"> |
|
|
</div> |
|
|
<div> |
|
|
<label for="contact-subject" class="block text-sm font-medium text-gray-300 mb-1">Subject</label> |
|
|
<input type="text" id="contact-subject" class="w-full px-4 py-2 rounded-lg bg-gray-800 border border-gray-700 text-white focus:ring-pink-500 focus:border-pink-500"> |
|
|
</div> |
|
|
<div> |
|
|
<label for="contact-message" class="block text-sm font-medium text-gray-300 mb-1">Message</label> |
|
|
<textarea id="contact-message" rows="4" class="w-full px-4 py-2 rounded-lg bg-gray-800 border border-gray-700 text-white focus:ring-pink-500 focus:border-pink-500"></textarea> |
|
|
</div> |
|
|
<div> |
|
|
<button type="submit" class="w-full bg-pink-600 hover:bg-pink-700 text-white font-bold py-3 px-4 rounded-lg transition transform hover:scale-105"> |
|
|
Send Message |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</form> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 bg-gray-800"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="bg-gradient-to-r from-pink-600 to-purple-600 rounded-xl p-8 md:p-12 shadow-2xl"> |
|
|
<div class="max-w-3xl mx-auto text-center"> |
|
|
<h2 class="text-3xl font-bold text-white mb-4">Never Miss an Event</h2> |
|
|
<p class="text-lg text-pink-100 mb-8">Subscribe to our newsletter and be the first to know about upcoming shows, exclusive pre-sales, and special events.</p> |
|
|
<form class="flex flex-col sm:flex-row gap-4 max-w-md mx-auto"> |
|
|
<input type="email" placeholder="Your email address" class="flex-grow px-4 py-3 rounded-lg bg-white bg-opacity-20 text-white placeholder-pink-200 focus:outline-none focus:ring-2 focus:ring-white"> |
|
|
<button type="submit" class="bg-white text-pink-600 font-bold px-6 py-3 rounded-lg hover:bg-gray-100 transition transform hover:scale-105"> |
|
|
Subscribe |
|
|
</button> |
|
|
</form> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<footer class="bg-gray-900 border-t border-gray-800"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-8"> |
|
|
<div> |
|
|
<h3 class="text-lg font-semibold text-white mb-4">THE NEW TUNK</h3> |
|
|
<p class="text-gray-400"> |
|
|
The premier destination for nightlife and live music in the city. Experience unforgettable nights with world-class DJs, live performances, and exceptional service. |
|
|
</p> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-lg font-semibold text-white mb-4">Quick Links</h3> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#home" class="text-gray-400 hover:text-pink-500 transition">Home</a></li> |
|
|
<li><a href="#events" class="text-gray-400 hover:text-pink-500 transition">Events</a></li> |
|
|
<li><a href="#gallery" class="text-gray-400 hover:text-pink-500 transition">Gallery</a></li> |
|
|
<li><a href="#reservations" class="text-gray-400 hover:text-pink-500 transition">Reservations</a></li> |
|
|
<li><a href="#tickets" class="text-gray-400 hover:text-pink-500 transition">Tickets</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-lg font-semibold text-white mb-4">Legal</h3> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-pink-500 transition">Terms of Service</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-pink-500 transition">Privacy Policy</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-pink-500 transition">Cookie Policy</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-pink-500 transition">Age Restrictions</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-lg font-semibold text-white mb-4">Connect</h3> |
|
|
<div class="flex space-x-4 mb-4"> |
|
|
<a href="#" class="text-gray-400 hover:text-pink-500 transition"> |
|
|
<i class="fab fa-facebook-f"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-pink-500 transition"> |
|
|
<i class="fab fa-twitter"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-pink-500 transition"> |
|
|
<i class="fab fa-instagram"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-pink-500 transition"> |
|
|
<i class="fab fa-tiktok"></i> |
|
|
</a> |
|
|
</div> |
|
|
<p class="text-gray-400"> |
|
|
For bookings and inquiries:<br> |
|
|
bookings@thenewtunk.com |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-12 pt-8 border-t border-gray-800 text-center"> |
|
|
<p class="text-gray-400"> |
|
|
© 2023 The New Tunk. All rights reserved. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
|
|
|
document.getElementById('mobile-menu-button').addEventListener('click', function() { |
|
|
const menu = document.getElementById('mobile-menu'); |
|
|
menu.classList.toggle('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
|
|
anchor.addEventListener('click', function (e) { |
|
|
e.preventDefault(); |
|
|
|
|
|
const targetId = this.getAttribute('href'); |
|
|
const targetElement = document.querySelector(targetId); |
|
|
|
|
|
if (targetElement) { |
|
|
window.scrollTo({ |
|
|
top: targetElement.offsetTop - 70, |
|
|
behavior: 'smooth' |
|
|
}); |
|
|
|
|
|
|
|
|
const mobileMenu = document.getElementById('mobile-menu'); |
|
|
if (!mobileMenu.classList.contains('hidden')) { |
|
|
mobileMenu.classList.add('hidden'); |
|
|
} |
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
window.addEventListener('scroll', function() { |
|
|
const nav = document.querySelector('nav'); |
|
|
if (window.scrollY > 10) { |
|
|
nav.classList.add('shadow-lg'); |
|
|
} else { |
|
|
nav.classList.remove('shadow-lg'); |
|
|
} |
|
|
}); |
|
|
</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://cdn-avatars.huggingface.co/v1/production/uploads/6846a7b2c11f376ce247c236/5ngkdCVfOGdWH1PJvgpMM.png" 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://huggingface.co/spaces/Dataio/tunk2" style="color: #fff;text-decoration: underline;" target="_blank" >FACR</a> - 🧬 <a href="https://huggingface.co/spaces/Dataio/tunk2" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
