Select Page

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

Dharmendra Kumar
Published: August 14, 2022

<!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>

  

        * {

            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>

Source: www.geeksforgeeks.org