Wishing Happy Diwali Using HTML and CSS Code
Diwali, also known as “Deepvali”, is one of the most widely celebrated festivals in India. Diwali is a festival of lights that signifies prosperity and kindness for everyone. Diwali carries deep spiritual and historical significance. On this day, Lord Rama came back home after 14 years of exile with Goddess Sita and his brother Laxam. On this day, people celebrate this festival together with their family members. They wish each other well and distribute sweets in their neighborhood.
We, being people from technical backgrounds, have a different way of wishing people. We will create a unique web animation that is very appealing and a great way to wish someone “Happy Diwali.” . We will be creating a webpage that will use Html and Css Code For Happy Diwali Wish Animation.
Simple Portfolio webpage using HTML and CSS 2023 edition
In this project, we will be using the advanced frameworks of HTML and CSS for creating a Diwali wish animation. We will be explaining all these concepts step-by-step.
What is Pug?
Pug is a template engine of HTML that is also known as Jade.It is a HTML template that contain most of the basic tags of HTML that are used to create the structure of the webpage. It is not a separate language but a more concise and human-friendly way to write HTML. Pug use automatic indentation and syntax that is similar to HTML tags which is supported by most of the browsers. It compiles the Pug code into standard HTML that web browsers can understand.
100+ JavaScript Projects For Beginners With Source Code
HTML Structure:
Using the block-level container, we will create a main container for our Diwali wisher using the <div tag with class container> for the main container of the website. Then, inside the main container, using the div tag with class ‘box’,’m2”d2′ multiple classes, we will create a section for the Diwali cracker animation.
Using another div tag with class containerr, we will similarly create a section for creating dotted cracker animation by adding a child tag inside another par div tag.
Similarly, in this method, we will create 4–5 similar types of elements for creating an animating background that looks more visually appealing and is more user-interactive.
Then, at the end, using the <h1> tag, we will add the main heading for the Diwali wishing animation.
Happy Diwali HTML Code:-
<div class="container p1">
<div class="box m2 d2">
<div class="cracker solid a1"> </div>
<div class="cracker dotted a2"> </div>
</div>
</div>
<div class="container">
<div class="box m1">
<div class="cracker a3"></div>
<div class="cracker dotted a3"> </div>
</div>
</div>
<div class="container">
<div class="box m1 d1">
<div class="cracker a2"></div>
<div class="cracker dotted a2"></div>
</div>
</div>
<div class="container">
<div class="box m3 d4">
<div class="cracker solid a2"></div>
<div class="cracker dotted a3"></div>
</div>
</div>
<div class="container p1">
<div class="box m2 d3">
<div class="cracker solid a1"></div>
<div class="cracker dotted a2"></div>
</div>
</div>
<div class="container p2">
<div class="box m1 d1">
<div class="cracker a1"></div>
<div class="cracker dotted a2"> </div>
</div>
</div>
<div class="container p2">
<div class="box m3 d2">
<div class="cracker dotted a4"></div>
<div class="cracker a2"></div>
</div>
</div>
<div class="container p3">
<div class="box m1 d2">
<div class="cracker a2"></div>
<div class="cracker a3"></div>
</div>
</div>
<div class="container p3">
<div class="box m2 d4">
<div class="cracker solid a2"></div>
<div class="cracker a1"></div>
</div>
<div class="box m1 d3">
<div class="cracker dotted a3"></div>
<div class="cracker dotted a1"> </div>
</div>
</div>
<div class="land">
<div class="block p1"></div>
<div class="block p2"></div>
<div class="block p1"></div>
<div class="block p3"></div>
<div class="block p4"></div>
<div class="block p0"></div>
<div class="block p1"></div>
<div class="block p4"></div>
<div class="block p1"></div>
<div class="block p2"></div>
<div class="block p0"></div>
<div class="block p2"></div>
<div class="block p5"></div>
<div class="block p3"></div>
</div>
<h1 class="title">Happy Diwali</h1>Html Code Only Output:
What is SCSS?
The advanced version of CSS, known as Sassy CSS, offers a variety of animations and responsive design. Repetitive code can be minimized by using nesting to represent the hierarchy of HTML elements. You can create and reuse values with variables, which helps to maintain consistency throughout your styles. Mixins allow the creation of reusable CSS blocks, which simplify the handling of complex or repeating styles. While SCSS coding greatly enhances code readability, reusability, and maintainability in web development projects, it must be converted into standard CSS for web browsers for easy understanding.
Styling -CSS:
Styling Container:
Using the HTML tag selector, we will set the background size to “cover,” and using the background property, we will set the background of the page to “linear gradient combination of black and charcoal gray, and the background property is set to no repeat so that multiple backgrounds may not be added to the webpage.
Create A Todo List App in HTML CSS & JavaScript
Now using the class selector (.container), we will set the width of the container to 100 pixels, and using the float property, we will float the content to the left (which is the default) property for every element, and using the padding property, we will give some spacing of 1 rem.
Happy Diwali Css Code:-
html {
background-size: cover;
background: linear-gradient(#000, #333);
background-repeat: no-repeat;
min-height: 100%;
}
.container {
width: 100px;
float: left;
padding: 1rem;
}
Styling Box:
Using the class selector (.box), we will add styling to the box for the header elements of the webpage. We set the width and height to 100 pixels, giving it a circular shape with a border radius of 50%. The box is positioned relatively and has an animation called “move-up” that plays for 2 seconds, starting after a 10-second delay.
Weather App Using HTML, CSS And JavaScript (Source Code)
It’s centered horizontally with a margin of 0. Additionally, there’s a pseudo-element created with ::after, appearing as a thin horizontal line at the bottom of the box. This line is animated to fade out over 1 second after a 1-second delay.
.box {
width: 100px;
height: 100px;
border-radius: 50%;
position: relative;
animation: move-up 2s forwards 10s;
margin: 0 auto;
}
.box:after {
width: 1px;
content: "";
height: 5px;
position: absolute;
bottom: 0;
display: block;
left: 50%;
animation: fadeout 1s forwards;
animation-delay: 1s;
}
.box.m3 {
animation: move-up-3 2s forwards;
}
.box.m3 {
animation: move-up-2 2s forwards;
}Styling Child Elements:
Elements with the classes “cracker.solid,” “cracker.dotted,” and “cracker,” along with various sub-classes like “a1,” “d1,” “a2,” “d2,” and so on. These classes and animations appear to be related to an animation sequence for diwali animation.
The “cracker.solid” class sets a solid border with specific colors and dimensions. The “cracker.dotted” class defines a dotted border with different colors and a larger thickness. The base “cracker” class is applied to elements with absolute positioning, a dashed border, a circular shape (using border-radius), and an animation called “burst” that lasts for 6 seconds with a 2-second delay. The opacity starts at 0 and gradually increases, creating a bursting effect.
The various sub-classes like “a1,” “d1,” “a2,” and so on, adjust the animation duration and delay for specific elements. Additionally, there are classes “m1,” “m2,” and “m3” that adjust animation delays in milliseconds.
The keyframes animations, “move-up,” “move-up-2,” “move-up-3,” “fadeout,” and “burst,” control the movement and transformation of the “cracker” elements. They define changes in properties like transform, background, and opacity over specific percentages of the animation duration.
.cracker.solid {
border: solid rgba(255, 225, 200, 1) 1px;
}
.cracker.dotted {
border: dotted rgba(255, 205, 100, 1) 10px;
}
.cracker {
position: absolute;
border: dashed rgba(255, 255, 250, 1) 2px;
width: 100px;
height: 100px;
opacity: 0;
border-radius: 50%;
animation: burst 6s 1 2s;
}
.a1 {
animation-duration: 4s;
}
.d1 {
animation-delay: 5s;
}
.a2 {
animation-duration: 2s;
}
.d2 {
animation-delay: 8s;
}
.a3 {
animation-duration: 3s;
}
.d3 {
animation-delay: 12s;
}
.a4 {
animation-duration: 1s;
}
.d4 {
animation-delay: 15s;
}
.m1 {
animation-delay: 100ms;
}
.m2 {
animation-delay: 300ms;
}
.m3 {
animation-delay: 600ms;
}
@keyframes move-up {
0% {
transform: translateY(500px);
}
50% {
transform: translateY(500px);
}
100% {
transform: translateY(100px);
}
}
@keyframes move-up-2 {
0% {
transform: translateY(500px);
}
50% {
transform: translateY(500px);
}
100% {
transform: translateY(150px);
}
}
@keyframes move-up-3 {
0% {
transform: translateY(500px);
}
50% {
transform: translateY(500px);
}
100% {
transform: translateY(220px);
}
}
@keyframes fadeout {
0% {
background: rgba(255, 250, 255, .8);
}
50% {
background: rgba(251, 250, 255, .8);
height: 100px;
}
100% {
background: rgba(0, 0, 0, 0);
height: 120px;
}
}
@keyframes burst {
0% {
transform: scale(0);
opacity: 1;
}
50% {
transform: scale(0);
opacity: 1;
}
100% {
transform: scale(2);
opacity: 0;
}
}
Adding containers and Styling :
In the class selector (.land), we will create a container with a fixed position, and using the bottom property, we will set the space from the bottom to “zero,” and using the width property, we will set the width of the container to “100%.” Using the display property “flex,” we will create responsiveness to the container.
Also, using the (.block) class select, we will set the background of the block to “black,” and using the width and height properties, we will set the width and height to 30px and 40px, respectively. Also, using the float property, we will align the position of the block to the left side of the webpage.
ADVERTISEMENT
ADVERTISEMENT
Using the after (::) property, we will add a dotted border of yellow color to the block, and using the class selector from (.p0-p5), we will add some padding of.5rem, increasing for each element.
ADVERTISEMENT
Then, using the class selector (.title), we will style the main heading of our webpage. We will set the padding and margin of the heading to zero from the default browser padding. Also, using the top property, we will leave 20% of space with an animation of moving up with a duration of 2 seconds.
ADVERTISEMENT
.land {
position: fixed;
bottom: 0;
width: 100%;
display: flex;
align-items: flex-end;
}
.block {
background: black;
width: 30px;
height: 40px;
float: left;
bottom: 0;
}
.block:after {
display: block;
border: yellow dotted 10px;
content: "";
height: 50px;
width: 8px;
}
.block:before {
display: block;
border: gold dotted 10px;
content: "";
height: 90px;
width: 10px;
}
.p0 {
padding: 0.5rem;
}
.p1 {
padding: 1rem;
}
.p2 {
padding: 2rem;
}
.p3 {
padding: 3rem;
}
.p4 {
padding: 4rem 1rem;
}
.p5 {
padding: 5rem 2rem;
}
.title {
position: absolute;
left: 0;
right: 0;
top: 20%;
color: #ffe45e;
text-align: center;
font-size: 10rem;
font-style: italic;
animation: move-up 2s forwards;
text-shadow: #ffe45e 0 0 30px, #e5c654 1px 0 10px;
}
Styling Output:
ADVERTISEMENT
Wohooh, we just finished with our wishing Diwali web animation. Now you can share this web animation and wish your tech gigs, your families, and your friends. This will be a unique way to wish them. Also, this shows how skilled you are practicing on this type of small yet unique project, which helps in gaining skill and confidence.
We personally use this type of method for wishing our family and friends well. We wish you a very happy Diwali. May God fill all your wishes and give you a great future ahead.
let’s take look at the animation of our webpage for better understanding.
Video Output:
Happy Diwali Animation Using HTML and CSS Code:
Follow: CodewithRandom
Author: Arun
