Spaces:
Running
Running
File size: 18,172 Bytes
52a63ef ec281ad 52a63ef ec281ad 52a63ef ec281ad 52a63ef ec281ad 52a63ef ec281ad 52a63ef ec281ad 52a63ef ec281ad 52a63ef ec281ad 52a63ef ec281ad 63028e1 ec281ad 52a63ef ec281ad 52a63ef ec281ad 52a63ef ec281ad 63028e1 ec281ad 52a63ef ec281ad 52a63ef ec281ad 63028e1 ec281ad 52a63ef 63028e1 ec281ad 63028e1 52a63ef ec281ad 63028e1 ec281ad 63028e1 ec281ad 63028e1 ec281ad 63028e1 ec281ad 63028e1 ec281ad 63028e1 ec281ad 63028e1 ec281ad 63028e1 ec281ad 63028e1 ec281ad 63028e1 ec281ad 63028e1 ec281ad 52a63ef 63028e1 ec281ad 63028e1 ec281ad 63028e1 ec281ad 63028e1 ec281ad 63028e1 ec281ad 63028e1 ec281ad 63028e1 ec281ad 63028e1 ec281ad 63028e1 52a63ef |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 |
<!DOCTYPE html>
<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> |