Happy Diwali Project 2022 using CSS & HTML
First of all download this picture for your project .
👇
Second Step You Save it as index.html and copy paste this code in it.
<!-- Happy Diwali Project Using HTML -->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Happy Diwali</title>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Sofia"
/>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<h4>Happy Diwali <span class="dynamic-txts">2022</span></h4>
<div class="firework"></div>
</div>
</body>
</html>
Third step You Save it as style.css and copy paste this code in it.
/* Happy Diwali Project Using CSS Code */
body{
background-color: #301934;
margin: 0;
padding: 0;
overflow: hidden;
font-family: "Sofia", sans-serif;
font-size: 32px;
color: #DAA520;
}
.container{
position: absolute;
top: 20%;
left: 38%;
/* translate: translate(-50%, -50%);*/
width: 500px;
height: 500px;
background-color:#722F37;
border-radius: 50%;
box-shadow: 0 20px 100px rgba(0, 0, 0, .5);
}
.container::before{
content: "";
position: absolute;
width: 100%;
height: 100%;
border: 8px dotted #fff;
box-sizing: border-box;
border-radius: 50%;
transform: scale(1.1);
animation: rotate 20s linear infinite;
}
@keyframes rotate{
0%{
transform: scale(1.1) rotate(0deg);
}
100%{
transform: scale(1.1) rotate(-360deg);
}
}
h4{
margin: 180px 140px;
padding: 0;
line-height: 50px;
font-style: bold;
}
h4 span{
position: relative;
margin: 48px;
}
.firework{
/* background-color: #684a38;*/
border: 1px solid brown;
background-color: #64241d;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 240px;
height: 120px;
border-bottom-left-radius: 140px;
border-bottom-right-radius: 140px;
box-shadow: 0 0 25px rgba(0, 0, 0, .5);
}
.firework::before{
content: "";
position: absolute;
background: #ff4500;
width: 40px;
height: 80px;
top: -80px;
left: 100px;
border-top-right-radius: 50px;
border-bottom-left-radius: 50px;
transform-origin: bottom-right;
filter: blur(2px);
animation: animate 5s linear infinite;
}
@keyframes animate{
0%{
transform: rotate(30deg);
box-shadow: 0 0 30px #ff4500;
}
25%{
transform: rotate(20deg);
}
50%{
transform: rotate(15deg);
box-shadow: 0 0 100px #ff4500;
}
75%{
transform: rotate(30deg);
}
100%{
transform: rotate(20deg);
box-shadow: 0 0 30px #ff4500;
}
}
span.dynamic-txts::after{
content: "";
position: absolute;
height: 100%;
width: 100%;
left: 0;
background: #722F37;
border-left: 2px solid orange;
animation: typing 2s steps(24) infinite;
}
@keyframes typing {
100%{
left: 100%;
}
}
footer
{
display: flex;
justify-content: center;
align-items: center;
font-family: sans-serif;
background-color: #231427;
width: 100%;
font-size: 16px;
position: absolute;
bottom: 0;
height: 6vh;
}
@media screen and (min-width: 1301px) and (max-width: 1608px){
.container{
left: 32%;
}
}
@media screen and (min-width: 1001px) and (max-width: 1300px){
.container{
left: 26%;
}
}
@media screen and (min-width: 802px) and (max-width: 1000px){
.container{
left: 22%;
}
}
@media screen and (min-width: 801px)and (max-width: 901px){
.container{
left: 18%;
}
}
@media screen and (min-width: 754px) and (max-width: 800px){
.container{
left: 18%;
}
}
@media screen and (min-width: 701px) and (max-width: 753px){
.container{
left: 14%;
}
}
@media screen and (min-width: 601px) and (max-width: 700px){
.container{
left: 9%;
}
}
@media screen and (max-width: 600px){
body{
display: flex
}
.container{
transform: none;
top: 40%;
left: 0;
}
}
@media screen and (max-width: 600px){
.container{
left: 18%;
top: 30%;
width: 400px;
height: 400px;
}
h4{
margin: 90px 100px;
padding: 0;
line-height: 50px;
font-style: bold;
}
h4 span{
position: relative;
margin: 38px;
}
}
@media screen and (max-width: 510px){
.container{
left: 23%;
top: 30%;
width: 300px;
height: 300px;
}
h4{
margin: 40px 100px;
font-size: medium;
line-height: 30px;
}
h4 span{
margin: 22px;
}
.firework{
height: 80px;
width: 140px;
}
.firework::before{
left: 50px;
}
footer{
font-size: 12px;
}
}
@media screen and (max-width: 410px){
.container{
left: 14%;
}
}