Design a clean, minimalistic wedding videography portfolio website. Focus on elegance, simplicity, and emotional connection. Key features: Neutral color palette (white, beige, soft gray) Large fullscreen video header or hero reel Minimal text: name, tagline (‘Capturing Timeless Moments’), and contact button Grid gallery of wedding films with simple hover play About section with a short, warm description Contact form (name, email, message) Mobile-friendly, smooth scrolling, no clutter, no heavy effects." - Initial Deployment
f694ef8
verified
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Timeless Moments | Wedding Videography</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 video hover effects */ | |
| .video-thumbnail { | |
| position: relative; | |
| overflow: hidden; | |
| transition: all 0.3s ease; | |
| } | |
| .video-thumbnail:hover { | |
| transform: scale(1.02); | |
| box-shadow: 0 10px 25px rgba(0,0,0,0.1); | |
| } | |
| .play-icon { | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| opacity: 0; | |
| transition: all 0.3s ease; | |
| background: rgba(255,255,255,0.8); | |
| width: 60px; | |
| height: 60px; | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .video-thumbnail:hover .play-icon { | |
| opacity: 1; | |
| } | |
| /* Smooth scrolling */ | |
| html { | |
| scroll-behavior: smooth; | |
| } | |
| /* Hero video */ | |
| .hero-video { | |
| height: 100vh; | |
| max-height: 800px; | |
| } | |
| /* Custom underline for headings */ | |
| .heading-underline { | |
| position: relative; | |
| display: inline-block; | |
| } | |
| .heading-underline:after { | |
| content: ''; | |
| position: absolute; | |
| width: 50%; | |
| height: 2px; | |
| bottom: -8px; | |
| left: 25%; | |
| background-color: #d4a76a; | |
| } | |
| /* Contact form focus */ | |
| .contact-input:focus { | |
| outline: none; | |
| box-shadow: 0 0 0 2px rgba(212, 167, 106, 0.3); | |
| } | |
| </style> | |
| </head> | |
| <body class="font-sans text-gray-700 bg-white"> | |
| <!-- Navigation --> | |
| <nav class="fixed w-full z-50 bg-white bg-opacity-90 backdrop-blur-sm shadow-sm"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between h-16 items-center"> | |
| <div class="flex-shrink-0 flex items-center"> | |
| <span class="text-xl font-light text-gray-800">Timeless Moments</span> | |
| </div> | |
| <div class="hidden md:block"> | |
| <div class="ml-10 flex items-center space-x-8"> | |
| <a href="#home" class="text-gray-700 hover:text-amber-700 px-3 py-2 text-sm font-medium transition-colors duration-200">Home</a> | |
| <a href="#portfolio" class="text-gray-700 hover:text-amber-700 px-3 py-2 text-sm font-medium transition-colors duration-200">Portfolio</a> | |
| <a href="#about" class="text-gray-700 hover:text-amber-700 px-3 py-2 text-sm font-medium transition-colors duration-200">About</a> | |
| <a href="#contact" class="text-gray-700 hover:text-amber-700 px-3 py-2 text-sm font-medium transition-colors duration-200">Contact</a> | |
| </div> | |
| </div> | |
| <div class="md:hidden"> | |
| <button id="menu-toggle" class="text-gray-700 focus:outline-none"> | |
| <i class="fas fa-bars text-xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Mobile menu --> | |
| <div id="mobile-menu" class="hidden md:hidden bg-white shadow-lg"> | |
| <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3"> | |
| <a href="#home" class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-amber-700">Home</a> | |
| <a href="#portfolio" class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-amber-700">Portfolio</a> | |
| <a href="#about" class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-amber-700">About</a> | |
| <a href="#contact" class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-amber-700">Contact</a> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section with Video Background --> | |
| <section id="home" class="hero-video relative flex items-center justify-center bg-gray-100 overflow-hidden"> | |
| <video autoplay muted loop playsinline class="absolute w-full h-full object-cover"> | |
| <source src="https://assets.mixkit.co/videos/preview/mixkit-wedding-couple-in-a-field-1862-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="relative z-10 text-center px-4"> | |
| <h1 class="text-4xl md:text-6xl font-light text-white mb-4">Capturing Timeless Moments</h1> | |
| <p class="text-xl md:text-2xl text-white font-light mb-8 max-w-2xl mx-auto">Beautiful wedding films that tell your unique love story</p> | |
| <a href="#contact" class="inline-block px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-amber-700 hover:bg-amber-800 transition-colors duration-200"> | |
| Get in Touch | |
| </a> | |
| </div> | |
| </section> | |
| <!-- Portfolio Section --> | |
| <section id="portfolio" class="py-20 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-light text-gray-800 heading-underline">Wedding Films</h2> | |
| <p class="mt-6 max-w-2xl mx-auto text-gray-600">Each wedding tells a different story. Here are some of our favorites.</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Video 1 --> | |
| <div class="video-thumbnail rounded-lg overflow-hidden relative cursor-pointer"> | |
| <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 md:h-80 object-cover"> | |
| <div class="play-icon"> | |
| <i class="fas fa-play text-amber-700 text-xl"></i> | |
| </div> | |
| <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4"> | |
| <h3 class="text-white font-light text-xl">Sarah & Michael</h3> | |
| <p class="text-gray-300 text-sm">Tuscany, Italy</p> | |
| </div> | |
| </div> | |
| <!-- Video 2 --> | |
| <div class="video-thumbnail rounded-lg overflow-hidden relative cursor-pointer"> | |
| <img src="https://images.unsplash.com/photo-1523438885200-e635ba2c371e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" alt="Wedding Film" class="w-full h-64 md:h-80 object-cover"> | |
| <div class="play-icon"> | |
| <i class="fas fa-play text-amber-700 text-xl"></i> | |
| </div> | |
| <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4"> | |
| <h3 class="text-white font-light text-xl">Emma & James</h3> | |
| <p class="text-gray-300 text-sm">New York, USA</p> | |
| </div> | |
| </div> | |
| <!-- Video 3 --> | |
| <div class="video-thumbnail rounded-lg overflow-hidden relative cursor-pointer"> | |
| <img src="https://images.unsplash.com/photo-1520854221256-17451cc331bf?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 md:h-80 object-cover"> | |
| <div class="play-icon"> | |
| <i class="fas fa-play text-amber-700 text-xl"></i> | |
| </div> | |
| <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4"> | |
| <h3 class="text-white font-light text-xl">Sophia & Daniel</h3> | |
| <p class="text-gray-300 text-sm">Santorini, Greece</p> | |
| </div> | |
| </div> | |
| <!-- Video 4 --> | |
| <div class="video-thumbnail rounded-lg overflow-hidden relative cursor-pointer"> | |
| <img src="https://images.unsplash.com/photo-1515934751635-c81c6bc9a2d8?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 md:h-80 object-cover"> | |
| <div class="play-icon"> | |
| <i class="fas fa-play text-amber-700 text-xl"></i> | |
| </div> | |
| <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4"> | |
| <h3 class="text-white font-light text-xl">Olivia & William</h3> | |
| <p class="text-gray-300 text-sm">Paris, France</p> | |
| </div> | |
| </div> | |
| <!-- Video 5 --> | |
| <div class="video-thumbnail rounded-lg overflow-hidden relative cursor-pointer"> | |
| <img src="https://images.unsplash.com/photo-1519671482749-fd09be7ccebf?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 md:h-80 object-cover"> | |
| <div class="play-icon"> | |
| <i class="fas fa-play text-amber-700 text-xl"></i> | |
| </div> | |
| <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4"> | |
| <h3 class="text-white font-light text-xl">Ava & Benjamin</h3> | |
| <p class="text-gray-300 text-sm">Bali, Indonesia</p> | |
| </div> | |
| </div> | |
| <!-- Video 6 --> | |
| <div class="video-thumbnail rounded-lg overflow-hidden relative cursor-pointer"> | |
| <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 md:h-80 object-cover"> | |
| <div class="play-icon"> | |
| <i class="fas fa-play text-amber-700 text-xl"></i> | |
| </div> | |
| <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4"> | |
| <h3 class="text-white font-light text-xl">Charlotte & Henry</h3> | |
| <p class="text-gray-300 text-sm">Lake Como, Italy</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-16"> | |
| <a href="#" class="inline-block px-6 py-2 border border-gray-300 text-base font-medium rounded-md text-gray-700 hover:bg-gray-50 transition-colors duration-200"> | |
| View More Films | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- About Section --> | |
| <section id="about" class="py-20 bg-gray-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="lg:grid lg:grid-cols-2 lg:gap-16 items-center"> | |
| <div class="mb-12 lg:mb-0"> | |
| <img src="https://images.unsplash.com/photo-1552664199-fd31f7431a55?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" alt="About Us" class="rounded-lg shadow-md w-full h-auto"> | |
| </div> | |
| <div> | |
| <h2 class="text-3xl md:text-4xl font-light text-gray-800 heading-underline">Our Story</h2> | |
| <p class="mt-6 text-gray-600 leading-relaxed"> | |
| We're a passionate team of wedding filmmakers dedicated to capturing the essence of your special day. | |
| With over a decade of experience, we've learned that the most beautiful moments are often the quietest - | |
| the stolen glances, the tender touches, the joyful tears. | |
| </p> | |
| <p class="mt-4 text-gray-600 leading-relaxed"> | |
| Our approach is unobtrusive and natural. We blend into your day, capturing authentic emotions as they unfold, | |
| creating films that you'll cherish for a lifetime. Every wedding is unique, and we take the time to understand | |
| your story so we can tell it beautifully through film. | |
| </p> | |
| <div class="mt-8 grid grid-cols-2 gap-4"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-amber-100 rounded-full p-3"> | |
| <i class="fas fa-camera text-amber-700"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-lg font-medium text-gray-800">Cinematic Style</h3> | |
| <p class="mt-1 text-gray-600">Beautiful, film-like quality</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-amber-100 rounded-full p-3"> | |
| <i class="fas fa-heart text-amber-700"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-lg font-medium text-gray-800">Emotional Storytelling</h3> | |
| <p class="mt-1 text-gray-600">Capturing real moments</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials --> | |
| <section class="py-20 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-light text-gray-800 heading-underline">Kind Words</h2> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div class="bg-gray-50 p-8 rounded-lg"> | |
| <div class="flex items-center mb-4"> | |
| <div class="text-amber-600 text-2xl mr-2"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 italic mb-6">"We couldn't have asked for a more beautiful way to remember our day. The film captured emotions we didn't even realize were happening."</p> | |
| <div class="flex items-center"> | |
| <div> | |
| <h4 class="font-medium text-gray-800">Emily & Robert</h4> | |
| <p class="text-gray-600 text-sm">June 2023</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 p-8 rounded-lg"> | |
| <div class="flex items-center mb-4"> | |
| <div class="text-amber-600 text-2xl mr-2"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 italic mb-6">"Every time we watch our wedding film, we discover new details and emotions. It's like reliving the best day of our lives over and over."</p> | |
| <div class="flex items-center"> | |
| <div> | |
| <h4 class="font-medium text-gray-800">Sophie & David</h4> | |
| <p class="text-gray-600 text-sm">August 2023</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 p-8 rounded-lg"> | |
| <div class="flex items-center mb-4"> | |
| <div class="text-amber-600 text-2xl mr-2"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 italic mb-6">"The team was so professional and unobtrusive. We barely noticed them during the day, but the film shows they captured everything perfectly."</p> | |
| <div class="flex items-center"> | |
| <div> | |
| <h4 class="font-medium text-gray-800">Jessica & Michael</h4> | |
| <p class="text-gray-600 text-sm">September 2023</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contact" class="py-20 bg-gray-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="lg:grid lg:grid-cols-2 lg:gap-16"> | |
| <div class="mb-12 lg:mb-0"> | |
| <h2 class="text-3xl md:text-4xl font-light text-gray-800 heading-underline">Let's Connect</h2> | |
| <p class="mt-6 text-gray-600 leading-relaxed"> | |
| We'd love to hear about your wedding plans and how we can help capture your special day. | |
| Whether you're just starting to plan or have all the details finalized, we're here to help. | |
| </p> | |
| <div class="mt-8 space-y-4"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-amber-100 rounded-full p-3"> | |
| <i class="fas fa-envelope text-amber-700"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-lg font-medium text-gray-800">Email Us</h3> | |
| <p class="mt-1 text-gray-600">hello@timelessmoments.com</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-amber-100 rounded-full p-3"> | |
| <i class="fas fa-phone text-amber-700"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-lg font-medium text-gray-800">Call Us</h3> | |
| <p class="mt-1 text-gray-600">+1 (555) 123-4567</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-amber-100 rounded-full p-3"> | |
| <i class="fas fa-map-marker-alt text-amber-700"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-lg font-medium text-gray-800">Based In</h3> | |
| <p class="mt-1 text-gray-600">New York, USA<br>Available worldwide</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <form class="space-y-6"> | |
| <div> | |
| <label for="name" class="block text-sm font-medium text-gray-700">Your Name</label> | |
| <div class="mt-1"> | |
| <input id="name" name="name" type="text" required class="contact-input py-3 px-4 block w-full border border-gray-300 rounded-md focus:border-amber-500 focus:ring-amber-500"> | |
| </div> | |
| </div> | |
| <div> | |
| <label for="email" class="block text-sm font-medium text-gray-700">Email Address</label> | |
| <div class="mt-1"> | |
| <input id="email" name="email" type="email" required class="contact-input py-3 px-4 block w-full border border-gray-300 rounded-md focus:border-amber-500 focus:ring-amber-500"> | |
| </div> | |
| </div> | |
| <div> | |
| <label for="wedding-date" class="block text-sm font-medium text-gray-700">Wedding Date</label> | |
| <div class="mt-1"> | |
| <input id="wedding-date" name="wedding-date" type="date" class="contact-input py-3 px-4 block w-full border border-gray-300 rounded-md focus:border-amber-500 focus:ring-amber-500"> | |
| </div> | |
| </div> | |
| <div> | |
| <label for="message" class="block text-sm font-medium text-gray-700">Your Message</label> | |
| <div class="mt-1"> | |
| <textarea id="message" name="message" rows="4" class="contact-input py-3 px-4 block w-full border border-gray-300 rounded-md focus:border-amber-500 focus:ring-amber-500"></textarea> | |
| </div> | |
| </div> | |
| <div> | |
| <button type="submit" class="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-amber-700 hover:bg-amber-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-amber-500 transition-colors duration-200"> | |
| Send Message | |
| </button> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-white py-12 border-t border-gray-200"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="mb-6 md:mb-0"> | |
| <span class="text-xl font-light text-gray-800">Timeless Moments</span> | |
| <p class="mt-2 text-sm text-gray-500">Capturing your love story beautifully.</p> | |
| </div> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-gray-500 hover:text-amber-700"> | |
| <i class="fab fa-instagram text-xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-500 hover:text-amber-700"> | |
| <i class="fab fa-vimeo-v text-xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-500 hover:text-amber-700"> | |
| <i class="fab fa-pinterest-p text-xl"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="mt-8 pt-8 border-t border-gray-200 flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-sm text-gray-500 mb-4 md:mb-0">© 2023 Timeless Moments. All rights reserved.</p> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-sm text-gray-500 hover:text-amber-700">Privacy Policy</a> | |
| <a href="#" class="text-sm text-gray-500 hover:text-amber-700">Terms of Service</a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Video Modal --> | |
| <div id="video-modal" class="fixed inset-0 z-50 hidden items-center justify-center bg-black bg-opacity-90 p-4"> | |
| <div class="relative w-full max-w-4xl"> | |
| <button id="close-modal" class="absolute -top-12 right-0 text-white text-3xl 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-96 md:h-[32rem]" src="" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Mobile menu toggle | |
| const menuToggle = document.getElementById('menu-toggle'); | |
| const mobileMenu = document.getElementById('mobile-menu'); | |
| menuToggle.addEventListener('click', () => { | |
| mobileMenu.classList.toggle('hidden'); | |
| }); | |
| // Close mobile menu when clicking on a link | |
| const mobileLinks = document.querySelectorAll('#mobile-menu a'); | |
| mobileLinks.forEach(link => { | |
| link.addEventListener('click', () => { | |
| mobileMenu.classList.add('hidden'); | |
| }); | |
| }); | |
| // Video modal functionality | |
| const videoThumbnails = document.querySelectorAll('.video-thumbnail'); | |
| const videoModal = document.getElementById('video-modal'); | |
| const modalVideo = document.getElementById('modal-video'); | |
| const closeModal = document.getElementById('close-modal'); | |
| // Sample video URLs (in a real site, these would be your actual video links) | |
| const videoUrls = [ | |
| 'https://player.vimeo.com/video/123456789?autoplay=1', | |
| 'https://player.vimeo.com/video/987654321?autoplay=1', | |
| 'https://player.vimeo.com/video/567891234?autoplay=1', | |
| 'https://player.vimeo.com/video/432156789?autoplay=1', | |
| 'https://player.vimeo.com/video/876543219?autoplay=1', | |
| 'https://player.vimeo.com/video/345678912?autoplay=1' | |
| ]; | |
| videoThumbnails.forEach((thumbnail, index) => { | |
| thumbnail.addEventListener('click', () => { | |
| modalVideo.src = videoUrls[index]; | |
| videoModal.classList.remove('hidden'); | |
| document.body.style.overflow = 'hidden'; | |
| }); | |
| }); | |
| closeModal.addEventListener('click', () => { | |
| modalVideo.src = ''; | |
| videoModal.classList.add('hidden'); | |
| document.body.style.overflow = 'auto'; | |
| }); | |
| // Close modal when clicking outside the video | |
| videoModal.addEventListener('click', (e) => { | |
| if (e.target === videoModal) { | |
| modalVideo.src = ''; | |
| videoModal.classList.add('hidden'); | |
| document.body.style.overflow = 'auto'; | |
| } | |
| }); | |
| // Smooth scrolling for anchor links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function(e) { | |
| e.preventDefault(); | |
| const targetId = this.getAttribute('href'); | |
| if (targetId === '#') return; | |
| const targetElement = document.querySelector(targetId); | |
| if (targetElement) { | |
| const headerOffset = 80; | |
| const elementPosition = targetElement.getBoundingClientRect().top; | |
| const offsetPosition = elementPosition + window.pageYOffset - headerOffset; | |
| window.scrollTo({ | |
| top: offsetPosition, | |
| 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/portfolio" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |