| | <!DOCTYPE html> |
| | <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, Cambodia</title> |
| | <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@400;500;700&family=Inter:wght@300;400;500&display=swap" rel="stylesheet"> |
| | <script> |
| | tailwind.config = { |
| | darkMode: 'class', |
| | theme: { |
| | extend: { |
| | colors: { |
| | 'sunset-yellow': '#FFD166', |
| | 'sunset-orange': '#F4A261', |
| | 'sunset-pink': '#EF476F', |
| | 'sunset-purple': '#9C6ADE', |
| | 'sunset-blue': '#118AB2', |
| | 'electric-blue': '#06AED5', |
| | 'amber': '#FF9F1C', |
| | 'dark-bg': '#1a1a2e', |
| | 'dark-card': '#16213e', |
| | 'dark-text': '#e6e6e6', |
| | }, |
| | fontFamily: { |
| | heading: ['Space Grotesk', 'sans-serif'], |
| | body: ['Inter', 'sans-serif'], |
| | }, |
| | backgroundImage: { |
| | 'sunset-gradient': 'linear-gradient(to right, #FFD166, #F4A261, #EF476F, #9C6ADE, #118AB2)', |
| | 'logo-gradient': 'radial-gradient(circle, #FFD166, #F4A261, #EF476F, #9C6ADE, #118AB2)', |
| | } |
| | } |
| | } |
| | } |
| | </script> |
| | <style> |
| | .logo-circle { |
| | width: 80px; |
| | height: 80px; |
| | border-radius: 50%; |
| | display: flex; |
| | align-items: center; |
| | justify-content: center; |
| | box-shadow: 0 4px 15px rgba(0,0,0,0.2); |
| | transition: transform 0.3s ease; |
| | } |
| | .logo-circle:hover { |
| | transform: rotate(15deg) scale(1.05); |
| | } |
| | .cocktail-icon { |
| | font-size: 40px; |
| | color: white; |
| | } |
| | .nav-link { |
| | position: relative; |
| | } |
| | .nav-link:after { |
| | content: ''; |
| | position: absolute; |
| | width: 0; |
| | height: 2px; |
| | bottom: -2px; |
| | left: 0; |
| | background: currentColor; |
| | transition: width 0.3s ease; |
| | } |
| | .nav-link:hover:after { |
| | width: 100%; |
| | } |
| | .gallery-grid { |
| | display: grid; |
| | grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); |
| | gap: 1rem; |
| | } |
| | .loyalty-card { |
| | perspective: 1000px; |
| | } |
| | .loyalty-card-inner { |
| | transition: transform 0.6s; |
| | transform-style: preserve-3d; |
| | } |
| | .loyalty-card:hover .loyalty-card-inner { |
| | transform: rotateY(180deg); |
| | } |
| | .loyalty-card-front, .loyalty-card-back { |
| | backface-visibility: hidden; |
| | } |
| | .loyalty-card-back { |
| | transform: rotateY(180deg); |
| | } |
| | .lazy-load { |
| | opacity: 0; |
| | transition: opacity 0.5s ease; |
| | } |
| | .lazy-load.loaded { |
| | opacity: 1; |
| | } |
| | .theme-toggle { |
| | display: flex; |
| | align-items: center; |
| | justify-content: center; |
| | width: 36px; |
| | height: 36px; |
| | border-radius: 50%; |
| | transition: all 0.3s ease; |
| | } |
| | .theme-toggle:hover { |
| | transform: scale(1.1); |
| | } |
| | .dark .theme-toggle { |
| | background-color: rgba(255, 255, 255, 0.1); |
| | } |
| | .light .theme-toggle { |
| | background-color: rgba(0, 0, 0, 0.05); |
| | } |
| | </style> |
| | </head> |
| | <body class="font-body bg-white text-gray-800 dark:bg-dark-bg dark:text-dark-text transition-colors duration-300"> |
| | |
| | <header class="sticky top-0 z-50 bg-white dark:bg-dark-card shadow-sm"> |
| | <div class="container mx-auto px-4 py-3 flex justify-between items-center"> |
| | <a href="#" class="flex items-center"> |
| | <div class="logo-circle bg-gradient-to-br from-sunset-yellow to-sunset-blue mr-3"> |
| | <span class="cocktail-icon">🍹</span> |
| | </div> |
| | <span class="font-heading text-xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-sunset-yellow to-sunset-blue">You & Me</span> |
| | </a> |
| | |
| | <nav class="hidden md:flex items-center space-x-6"> |
| | <a href="#" class="nav-link font-medium text-sunset-blue dark:text-electric-blue hover:text-sunset-pink">Home</a> |
| | <a href="#events" class="nav-link font-medium text-sunset-blue dark:text-electric-blue hover:text-sunset-pink">Events</a> |
| | <a href="#book" class="nav-link font-medium text-sunset-blue dark:text-electric-blue hover:text-sunset-pink">Book a Bed</a> |
| | <a href="#join" class="nav-link font-medium text-sunset-blue dark:text-electric-blue hover:text-sunset-pink">Join Telegram</a> |
| | |
| | |
| | <button id="theme-toggle-desktop" class="theme-toggle ml-2"> |
| | <svg id="theme-icon-sun" class="w-5 h-5 text-amber dark:hidden" fill="currentColor" viewBox="0 0 20 20"> |
| | <path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"></path> |
| | </svg> |
| | <svg id="theme-icon-moon" class="w-5 h-5 text-sunset-blue hidden dark:block" fill="currentColor" viewBox="0 0 20 20"> |
| | <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path> |
| | </svg> |
| | </button> |
| | </nav> |
| | |
| | <div class="flex items-center space-x-4"> |
| | <button class="bg-amber text-white px-4 py-2 rounded-full font-medium shadow-md hover:shadow-lg transform hover:scale-105 transition-all"> |
| | Tonight's Free Shot Code |
| | </button> |
| | |
| | |
| | <button id="mobile-menu-button" class="md:hidden text-sunset-blue dark:text-electric-blue"> |
| | <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"> |
| | <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path> |
| | </svg> |
| | </button> |
| | </div> |
| | </div> |
| | |
| | |
| | <div id="mobile-menu" class="hidden md:hidden bg-white dark:bg-dark-card py-2 px-4 shadow-md"> |
| | <a href="#" class="block py-2 font-medium text-sunset-blue dark:text-electric-blue">Home</a> |
| | <a href="#events" class="block py-2 font-medium text-sunset-blue dark:text-electric-blue">Events</a> |
| | <a href="#book" class="block py-2 font-medium text-sunset-blue dark:text-electric-blue">Book a Bed</a> |
| | <a href="#join" class="block py-2 font-medium text-sunset-blue dark:text-electric-blue">Join Telegram</a> |
| | |
| | |
| | <div class="flex items-center py-2"> |
| | <button id="theme-toggle-mobile" class="flex items-center space-x-2"> |
| | <svg id="theme-icon-sun-mobile" class="w-5 h-5 text-amber dark:hidden" fill="currentColor" viewBox="0 0 20 20"> |
| | <path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"></path> |
| | </svg> |
| | <svg id="theme-icon-moon-mobile" class="w-5 h-5 text-sunset-blue hidden dark:block" fill="currentColor" viewBox="0 0 20 20"> |
| | <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path> |
| | </svg> |
| | <span id="theme-text-mobile" class="text-sunset-blue dark:text-electric-blue">Dark Mode</span> |
| | </button> |
| | </div> |
| | </div> |
| | </header> |
| |
|
| | |
| | <section class="relative bg-gradient-to-b from-white to-sunset-yellow/10 dark:from-dark-bg dark:to-sunset-blue/20 py-20"> |
| | <div class="container mx-auto px-4 flex flex-col items-center text-center"> |
| | <div class="logo-circle bg-gradient-to-br from-sunset-yellow to-sunset-blue mb-8"> |
| | <span class="cocktail-icon">🍹</span> |
| | </div> |
| | |
| | <h1 class="font-heading text-4xl md:text-6xl font-bold mb-4 text-transparent bg-clip-text bg-gradient-to-r from-sunset-yellow to-sunset-blue"> |
| | Drink. Chill. Crash. Repeat. |
| | </h1> |
| | |
| | <p class="text-lg md:text-xl max-w-2xl mb-8 text-gray-700 dark:text-gray-300"> |
| | 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 gap-4"> |
| | <a href="#join" class="bg-electric-blue text-white px-8 py-3 rounded-full font-bold shadow-md hover:shadow-lg transform hover:scale-105 transition-all"> |
| | Join Telegram |
| | </a> |
| | <a href="#book" class="bg-amber text-white px-8 py-3 rounded-full font-bold shadow-md hover:shadow-lg transform hover:scale-105 transition-all"> |
| | Book a Bed |
| | </a> |
| | </div> |
| | </div> |
| | |
| | <div class="absolute bottom-0 left-0 right-0 h-16 bg-gradient-to-t from-white dark:from-dark-bg to-transparent"></div> |
| | </section> |
| |
|
| | |
| | <section id="events" class="py-16 bg-white dark:bg-dark-bg"> |
| | <div class="container mx-auto px-4"> |
| | <h2 class="font-heading text-3xl font-bold mb-8 text-center text-sunset-blue dark:text-electric-blue"> |
| | Tonight at the Pub |
| | </h2> |
| | |
| | <div class="max-w-2xl mx-auto bg-gradient-to-r from-sunset-yellow/10 to-sunset-blue/10 dark:from-sunset-blue/20 dark:to-sunset-purple/20 p-6 rounded-xl shadow-md"> |
| | <div class="flex items-center mb-4"> |
| | <div class="bg-sunset-pink text-white p-2 rounded-full mr-3"> |
| | <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"> |
| | <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5.882V19.24a1.76 1.76 0 01-3.417.592l-2.147-6.15M18 13a3 3 0 100-6M5.436 13.683A4.001 4.001 0 017 6h1.832c4.1 0 7.625-1.234 9.168-3v14c-1.543-1.766-5.067-3-9.168-3H7a3.988 3.988 0 01-1.564-.317z"></path> |
| | </svg> |
| | </div> |
| | <h3 class="font-heading text-xl font-bold text-sunset-pink">Live Events</h3> |
| | </div> |
| | |
| | <div id="event-content" class="space-y-3"> |
| | <p class="text-lg dark:text-gray-200"><span class="font-bold">8:00 PM</span> - Open Mic Night</p> |
| | <p class="text-lg dark:text-gray-200"><span class="font-bold">5:00-7:00 PM</span> - $1 Beers Happy Hour</p> |
| | <p class="text-lg font-bold text-sunset-pink">Free shot if you say: "Sticky Mango"</p> |
| | </div> |
| | |
| | <div class="mt-6 pt-4 border-t border-gray-200 dark:border-gray-700"> |
| | <p class="text-sm text-gray-500 dark:text-gray-400">Events update daily. Join our Telegram for real-time updates.</p> |
| | </div> |
| | </div> |
| | </div> |
| | </section> |
| |
|
| | |
| | <section id="book" class="py-16 bg-gradient-to-b from-white to-sunset-blue/10 dark:from-dark-bg dark:to-sunset-blue/20"> |
| | <div class="container mx-auto px-4"> |
| | <h2 class="font-heading text-3xl font-bold mb-8 text-center text-sunset-blue dark:text-electric-blue"> |
| | Sleep with Us |
| | </h2> |
| | |
| | <div class="max-w-4xl mx-auto grid md:grid-cols-2 gap-8"> |
| | <div class="bg-white dark:bg-dark-card p-6 rounded-xl shadow-md"> |
| | <div class="flex items-center mb-4"> |
| | <div class="bg-sunset-blue text-white p-2 rounded-full mr-3"> |
| | <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"> |
| | <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"></path> |
| | </svg> |
| | </div> |
| | <h3 class="font-heading text-xl font-bold text-sunset-blue dark:text-electric-blue">10-Bed Mixed Dorm</h3> |
| | </div> |
| | |
| | <ul class="space-y-2 mb-6 dark:text-gray-300"> |
| | <li class="flex items-center"> |
| | <svg class="w-5 h-5 text-sunset-blue dark:text-electric-blue mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"> |
| | <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> |
| | </svg> |
| | <span>Only $5/night</span> |
| | </li> |
| | <li class="flex items-center"> |
| | <svg class="w-5 h-5 text-sunset-blue dark:text-electric-blue mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"> |
| | <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> |
| | </svg> |
| | <span>Air-conditioned</span> |
| | </li> |
| | <li class="flex items-center"> |
| | <svg class="w-5 h-5 text-sunset-blue dark:text-electric-blue mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"> |
| | <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> |
| | </svg> |
| | <span>Secure lockers</span> |
| | </li> |
| | <li class="flex items-center"> |
| | <svg class="w-5 h-5 text-sunset-blue dark:text-electric-blue mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"> |
| | <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> |
| | </svg> |
| | <span>Free high-speed Wi-Fi</span> |
| | </li> |
| | </ul> |
| | |
| | <button class="w-full bg-sunset-blue dark:bg-electric-blue text-white px-6 py-3 rounded-full font-bold shadow-md hover:shadow-lg transform hover:scale-[1.02] transition-all"> |
| | Check Bed Availability |
| | </button> |
| | </div> |
| | |
| | <div class="bg-white dark:bg-dark-card p-6 rounded-xl shadow-md"> |
| | <div class="flex items-center mb-4"> |
| | <div class="bg-amber text-white p-2 rounded-full mr-3"> |
| | <svg class="w-6 h-6" fill="none stroke="currentColor" viewBox="0 0 24 24"> |
| | <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"></path> |
| | </svg> |
| | </div> |
| | <h3 class="font-heading text-xl font-bold text-amber">Special Offers</h3> |
| | </div> |
| | |
| | <ul class="space-y-3 mb-6 dark:text-gray-300"> |
| | <li class="flex items-start"> |
| | <svg class="w-5 h-5 text-amber mr-2 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"> |
| | <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> |
| | </svg> |
| | <span><span class="font-bold">Stay 3+ nights</span> - Get 1 free drink per night</span> |
| | </li> |
| | <li class="flex items-start"> |
| | <svg class="w-5 h-5 text-amber mr-2 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"> |
| | <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> |
| | </svg> |
| | <span><span class="font-bold">Weekly rate</span> - Only $30 (save $5)</span> |
| | </li> |
| | <li class="flex items-start"> |
| | <svg class="w-5 h-5 text-amber mr-2 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"> |
| | <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> |
| | </svg> |
| | <span><span class="font-bold">Group discount</span> - 10% off for groups of 4+</span> |
| | </li> |
| | </ul> |
| | |
| | <button class="w-full bg-amber text-white px-6 py-3 rounded-full font-bold shadow-md hover:shadow-lg transform hover:scale-[1.02] transition-all"> |
| | View All Offers |
| | </button> |
| | </div> |
| | </div> |
| | </div> |
| | </section> |
| |
|
| | |
| | <section class="py-16 bg-white dark:bg-dark-bg"> |
| | <div class="container mx-auto px-4"> |
| | <h2 class="font-heading text-3xl font-bold mb-8 text-center text-sunset-blue dark:text-electric-blue"> |
| | Our Vibe |
| | </h2> |
| | |
| | <div class="gallery-grid"> |
| | <div class="overflow-hidden rounded-xl shadow-md hover:shadow-xl transition-shadow"> |
| | <img src="https://source.unsplash.com/random/600x400/?pub,1" alt="Pub atmosphere" class="w-full h-64 object-cover lazy-load" loading="lazy"> |
| | </div> |
| | <div class="overflow-hidden rounded-xl shadow-md hover:shadow-xl transition-shadow"> |
| | <img src="https://source.unsplash.com/random/600x400/?pub,2" alt="Live music" class="w-full h-64 object-cover lazy-load" loading="lazy"> |
| | </div> |
| | <div class="overflow-hidden rounded-xl shadow-md hover:shadow-xl transition-shadow"> |
| | <img src="https://source.unsplash.com/random/600x400/?hostel,1" alt="Dorm room" class="w-full h-64 object-cover lazy-load" loading="lazy"> |
| | </div> |
| | <div class="overflow-hidden rounded-xl shadow-md hover:shadow-xl transition-shadow"> |
| | <img src="https://source.unsplash.com/random/600x400/?pub,3" alt="Bar area" class="w-full h-64 object-cover lazy-load" loading="lazy"> |
| | </div> |
| | <div class="overflow-hidden rounded-xl shadow-md hover:shadow-xl transition-shadow"> |
| | <img src="https://source.unsplash.com/random/600x400/?hostel,2" alt="Common area" class="w-full h-64 object-cover lazy-load" loading="lazy"> |
| | </div> |
| | <div class="overflow-hidden rounded-xl shadow-md hover:shadow-xl transition-shadow"> |
| | <img src="https://source.unsplash.com/random/600x400/?pub,4" alt="Outdoor seating" class="w-full h-64 object-cover lazy-load" loading="lazy"> |
| | </div> |
| | </div> |
| | |
| | <div class="mt-12 text-center"> |
| | <a href="#" class="inline-block bg-sunset-pink text-white px-8 py-3 rounded-full font-bold shadow-md hover:shadow-lg transform hover:scale-105 transition-all"> |
| | See More Photos |
| | </a> |
| | </div> |
| | </div> |
| | </section> |
| |
|
| | |
| | <section id="join" class="py-16 bg-gradient-to-b from-white to-sunset-pink/10 dark:from-dark-bg dark:to-sunset-pink/20"> |
| | <div class="container mx-auto px-4"> |
| | <h2 class="font-heading text-3xl font-bold mb-8 text-center text-sunset-pink"> |
| | Join Our Telegram |
| | </h2> |
| | |
| | <div class="max-w-2xl mx-auto bg-white dark:bg-dark-card p-8 rounded-xl shadow-md"> |
| | <div class="flex items-center mb-6"> |
| | <div class="bg-sunset-purple text-white p-3 rounded-full mr-4"> |
| | <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24"> |
| | <path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm5.894 8.221-1.97 9.28c-.145.658-.537.818-1.084.508l-3-2.21-1.446 1.394c-.14.18-.357.295-.598.295-.002 0-.003 0-.005 0l.213-3.054 5.794-5.24c.24-.213-.054-.334-.373-.121l-7.161 4.51-3.073-.957c-.643-.203-.658-.643.136-.953l15.733-6.08c.537-.232 1.054.132.864.941z"/> |
| | </svg> |
| | </div> |
| | <h3 class="font-heading text-2xl font-bold text-sunset-purple">Instant Updates</h3> |
| | </div> |
| | |
| | <p class="mb-6 dark:text-gray-300"> |
| | Get real-time updates on events, special offers, and last-minute bed availability. Our Telegram group is the best way to stay connected with the You & Me community. |
| | </p> |
| | |
| | <ul class="space-y-3 mb-8 dark:text-gray-300"> |
| | <li class="flex items-start"> |
| | <svg class="w-5 h-5 text-sunset-purple mr-2 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"> |
| | <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> |
| | </svg> |
| | <span>Daily event schedules</span> |
| | </li> |
| | <li class="flex items-start"> |
| | <svg class="w-5 h-5 text-sunset-purple mr-2 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"> |
| | <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> |
| | </svg> |
| | <span>Exclusive member discounts</span> |
| | </li> |
| | <li class="flex items-start"> |
| | <svg class="w-5 h-5 text-sunset-purple mr-2 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"> |
| | <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> |
| | </svg> |
| | <span>Flash sales and last-minute deals</span> |
| | </li> |
| | </ul> |
| | |
| | <a href="#" class="block w-full bg-sunset-purple text-white px-6 py-3 rounded-full font-bold text-center shadow-md hover:shadow-lg transform hover:scale-[1.02] transition-all"> |
| | Join Telegram Group |
| | </a> |
| | </div> |
| | </div> |
| | </section> |
| |
|
| | |
| | <footer class="bg-gray-100 dark:bg-dark-card py-12"> |
| | <div class="container mx-auto px-4"> |
| | <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> |
| | <div> |
| | <div class="flex items-center mb-4"> |
| | <div class="logo-circle bg-gradient-to-br from-sunset-yellow to-sunset-blue mr-3"> |
| | <span class="cocktail-icon">🍹</span> |
| | </div> |
| | <span class="font-heading text-xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-sunset-yellow to-sunset-blue">You & Me</span> |
| | </div> |
| | <p class="text-gray-600 dark:text-gray-400"> |
| | The best pub and hostel in Kampot for travelers who love to party and meet new friends. |
| | </p> |
| | </div> |
| | |
| | <div> |
| | <h3 class="font-heading text-lg font-bold mb-4 text-sunset-blue dark:text-electric-blue">Quick Links</h3> |
| | <ul class="space-y-2"> |
| | <li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-sunset-pink">Home</a></li> |
| | <li><a href="#events" class="text-gray-600 dark:text-gray-400 hover:text-sunset-pink">Events</a></li> |
| | <li><a href="#book" class="text-gray-600 dark:text-gray-400 hover:text-sunset-pink">Book a Bed</a></li> |
| | <li><a href="#join" class="text-gray-600 dark:text-gray-400 hover:text-sunset-pink">Join Telegram</a></li> |
| | </ul> |
| | </div> |
| | |
| | <div> |
| | <h3 class="font-heading text-lg font-bold mb-4 text-sunset-blue dark:text-electric-blue">Contact</h3> |
| | <ul class="space-y-2"> |
| | <li class="flex items-start"> |
| | <svg class="w-5 h-5 text-sunset-blue dark:text-electric-blue mr-2 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"> |
| | <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> |
| | <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path> |
| | </svg> |
| | <span class="text-gray-600 dark:text-gray-400">Riverside, Kampot, Cambodia</span> |
| | </li> |
| | <li class="flex items-start"> |
| | <svg class="w-5 h-5 text-sunset-blue dark:text-electric-blue mr-2 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"> |
| | <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"></path> |
| | </svg> |
| | <span class="text-gray-600 dark:text-gray-400">+855 12 345 678</span> |
| | </li> |
| | <li class="flex items-start"> |
| | <svg class="w-5 h-5 text-sunset-blue dark:text-electric-blue mr-2 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"> |
| | <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path> |
| | </svg> |
| | <span class="text-gray-600 dark:text-gray-400">hello@youandme.com</span> |
| | </li> |
| | </ul> |
| | </div> |
| | |
| | <div> |
| | <h3 class="font-heading text-lg font-bold mb-4 text-sunset-blue dark:text-electric-blue">Follow Us</h3> |
| | <div class="flex space-x-4"> |
| | <a href="#" class="text-gray-600 dark:text-gray-400 hover:text-sunset-pink"> |
| | <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"> |
| | <path d="M22.675 0h-21.35c-.732 0-1.325.593-1.325 1.325v21.351c0 .731.593 1.324 1.325 1.324h11.495v-9.294h-3.128v-3.622h3.128v-2.671c0-3.1 1.893-4.788 4.659-4.788 1.325 0 2.463.099 2.795.143v3.24l-1.918.001c-1.504 0-1.795.715-1.795 1.763v2.313h3.587l-.467 3.622h-3.12v9.293h6.116c.73 0 1.323-.593 1.323-1.325v-21.35c0-.732-.593-1.325-1.325-1.325z"/> |
| | </svg> |
| | </a> |
| | <a href="#" class="text-gray-600 dark:text-gray-400 hover:text-sunset-pink"> |
| | <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"> |
| | <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/> |
| | </svg> |
| | </a> |
| | <a href="#" class="text-gray-600 dark:text-gray-400 hover:text-sunset-pink"> |
| | <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"> |
| | <path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"/> |
| | </svg> |
| | </a> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | <div class="border-t border-gray-200 dark:border-gray-700 mt-8 pt-8 text-center text-gray-500 dark:text-gray-400"> |
| | <p>© 2023 You & Me Pub & Hostel. All rights reserved.</p> |
| | </div> |
| | </div> |
| | </footer> |
| |
|
| | <script> |
| | |
| | const mobileMenuButton = document.getElementById('mobile-menu-button'); |
| | const mobileMenu = document.getElementById('mobile-menu'); |
| | |
| | mobileMenuButton.addEventListener('click', () => { |
| | mobileMenu.classList.toggle('hidden'); |
| | }); |
| | |
| | |
| | const themeToggleDesktop = document.getElementById('theme-toggle-desktop'); |
| | const themeToggleMobile = document.getElementById('theme-toggle-mobile'); |
| | const themeIconSun = document.getElementById('theme-icon-sun'); |
| | const themeIconMoon = document.getElementById('theme-icon-moon'); |
| | const themeIconSunMobile = document.getElementById('theme-icon-sun-mobile'); |
| | const themeIconMoonMobile = document.getElementById('theme-icon-moon-mobile'); |
| | const themeTextMobile = document.getElementById('theme-text-mobile'); |
| | |
| | |
| | const userPrefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches; |
| | const storedTheme = localStorage.getItem('theme'); |
| | |
| | |
| | if (storedTheme === 'dark' || (!storedTheme && userPrefersDark)) { |
| | document.documentElement.classList.add('dark'); |
| | themeTextMobile.textContent = 'Light Mode'; |
| | } else { |
| | document.documentElement.classList.remove('dark'); |
| | themeTextMobile.textContent = 'Dark Mode'; |
| | } |
| | |
| | |
| | function toggleTheme() { |
| | if (document.documentElement.classList.contains('dark')) { |
| | document.documentElement.classList.remove('dark'); |
| | localStorage.setItem('theme', 'light'); |
| | themeTextMobile.textContent = 'Dark Mode'; |
| | } else { |
| | document.documentElement.classList.add('dark'); |
| | localStorage.setItem('theme', 'dark'); |
| | themeTextMobile.textContent = 'Light Mode'; |
| | } |
| | } |
| | |
| | |
| | themeToggleDesktop.addEventListener('click', toggleTheme); |
| | themeToggleMobile.addEventListener('click', toggleTheme); |
| | |
| | |
| | document.addEventListener('DOMContentLoaded', function() { |
| | const lazyImages = document.querySelectorAll('.lazy-load'); |
| | |
| | const lazyLoad = (target) => { |
| | const io = new IntersectionObserver((entries, observer) => { |
| | entries.forEach(entry => { |
| | if (entry.isIntersecting) { |
| | const img = entry.target; |
| | img.classList.add('loaded'); |
| | observer.unobserve(img); |
| | } |
| | }); |
| | }); |
| | |
| | io.observe(target); |
| | }; |
| | |
| | lazyImages.forEach(lazyLoad); |
| | }); |
| | </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://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=steake/uandme3" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| | </html> |
