Skip to content
Related Articles

Related Articles

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

Improve Article
Save Article
  • Difficulty Level : Basic
  • Last Updated : 14 Aug, 2022
Improve Article
Save Article

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

National flag of India is a Horizontal Rectangular Tricolor Flag that contains Saffron at the top, White and Ashoka Chakra with 24 Spikes wheel 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 div’s. 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:

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:


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!