Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Glass Effect Hero</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> | |
| .glass-nav { | |
| background: rgba(255, 255, 255, 0.15); | |
| backdrop-filter: blur(10px); | |
| -webkit-backdrop-filter: blur(10px); | |
| border: 1px solid rgba(255, 255, 255, 0.18); | |
| box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); | |
| } | |
| .hero-gradient { | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| } | |
| .glass-card { | |
| background: rgba(255, 255, 255, 0.1); | |
| backdrop-filter: blur(15px); | |
| -webkit-backdrop-filter: blur(15px); | |
| border-radius: 20px; | |
| border: 1px solid rgba(255, 255, 255, 0.18); | |
| box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); | |
| } | |
| .text-glow { | |
| text-shadow: 0 0 10px rgba(255, 255, 255, 0.8); | |
| } | |
| .btn-glow { | |
| box-shadow: 0 0 15px rgba(118, 75, 162, 0.7); | |
| } | |
| .btn-glow:hover { | |
| box-shadow: 0 0 25px rgba(118, 75, 162, 0.9); | |
| } | |
| /* Animation for hero content */ | |
| @keyframes fadeInUp { | |
| from { | |
| opacity: 0; | |
| transform: translateY(20px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| .animate-fadeInUp { | |
| animation: fadeInUp 0.8s ease-out forwards; | |
| } | |
| .delay-100 { | |
| animation-delay: 0.1s; | |
| } | |
| .delay-200 { | |
| animation-delay: 0.2s; | |
| } | |
| .delay-300 { | |
| animation-delay: 0.3s; | |
| } | |
| </style> | |
| </head> | |
| <body class="font-sans antialiased text-white"> | |
| <!-- Navigation --> | |
| <nav class="glass-nav fixed w-full z-50 py-4 px-6 md:px-12 transition-all duration-300"> | |
| <div class="max-w-7xl mx-auto flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <a href="#" class="text-2xl font-bold flex items-center"> | |
| <i class="fas fa-cube mr-2"></i> | |
| <span>GlassUI</span> | |
| </a> | |
| </div> | |
| <!-- Desktop Menu --> | |
| <div class="hidden md:flex space-x-8"> | |
| <a href="#" class="hover:text-purple-200 transition-colors">Home</a> | |
| <a href="#" class="hover:text-purple-200 transition-colors">Features</a> | |
| <a href="#" class="hover:text-purple-200 transition-colors">Pricing</a> | |
| <a href="#" class="hover:text-purple-200 transition-colors">About</a> | |
| <a href="#" class="hover:text-purple-200 transition-colors">Contact</a> | |
| </div> | |
| <!-- Mobile Menu Button --> | |
| <button id="mobile-menu-button" class="md:hidden focus:outline-none"> | |
| <i class="fas fa-bars text-xl"></i> | |
| </button> | |
| </div> | |
| <!-- Mobile Menu --> | |
| <div id="mobile-menu" class="md:hidden hidden mt-4 py-4 px-6 rounded-lg glass-nav"> | |
| <div class="flex flex-col space-y-4"> | |
| <a href="#" class="hover:text-purple-200 transition-colors">Home</a> | |
| <a href="#" class="hover:text-purple-200 transition-colors">Features</a> | |
| <a href="#" class="hover:text-purple-200 transition-colors">Pricing</a> | |
| <a href="#" class="hover:text-purple-200 transition-colors">About</a> | |
| <a href="#" class="hover:text-purple-200 transition-colors">Contact</a> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="hero-gradient min-h-screen flex items-center pt-20 pb-16 px-6 md:px-12"> | |
| <div class="max-w-7xl mx-auto grid md:grid-cols-2 gap-12 items-center"> | |
| <!-- Hero Content --> | |
| <div class="space-y-8"> | |
| <h1 class="text-4xl md:text-6xl font-bold leading-tight text-glow animate-fadeInUp"> | |
| Modern <span class="text-purple-200">Glass UI</span> Design | |
| </h1> | |
| <p class="text-lg md:text-xl text-purple-100 opacity-90 animate-fadeInUp delay-100"> | |
| Create stunning interfaces with our glass effect components. Perfect for modern web applications that need a sleek, futuristic look. | |
| </p> | |
| <div class="flex flex-wrap gap-4 animate-fadeInUp delay-200"> | |
| <button class="bg-white text-purple-700 px-6 py-3 rounded-full font-semibold hover:bg-purple-100 transition-colors btn-glow"> | |
| Get Started | |
| </button> | |
| <button class="border-2 border-white px-6 py-3 rounded-full font-semibold hover:bg-white hover:text-purple-700 transition-colors"> | |
| Learn More | |
| </button> | |
| </div> | |
| <div class="flex items-center space-x-6 animate-fadeInUp delay-300"> | |
| <div class="flex -space-x-2"> | |
| <img src="https://randomuser.me/api/portraits/women/12.jpg" class="w-10 h-10 rounded-full border-2 border-white" alt="User"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" class="w-10 h-10 rounded-full border-2 border-white" alt="User"> | |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" class="w-10 h-10 rounded-full border-2 border-white" alt="User"> | |
| </div> | |
| <div> | |
| <p class="text-sm text-purple-100">Join <span class="font-bold">10,000+</span> happy users</p> | |
| <div class="flex text-yellow-300 text-xs"> | |
| <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> | |
| <span class="text-purple-100 ml-1">(4.9/5.0)</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Hero Card --> | |
| <div class="glass-card p-6 md:p-8 animate-fadeInUp delay-100"> | |
| <div class="relative"> | |
| <div class="absolute -top-10 -left-10 w-20 h-20 bg-purple-400 rounded-full filter blur-xl opacity-30"></div> | |
| <div class="absolute -bottom-10 -right-10 w-24 h-24 bg-pink-400 rounded-full filter blur-xl opacity-30"></div> | |
| <div class="relative z-10"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h3 class="text-xl font-bold">Glass Dashboard</h3> | |
| <i class="fas fa-ellipsis-h text-gray-300"></i> | |
| </div> | |
| <div class="grid grid-cols-3 gap-4 mb-8"> | |
| <div class="bg-white bg-opacity-10 p-3 rounded-lg text-center"> | |
| <p class="text-sm text-purple-100">Visitors</p> | |
| <p class="text-2xl font-bold">1.2K</p> | |
| </div> | |
| <div class="bg-white bg-opacity-10 p-3 rounded-lg text-center"> | |
| <p class="text-sm text-purple-100">Revenue</p> | |
| <p class="text-2xl font-bold">$8.5K</p> | |
| </div> | |
| <div class="bg-white bg-opacity-10 p-3 rounded-lg text-center"> | |
| <p class="text-sm text-purple-100">Orders</p> | |
| <p class="text-2xl font-bold">324</p> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <div class="flex justify-between text-sm text-purple-100 mb-2"> | |
| <span>Weekly Target</span> | |
| <span>75%</span> | |
| </div> | |
| <div class="w-full bg-white bg-opacity-20 rounded-full h-2"> | |
| <div class="bg-white h-2 rounded-full" style="width: 75%"></div> | |
| </div> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <button class="bg-white text-purple-700 px-4 py-2 rounded-lg text-sm font-medium"> | |
| View Details | |
| </button> | |
| <div class="text-xs text-purple-100"> | |
| Updated 2 mins ago | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Floating elements --> | |
| <div class="absolute top-1/4 left-10 w-16 h-16 bg-white rounded-full filter blur-xl opacity-10"></div> | |
| <div class="absolute bottom-1/3 right-20 w-24 h-24 bg-purple-300 rounded-full filter blur-xl opacity-20"></div> | |
| </section> | |
| <script> | |
| // Mobile menu toggle | |
| const mobileMenuButton = document.getElementById('mobile-menu-button'); | |
| const mobileMenu = document.getElementById('mobile-menu'); | |
| mobileMenuButton.addEventListener('click', () => { | |
| mobileMenu.classList.toggle('hidden'); | |
| }); | |
| // Scroll effect for navbar | |
| window.addEventListener('scroll', () => { | |
| const nav = document.querySelector('nav'); | |
| if (window.scrollY > 10) { | |
| nav.classList.add('bg-opacity-80'); | |
| nav.classList.remove('bg-opacity-15'); | |
| } else { | |
| nav.classList.remove('bg-opacity-80'); | |
| nav.classList.add('bg-opacity-15'); | |
| } | |
| }); | |
| // Add animation classes on load | |
| document.addEventListener('DOMContentLoaded', () => { | |
| const elements = document.querySelectorAll('.animate-fadeInUp'); | |
| elements.forEach(el => { | |
| el.style.opacity = '0'; | |
| }); | |
| setTimeout(() => { | |
| elements.forEach(el => { | |
| el.style.opacity = '1'; | |
| }); | |
| }, 100); | |
| }); | |
| </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=EcosSystem/teste" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |