Spaces:
Running
Running
Create a brand-forward luxury real-estate website for Khmer23, a high-prestige, invitation-only property agency operating in Kampot, Kep, Phnom Penh, and Sihanoukville. Khmer23 is not simply a vendor; it is a curated luxury brand positioned for Chinese high-net-worth individuals and serious English-speaking investors. The business is already running at capacity, with new rentals and sales closing daily. The website must quietly communicate selectiveness, authority, and effortless dominance of the premium Cambodian property market.
746e434 verified | <html lang="en" class="dark"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Properties - Khmer23</title> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script> | |
| tailwind.config = { | |
| darkMode: 'class', | |
| theme: { | |
| extend: { | |
| colors: { | |
| 'obsidian': '#1a1a1a', | |
| 'charcoal': '#2d2d2d', | |
| 'alabaster': '#f5f5f5', | |
| 'slate': { | |
| 400: '#64748b', | |
| 500: '#475569', | |
| 600: '#334155', | |
| 700: '#1e293b', | |
| 800: '#0f172a', | |
| 900: '#020617' | |
| }, | |
| 'emerald': { | |
| 50: '#ecfdf5', | |
| 100: '#d1fae5', | |
| 500: '#10b981', | |
| 600: '#059669', | |
| 700: '#047857' | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| </head> | |
| <body class="bg-obsidian text-alabaster overflow-x-hidden"> | |
| <!-- Theme Switcher --> | |
| <div class="fixed top-4 right-4 z-50"> | |
| <button id="themeToggle" class="bg-slate-800 hover:bg-slate-700 text-alabaster p-3 rounded-full transition-all duration-300 hover:scale-110 shadow-2xl"> | |
| <i data-feather="sun" class="w-5 h-5"></i> | |
| </button> | |
| </div> | |
| <!-- Navigation Component --> | |
| <custom-navbar></custom-navbar> | |
| <!-- Header Section --> | |
| <section class="relative py-20 px-6"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="mb-12"> | |
| <h1 class="text-5xl md:text-6xl font-thin tracking-tight mb-4">Property Portfolio</h1> | |
| <p class="text-slate-400 text-xl font-light">Curated opportunities for discerning investors</p> | |
| </div> | |
| <!-- Filters --> | |
| <div class="flex flex-wrap gap-4 mb-12"> | |
| <select class="bg-slate-800 border border-slate-700 rounded-full px-6 py-3 text-alabaster focus:outline-none focus:border-emerald-500 transition-colors"> | |
| <option>All Locations</option> | |
| <option>Phnom Penh</option> | |
| <option>Kampot</option> | |
| <option>Kep</option> | |
| <option>Sihanoukville</option> | |
| </select> | |
| <select class="bg-slate-800 border border-slate-700 rounded-full px-6 py-3 text-alabaster focus:outline-none focus:border-emerald-500 transition-colors"> | |
| <option>Property Type</option> | |
| <option>Villa</option> | |
| <option>Penthouse</option> | |
| <option>Beachfront</option> | |
| <option>Estate</option> | |
| </select> | |
| <select class="bg-slate-800 border border-slate-700 rounded-full px-6 py-3 text-alabaster focus:outline-none focus:border-emerald-500 transition-colors"> | |
| <option>Price Range</option> | |
| <option>$1M - $2M</option> | |
| <option>$2M - $3M</option> | |
| <option>$3M - $5M</option> | |
| <option>$5M+</option> | |
| </select> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Properties Grid --> | |
| <section class="px-6 pb-20"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Property Card 1 --> | |
| <div class="group cursor-pointer transform transition-all duration-700 hover:scale-105"> | |
| <div class="relative overflow-hidden rounded-3xl mb-4"> | |
| <img src="https://static.photos/luxury/400x400/8" alt="Property" class="w-full h-80 object-cover group-hover:scale-110 transition-transform duration-700"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black/70 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-700"></div> | |
| <div class="absolute top-4 left-4"> | |
| <span class="px-3 py-1 bg-emerald-500/20 backdrop-blur text-emerald-400 text-xs rounded-full"> | |
| AVAILABLE | |
| </span> | |
| </div> | |
| <div class="absolute bottom-4 left-4 right-4 opacity-0 group-hover:opacity-100 transition-opacity duration-700"> | |
| <button class="w-full px-4 py-2 bg-slate-900/90 backdrop-blur text-alabaster rounded-full hover:bg-slate-800 transition-colors"> | |
| View Details | |
| </button> | |
| </div> | |
| </div> | |
| <h3 class="text-xl font-light mb-2">Diamond Hill Residence</h3> | |
| <p class="text-slate-400 text-sm mb-1">Phnom Penh • BKK1</p> | |
| <p class="text-slate-500 text-sm mb-3">5 Bedrooms • 6 Baths • 8,500 sqft</p> | |
| <p class="text-emerald-400 text-xl font-light">$2,850,000</p> | |
| </div> | |
| <!-- Property Card 2 --> | |
| <div class="group cursor-pointer transform transition-all duration-700 hover:scale-105"> | |
| <div class="relative overflow-hidden rounded-3xl mb-4"> | |
| <img src="https://static.photos/beach/400x400/9" alt="Property" class="w-full h-80 object-cover group-hover:scale-110 transition-transform duration-700"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black/70 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-700"></div> | |
| <div class="absolute top-4 left-4"> | |
| <span class="px-3 py-1 bg-slate-500/20 backdrop-blur text-slate-400 text-xs rounded-full"> | |
| UNDER CONTRACT | |
| </span> | |
| </div> | |
| <div class="absolute bottom-4 left-4 right-4 opacity-0 group-hover:opacity-100 transition-opacity duration-700"> | |
| <button class="w-full px-4 py-2 bg-slate-900/90 backdrop-blur text-alabaster rounded-full hover:bg-slate-800 transition-colors"> | |
| View Details | |
| </button> | |
| </div> | |
| </div> | |
| <h3 class="text-xl font-light mb-2">Sunset Beach Villa</h3> | |
| <p class="text-slate-400 text-sm mb-1">Kep • Rabbit Island View</p> | |
| <p class="text-slate-500 text-sm mb-3">4 Bedrooms • 5 Baths • 10,200 sqft</p> | |
| <p class="text-emerald-400 text-xl font-light">$3,200,000</p> | |
| </div> | |
| <!-- Property Card 3 --> | |
| <div class="group cursor-pointer transform transition-all duration-700 hover:scale-105"> | |
| <div class="relative overflow-hidden rounded-3xl mb-4"> | |
| <img src="https://static.photos/modern/400x400/10" alt="Property" class="w-full h-80 object-cover group-hover:scale-110 transition-transform duration-700"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black/70 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-700"></div> | |
| <div class="absolute top-4 left-4"> | |
| <span class="px-3 py-1 bg-emerald-500/20 backdrop-blur text-emerald-400 text-xs rounded-full"> | |
| NEW LISTING | |
| </span> | |
| </div> | |
| <div class="absolute bottom-4 left-4 right-4 opacity-0 group-hover:opacity-100 transition-opacity duration-700"> | |
| <button class="w-full px-4 py-2 bg-slate-900/90 backdrop-blur text-alabaster rounded-full hover:bg-slate-800 transition-colors"> | |
| View Details | |
| </button> | |
| </div> | |
| </div> | |
| <h3 class="text-xl font-light mb-2">Sky Garden Penthouse</h3> | |
| <p class="text-slate-400 text-sm mb-1">Phnom Penh • Tonle Bassac</p> | |
| <p class="text-slate-500 text-sm mb-3">3 Bedrooms • 4 Baths • 6,800 sqft</p> | |
| <p class="text-emerald-400 text-xl font-light">$1,950,000</p> | |
| </div> | |
| <!-- Property Card 4 --> | |
| <div class="group cursor-pointer transform transition-all duration-700 hover:scale-105"> | |
| <div class="relative overflow-hidden rounded-3xl mb-4"> | |
| <img src="https://static/photos/nature/400x400/11" alt="Property" class="w-full h-80 object-cover group-hover:scale-110 transition-transform duration-700"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black/70 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-700"></div> | |
| <div class="absolute top-4 left-4"> | |
| <span class="px-3 py-1 bg-slate-500/20 backdrop-blur text-slate-400 text-xs rounded-full"> | |
| OFF-MARKET | |
| </span> | |
| </div> | |
| <div class="absolute bottom-4 left-4 right-4 opacity-0 group-hover:opacity-100 transition-opacity duration-700"> | |
| <button class="w-full px-4 py-2 bg-slate-900/90 backdrop-blur text-alabaster rounded-full hover:bg-slate-800 transition-colors"> | |
| View Details | |
| </button> | |
| </div> | |
| </div> | |
| <h3 class="text-xl font-light mb-2">River Bend Estate</h3> | |
| <p class="text-slate-400 text-sm mb-1">Kampot • Riverside District</p> | |
| <p class="text-slate-500 text-sm mb-3">6 Bedrooms • 7 Baths • 15,000 sqft</p> | |
| <p class="text-emerald-400 text-xl font-light">$4,100,000</p> | |
| </div> | |
| <!-- Property Card 5 --> | |
| <div class="group cursor-pointer transform transition-all duration-700 hover:scale-105"> | |
| <div class="relative overflow-hidden rounded-3xl mb-4"> | |
| <img src="https://static/photos/indoor/400x400/12" alt="Property" class="w-full h-80 object-cover group-hover:scale-110 transition-transform duration-700"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black/70 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-700"></div> | |
| <div class="absolute top-4 left-4"> | |
| <span class="px-3 py-1 bg-emerald-500/20 backdrop-blur text-emerald-400 text-xs rounded-full"> | |
| AVAILABLE | |
| </span> | |
| </div> | |
| <div class="absolute bottom-4 left-4 right-4 opacity-0 group-hover:opacity-100 transition-opacity duration-700"> | |
| <button class="w-full px-4 py-2 bg-slate-900/90 backdrop-blur text-alabaster rounded-full hover:bg-slate-800 transition-colors"> | |
| View Details | |
| </button> | |
| </div> | |
| </div> | |
| <h3 class="text-xl font-light mb-2">Marina View Residence</h3> | |
| <p class="text-slate-400 text-sm mb-1">Sihanoukville • Otres Beach</p> | |
| <p class="text-slate-500 text-sm mb-3">4 Bedrooms • 4 Baths • 7,200 sqft</p> | |
| <p class="text-emerald-400 text-xl font-light">$2,600,000</p> | |
| </div> | |
| <!-- Property Card 6 --> | |
| <div class="group cursor-pointer transform transition-all duration-700 hover:scale-105"> | |
| <div class="relative overflow-hidden rounded-3xl mb-4"> | |
| <img src="https://static.photos/luxury/400x400/13" alt="Property" class="w-full h-80 object-cover group-hover:scale-110 transition-transform duration-700"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black/70 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-700"></div> | |
| <div class="absolute top-4 left-4"> | |
| <span class="px-3 py-1 bg-amber-500/20 backdrop-blur text-amber-400 text-xs rounded-full"> | |
| RENTAL ONLY | |
| </span> | |
| </div> | |
| <div class="absolute bottom-4 left-4 right-4 opacity-0 group-hover:opacity-100 transition-opacity duration-700"> | |
| <button class="w-full px-4 py-2 bg-slate-900/90 backdrop-blur text-alabaster rounded-full hover:bg-slate-800 transition-colors"> | |
| View Details | |
| </button> | |
| </div> | |
| </div> | |
| <h3 class="text-xl font-light mb-2">Presidential Suite</h3> | |
| <p class="text-slate-400 text-sm mb-1">Phnom Penh • Riverside</p> | |
| <p class="text-slate-500 text-sm mb-3">2 Bedrooms • 3 Baths • 3,500 sqft</p> | |
| <p class="text-emerald-400 text-xl font-light">$12,000/month</p> | |
| </div> | |
| </div> | |
| <!-- Load More --> | |
| <div class="text-center mt-16"> | |
| <button class="px-8 py-4 bg-slate-800 hover:bg-slate-700 text-alabaster rounded-full transition-all duration-500 hover:scale-105 hover:shadow-2xl border border-slate-600"> | |
| Load More Properties | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer Component --> | |
| <custom-footer></custom-footer> | |
| <script src="components/navbar.js"></script> | |
| <script src="components/footer.js"></script> | |
| <script src="script.js"></script> | |
| <script>feather.replace();</script> | |
| </body> | |
| </html> |