<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shubh Ganesh Chaturthi Wishes</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?
family=Poppins:wght@400;600;700&family=Dancing+Script:wght@700&display=swap"
rel="stylesheet">
<style>
body {
font-family: 'Poppins', sans-serif;
background: linear-gradient(135deg, #fef5e7 0%, #ffeaa7 50%, #fab1a0
100%);
min-height: 100vh;
overflow-x: hidden;
}
.festive-text {
font-family: 'Dancing Script', cursive;
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}
.ganesh-image {
animation: float 6s ease-in-out infinite;
filter: drop-shadow(0 10px 20px rgba(107, 70, 193, 0.4));
}
@keyframes float {
0%, 100% {
transform: translateY(0px);
}
50% {
transform: translateY(-20px);
}
}
.decoration {
animation: rotate 20s linear infinite;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.lotus-petal {
animation: bloom 8s ease-in-out infinite;
}
@keyframes bloom {
0%, 100% {
transform: scale(1) rotate(0deg);
}
50% {
transform: scale(1.1) rotate(5deg);
}
}
</style>
</head>
<body class="min-h-screen flex items-center justify-center p-4">
<div class="relative w-full max-w-4xl mx-auto">
<!-- Background decorations -->
<div class="absolute top-0 left-1/4 w-32 h-32 decoration opacity-20">
<svg viewBox="0 0 100 100" class="w-full h-full">
<circle cx="50" cy="50" r="45" fill="none" stroke="#FF6B6B" stroke-
width="2" stroke-dasharray="5,5"/>
</svg>
</div>
<div class="absolute bottom-0 right-1/4 w-24 h-24 decoration opacity-20"
style="animation-duration: 15s; animation-direction: reverse;">
<svg viewBox="0 0 100 100" class="w-full h-full">
<polygon points="50,5 60,40 95,40 65,60 75,95 50,75 25,95 35,60
5,40 40,40" fill="none" stroke="#4834D4" stroke-width="2"/>
</svg>
</div>
<div class="relative bg-white/90 backdrop-blur-sm rounded-3xl p-8 md:p-12
shadow-2xl border-4 border-orange-200">
<!-- Main content -->
<div class="text-center">
<!-- Lotus decoration -->
<div class="flex justify-center mb-6">
<div class="lotus-petal w-16 h-16">
<svg viewBox="0 0 100 100" class="w-full h-full">
<path d="M50,20 C60,15 70,20 75,30 C80,40 75,50 65,55
C55,60 45,55 40,45 C35,35 40,25 50,20" fill="#FF5252" opacity="0.8"/>
<path d="M50,20 C40,15 30,20 25,30 C20,40 25,50 35,55
C45,60 55,55 60,45 C65,35 60,25 50,20" fill="#4834D4" opacity="0.8"/>
</svg>
</div>
</div>
<h1 class="text-4xl md:text-6xl lg:text-7xl font-bold text-orange-
600 festive-text mb-8 leading-tight">
SHUBH GANESH<br>CHATURTHI<br>ROSHANI
</h1>
<div class="my-8 ganesh-image">
<img
src="https://storage.googleapis.com/workspace-0f70711f-
8b4e-4d94-86f1-2a93ccde5887/image/9f14987e-a740-46c8-9830-c930c67fce13.png"
alt="Doodle style Lord Ganesha with elephant head, large
ears, trunk curled to the side, four arms holding lotus flower, axe, modak sweet,
and blessing gesture, surrounded by decorative patterns and auspicious symbols in
Indian tradition"
class="w-64 h-80 md:w-80 md:h-96 mx-auto rounded-2xl
object-cover border-4 border-gold-500 shadow-lg"
onerror="this.style.display='none';
document.getElementById('fallback-text').style.display='block'"
>
<div id="fallback-text" class="hidden text-center p-8 bg-
yellow-100 rounded-2xl border-2 border-orange-300">
<div class="text-6xl mb-4"></div>
<p class="text-xl font-semibold text-orange-700">Om Gam
Ganapataye Namaha</p>
<p class="text-gray-600 mt-2">Blessings of Lord Ganesha be
with you</p>
</div>
</div>
<div class="text-orange-800 text-lg md:text-xl mb-8 leading-
relaxed">
<p class="mb-4">May Lord Ganesha remove all obstacles from your
life</p>
<p class="text-sm text-gray-600">and bless you with wisdom,
prosperity, and happiness!</p>
</div>
<div class="flex justify-center space-x-4 mb-8">
<div class="w-3 h-3 bg-orange-500 rounded-full animate-
pulse"></div>
<div class="w-3 h-3 bg-red-500 rounded-full animate-pulse"
style="animation-delay: 0.2s"></div>
<div class="w-3 h-3 bg-purple-500 rounded-full animate-pulse"
style="animation-delay: 0.4s"></div>
<div class="w-3 h-3 bg-green-500 rounded-full animate-pulse"
style="animation-delay: 0.6s"></div>
</div>
<div class="text-sm text-gray-500 italic">
With warm wishes on this auspicious occasion
</div>
</div>
</div>
<!-- Floating decorative elements -->
<div class="absolute -top-4 -left-4 w-8 h-8 bg-yellow-400 rounded-full
opacity-60 animate-bounce"></div>
<div class="absolute -bottom-4 -right-4 w-8 h-8 bg-red-400 rounded-full
opacity-60 animate-bounce" style="animation-delay: 0.5s"></div>
</div>
<script>
// Add some interactive effects
document.addEventListener('DOMContentLoaded', function() {
const body = document.body;
const colors = ['#fef5e7', '#ffeaa7', '#fab1a0', '#a29bfe', '#74b9ff'];
let currentColor = 0;
// Create floating particles
for (let i = 0; i < 20; i++) {
const particle = document.createElement('div');
particle.className = 'absolute w-2 h-2 bg-orange-400 rounded-full
opacity-60';
particle.style.left = Math.random() * 100 + 'vw';
particle.style.top = Math.random() * 100 + 'vh';
particle.style.animation = `float ${6 + Math.random() * 4}s ease-
in-out infinite`;
particle.style.animationDelay = Math.random() * 2 + 's';
document.body.appendChild(particle);
}
// Gentle background color transition
setInterval(() => {
body.style.background = `linear-gradient(135deg, $
{colors[currentColor]} 0%, ${colors[(currentColor + 1) % colors.length]} 50%, $
{colors[(currentColor + 2) % colors.length]} 100%)`;
currentColor = (currentColor + 1) % colors.length;
}, 8000);
});
</script>
</body>
</html>
