Loading
.
.
.
We use cookies to personalize ads and analyze traffic. By continuing to browse the site, you agree to our Privacy Policy. You can also choose to reject cookies.
The content on this website, including videos and code examples, is for educational purposes only. All demonstrations and designs are fictional and created to illustrate coding techniques. Any resemblance to existing websites or brands is purely coincidental.
The creators and administrators of this website do not claim ownership or affiliation with any existing websites or companies. Users are encouraged to use the information responsibly for learning purposes. Liability for any misuse of the content provided is not accepted.
Below is the html code for this video.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Happy Dussehra</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="book">
<div id="pages" class="pages">
<div class="page">
<h1>A depiction of the Ramayana</h1>
</div>
<div class="page"></div>
<div class="page">
<h1>Introducing</h1>
</div>
<div class="page">
<img src="introducing goddess sita.png" alt="Introducing Goddess Sita">
</div>
<div class="page">
<h4>Goddess Sita</h4>
</div>
<div class="page">
<h4>Lord Rama</h4>
</div>
<div class="page">
<img src="introducing lord ram.webp" alt="Introducing Lord Rama">
</div>
<div class="page">
<img src="introducing lord hanuman.webp" alt="Introducing Lord Hanuman">
</div>
<div class="page">
<h4>Lord Hanuman</h4>
</div>
<div class="page">
<h4>Ravana</h4>
</div>
<div class="page">
<img src="introducing ravan.webp" alt="Introducing Ravan">
</div>
<div class="page"></div>
<div class="page">
<h1>Now Story Begins...</h1>
</div>
<div class="page">
<img src="king janaka talking to lord ram.webp" alt="King Janaka Talking to Lord Rama">
</div>
<div class="page">
<h4>
Lord Rama got married to Goddess Sita. King Janaka talks to Lord Rama wishing happy married life.
</h4>
</div>
<div class="page">
<h4>King Janaka hugging Goddess Sita after marriage.</h4>
</div>
<div class="page">
<img src="king janaka hugging goddess sita after marriage.png" alt="King Janaka hugging Goddess Sita">
</div>
<div class="page"></div>
<div class="page">
<h1>After some days of marriage...</h1>
</div>
<div class="page">
<img src="king dashratha saying lord ram to leave for wan.webp" alt="King Dashratha saying Lord Rama">
</div>
<div class="page">
<h4>King Dashratha asked Lord Rama to leave for 14 years long exile.</h4>
</div>
<div class="page">
<h4>King Dashratha's final hug to Lord Rama before leving for exile.</h4>
</div>
<div class="page">
<img src="king dashratha final hug with lord ram.webp" alt="King Dashratha Final Hug">
</div>
<div class="page">
<img src="lord ram goddesses sita and lakshmana leaving.webp" alt="Lord Rama leaves for exile">
</div>
<div class="page">
<h4>Then Lord Rama leaves for the forest along with Goddess Sita and his brother Lakshmana.</h4>
</div>
<div class="page"></div>
<div class="page">
<h1>Now exile begins...</h1>
</div>
<div class="page">
<img src="goddess sita praying to lord shiva.webp" alt="Goddess Sita praying">
</div>
<div class="page">
<h4>Goddess Sita worships Lord Shiva.</h4>
</div>
<div class="page">
<h4>Lord Rama and Lakshmana wait for food.</h4>
</div>
<div class="page">
<img src="lakshmana and lord ram waiting for food while sitting under a tree.webp"
alt="Lakshmana waits for food">
</div>
<div class="page">
<img src="goddess sita cooking food.png" alt="Goddess Sita cooking">
</div>
<div class="page">
<h4>In the meantime Goddess Sita is cooking food.</h4>
</div>
<div class="page"></div>
<div class="page">
<h1>After some days...</h1>
</div>
<div class="page">
<img src="goddess sita hugging deer.png" alt="Goddess Sita Hugging Deer">
</div>
<div class="page">
<h4>Goddess Sita wanted a golden deer. So she asked Lord Rama to bring that deer to her. Then Lord Rama
went to get the deer.</h4>
</div>
<div class="page">
<h4>
Goddess Sita unwillingly crossed the Lakshmana Rekha to give food to Ravana in disguise as a monk.
</h4>
</div>
<div class="page">
<img src="goddess sita giving fruits to monk.png" alt="Goddess Sita giving fruits">
</div>
<div class="page">
<img src="goddess sita kidnapped by ravan.webp" alt="Goddess Sita kidnapped">
</div>
<div class="page">
<h4>Ravana kidnaps the Goddess Sita as she crosses the Lakshmana Rekha.</h4>
</div>
<div class="page">
<h4>After being kidnapped by Ravana, Goddess Sita was crying remembering Lord Rama.</h4>
</div>
<div class="page">
<img src="goddess sita crying.png" alt="Goddess Sita crying">
</div>
<div class="page">
<img src="lord hanuman praying.webp" alt="Lord Hanuman praying">
</div>
<div class="page">
<h4>Unknowingly Lord Hanuman was chanting Lord Rama's name.</h4>
</div>
<div class="page">
<h4>After knowing the whole situation from Lord Rama and lakshmana. Lord Hanuman flew over the ocean to
find where the Goddess Sita is kept in Lanka.</h4>
</div>
<div class="page">
<img src="lord hanuman flying.webp" alt="Lord Hanuman flying">
</div>
<div class="page">
<img src="lord hanuman greets goddess sita.webp" alt="Lord Hanuman Greets">
</div>
<div class="page">
<h4>After finding Goddess Sita, Lord Hanuman greets her. He asures her that Lord Rama is on his way to
rescue her.</h4>
</div>
<div class="page">
<h4>Soldiers of Lanka put the fire on the tail of Lord Hanuman as Ravana ordered. But Lord Hanuman uses
his burning tail to burn the whole of Lanka.</h4>
</div>
<div class="page">
<img src="lord hanuman with burning tail.webp" alt="Lord Hanuman with burning tail">
</div>
<div class="page">
<img src="lakshmana and lord ram standing at beach.webp" alt="Lakshmana and Lord Rama at beach">
</div>
<div class="page">
<h4>Lord Rama and Lakshmana pray to the ocean to provide them space to go to Lanka to bring back Goddess
Sita.</h4>
</div>
<div class="page">
<h4>Goddess Sita waits for Lord Rama to come to rescue her.</h4>
</div>
<div class="page">
<img src="goddess sita waiting.png" alt="Goddess Sita waiting">
</div>
<div class="page">
<img src="lord rama preparing for fight.webp" alt="Lord Rama preparing">
</div>
<div class="page">
<h4>Lord Rama, along with brother Lakshmana and others, was preparing for the battle with Ravana to
rescue Goddess Sita.</h4>
</div>
<div class="page">
<h4>
On the battlefield, Lakshmana got severely injured. Lord Hanuman went to bring herbs(Sanjeevani).
</h4>
</div>
<div class="page">
<img src="lord hanuman carrying mountain.webp" alt="Lord Hanuman carrying mountain">
</div>
<div class="page">
<img src="lord rama shooting three arrows.webp" alt="Lord Rama shooting">
</div>
<div class="page">
<h4>Lord Rama was unstoppable on the battlefield. He killed Meghanath(Son of Ravana) and brother
Kumbhakaran.</h4>
</div>
<div class="page">
<h4>It was time for the arrival of Ravana in front of Lord Rama on the battlefield.</h4>
</div>
<div class="page">
<img src="ravana holding sword.webp" alt="Ravana holding sword">
</div>
<div class="page">
<img src="lord ram attacking ravan.webp" alt="Lord Rama attacking Ravana">
</div>
<div class="page">
<h4>There was a fierce battle between Lord Rama and Ravana.</h4>
</div>
<div class="page">
<h4>In the end, Lord Rama killed the Ravana.</h4>
</div>
<div class="page">
<img src="ravana died in war.webp" alt="Ravana died">
</div>
<div class="page">
<h4>And this day is celebrated as the victory of Lord Rama and reunion with Goddess Sita. This day is
for the truth to triumph over evil.</h4>
</div>
<div class="page">
<h4>On the auspicious occasion of Dussehra, burn all ego, hatred and anger within us, along with the
effigy of Ravana! Lord Rama, grant you strength and courage to walk the path of virtue and
righteousness.</h4>
</div>
<div class="page"></div>
</div>
</div>
<script src="index.js"></script>
</body>
</html>Below is the css code for this video.
style.css
@font-face {
font-family: "samrakan";
src: url("SAMAN___.ttf");
}
@font-face {
font-family: "Calligraffitti";
src: url("Calligraffitti-Regular.ttf");
}
*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
height: 100vh;
width: 100%;
background: radial-gradient(#fe0944, #feae96);
font-family: "samrakan";
justify-content: center;
align-items: center;
line-height: 1.5em;
padding: 2em 0;
}
.book {
perspective: 250vw;
transition: opacity 0.5s 0.25s;
}
.book .pages {
position: relative;
height: 44vw;
width: 60vw;
border-radius: 4px;
transform-style: preserve-3d;
backface-visibility: hidden;
}
.page {
height: 44vw;
width: 30vw;
background-color: #111111;
background: left top no-repeat;
background-size: contain;
margin-bottom: 0.5em;
float: left;
}
.book .page {
position: absolute;
top: 0;
height: 44vw;
width: 30vw;
background: #f6fba2;
font-family: "samrakan";
float: none;
clear: none;
transform-origin: 0 0;
transform-style: preserve-3d;
backface-visibility: hidden;
cursor: pointer;
user-select: none;
transition: all 0.25s;
}
.book .page:hover {
font-family: "Calligraffitti";
}
.book .page::before {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: transparent;
transition: background 0.75s;
z-index: 2;
}
.book .page:nth-child(odd) {
right: 0;
background-image: linear-gradient(to right, #00000026 0%, transparent 10%);
border-radius: 0 4px 4px 0;
transform: rotateY(0deg);
pointer-events: all;
}
.book .page:nth-child(odd):hover {
transform: rotateY(-15deg);
}
.book .page:nth-child(odd):hover::before, .book .page.flipped:nth-child(even):hover::before {
background: #0000000d;
}
.book .page:nth-child(odd)::before, .book .page.flipped:nth-child(even)::before {
background: transparent;
}
.book .page:nth-child(even) {
left: 0;
background-image: linear-gradient(to left, #00000026 0%, transparent 10%);
border-radius: 4px 0 0 4px;
transform: rotateY(180deg);
transform-origin: 100% 0;
border-color: #000000;
pointer-events: none;
}
.book .page:nth-child(even)::before, .book .page.flipped:nth-child(odd)::before {
background: #00000040;
}
.page:nth-child(even) {
clear: both;
}
.page:nth-child(odd) {
background-position: right top;
}
.book .page.flipped:nth-child(odd) {
transform: rotateY(-180deg);
pointer-events: none;
}
.book .page.flipped:nth-child(even) {
transform: rotateY(0deg);
pointer-events: all;
}
.book .page.flipped:nth-child(even):hover {
transform: rotateY(15deg);
}
h1, h4 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 85%;
color: #000000;
text-align: center;
letter-spacing: 2.5px;
transition: all 0.25s;
}
h1 {
font-size: 4vw;
line-height: 6vw;
color: #b92e34;
}
h4 {
font-size: 2.5vw;
line-height: 3.5vw;
}
img {
position: absolute;
top: 50%;
transform: translateY(-50%);
height: auto;
width: 100%;
}Below is the javascript code for this video.
index.js
var pages = document.getElementsByClassName("page");
for (let i = 0; i < pages.length; i++) {
var page = pages[i];
page.style.zIndex = (i % 2 === 0) && pages.length - i;
}
document.addEventListener("DOMContentLoaded", function () {
for (let j = 0; j < pages.length; j++) {
pages[j].pageNum = j + 1;
pages[j].onclick = function () {
if (this.pageNum % 2 === 0) {
this.classList.remove("flipped");
this.previousElementSibling.classList.remove("flipped");
} else {
this.classList.add("flipped");
this.nextElementSibling.classList.add("flipped");
}
}
}
});Thanks for visiting