WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
A Code by Metehan
88
Metehan
Open In Editor
Publish Your Code
Recommended
20 August 2024
Facebook Login Page
1 December 2024
Glowing Social Media Icons Hover
HTML
Copy
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Chronos | Time. Reinvented.</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"> <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Raleway:wght@300;400;600&display=swap" rel="stylesheet"> <style> body { font-family: 'Raleway', sans-serif; background-color: #0a0a0a; color: #f5f5f5; overflow-x: hidden; } .heading-font { font-family: 'Playfair Display', serif; } .gold-accent { color: #d4af37; } .gold-border { border-color: #d4af37; } .gold-bg { background-color: #d4af37; } .watch-rotate { animation: rotateWatch 20s infinite linear; transform-style: preserve-3d; } @keyframes rotateWatch { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .glow-effect { box-shadow: 0 0 30px rgba(212, 175, 55, 0.3); } .parallax { background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; } .section-transition { transition: all 0.5s ease; } .nav-link { position: relative; } .nav-link:after { content: ''; position: absolute; width: 0; height: 2px; bottom: -5px; left: 0; background-color: #d4af37; transition: width 0.3s ease; } .nav-link:hover:after { width: 100%; } .watch-model { perspective: 1000px; } </style> </head> <body class="antialiased"> <!-- Navigation --> <nav class="fixed w-full z-50 bg-black bg-opacity-90 backdrop-filter backdrop-blur-sm"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="flex justify-between h-24 items-center"> <div class="flex-shrink-0 flex items-center"> <span class="text-3xl heading-font gold-accent">CHRONOS</span> </div> <div class="hidden md:block"> <div class="ml-10 flex items-baseline space-x-8"> <a href="#home" class="nav-link text-white hover:gold-accent px-3 py-2 text-sm font-medium">Home</a> <a href="#features" class="nav-link text-white hover:gold-accent px-3 py-2 text-sm font-medium">Features</a> <a href="#models" class="nav-link text-white hover:gold-accent px-3 py-2 text-sm font-medium">Models</a> <a href="#technology" class="nav-link text-white hover:gold-accent px-3 py-2 text-sm font-medium">Technology</a> <a href="#buy" class="nav-link text-white hover:gold-accent px-3 py-2 text-sm font-medium">Buy Now</a> </div> </div> <div class="hidden md:block"> <button class="gold-bg text-black px-6 py-2 rounded-sm font-medium hover:bg-opacity-90 transition duration-300"> Contact Us </button> </div> <div class="md:hidden"> <button id="mobile-menu-button" class="text-white focus:outline-none"> <i class="fas fa-bars text-2xl"></i> </button> </div> </div> </div> <!-- Mobile menu --> <div id="mobile-menu" class="hidden md:hidden bg-black bg-opacity-95 pb-6"> <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-white hover:gold-accent">Home</a> <a href="#features" class="block px-3 py-2 text-base font-medium text-white hover:gold-accent">Features</a> <a href="#models" class="block px-3 py-2 text-base font-medium text-white hover:gold-accent">Models</a> <a href="#technology" class="block px-3 py-2 text-base font-medium text-white hover:gold-accent">Technology</a> <a href="#buy" class="block px-3 py-2 text-base font-medium text-white hover:gold-accent">Buy Now</a> <a href="#" class="block px-3 py-2 text-base font-medium text-white hover:gold-accent">Contact Us</a> </div> </div> </nav> <!-- Hero Section --> <section id="home" class="relative h-screen flex items-center justify-center overflow-hidden"> <div class="absolute inset-0 bg-black opacity-50"></div> <div class="absolute inset-0 flex items-center justify-center"> <div class="absolute w-full h-full bg-gradient-radial from-transparent via-transparent to-black opacity-30"></div> </div> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 z-10"> <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center"> <div class="text-center md:text-left"> <h1 class="text-5xl md:text-7xl font-bold heading-font mb-6"> <span class="text-white">Time.</span> <span class="gold-accent">Reinvented.</span> </h1> <p class="text-lg md:text-xl text-gray-300 mb-8 max-w-lg"> Experience the pinnacle of horological innovation with Chronos. Where Swiss precision meets cutting-edge technology. </p> <div class="flex flex-col sm:flex-row gap-4 justify-center md:justify-start"> <button class="gold-bg text-black px-8 py-3 rounded-sm font-medium hover:bg-opacity-90 transition duration-300 text-lg"> Discover More </button> <button class="border gold-border text-white px-8 py-3 rounded-sm font-medium hover:bg-opacity-10 hover:bg-white transition duration-300 text-lg"> View Collection </button> </div> </div> <div class="watch-model flex justify-center"> <div class="watch-rotate glow-effect w-64 h-64 md:w-80 md:h-80"> <img src="https://images.unsplash.com/photo-1523170335258-f5ed118494a8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=880&q=80" alt="Chronos Luxury Smart Watch" class="w-full h-full object-contain"> </div> </div> </div> </div> <div class="absolute bottom-10 left-0 right-0 flex justify-center"> <a href="#features" class="text-white animate-bounce"> <i class="fas fa-chevron-down text-2xl"></i> </a> </div> </section> <!-- Features Section --> <section id="features" class="py-20 bg-gradient-to-b from-black via-gray-900 to-black"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="text-center mb-20"> <h2 class="text-4xl md:text-5xl font-bold heading-font mb-4"> <span class="gold-accent">Unparalleled</span> Features </h2> <p class="text-xl text-gray-400 max-w-3xl mx-auto"> Designed for those who demand excellence in every detail. </p> </div> <div class="grid grid-cols-1 md:grid-cols-3 gap-10"> <div class="bg-gray-900 bg-opacity-50 p-8 rounded-lg hover:bg-opacity-70 transition duration-500 section-transition"> <div class="gold-bg text-black w-16 h-16 rounded-full flex items-center justify-center mb-6 mx-auto"> <i class="fas fa-heartbeat text-2xl"></i> </div> <h3 class="text-2xl font-bold heading-font text-center mb-4">Health Monitoring</h3> <p class="text-gray-400 text-center"> Advanced sensors track heart rate, blood oxygen, sleep patterns, and stress levels with medical-grade accuracy. </p> </div> <div class="bg-gray-900 bg-opacity-50 p-8 rounded-lg hover:bg-opacity-70 transition duration-500 section-transition"> <div class="gold-bg text-black w-16 h-16 rounded-full flex items-center justify-center mb-6 mx-auto"> <i class="fas fa-water text-2xl"></i> </div> <h3 class="text-2xl font-bold heading-font text-center mb-4">100m Waterproof</h3> <p class="text-gray-400 text-center"> Engineered for the most demanding conditions with a titanium case and sapphire crystal display. </p> </div> <div class="bg-gray-900 bg-opacity-50 p-8 rounded-lg hover:bg-opacity-70 transition duration-500 section-transition"> <div class="gold-bg text-black w-16 h-16 rounded-full flex items-center justify-center mb-6 mx-auto"> <i class="fas fa-battery-full text-2xl"></i> </div> <h3 class="text-2xl font-bold heading-font text-center mb-4">30-Day Battery</h3> <p class="text-gray-400 text-center"> Our proprietary power management system delivers industry-leading battery life without compromise. </p> </div> </div> </div> </section> <!-- Models Section --> <section id="models" class="py-20 parallax" style="background-image: url('https://images.unsplash.com/photo-1546868871-7041f2d55e0b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1064&q=80');"> <div class="absolute inset-0 bg-black opacity-60"></div> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative"> <div class="text-center mb-20"> <h2 class="text-4xl md:text-5xl font-bold heading-font mb-4"> <span class="gold-accent">The</span> Collection </h2> <p class="text-xl text-gray-400 max-w-3xl mx-auto"> Choose your expression of timeless elegance. </p> </div> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> <div class="bg-black bg-opacity-70 p-8 rounded-lg border border-gray-800 hover:border-gold-500 transition duration-500 section-transition"> <div class="flex justify-center mb-6"> <img src="https://images.unsplash.com/photo-1523170335258-f5ed118494a8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=880&q=80" alt="Chronos Classic" class="w-64 h-64 object-contain"> </div> <h3 class="text-2xl font-bold heading-font text-center mb-2">Chronos Classic</h3> <p class="text-gold-500 text-center text-lg mb-4">$1,499</p> <p class="text-gray-400 text-center mb-6"> The essence of timeless design with modern functionality. Stainless steel case with genuine leather strap. </p> <button class="w-full gold-bg text-black py-3 rounded-sm font-medium hover:bg-opacity-90 transition duration-300"> Explore </button> </div> <div class="bg-black bg-opacity-70 p-8 rounded-lg border border-gray-800 hover:border-gold-500 transition duration-500 section-transition"> <div class="flex justify-center mb-6"> <img src="https://images.unsplash.com/photo-1558379850-823f103f866a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=880&q=80" alt="Chronos Titanium" class="w-64 h-64 object-contain"> </div> <h3 class="text-2xl font-bold heading-font text-center mb-2">Chronos Titanium</h3> <p class="text-gold-500 text-center text-lg mb-4">$2,299</p> <p class="text-gray-400 text-center mb-6"> Ultra-lightweight aerospace-grade titanium with carbon fiber accents. For those who push boundaries. </p> <button class="w-full gold-bg text-black py-3 rounded-sm font-medium hover:bg-opacity-90 transition duration-300"> Explore </button> </div> <div class="bg-black bg-opacity-70 p-8 rounded-lg border border-gray-800 hover:border-gold-500 transition duration-500 section-transition"> <div class="flex justify-center mb-6"> <img src="https://images.unsplash.com/photo-1557531365-e8b46c193043?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=880&q=80" alt="Chronos Heritage" class="w-64 h-64 object-contain"> </div> <h3 class="text-2xl font-bold heading-font text-center mb-2">Chronos Heritage</h3> <p class="text-gold-500 text-center text-lg mb-4">$3,999</p> <p class="text-gray-400 text-center mb-6"> Limited edition with 18k gold case and hand-finished complications. Only 500 pieces worldwide. </p> <button class="w-full gold-bg text-black py-3 rounded-sm font-medium hover:bg-opacity-90 transition duration-300"> Explore </button> </div> </div> </div> </section> <!-- Technology Section --> <section id="technology" class="py-20 bg-black"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center"> <div> <h2 class="text-4xl md:text-5xl font-bold heading-font mb-6"> <span class="gold-accent">Revolutionary</span> Technology </h2> <p class="text-xl text-gray-400 mb-8"> Behind every Chronos timepiece lies an extraordinary fusion of traditional watchmaking and cutting-edge innovation. </p> <div class="space-y-6"> <div class="flex items-start"> <div class="gold-bg text-black rounded-full w-12 h-12 flex items-center justify-center flex-shrink-0 mr-4"> <i class="fas fa-microchip text-xl"></i> </div> <div> <h3 class="text-2xl font-bold heading-font mb-2">Custom Processor</h3> <p class="text-gray-400"> Our proprietary C1 chip delivers desktop-class performance while sipping power for unmatched efficiency. </p> </div> </div> <div class="flex items-start"> <div class="gold-bg text-black rounded-full w-12 h-12 flex items-center justify-center flex-shrink-0 mr-4"> <i class="fas fa-eye text-xl"></i> </div> <div> <h3 class="text-2xl font-bold heading-font mb-2">Always-On Retina Display</h3> <p class="text-gray-400"> LTPO OLED technology with 2000 nits peak brightness and true blacks, visible in any lighting condition. </p> </div> </div> <div class="flex items-start"> <div class="gold-bg text-black rounded-full w-12 h-12 flex items-center justify-center flex-shrink-0 mr-4"> <i class="fas fa-shield-alt text-xl"></i> </div> <div> <h3 class="text-2xl font-bold heading-font mb-2">Military-Grade Durability</h3> <p class="text-gray-400"> Certified to MIL-STD-810H standards, resistant to extreme temperatures, shocks, and vibrations. </p> </div> </div> </div> </div> <div class="relative"> <div class="watch-rotate w-full h-96"> <img src="https://images.unsplash.com/photo-1546868871-7041f2d55e0b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1064&q=80" alt="Chronos Technology" class="w-full h-full object-contain"> </div> <div class="absolute -inset-8 bg-gradient-to-r from-transparent via-transparent to-black opacity-30"></div> </div> </div> </div> </section> <!-- Buy Now Section --> <section id="buy" class="py-20 bg-gradient-to-b from-black to-gray-900"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="text-center mb-16"> <h2 class="text-4xl md:text-5xl font-bold heading-font mb-4"> <span class="gold-accent">Own</span> The Future </h2> <p class="text-xl text-gray-400 max-w-3xl mx-auto"> Reserve your Chronos today and experience horological perfection. </p> </div> <div class="max-w-4xl mx-auto bg-gray-900 bg-opacity-50 rounded-xl overflow-hidden border border-gray-800"> <div class="grid grid-cols-1 md:grid-cols-2"> <div class="p-10"> <h3 class="text-3xl font-bold heading-font mb-6">Configure Your Chronos</h3> <div class="mb-6"> <label class="block text-gray-400 mb-2">Model</label> <select class="w-full bg-gray-800 border border-gray-700 text-white rounded-sm px-4 py-3 focus:outline-none focus:ring-2 focus:ring-gold-500"> <option>Chronos Classic - $1,499</option> <option>Chronos Titanium - $2,299</option> <option>Chronos Heritage - $3,999</option> </select> </div> <div class="mb-6"> <label class="block text-gray-400 mb-2">Strap Material</label> <select class="w-full bg-gray-800 border border-gray-700 text-white rounded-sm px-4 py-3 focus:outline-none focus:ring-2 focus:ring-gold-500"> <option>Italian Leather (Included)</option> <option>Stainless Steel Bracelet (+$299)</option> <option>18k Gold Plated (+$1,299)</option> <option>Carbon Fiber (+$499)</option> </select> </div> <div class="mb-8"> <label class="block text-gray-400 mb-2">Engraving (Optional)</label> <input type="text" class="w-full bg-gray-800 border border-gray-700 text-white rounded-sm px-4 py-3 focus:outline-none focus:ring-2 focus:ring-gold-500" placeholder="Your personal message"> </div> <button class="w-full gold-bg text-black py-4 rounded-sm font-medium hover:bg-opacity-90 transition duration-300 text-lg"> Add to Cart - $1,499 </button> </div> <div class="bg-gray-800 p-10 flex flex-col justify-center"> <div class="text-center mb-8"> <img src="https://images.unsplash.com/photo-1523170335258-f5ed118494a8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=880&q=80" alt="Selected Watch" class="w-64 h-64 object-contain mx-auto"> </div> <div class="space-y-4"> <div class="flex justify-between border-b border-gray-700 pb-2"> <span class="text-gray-400">Subtotal</span> <span class="text-white">$1,499.00</span> </div> <div class="flex justify-between border-b border-gray-700 pb-2"> <span class="text-gray-400">Shipping</span> <span class="text-white">Free</span> </div> <div class="flex justify-between border-b border-gray-700 pb-2"> <span class="text-gray-400">Tax</span> <span class="text-white">Calculated at checkout</span> </div> <div class="flex justify-between pt-2"> <span class="text-xl text-white font-medium">Estimated Total</span> <span class="text-xl gold-accent font-medium">$1,499.00</span> </div> </div> </div> </div> </div> </div> </section> <!-- Support Section --> <section class="py-20 bg-black"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="grid grid-cols-1 md:grid-cols-2 gap-16"> <div> <h2 class="text-4xl md:text-5xl font-bold heading-font mb-6"> <span class="gold-accent">Exceptional</span> Support </h2> <p class="text-xl text-gray-400 mb-8"> Your Chronos experience is backed by our global concierge service available 24/7. </p> <div class="space-y-6"> <div class="flex items-start"> <div class="gold-bg text-black rounded-full w-12 h-12 flex items-center justify-center flex-shrink-0 mr-4"> <i class="fas fa-shield-alt text-xl"></i> </div> <div> <h3 class="text-2xl font-bold heading-font mb-2">5-Year Warranty</h3> <p class="text-gray-400"> Comprehensive coverage for manufacturing defects with worldwide service centers. </p> </div> </div> <div class="flex items-start"> <div class="gold-bg text-black rounded-full w-12 h-12 flex items-center justify-center flex-shrink-0 mr-4"> <i class="fas fa-exchange-alt text-xl"></i> </div> <div> <h3 class="text-2xl font-bold heading-font mb-2">60-Day Returns</h3> <p class="text-gray-400"> Not completely satisfied? Return your watch for a full refund, no questions asked. </p> </div> </div> <div class="flex items-start"> <div class="gold-bg text-black rounded-full w-12 h-12 flex items-center justify-center flex-shrink-0 mr-4"> <i class="fas fa-headset text-xl"></i> </div> <div> <h3 class="text-2xl font-bold heading-font mb-2">Dedicated Concierge</h3> <p class="text-gray-400"> Your personal Chronos specialist available via phone, chat, or email around the clock. </p> </div> </div> </div> </div> <div class="bg-gray-900 bg-opacity-50 rounded-xl p-10 border border-gray-800"> <h3 class="text-2xl font-bold heading-font mb-6">Contact Our Team</h3> <form> <div class="mb-6"> <label class="block text-gray-400 mb-2">Name</label> <input type="text" class="w-full bg-gray-800 border border-gray-700 text-white rounded-sm px-4 py-3 focus:outline-none focus:ring-2 focus:ring-gold-500"> </div> <div class="mb-6"> <label class="block text-gray-400 mb-2">Email</label> <input type="email" class="w-full bg-gray-800 border border-gray-700 text-white rounded-sm px-4 py-3 focus:outline-none focus:ring-2 focus:ring-gold-500"> </div> <div class="mb-6"> <label class="block text-gray-400 mb-2">Message</label> <input rows="4" class="w-full bg-gray-800 border border-gray-700 text-white rounded-sm px-4 py-3 focus:outline-none focus:ring-2 focus:ring-gold-500"/> </div> <button class="w-full gold-bg text-black py-3 rounded-sm font-medium hover:bg-opacity-90 transition duration-300"> Send Message </button> </form> </div> </div> </div> </section> <!-- Footer --> <footer class="bg-black border-t border-gray-900 py-16"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="grid grid-cols-1 md:grid-cols-4 gap-12"> <div> <h3 class="text-3xl heading-font gold-accent mb-6">CHRONOS</h3> <p class="text-gray-400 mb-6"> Where tradition meets innovation in the art of timekeeping. </p> <div class="flex space-x-4"> <a href="#" class="text-gray-400 hover:text-white transition duration-300"> <i class="fab fa-facebook-f"></i> </a> <a href="#" class="text-gray-400 hover:text-white transition duration-300"> <i class="fab fa-instagram"></i> </a> <a href="#" class="text-gray-400 hover:text-white transition duration-300"> <i class="fab fa-twitter"></i> </a> <a href="#" class="text-gray-400 hover:text-white transition duration-300"> <i class="fab fa-youtube"></i> </a> </div> </div> <div> <h4 class="text-white text-lg font-medium mb-6">Shop</h4> <ul class="space-y-3"> <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">All Watches</a></li> <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">New Arrivals</a></li> <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Best Sellers</a></li> <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Limited Editions</a></li> <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Straps & Accessories</a></li> </ul> </div> <div> <h4 class="text-white text-lg font-medium mb-6">Company</h4> <ul class="space-y-3"> <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Our Story</a></li> <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Sustainability</a></li> <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Careers</a></li> <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Press</a></li> <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Investors</a></li> </ul> </div> <div> <h4 class="text-white text-lg font-medium mb-6">Customer Service</h4> <ul class="space-y-3"> <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Contact Us</a></li> <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">FAQs</a></li> <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Shipping & Returns</a></li> <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Warranty</a></li> <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Watch Care</a></li> </ul> </div> </div> <div class="border-t border-gray-900 mt-16 pt-10 flex flex-col md:flex-row justify-between items-center"> <p class="text-gray-500 mb-4 md:mb-0"> © 2023 Chronos. All rights reserved. </p> <div class="flex space-x-6"> <a href="#" class="text-gray-500 hover:text-white transition duration-300">Privacy Policy</a> <a href="#" class="text-gray-500 hover:text-white transition duration-300">Terms of Service</a> <a href="#" class="text-gray-500 hover:text-white transition duration-300">Cookie Settings</a> </div> </div> </div> </footer> <script> // Mobile menu toggle document.getElementById('mobile-menu-button').addEventListener('click', function() { const menu = document.getElementById('mobile-menu'); menu.classList.toggle('hidden'); }); // 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) { targetElement.scrollIntoView({ behavior: 'smooth' }); // Close mobile menu if open const mobileMenu = document.getElementById('mobile-menu'); if (!mobileMenu.classList.contains('hidden')) { mobileMenu.classList.add('hidden'); } } }); }); // Watch rotation pause on hover const watchElements = document.querySelectorAll('.watch-rotate'); watchElements.forEach(watch => { watch.addEventListener('mouseenter', function() { this.style.animationPlayState = 'paused'; }); watch.addEventListener('mouseleave', function() { this.style.animationPlayState = 'running'; }); }); // Parallax effect for models section window.addEventListener('scroll', function() { const parallax = document.querySelector('.parallax'); if (parallax) { const scrollPosition = window.pageYOffset; parallax.style.backgroundPositionY = scrollPosition * 0.5 + 'px'; } }); </script> </body> </html>
CSS
Copy
/* Replace with your CSS Code (Leave empty if not needed) */
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */
