Open In App

Happy Independence Day 2022 | National Flag Design using HTML and CSS

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

Independence Day is celebrated annually on the 15th of August as a National Holiday. On 15th August 2022, we will celebrate the 75th Anniversary of Indian Independence.

The national flag of India is a Horizontal Rectangular Tricolor Flag that contains a Saffron at the top, White and Ashoka Chakra with 24 Spikes wheels in a Navi Blue color in the center and Green color at the bottom. Ashoka Chakra is positioned at the center of the White Background Color. The Ratio of Length and Breadth of the National Flag (Tiranga) is 3 : 2.

Here, we will design the Indian Flag using HTML and CSS. To create the Indian Flag, we will create the main div container, and inside the main div, we will use three sub divs. The first div displays the Saffron background color, the second div displays the white background color and this div contains another div that will display the Ashok Chakra. The third div displays the green background color.

Example: In this example, we are using the above-explained approach.

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 Independence Day 2022</title>
    <style>
        @import url(
'https://fonts.googleapis.com/css2?family=Oleo+Script+Swash+Caps&display=swap');
 
        * {
            margin: 0;
            padding: 0;
        }
 
        .text-container {
            width: 600px;
            font-size: 32px;
            font-family: 'Oleo Script Swash Caps', cursive;
            font-style: italic;
            margin: auto;
            text-align: center;
        }
 
        .line-1 {
            color: blue;
        }
 
        .line-2 {
            color: #FF9933;
        }
 
        .main-container {
            width: 600px;
            height: 400px;
            border: 1px solid #e1e1e1;
            margin: auto;
        }
 
        .saffron {
            height: 133px;
            width: 100%;
            background-color: #FF9933;
        }
 
        .white {
            height: 134px;
            width: 100%;
            background-color: white;
        }
 
        .ashok-chakra {
            position: relative;
            width: 124px;
            height: 124px;
            border-radius: 50%;
            border: 5px solid blue;
            margin: auto;
        }
 
        .ashok-chakra .spikes,
        .ashok-chakra .spikes .spike {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
 
        .ashok-chakra .spikes .spike {
            transform: rotate(calc(15deg * var(--i)));
        }
 
        .ashok-chakra .spikes .spike::before {
            content: "";
            position: absolute;
            width: 10px;
            height: 10px;
            background: blue;
            border-radius: 50%;
            top: -5px;
            left: calc(50% - 8px);
        }
 
        .ashok-chakra .spikes .spike::after {
            content: "";
            position: absolute;
            width: 6px;
            height: 50%;
            background: blue;
            top: -8px;
            left: calc(50% - 5px);
            transform-origin: bottom;
            transform: rotate(7.5deg);
            clip-path: polygon(50% 5%, 100% 50%, 50% 95%, 0% 50%);
        }
 
        .ashok-chakra::after {
            content: "";
            position: absolute;
            width: 16px;
            height: 16px;
            background: blue;
            top: calc(50% - 8px);
            left: calc(50% - 8px);
            border-radius: 50%;
        }
 
        .green {
            height: 133px;
            width: 100%;
            background-color: green;
        }
 
        .text-content {
            text-align: center;
            font-size: 62px;
            font-family: 'Oleo Script Swash Caps', cursive;
            font-style: italic;
        }
 
        .text1 {
            color: #FF9933;
        }
 
        .text2 {
            color: green;
            line-height: 15px;
        }
 
        .year {
            color: blue;
        }
    </style>
</head>
 
<body>
    <div class="text-container">
        <div class="line-1">Azadi Ka Amrit Mahotsav</div>
        <div class="line-2">
            75<sup>th</sup> Anniversary of
            Indian Independence
        </div>
    </div>
 
    <div class="main-container">
        <div class="saffron"></div>
        <div class="white">
            <div class="ashok-chakra">
                <div class="spikes">
                    <div class="spike" style="--i: 1"></div>
                    <div class="spike" style="--i: 2"></div>
                    <div class="spike" style="--i: 3"></div>
                    <div class="spike" style="--i: 4"></div>
                    <div class="spike" style="--i: 5"></div>
                    <div class="spike" style="--i: 6"></div>
                    <div class="spike" style="--i: 7"></div>
                    <div class="spike" style="--i: 8"></div>
                    <div class="spike" style="--i: 9"></div>
                    <div class="spike" style="--i: 10"></div>
                    <div class="spike" style="--i: 11"></div>
                    <div class="spike" style="--i: 12"></div>
                    <div class="spike" style="--i: 13"></div>
                    <div class="spike" style="--i: 14"></div>
                    <div class="spike" style="--i: 15"></div>
                    <div class="spike" style="--i: 16"></div>
                    <div class="spike" style="--i: 17"></div>
                    <div class="spike" style="--i: 18"></div>
                    <div class="spike" style="--i: 19"></div>
                    <div class="spike" style="--i: 20"></div>
                    <div class="spike" style="--i: 21"></div>
                    <div class="spike" style="--i: 22"></div>
                    <div class="spike" style="--i: 23"></div>
                    <div class="spike" style="--i: 24"></div>
                </div>
            </div>
        </div>
        <div class="green"></div>
    </div>
 
    <div class="text-content">
        <div class="text1">Happy</div>
        <div class="text2">Independence Day</div>
        <div class="year">2022</div>
    </div>
</body>
</html>


Output:

 

Reference: You can read the following reference links to read the HTML tags, Attributes, and CSS properties:



Last Updated : 18 May, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads