Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Square Hello Box</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <style> | |
| @keyframes pulse { | |
| 0%, 100% { transform: scale(1); } | |
| 50% { transform: scale(1.05); } | |
| } | |
| .hello-box { | |
| box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.2); | |
| transition: all 0.3s ease; | |
| } | |
| .hello-box:hover { | |
| box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.3); | |
| animation: pulse 2s infinite; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gradient-to-br from-blue-50 to-indigo-100 min-h-screen flex items-center justify-center p-4"> | |
| <div class="hello-box w-64 h-64 bg-gradient-to-tr from-yellow-300 to-amber-400 rounded-xl flex items-center justify-center overflow-hidden relative"> | |
| <div class="absolute inset-0 bg-[url('http://static.photos/yellow/640x360/42')] opacity-10"></div> | |
| <div class="relative z-10 flex flex-col items-center"> | |
| <h1 class="text-5xl font-bold text-white tracking-tight">HELLO</h1> | |
| <div class="mt-4 flex space-x-3"> | |
| <i data-feather="sun" class="text-white"></i> | |
| <i data-feather="heart" class="text-white"></i> | |
| <i data-feather="star" class="text-white"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| feather.replace(); | |
| // Add subtle rotation on hover | |
| document.querySelector('.hello-box').addEventListener('mousemove', (e) => { | |
| const box = e.currentTarget; | |
| const xAxis = (window.innerWidth / 2 - e.pageX) / 25; | |
| const yAxis = (window.innerHeight / 2 - e.pageY) / 25; | |
| box.style.transform = `rotateY(${xAxis}deg) rotateX(${yAxis}deg)`; | |
| }); | |
| document.querySelector('.hello-box').addEventListener('mouseleave', (e) => { | |
| e.currentTarget.style.transform = 'rotateY(0deg) rotateX(0deg)'; | |
| }); | |
| </script> | |
| </body> | |
| </html> | |