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 http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Happy Navratri</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav class="nav">
<h1>Happy Navratri to All</h1>
</nav>
<div class="loading">
<h3 class="loading-text">
May Goddess Durga empowers you with the light of knowledge and truth.
</h3>
<img src="Maa Durga.png" alt="Maa Durga" class="loading-img">
</div>
<div class="carousel">
<div class="carousel-inner">
<div class="slide active">
<div class="content">
Shailputri, is the daughter of the Mountain King Himavat, and is a manifestation and form of the
Hindu mother goddess Mahadevi, representing herself as the pure form of goddess Parvati. She is the
first Navadurga venerated during the first day of Navratri, and is a reincarnation of Goddess Sati.
</div>
<div class="img-container">
<img src="Day 1 Maa Shailputri.png" alt="Maa Shailputri" id="img-slide1">
</div>
</div>
<div class="slide">
<div class="content">
Brahmacharini means a devoted female student who lives in an Ashrama with her Guru along with other
students. She is the second aspect of the Navdurga forms of Mahadevi. The goddess is worshipped on
the second day of Navratri. The goddess Brahmacharini wears white clothes, holds a japa mala in her
right hand and Kamandala, a water utensil in her left hand.
</div>
<div class="img-container">
<img src="Day 2 Maa Brahmacharini.png" alt="Maa Brahmacharini" id="img-slide2">
</div>
</div>
<div class="slide">
<div class="content">
In Hinduism, Chandraghanta is the third Navadurga aspect of goddess Mahadevi. Her name means "one
who has a half-moon shaped like a bell". Her third eye is always opened and she is always ready for
war against demons. She is also known as Chandrakhanda, Chandika or Rannchandi. Her worship takes
place on the third day of Navaratri.
</div>
<div class="img-container">
<img src="Day 3 Maa Chandraghanta.png" alt="Maa Chandraghanta" id="img-slide3">
</div>
</div>
<div class="slide">
<div class="content">
Kushmanda is a Hindu goddess, credited with creating the world with her divine smile. Her name
signals her main role: Ku means "a little", Ushma means "warmth" or "energy" and Anda means "cosmic
egg". Kushmanda is worshipped on fourth day of the festival of Navratri and she is believed to
improve health and bestow wealth and strength.
</div>
<div class="img-container">
<img src="Day 4 Maa Kushmanda.png" alt="Maa Kushmanda" id="img-slide4">
</div>
</div>
<div class="slide">
<div class="content">
Skandmata is the fifth among the Navadurga forms of Mahadev. Her name comes from Skanda, an
alternate name for the war god Kartikeya, and Mata, meaning mother. As one of the Navadurga, the
worship of Skandmata takes place on the fifth day of Navaratri. Her abode is in Vishuddha chakra.
</div>
<div class="img-container">
<img src="Day 5 Skandmata.png" alt="Skandmata" id="img-slide5">
</div>
</div>
<div class="slide">
<div class="content">
Katyayani is the sixth aspect of the Navadurga forms of Mahadevi. She is seen as the slayer of the
tyrannical demon Mahishasura. She is also the sixth form amongst Navadurga. She may be depicted with
four, ten, or eighteen hands.
</div>
<div class="img-container">
<img src="Day 6 Maa Katyayani.png" alt="Maa Katyayani" id="img-slide6">
</div>
</div>
<div class="slide">
<div class="content">
Kalaratri is the seventh of the nine Navadurga forms of the mother goddess Mahadevi. She is first
referenced in Devi Mahatmya. Kalaratri is one of the fearsome forms of the Mother Goddess. Kalaratri
is traditionally worshipped during the nine nights of Navratri celebrations. The seventh day of
Navaratri pooja.
</div>
<div class="img-container">
<img src="Day 7 Maa Kaalratri.png" alt="Maa Kaalratri" id="img-slide7">
</div>
</div>
<div class="slide">
<div class="content">
Mahagauri is the eighth form among the Navadurga aspects of the Hindu mother goddess Mahadevi. She
is worshipped on the eighth day of Navaratri. According to Hinduism, Mahagauri has the power to
fulfill all the desires of her devotees. The one who worships the goddess, gets relief from all the
sufferings in life.
</div>
<div class="img-container">
<img src="Day 8 Maa Mahagauri.png" alt="Maa Mahagauri" id="img-slide8">
</div>
</div>
<div class="slide">
<div class="content">
Siddhidhatri is the ninth form among the Navadurga aspects of Hindu mother goddess Mahadevi. The
meaning of her name is as follows: Siddhi means supernatural power or meditative ability, and Dhatri
means giver or awarder. She is worshipped on the ninth day of Navaratri. She fulfills all the divine
aspirations.
</div>
<div class="img-container">
<img src="Day 9 Maa Siddhidatri.png" alt="Maa Siddhidatri" id="img-slide9">
</div>
</div>
</div>
<nav class="carousel-nav">
<div class="active"></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</nav>
</div>
<script src="https://code.jquery.com/jquery-3.6.1.min.js"
integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
<script src="index.js"></script>
</body>
</html>Below is the css code for this video.
style.css
@import url('https://fonts.googleapis.com/css2?family=Arima+Madurai:wght@900&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
height: 100vh;
width: 100%;
font-family: 'Arima Madurai', cursive;
}
.nav {
position: fixed;
top: 5%;
left: 5%;
transform: translate(-5%, -5%);
color: #000000;
z-index: 9;
transition: all 2s ease-in-out;
}
.nav h1 {
font-size: 48px;
letter-spacing: 2.5px;
transition: all 2s ease-in-out;
}
.loading {
position: absolute;
height: 100vh;
width: 100%;
background-color: #fd0600;
color: #000000;
text-align: center;
animation: loadingBgAnim 6s infinite;
}
@keyframes loadingBgAnim {
0%, 100% {
background-color: #fd0600;
}
5.55%, 94.45% {
background-color: #ed3a3a;
}
11.1%, 88.9% {
background-color: #4169e1;
}
16.65%, 83.35% {
background-color: #ffe26d;
}
22.2%, 77.8% {
background-color: #69973e;
}
27.75%, 72.25% {
background-color: #808080;
}
33.3%, 66.7% {
background-color: #ffa500;
}
38.85%, 61.15% {
background-color: #ffffff;
}
44.4%, 55.6% {
background-color: #ffc0cb;
}
49.95%, 50.05% {
background-color: #87ceeb;
}
}
.loading-text {
position: absolute;
top: 80%;
transform: translateY(-80%);
width: 100%;
font-size: 32px;
}
.loading-img {
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -40%);
cursor: none;
}
.carousel {
position: relative;
height: 100vh;
width: 100%;
display: none;
background-color: #fd0600;
background-image: linear-gradient(135deg, #fd0600, #ed3a3a, #4169e1, #ffe26d, #69973e, #808080, #ffa500, #ffffff, #ffc0cb, #87ceeb);
background-size: 400%;
overflow: hidden;
animation: sliderBgAnim 2s linear infinite;
}
@keyframes sliderBgAnim {
0%, 100% {
background-position: 0% 100%;
}
25%, 75% {
background-position: 50% 100%;
}
50% {
background-position: 100% 100%;
}
}
.carousel-inner {
position: absolute;
left: 0;
top: 0;
height: 100%;
transform: translateZ(0);
transition-timing-function: cubic-bezier(0.25, 1.5, 0.75, 1);
transition-duration: 1s;
transition-delay: 0.75s;
}
.slide {
position: absolute;
top: 0;
height: 100%;
width: 100%;
display: flex;
background-color: #000000;
transform: translateZ(0) scale(0.75, 0.75);
transition-timing-function: cubic-bezier(0.25, 0.5, 0.25, 1.25);
transition-duration: 0.5s;
}
.slide.active {
transform: scale(1, 1);
transition-delay: 2s;
}
.img-container img {
height: 75%;
width: 75%;
margin: auto;
object-fit: scale-down;
opacity: 0;
transition: all 2s ease-in-out;
transition-delay: 1.5s;
}
.content {
width: 40%;
margin: auto 0 auto 2.5%;
font-size: 18px;
line-height: 36px;
transition: all 2s ease-in-out;
transition-delay: 1s;
opacity: 0;
animation: showContentAnim 0.5s forwards 1s;
}
@keyframes showContentAnim {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.img-container {
width: 60%;
display: flex;
}
.slide:nth-child(1) {
background-color: #ed3a3a;
}
.slide:nth-child(2) {
background-color: #4169e1;
}
.slide:nth-child(3) {
background-color: #ffe26d;
}
.slide:nth-child(4) {
background-color: #69973e;
}
.slide:nth-child(5) {
background-color: #808080;
}
.slide:nth-child(6) {
background-color: #ffa500;
}
.slide:nth-child(7) {
background-color: #ffffff;
}
.slide:nth-child(8) {
background-color: #ffc0cb;
}
.slide:nth-child(9) {
background-color: #87ceeb;
}
.carousel-nav {
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
padding: 20px;
text-align: center;
}
.carousel-nav div {
width: 10px;
height: 10px;
display: inline-block;
background-color: #000000;
border: 1px solid #ffffff;
border-radius: 50%;
margin: 0 10px;
z-index: 2;
cursor: pointer;
opacity: 0.75;
transition-duration: 0.25s;
}
.carousel-nav div:hover {
opacity: 1;
}
.carousel-nav div.active {
background-color: #ffffff;
border: 1px dashed #000000;
transform: scale(1.5);
opacity: 1;
}Below is the javascript code for this video.
index.js
$(document).ready(function () {
var slide = $(".slide");
var viewWidth = $(window).width();
var carouselInner = $(".carousel-inner");
var totalSlides = carouselInner.children().length;
var navTitle = $(".nav h1");
var content = $(".content");
carouselInner.width(viewWidth + totalSlides);
$(window).resize(function () { viewWidth = $(window).width(); });
function setWidth() {
slide.each(function () {
$(this).width(viewWidth);
$(this).css("left", viewWidth * $(this).index());
});
}
setWidth();
$(window).resize(function () { setWidth(); });
setTimeout(function () {
navTitle.html("Maa Shailputri").css("color", "#000000");
$(".carousel").fadeIn(1000);
$("#img-slide1").css({ "opacity": 1, "cursor": "none" });
}, 6000);
function setActive(element) {
var index = element.index();
switch (index) {
case 0:
navTitle.html("Maa Shailputri").css("color", "#000000");
content.css("color", "#000000");
break;
case 1:
navTitle.html("Maa Brahmacharini").css("color", "#ffffff");
content.css("color", "#ffffff");
break;
case 2:
navTitle.html("Maa Chandraghanta").css("color", "#000000");
content.css("color", "#000000");
break;
case 3:
navTitle.html("Maa Kushmanda").css("color", "#ffffff");
content.css("color", "#ffffff");
break;
case 4:
navTitle.html("Skand Mata").css("color", "#000000");
content.css("color", "#000000");
break;
case 5:
navTitle.html("Maa Katyayani").css("color", "#ffffff");
content.css("color", "#ffffff");
case 6:
navTitle.html("Maa Kalaratri").css("color", "#000000");
content.css("color", "#000000");
break;
case 7:
navTitle.html("Maa Mahagauri").css("color", "#ffffff");
content.css("color", "#ffffff");
break;
case 8:
navTitle.html("Maa Siddhidhatri").css("color", "#000000");
content.css("color", "#000000");
break;
default:
break;
}
$(".carousel-nav .active").removeClass("active");
element.addClass("active");
carouselInner.css("transform", "translateX(-" + index * viewWidth + "px) translateZ(0)");
$(".carousel-inner .active").removeClass("active");
$(".carousel-inner .slide").eq(index).addClass("active");
for (let i = 1; i < 10; i++)
i == index + 1 ? $("#img-slide" + i).css({ "opacity": 1, "cursor": "none" }) : $("#img-slide" + i).css("opacity", 0);
}
$(".carousel-nav div").on("click", function () { setActive($(this)); });
});Thanks for visiting