Output
style.css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: “Gill Sans”, “Gill Sans MT”, Calibri, “Trebuchet MS”, sans-serif;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
width: 100vw;
overflow: hidden;
background-image: url(“assets/images/himalaya.jpg”);
background-size: cover;
}
.flipbook {
width: 1000px;
height: 600px;
}
.flipbook .hard {
background: #c0392b !important;
color: #fff;
font-weight: bold;
border: none;
font-size: 25px;
}
.flipbook .hard small {
font-style: italic;
font-weight: lighter;
opacity: 0.7;
font-size: 14px;
}
.flipbook .page {
border-radius: 10px;
background: skyblue;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 10px;
border: 1px solid rgba(0, 0, 0, 0.11);
}
.page img {
width: 80%;
object-fit: cover;
margin: 20px;
}
.flipbook .page small {
font-size: 20px;
margin-bottom: 10px;
padding: 10px;
}
.flower-container {
pointer-events: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
z-index: 1000;
}
.flower {
position: absolute;
top: -50px;
font-size: 24px;
animation: fall linear infinite;
opacity: 0.8;
}
@keyframes fall {
0% {
transform: translateY(-100px) rotate(0deg);
opacity: 0;
}
50% {
opacity: 1;
}
100% {
transform: translateY(100vh) rotate(360deg);
opacity: 0;
}
}
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Story:The Birth of Lord Ganesha</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="flower-container"></div>
<div class="flipbook">
<div class="hard">
<img src="assets/images/ganesha_birth.jpg" alt="ganesha_birth" />
The Birth Of The Lord Ganesha
<small
>By<a href="https://rsportfolio.com" style="color: #fff"
>Rsportfolio</a
></small
>
</div>
<div class="hard"></div>
<div class="page">
<small> "Gabpathi Bappa, Remover of Obstacles!" </small>
<small> Ganpati Bappa Moriya.... </small>
</div>
<div class="page">
<img src="/assets/images/ganesha_birth.jpg" alt="" />
<small
>🪔 Goddess Parvati makes a little boy from sandalwood paste. She
smiles and says, “You are my son, Ganesha!”</small
>
</div>
<div class="page">
<img src="/assets/images/ganesha_protect.jpg" alt="" />
<small
>🚪 Parvati tells Ganesha to stand at the door while she takes a bath.
Ganesha proudly says, “I will not let anyone in!” 🕉️ Lord Shiva comes
back and tries to enter. But Ganesha stops him: “You cannot go
inside!”</small
>
</div>
<div class="page">
<img src="/assets/images/4.png" alt="" />
<small
>💔 Shiva accidentally hurts Ganesha. Parvati is very sad and cries,
“My little son!”</small
>
</div>
<div class="page">
<img src="/assets/images/3.png" alt="" />
<small
>🐘 Shiva brings the head of a baby elephant and places it on Ganesha.
</small>
</div>
<div class="page">
<img src="/assets/images/beginning.png" alt="" />
<small
>✨ Ganesha opens his eyes, smiling brightly. From then, he becomes
Ganpati Bappa, the remover of obstacles and the god of wisdom.</small
>
</div>
<div class="hard">
<!-- <img src="/assets/images/dancing_ganesha.jpg" alt="" /> -->
</div>
<div class="hard">
<h1>Thank You</h1>
<small> By RS</small>
</div>
</div>
<script src="jquery.js"></script>
<script src="turn.js"></script>
<script>
$(".flipbook").turn();
</script>
<script>
function createFlower() {
const flower = document.createElement("div");
flower.classList.add("flower");
flower.innerText = "🌸";
flower.style.left = Math.random() * 100 + "vw";
flower.style.animationDuration = Math.random() * 3 + 2 + "s";
document.querySelector(".flower-container").appendChild(flower);
setTimeout(() => {
flower.remove();
}, 5000); // remove after 5s
}
setInterval(createFlower, 300); // every 300ms
</script>
</body>
</html>