Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Lumaxia Wedding Films</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> | |
| /* Custom CSS for elements that need more precise control */ | |
| .hero-video { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| z-index: -1; | |
| } | |
| .video-thumbnail:hover .play-icon { | |
| opacity: 1; | |
| transform: scale(1.1); | |
| } | |
| .play-icon { | |
| transition: all 0.3s ease; | |
| opacity: 0.8; | |
| } | |
| .nav-link { | |
| position: relative; | |
| } | |
| .nav-link:after { | |
| content: ''; | |
| position: absolute; | |
| width: 0; | |
| height: 1px; | |
| bottom: 0; | |
| left: 0; | |
| background-color: #d1a782; | |
| transition: width 0.3s ease; | |
| } | |
| .nav-link:hover:after { | |
| width: 100%; | |
| } | |
| /* Smooth scrolling */ | |
| html { | |
| scroll-behavior: smooth; | |
| } | |
| </style> | |
| </head> | |
| <body class="font-sans text-gray-700 bg-white antialiased"> | |
| <!-- Navigation --> | |
| <nav class="fixed w-full bg-white bg-opacity-90 z-50 shadow-sm"> | |
| <div class="container mx-auto px-6 py-4 flex justify-between items-center"> | |
| <a href="#" class="text-2xl font-light text-gray-800">Lumaxia <span class="text-amber-800">Wedding Films</span></a> | |
| <div class="hidden md:flex space-x-8"> | |
| <a href="#home" class="nav-link text-gray-700 hover:text-amber-800">Home</a> | |
| <a href="#portfolio" class="nav-link text-gray-700 hover:text-amber-800">Portfolio</a> | |
| <a href="#about" class="nav-link text-gray-700 hover:text-amber-800">About</a> | |
| <a href="#contact" class="nav-link text-gray-700 hover:text-amber-800">Contact</a> | |
| </div> | |
| <button class="md:hidden focus:outline-none" id="menu-toggle"> | |
| <i class="fas fa-bars text-gray-700 text-xl"></i> | |
| </button> | |
| </div> | |
| <!-- Mobile menu --> | |
| <div class="md:hidden hidden bg-white w-full px-6 py-4" id="mobile-menu"> | |
| <div class="flex flex-col space-y-4"> | |
| <a href="#home" class="nav-link text-gray-700 hover:text-amber-800">Home</a> | |
| <a href="#portfolio" class="nav-link text-gray-700 hover:text-amber-800">Portfolio</a> | |
| <a href="#about" class="nav-link text-gray-700 hover:text-amber-800">About</a> | |
| <a href="#contact" class="nav-link text-gray-700 hover:text-amber-800">Contact</a> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section with Video Background --> | |
| <section id="home" class="relative h-screen flex items-center justify-center overflow-hidden"> | |
| <video autoplay muted loop class="hero-video"> | |
| <source src="https://assets.mixkit.co/videos/preview/mixkit-wedding-couple-standing-in-a-field-while-the-sun-1210-large.mp4" type="video/mp4"> | |
| Your browser does not support the video tag. | |
| </video> | |
| <div class="absolute inset-0 bg-black bg-opacity-30"></div> | |
| <div class="text-center px-6 z-10"> | |
| <h1 class="text-4xl md:text-6xl font-light text-white mb-4">Capturing Timeless Moments</h1> | |
| <p class="text-xl text-white mb-8 max-w-2xl mx-auto">Preserving your most precious memories with cinematic elegance</p> | |
| <a href="#contact" class="inline-block px-8 py-3 bg-white text-amber-800 font-medium rounded-sm hover:bg-amber-50 transition duration-300">Get in Touch</a> | |
| </div> | |
| </section> | |
| <!-- Portfolio Section --> | |
| <section id="portfolio" class="py-20 bg-gray-50"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="text-3xl font-light text-center mb-12 text-gray-800">Wedding Films</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Video 1 --> | |
| <div class="video-thumbnail relative group overflow-hidden rounded-sm shadow-md"> | |
| <img src="https://images.unsplash.com/photo-1519225421980-715cb0215aed?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Wedding Film" class="w-full h-64 object-cover transition duration-500 group-hover:scale-105"> | |
| <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center cursor-pointer"> | |
| <i class="fas fa-play play-icon text-white text-4xl"></i> | |
| </div> | |
| <div class="absolute bottom-0 left-0 right-0 p-4 bg-gradient-to-t from-black to-transparent"> | |
| <h3 class="text-white font-light text-xl">Sarah & Michael</h3> | |
| </div> | |
| </div> | |
| <!-- Video 2 --> | |
| <div class="video-thumbnail relative group overflow-hidden rounded-sm shadow-md"> | |
| <img src="https://images.unsplash.com/photo-1519657337289-077653f724ed?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Wedding Film" class="w-full h-64 object-cover transition duration-500 group-hover:scale-105"> | |
| <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center cursor-pointer"> | |
| <i class="fas fa-play play-icon text-white text-4xl"></i> | |
| </div> | |
| <div class="absolute bottom-0 left-0 right-0 p-4 bg-gradient-to-t from-black to-transparent"> | |
| <h3 class="text-white font-light text-xl">Emma & James</h3> | |
| </div> | |
| </div> | |
| <!-- Video 3 --> | |
| <div class="video-thumbnail relative group overflow-hidden rounded-sm shadow-md"> | |
| <img src="https://images.unsplash.com/photo-1583939003579-730e3918a45a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1587&q=80" alt="Wedding Film" class="w-full h-64 object-cover transition duration-500 group-hover:scale-105"> | |
| <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center cursor-pointer"> | |
| <i class="fas fa-play play-icon text-white text-4xl"></i> | |
| </div> | |
| <div class="absolute bottom-0 left-0 right-0 p-4 bg-gradient-to-t from-black to-transparent"> | |
| <h3 class="text-white font-light text-xl">Olivia & Noah</h3> | |
| </div> | |
| </div> | |
| <!-- Video 4 --> | |
| <div class="video-thumbnail relative group overflow-hidden rounded-sm shadow-md"> | |
| <img src="https://images.unsplash.com/photo-1519225421980-715cb0215aed?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Wedding Film" class="w-full h-64 object-cover transition duration-500 group-hover:scale-105"> | |
| <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center cursor-pointer"> | |
| <i class="fas fa-play play-icon text-white text-4xl"></i> | |
| </div> | |
| <div class="absolute bottom-0 left-0 right-0 p-4 bg-gradient-to-t from-black to-transparent"> | |
| <h3 class="text-white font-light text-xl">Sophia & Liam</h3> | |
| </div> | |
| </div> | |
| <!-- Video 5 --> | |
| <div class="video-thumbnail relative group overflow-hidden rounded-sm shadow-md"> | |
| <img src="https://images.unsplash.com/photo-1519657337289-077653f724ed?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Wedding Film" class="w-full h-64 object-cover transition duration-500 group-hover:scale-105"> | |
| <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center cursor-pointer"> | |
| <i class="fas fa-play play-icon text-white text-4xl"></i> | |
| </div> | |
| <div class="absolute bottom-0 left-0 right-0 p-4 bg-gradient-to-t from-black to-transparent"> | |
| <h3 class="text-white font-light text-xl">Ava & Lucas</h3> | |
| </div> | |
| </div> | |
| <!-- Video 6 --> | |
| <div class="video-thumbnail relative group overflow-hidden rounded-sm shadow-md"> | |
| <img src="https://images.unsplash.com/photo-1583939003579-730e3918a45a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1587&q=80" alt="Wedding Film" class="w-full h-64 object-cover transition duration-500 group-hover:scale-105"> | |
| <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center cursor-pointer"> | |
| <i class="fas fa-play play-icon text-white text-4xl"></i> | |
| </div> | |
| <div class="absolute bottom-0 left-0 right-0 p-4 bg-gradient-to-t from-black to-transparent"> | |
| <h3 class="text-white font-light text-xl">Isabella & Ethan</h3> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- About Section --> | |
| <section id="about" class="py-20 bg-white"> | |
| <div class="container mx-auto px-6"> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-12 md:mb-0 md:pr-12"> | |
| <img src="https://images.unsplash.com/photo-1551836022-d5d44eef8f86?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="About Me" class="w-full h-auto rounded-sm shadow-md"> | |
| </div> | |
| <div class="md:w-1/2"> | |
| <h2 class="text-3xl font-light mb-6 text-gray-800">About Me</h2> | |
| <p class="text-gray-600 mb-6 leading-relaxed"> | |
| With over a decade of experience in wedding videography, I specialize in capturing the raw emotions and fleeting moments that make your day truly unique. My approach is unobtrusive yet attentive, allowing me to document your wedding story as it naturally unfolds. | |
| </p> | |
| <p class="text-gray-600 mb-6 leading-relaxed"> | |
| I believe that wedding films should be more than just documentation - they should be cinematic experiences that transport you back to the joy, laughter, and tears of your special day. Each film is carefully crafted to reflect the personality and love story of the couple. | |
| </p> | |
| <p class="text-gray-600 leading-relaxed"> | |
| When I'm not behind the camera, you can find me hiking with my golden retriever or experimenting with new film techniques. I'm based in California but available for travel worldwide. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contact" class="py-20 bg-gray-50"> | |
| <div class="container mx-auto px-6 max-w-4xl"> | |
| <h2 class="text-3xl font-light text-center mb-12 text-gray-800">Let's Create Something Beautiful</h2> | |
| <form class="bg-white p-8 rounded-sm shadow-md"> | |
| <div class="mb-6"> | |
| <label for="name" class="block text-gray-700 mb-2">Your Name</label> | |
| <input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 rounded-sm focus:outline-none focus:border-amber-500"> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="email" class="block text-gray-700 mb-2">Email Address</label> | |
| <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded-sm focus:outline-none focus:border-amber-500"> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="message" class="block text-gray-700 mb-2">Your Message</label> | |
| <textarea id="message" rows="5" class="w-full px-4 py-2 border border-gray-300 rounded-sm focus:outline-none focus:border-amber-500"></textarea> | |
| </div> | |
| <button type="submit" class="w-full bg-amber-800 text-white py-3 px-4 rounded-sm hover:bg-amber-700 transition duration-300">Send Message</button> | |
| </form> | |
| <div class="mt-12 text-center"> | |
| <p class="text-gray-600 mb-4">Or reach out directly:</p> | |
| <div class="flex justify-center space-x-6"> | |
| <a href="mailto:hello@timelessmoments.com" class="text-gray-700 hover:text-amber-800 transition duration-300"> | |
| <i class="fas fa-envelope text-xl"></i> | |
| </a> | |
| <a href="tel:+1234567890" class="text-gray-700 hover:text-amber-800 transition duration-300"> | |
| <i class="fas fa-phone text-xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-700 hover:text-amber-800 transition duration-300"> | |
| <i class="fab fa-instagram text-xl"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-800 text-white py-8"> | |
| <div class="container mx-auto px-6"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="mb-4 md:mb-0"> | |
| <h3 class="text-2xl font-light">Lumaxia <span class="text-amber-400">Wedding Films</span></h3> | |
| <p class="text-gray-400 mt-2">Capturing your love story with cinematic elegance</p> | |
| </div> | |
| <div class="text-gray-400 text-sm"> | |
| <p>© 2023 Timeless Moments. All rights reserved.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Video Modal --> | |
| <div id="video-modal" class="fixed inset-0 bg-black bg-opacity-90 z-50 hidden flex items-center justify-center p-4"> | |
| <div class="relative w-full max-w-4xl"> | |
| <button id="close-modal" class="absolute -top-12 right-0 text-white text-2xl focus:outline-none"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| <div class="aspect-w-16 aspect-h-9"> | |
| <iframe id="modal-video" class="w-full h-full" src="" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Mobile menu toggle | |
| document.getElementById('menu-toggle').addEventListener('click', function() { | |
| const menu = document.getElementById('mobile-menu'); | |
| menu.classList.toggle('hidden'); | |
| }); | |
| // Close mobile menu when clicking a link | |
| document.querySelectorAll('#mobile-menu a').forEach(link => { | |
| link.addEventListener('click', () => { | |
| document.getElementById('mobile-menu').classList.add('hidden'); | |
| }); | |
| }); | |
| // Video thumbnail click handler | |
| document.querySelectorAll('.video-thumbnail').forEach((thumbnail, index) => { | |
| thumbnail.addEventListener('click', () => { | |
| const modal = document.getElementById('video-modal'); | |
| const videoFrame = document.getElementById('modal-video'); | |
| // In a real implementation, you would use the actual video URL | |
| // This is just a placeholder for demonstration | |
| videoFrame.src = "https://www.youtube.com/embed/dQw4w9WgXcQ?autoplay=1"; | |
| modal.classList.remove('hidden'); | |
| document.body.style.overflow = 'hidden'; | |
| }); | |
| }); | |
| // Close modal | |
| document.getElementById('close-modal').addEventListener('click', () => { | |
| const modal = document.getElementById('video-modal'); | |
| const videoFrame = document.getElementById('modal-video'); | |
| videoFrame.src = ""; | |
| modal.classList.add('hidden'); | |
| document.body.style.overflow = 'auto'; | |
| }); | |
| // Smooth scrolling for all links | |
| 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 - 80, | |
| behavior: 'smooth' | |
| }); | |
| } | |
| }); | |
| }); | |
| </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=Cezarxil/client-app" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |