We’ll make the container’s title, add the title “Happy Diwali,” and add the diyas using the ul tag to the div tag with the class “container” that we’ll use to create the container. Using the span> tag, we will produce a list entry. We’ll designate distinct sections for the diyas.

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.

Portfolio Website using HTML and CSS (Source Code)

Only HTML Code Output For Diwali Wish

Step1: We’ll use the import link to add the Google Font “sacramento,” set the backdrop color to black, and change the font-family property to “sacramento” at the same time.

Restaurant Website Using HTML and CSS

We’ll assign the dimensions to 200 px and 600 px using the class selector “.container,” and the position will be fixed. We’ll set the padding and border to “Zero” using those two elements.

@import url('https://fonts.googleapis.com/css?family=Sacramento');
$mattBlack:#212121;
body {
    background-color: $mattBlack;
    font-family: 'Sacramento', cursive;
}

.container {
    height: 200px;
    width: 600px;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    .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);
    }
}

Step2:Now, using the list-type property, we will style the pyrotechnics. We’ll choose “none” as the list category. The margin and padding are set to 20 px and 50 px, respectively, and we’ll add 500 px using the border-radius attribute.

We will configure the display as an inline block using the li element selector. We’ll build the Puesdo elements before and after and set the width to “100%.” We’ll change the background to $mattblack using the background property.

.fireworks {
    list-style-type: none;
    padding: 0;
    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);
        &::before {
            content: "";
            position: absolute;
            height: 100%;
            background-color: $mattBlack;
            width: 100%;
            border-radius: 500px;
            top: -40%;
            left: -30%;
        }
        &::after {
            content: "";
            position: absolute;
            height: 100%;
            background-color: $mattBlack;
            width: 100%;
            border-radius: 500px;
            top: -40%;
            right: -30%;
        }
        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;
        }
    }
    @for $i from 1 through 6 {
        li:nth-child(#{$i}) {
            span {
                animation-delay:#{$i*0.5}s;
            }
        }
    }
}

@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);
    }
}

50+ HTML, CSS & JavaScript Projects With Source Code

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

Final output Happy Diwali Using HTML and CSS Code Wish

Video Output: