Spaces:
Running
Running
File size: 2,255 Bytes
63d481f efc70c4 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 | <!DOCTYPE html>
<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>
|