Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>You & Me Pub & Hostel | Kampot's Party Hub</title> | |
| <meta name="description" content="Kampot's favorite bar-hostel combo. Drink, chill, crash, repeat with our $5 beds and legendary parties."> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <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=Space+Grotesk:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| 'sunset-yellow': '#FFD166', | |
| 'sunset-orange': '#F4A261', | |
| 'sunset-pink': '#EF476F', | |
| 'sunset-purple': '#9C6ADE', | |
| 'sunset-blue': '#118AB2', | |
| 'electric-blue': '#06AED5', | |
| 'amber': '#FF9F1C', | |
| }, | |
| fontFamily: { | |
| heading: ['Space Grotesk', 'sans-serif'], | |
| body: ['Inter', 'sans-serif'], | |
| }, | |
| backgroundImage: { | |
| 'sunset-gradient': 'linear-gradient(to right, #FFD166, #F4A261, #EF476F, #9C6ADE, #118AB2)', | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| .logo-circle { | |
| background: linear-gradient(135deg, #FFD166 0%, #F4A261 25%, #EF476F 50%, #9C6ADE 75%, #118AB2 100%); | |
| box-shadow: 0 4px 20px rgba(0,0,0,0.15); | |
| } | |
| .sticky-nav { | |
| backdrop-filter: blur(10px); | |
| background-color: rgba(255,255,255,0.85); | |
| } | |
| .lazy { | |
| opacity: 0; | |
| transition: opacity 0.3s ease-in-out; | |
| } | |
| .lazy.loaded { | |
| opacity: 1; | |
| } | |
| .punch-card-hole { | |
| box-shadow: inset 0 0 0 3px white, inset 0 0 0 8px #EF476F; | |
| } | |
| </style> | |
| <!-- Google Analytics --> | |
| <script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script> | |
| <script> | |
| window.dataLayer = window.dataLayer || []; | |
| function gtag(){dataLayer.push(arguments);} | |
| gtag('js', new Date()); | |
| gtag('config', 'G-XXXXXXXXXX'); | |
| </script> | |
| <!-- Schema.org markup --> | |
| <script type="application/ld+json"> | |
| { | |
| "@context": "https://schema.org", | |
| "@type": "BarOrPub", | |
| "name": "You & Me Pub & Hostel", | |
| "image": "https://youandmekampot.com/logo.jpg", | |
| "@id": "", | |
| "url": "https://youandmekampot.com", | |
| "telephone": "+855123456789", | |
| "address": { | |
| "@type": "PostalAddress", | |
| "streetAddress": "Riverside Road", | |
| "addressLocality": "Kampot", | |
| "addressRegion": "Cambodia", | |
| "postalCode": "07000", | |
| "addressCountry": "KH" | |
| }, | |
| "geo": { | |
| "@type": "GeoCoordinates", | |
| "latitude": 10.6108, | |
| "longitude": 104.1815 | |
| }, | |
| "openingHoursSpecification": { | |
| "@type": "OpeningHoursSpecification", | |
| "dayOfWeek": [ | |
| "Monday", | |
| "Tuesday", | |
| "Wednesday", | |
| "Thursday", | |
| "Friday", | |
| "Saturday", | |
| "Sunday" | |
| ], | |
| "opens": "12:00", | |
| "closes": "02:00" | |
| }, | |
| "priceRange": "$", | |
| "servesCuisine": "Bar Food" | |
| } | |
| </script> | |
| </head> | |
| <body class="font-body bg-white text-gray-800"> | |
| <!-- Header --> | |
| <header class="sticky top-0 z-50 sticky-nav"> | |
| <div class="container mx-auto px-4 py-3 flex justify-between items-center"> | |
| <a href="#" class="flex items-center"> | |
| <div class="logo-circle w-12 h-12 rounded-full flex items-center justify-center mr-3"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /> | |
| </svg> | |
| </div> | |
| <span class="font-heading font-bold text-xl text-sunset-blue">You & Me</span> | |
| </a> | |
| <nav class="hidden md:flex space-x-6 items-center"> | |
| <a href="#" class="font-medium hover:text-sunset-pink transition">Home</a> | |
| <a href="#events" class="font-medium hover:text-sunset-pink transition">Events</a> | |
| <a href="#book" class="font-medium hover:text-sunset-pink transition">Book a Bed</a> | |
| <a href="#join" class="font-medium hover:text-sunset-pink transition">Join Telegram</a> | |
| <a href="#free-shot" class="bg-amber text-white px-4 py-2 rounded-full font-bold hover:bg-opacity-90 transition">Tonight's Free Shot Code</a> | |
| </nav> | |
| <button class="md:hidden"> | |
| <svg xmlns="http://www.w3.org/2000/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" /> | |
| </svg> | |
| </button> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section class="relative overflow-hidden"> | |
| <div class="absolute inset-0 bg-sunset-gradient opacity-10"></div> | |
| <div class="container mx-auto px-4 py-20 md:py-32 relative z-10"> | |
| <div class="max-w-3xl mx-auto text-center"> | |
| <h1 class="font-heading font-bold text-4xl md:text-6xl mb-6 text-sunset-blue"> | |
| Drink. Chill. Crash. Repeat. | |
| </h1> | |
| <p class="text-xl md:text-2xl mb-10 text-gray-700"> | |
| The only pub in Kampot where you can party, sleep, and wake up to do it again. | |
| </p> | |
| <div class="flex flex-col sm:flex-row justify-center gap-4"> | |
| <a href="#join" class="bg-electric-blue text-white px-8 py-4 rounded-full font-bold text-lg hover:bg-opacity-90 transition shadow-lg"> | |
| Join Telegram | |
| </a> | |
| <a href="#book" class="bg-white border-2 border-electric-blue text-electric-blue px-8 py-4 rounded-full font-bold text-lg hover:bg-gray-50 transition shadow-lg"> | |
| Book a Bed | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Tonight at the Pub --> | |
| <section id="events" class="py-16 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="font-heading font-bold text-3xl md:text-4xl mb-12 text-center text-sunset-pink"> | |
| Tonight at the Pub | |
| </h2> | |
| <div class="max-w-2xl mx-auto bg-white rounded-xl shadow-lg overflow-hidden"> | |
| <div class="p-6 md:p-8"> | |
| <div class="flex items-start mb-6"> | |
| <div class="bg-sunset-blue text-white rounded-full p-3 mr-4"> | |
| <svg xmlns="http://www.w3.org/2000/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="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" /> | |
| </svg> | |
| </div> | |
| <div> | |
| <h3 class="font-heading font-bold text-xl text-sunset-blue mb-2">Open Mic Night</h3> | |
| <p class="text-gray-600 mb-2">8PM - Late | Free entry</p> | |
| <p class="text-gray-800">$1 beers from 5–7PM | Free shot if you say: "Sticky Mango"</p> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mt-6"> | |
| <div class="bg-sunset-yellow bg-opacity-20 p-3 rounded-lg text-center"> | |
| <p class="font-bold text-sunset-yellow">Mon</p> | |
| <p class="text-sm">Quiz Night</p> | |
| </div> | |
| <div class="bg-sunset-pink bg-opacity-20 p-3 rounded-lg text-center"> | |
| <p class="font-bold text-sunset-pink">Tue</p> | |
| <p class="text-sm">Live Music</p> | |
| </div> | |
| <div class="bg-sunset-blue bg-opacity-20 p-3 rounded-lg text-center"> | |
| <p class="font-bold text-sunset-blue">Wed</p> | |
| <p class="text-sm">Open Mic</p> | |
| </div> | |
| <div class="bg-sunset-purple bg-opacity-20 p-3 rounded-lg text-center"> | |
| <p class="font-bold text-sunset-purple">Thu</p> | |
| <p class="text-sm">DJ Party</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-100 px-6 py-4 flex items-center justify-between"> | |
| <p class="text-sm text-gray-600">Updated daily via Telegram</p> | |
| <a href="#join" class="text-sm font-bold text-sunset-blue hover:text-sunset-pink transition">Get Live Updates →</a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Sleep with Us --> | |
| <section id="book" class="py-16"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-10 md:mb-0 md:pr-10"> | |
| <h2 class="font-heading font-bold text-3xl md:text-4xl mb-6 text-sunset-blue"> | |
| Sleep with Us | |
| </h2> | |
| <p class="text-lg text-gray-700 mb-8"> | |
| After the party, crash in our comfortable dorms just steps away from your last drink. | |
| Air-conditioned, secure lockers, and fast Wi-Fi included. | |
| </p> | |
| <div class="bg-gray-50 p-6 rounded-xl mb-8"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-sunset-blue text-white rounded-full p-2 mr-4"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01" /> | |
| </svg> | |
| </div> | |
| <h3 class="font-heading font-bold text-xl">10-Bed Mixed Dorm</h3> | |
| </div> | |
| <ul class="space-y-2 pl-12"> | |
| <li class="flex items-center"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-sunset-blue mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /> | |
| </svg> | |
| <span>Air conditioning</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-sunset-blue mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /> | |
| </svg> | |
| <span>Personal lockers</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-sunset-blue mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /> | |
| </svg> | |
| <span>Free high-speed Wi-Fi</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-sunset-blue mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /> | |
| </svg> | |
| <span>24/7 reception</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="flex items-center justify-between bg-amber bg-opacity-10 p-4 rounded-lg border border-amber border-opacity-30"> | |
| <div> | |
| <p class="font-bold text-amber">Only $5/night</p> | |
| <p class="text-sm text-gray-600">Best value in Kampot</p> | |
| </div> | |
| <a href="https://m.me/youandmekampot" class="bg-amber text-white px-6 py-3 rounded-full font-bold hover:bg-opacity-90 transition"> | |
| Check Bed Availability | |
| </a> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2"> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <div class="rounded-xl overflow-hidden shadow-lg"> | |
| <img src="https://images.unsplash.com/photo-1566669437685-b9e6e8a5578f?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" | |
| alt="Dorm beds" | |
| class="lazy w-full h-64 object-cover" | |
| loading="lazy"> | |
| </div> | |
| <div class="rounded-xl overflow-hidden shadow-lg"> | |
| <img src="https://images.unsplash.com/photo-1551632811-561732d1e306?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" | |
| alt="Hostel common area" | |
| class="lazy w-full h-64 object-cover" | |
| loading="lazy"> | |
| </div> | |
| <div class="rounded-xl overflow-hidden shadow-lg"> | |
| <img src="https://images.unsplash.com/photo-1596178065887-1198b6148b2f?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" | |
| alt="Hostel locker" | |
| class="lazy w-full h-64 object-cover" | |
| loading="lazy"> | |
| </div> | |
| <div class="rounded-xl overflow-hidden shadow-lg"> | |
| <img src="https://images.unsplash.com/photo-1566073771259-6a8506099945?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" | |
| alt="Hostel bathroom" | |
| class="lazy w-full h-64 object-cover" | |
| loading="lazy"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Gallery --> | |
| <section class="py-16 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="font-heading font-bold text-3xl md:text-4xl mb-12 text-center text-sunset-pink"> | |
| Life at You & Me | |
| </h2> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <div class="rounded-xl overflow-hidden shadow-lg transform hover:scale-105 transition duration-300"> | |
| <img src="https://images.unsplash.com/photo-1514933651103-005eec06c04b?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" | |
| alt="Bar scene" | |
| class="lazy w-full h-64 object-cover" | |
| loading="lazy"> | |
| </div> | |
| <div class="rounded-xl overflow-hidden shadow-lg transform hover:scale-105 transition duration-300"> | |
| <img src="https://images.unsplash.com/photo-1555396273-367ea4eb4db5?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" | |
| alt="Cocktails" | |
| class="lazy w-full h-64 object-cover" | |
| loading="lazy"> | |
| </div> | |
| <div class="rounded-xl overflow-hidden shadow-lg transform hover:scale-105 transition duration-300"> | |
| <img src="https://images.unsplash.com/photo-1532635241-17ec820b5df8?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" | |
| alt="Pub food" | |
| class="lazy w-full h-64 object-cover" | |
| loading="lazy"> | |
| </div> | |
| </html> |