<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Guru Nanak Jayanti Animation</title>
<style>
body {
background: linear-gradient(135deg, #ffeb3b, #f57f17);
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
overflow: hidden;
margin: 0;
font-family: 'Poppins', sans-serif;
position: relative;
}
.container {
text-align: center;
color: #fff;
animation: fadeIn 2s ease-in-out;
}
.container img {
width: 200px;
height: auto;
margin-bottom: 10px;
animation: glow 2s infinite alternate;
}
h1 {
font-size: 2rem;
text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
}
.teachings {
margin-top: 20px;
display: flex;
}
.teaching-box {
width: 160px;
height: 100px;
margin: 10px auto;
padding: 15px;
background: #333;
border-radius: 12px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
opacity: 0;
transform: translateY(50px);
animation: slideUp 1.5s forwards;
}
.teaching-box:nth-child(1) {
background: #ff7043; /* Orange */
animation-delay: 0.5s;
}
.teaching-box:nth-child(2) {
background: #42a5f5; /* Blue */
animation-delay: 1s;
}
.teaching-box:nth-child(3) {
background: #66bb6a; /* Green */
animation-delay: 1.5s;
}
.teaching-heading {
font-size: 1.4rem;
font-weight: bold;
margin-bottom: 5px;
}
.teaching-subtext {
font-size: 1rem;
}
.flowers {
position: absolute;
top: -50px;
width: 100%;
height: 100%;
pointer-events: none;
display: flex;
flex-wrap: wrap;
}
.flower {
position: absolute;
font-size: 30px;
animation: fall linear infinite;
}
@keyframes fall {
from { transform: translateY(-100vh) rotate(0deg); }
to { transform: translateY(100vh) rotate(360deg); }
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes glow {
from { filter: drop-shadow(0 0 10px #fff); }
to { filter: drop-shadow(0 0 30px #ffeb3b); }
}
@keyframes slideUp {
to { transform: translateY(0); opacity: 1; }
}
/* Flower Button */
.flower-button {
position: fixed;
right: 20px;
bottom: 20px;
font-size: 30px;
background: none;
border: none;
cursor: pointer;
animation: glow 1.5s infinite alternate;
}
</style>
</head>
<body>
<div class="container">
<!-- Add your Guru Nanak Dev Ji PNG image source here -->
<img src="./gurunanakdevji.png" alt="Guru Nanak Dev Ji" />
<h1>Guru Nanak Jayanti ki Hardik Shubhkamnayein</h1>
<div class="teachings">
<div class="teaching-box">
<div class="teaching-heading">🌼 Naam Japo</div>
<div class="teaching-subtext">ਨਾਮ ਜਪੋ (Remember God's Name)</div>
</div>
<div class="teaching-box">
<div class="teaching-heading">🌼 Kirat Karo</div>
<div class="teaching-subtext">ਕਿਰਤ ਕਰੋ (Earn Honestly)</div>
</div>
<div class="teaching-box">
<div class="teaching-heading">🌼 Vand Chakko</div>
<div class="teaching-subtext">ਵੰਡ ਛਕੋ (Share with Others)</div>
</div>
</div>
</div>
<!-- Falling Flowers Animation -->
<div class="flowers"></div>
<!-- Flower Button -->
<button class="flower-button" onclick="startFlowerRain()">🌼</button>
<script>
// Adding initial random flowers to fall
const flowers = document.querySelector('.flowers');
function addFlower() {
const flower = document.createElement('div');
flower.className = 'flower';
flower.textContent = '🌼'; // Flower emoji
flower.style.left = Math.random() * 100 + '%';
flower.style.animationDuration = 3 + Math.random() * 3 + 's';
flower.style.fontSize = 20 + Math.random() * 10 + 'px'; // Vary flower size
flowers.appendChild(flower);
// Remove flower after it finishes falling
setTimeout(() => flower.remove(), 6000);
}
// Function to trigger more flowers on button click
function startFlowerRain() {
for (let i = 0; i < 50; i++) {
setTimeout(addFlower, i * 100);
}
}
// Initial batch of flowers
for (let i = 0; i < 10; i++) {
addFlower();
}
</script>
</body>
</html>
For further actions, you may consider blocking this person and/or reporting abuse
Top comments (0)