WEBLEB
Início
Editor
Entrar
Pro
Português
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Metehan
417
Metehan
Abrir no Editor
Video
Publique Seu Código
0
22 April 2025
Um código de Metehan
HTML
Copy
<!DOCTYPE html> <html lang="en" class="dark"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>LuminaFrame | Cinematic Photography</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 src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/ScrollTrigger.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/Draggable.min.js"></script> </head> <body class="bg-gray-900 text-white overflow-x-hidden"> <!-- Preloader --> <div id="preloader" class="fixed inset-0 z-50 flex items-center justify-center bg-gray-900"> <div class="loader animate-pulse flex flex-col items-center"> <i data-feather="camera" class="w-12 h-12 text-white"></i> <span class="mt-4 text-xl font-light tracking-widest">LUMINAFRAME</span> </div> </div> <!-- Navigation --> <custom-navbar></custom-navbar> <!-- Hero Section --> <section class="relative h-screen w-full overflow-hidden"> <div class="absolute inset-0 bg-black/30 z-10"></div> <div class="hero-slides"> <div class="hero-slide active" style="background-image: url('http://static.photos/nature/1920x1080/1')"> <div class="slide-content absolute bottom-20 left-20 z-20 max-w-2xl"> <h1 class="text-6xl font-bold mb-4 slide-title">Nature's Untold Stories</h1> <p class="text-xl opacity-80 slide-desc">Discover the raw beauty of untouched landscapes through our lens</p> </div> </div> <div class="hero-slide" style="background-image: url('http://static.photos/cityscape/1920x1080/2')"> <div class="slide-content absolute bottom-20 left-20 z-20 max-w-2xl"> <h1 class="text-6xl font-bold mb-4 slide-title">Urban Pulse</h1> <p class="text-xl opacity-80 slide-desc">Capturing the rhythm of city life in stunning detail</p> </div> </div> <div class="hero-slide" style="background-image: url('http://static.photos/travel/1920x1080/3')"> <div class="slide-content absolute bottom-20 left-20 z-20 max-w-2xl"> <h1 class="text-6xl font-bold mb-4 slide-title">Wanderlust Chronicles</h1> <p class="text-xl opacity-80 slide-desc">Journey through breathtaking destinations around the globe</p> </div> </div> </div> <div class="slide-controls absolute bottom-10 right-10 z-20 flex space-x-4"> <button class="slide-prev p-3 rounded-full bg-white/10 backdrop-blur-sm hover:bg-white/20 transition"> <i data-feather="chevron-left"></i> </button> <button class="slide-next p-3 rounded-full bg-white/10 backdrop-blur-sm hover:bg-white/20 transition"> <i data-feather="chevron-right"></i> </button> </div> </section> <!-- Gallery Section --> <section class="py-20 px-10"> <div class="container mx-auto"> <h2 class="text-4xl font-bold mb-16 text-center">Featured Collections</h2> <div class="gallery-grid grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> <!-- Gallery items will be populated by JS --> </div> </div> </section> <!-- Image Overlay --> <div id="gallery-overlay" class="fixed inset-0 z-50 bg-black/90 hidden"> <button class="close-overlay absolute top-10 right-10 z-60 p-3 rounded-full bg-white/10 backdrop-blur-sm hover:bg-white/20 transition"> <i data-feather="x"></i> </button> <div class="overlay-content h-full w-full flex items-center justify-center"> <div class="draggable-gallery w-full max-w-6xl mx-auto"> <!-- Draggable gallery content will be populated by JS --> </div> </div> </div> <!-- Theme Toggle --> <button id="theme-toggle" class="fixed bottom-6 right-6 z-40 p-4 rounded-full bg-white/10 backdrop-blur-sm hover:bg-white/20 transition"> <i data-feather="moon" class="dark:hidden"></i> <i data-feather="sun" class="hidden dark:block"></i> </button> <script src="components/navbar.js"></script> <script src="script.js"></script> <script> feather.replace(); </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) */
