ADVERTISEMENT

Happy Diwali HTML & CSS Code Wish | Happy Diwali Coding

Telegram Group Join Now

ADVERTISEMENT

Happy Diwali HTML & CSS Code Wish | Happy Diwali Coding

 
Happy Diwali HTML & CSS Code Wish | Diwali Animation CSS
Happy Diwali HTML & CSS Code Wish | Diwali Animation CSS

Welcome to The Codewithrandom blog. 1st of all Happy Diwali to everyone who reads this blog post, and thanks to you for being part of the codewithrandom blog. So let’s start our Diwali wishes but not in the text, we are HTML developers so We wish Happy Diwali in pure HTML and CSS Code With Diwali Animation.

ADVERTISEMENT

Code by N/A
Project Download Link Available Below
Language used HTML and CSS
External link / Dependencies No
Responsive No
Diwali Animation Table

ADVERTISEMENT

So first we start with our HTML Code structure For Diwali Wish.

Happy Diwali Html Code

<div class="container">
<div class="title">Happy Diwali from codewithrandom</div>
<ul class="fireworks">
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
</ul>
</div>

There is all the HTML Code for the Diwali Wish. Now, you can see output without CSS. then we write CSS Code for Diwali wish With Animation.

ADVERTISEMENT

100+ JavaScript Projects With Source Code ( Beginners to Advanced)

ADVERTISEMENT

Only HTML Code Output For Diwali Wish

 

 
Happy Diwali HTML & CSS Code Wish
Happy Diwali Html Code

 

Diwali Animation Css Code

 
@import url('https://fonts.googleapis.com/css?family=Sacramento');
body {
background-color: #212121;
font-family: 'Sacramento', cursive;
}
.container {
height: 200px;
width: 600px;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.container .title {
font-size: 5rem;
color: rgba(255, 255, 255, 0.5);
text-align: center;
text-shadow: 0px 2px 1px orange, 0px 0px 6px orangered, 0px 5px 10px rgba(0, 0, 0, 1);
}
.fireworks {
list-style-type: none;
padding: 0;
}
.fireworks li {
display: inline-block;
margin: 20px;
height: 50px;
width: 50px;
border-radius: 500px;
position: relative;
background-color: #8d6e63;
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);
}
.fireworks li::before {
content: "";
position: absolute;
height: 100%;
background-color: #212121;
width: 100%;
border-radius: 500px;
top: -40%;
left: -30%;
}
.fireworks li::after {
content: "";
position: absolute;
height: 100%;
background-color: #212121;
width: 100%;
border-radius: 500px;
top: -40%;
right: -30%;
}
.fireworks li span {
display: inline-block;
height: 20px;
width: 20px;
position: absolute;
left: 0;
right: 0;
margin: auto;
z-index: 1;
border-bottom-left-radius: 50px;
border-bottom-right-radius: 50px;
border-top-right-radius: 50px;
transform: rotate(45deg);
animation: fire 0.3s ease infinite;
}
.fireworks li:nth-child(1) span {
animation-delay: 0.5s;
}
.fireworks li:nth-child(2) span {
animation-delay: 1s;
}
.fireworks li:nth-child(3) span {
animation-delay: 1.5s;
}
.fireworks li:nth-child(4) span {
animation-delay: 2s;
}
.fireworks li:nth-child(5) span {
animation-delay: 2.5s;
}
.fireworks li:nth-child(6) span {
animation-delay: 3s;
}
@keyframes fire {
0%, 100% {
transform: rotate(55deg);
width: 20px;
background: linear-gradient(90deg, orange, orangered);
}
50% {
transform: rotate(35deg);
width: 18px;
background: linear-gradient(90deg, orangered, orange);
}
}

Now we have completed our CSS Code Section For Diwali Animation Wish. Here is our updated output With HTML and CSS Code.

ADVERTISEMENT

50+ Html ,Css & Javascript Projects With Source Code

Final output Happy Diwali HTML & CSS Code Wish

Happy Diwali pure css | Happy Diwali wish using css - codewithrandom
 
 

Hope you like the Happy Diwali wish Using HTML and CSS Code. You Can See the Output video and project screenshots Of Diwali’s wish. See our other blogs and gain knowledge in front-end development.

ADVERTISEMENT

Portfolio Website Using HTML ,CSS and Javascript Source Code

ADVERTISEMENT

Thank you

In this post, we learn how to create a Happy Diwali Wish using HTML and CSS. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

Written by – Code With Random/Anki

 

Which code editor do you use for this Diwali Animation coding?

I personally recommend using VS Code Studio, it’s straightforward and easy to use.

ADVERTISEMENT

is this project responsive or not?

No! this is Not a responsive project

ADVERTISEMENT

Do you use any external links to create this project?

No!

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT

Telegram Group Join Now

Share on:

Leave a Comment

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT