Create an Indian flag using HTML and CSS

Hello people today we are back with another interesting and special blog on a special occasion, i.e independence day.Today on the occasion of Independence day we are going to learn how to create a Indian flag using HTML and CSS.

Sounds good right? India is tagged as the mother of so many inventions like algebra, number zero, shampoo, chess, value of pi and diamond mining. India has nearly 90,000 types of animals including over 350 mammals, 1,200 bird species and 50,000 plant species. All these features made India a Unique Country in the World.

Now lets get into the code and see how to create Indian flag in HTML.

Indian Flag Using HTML & CSS

Follow the steps one by one and use it in your code.

STEP 1

First lets create a basic structure of flag with a stick and flag box.

 

<div id="wrapper">
	<h2>HAPPY INDEPENDENCE DAY</h2>
	<div id="flagStick"></div>
	<div id="indianFlag"></div>
</div>
#wrapper{
	padding-left: 38%;
    padding-top: 5%;
}
div#flagStick {
    background: #000;
    height: 500px;
    width: 7px;
    border-radius: 10px;
}
div#indianFlag{
    background: #f9f9f9;
    position: relative;
    top: -498px;
    left: 7px;
    height: 179px;
    width: 33%;
    box-shadow: 10px 9px 7px -1px #f2eeee;
}
STEP 2

Now let’s create the flag with our trio colors orange, white & green.

  • Add the HTML code inside indianFlag div
<div id="indianFlag">
	<div id="orange"></div>
	<div id="white"></div>
	<div id="green"></div>
</div>
        div#orange {
		    height: 60px;
		    background: orange;
		    z-index: 999;
		}
		div#white {
		    height: 60px;
		    background: #fff;
		    z-index: 999;
		}
		div#green {
		    height: 60px;
		    background: green;
		    z-index: 999;
		}
STEP 3

Our Flag structure is created,Now let us create chakra for our flag inside the white color.

  • Add the HTML code inside white div
<div id="white">
	<div id="wheel">
		<span class="wheelLine"></span>
		<span class="wheelLine"></span>
		<span class="wheelLine"></span>
		<span class="wheelLine"></span>
		<span class="wheelLine"></span>
		<span class="wheelLine"></span>
		<span class="wheelLine"></span>
		<span class="wheelLine"></span>
		<span class="wheelLine"></span>
		<span class="wheelLine"></span>
		<span class="wheelLine"></span>
		<span class="wheelLine"></span>
		<span class="wheelLine"></span>
		<span class="wheelLine"></span>
		<span class="wheelLine"></span>
		<span class="wheelLine"></span>
		<span class="wheelLine"></span>
		<span class="wheelLine"></span>
		<span class="wheelLine"></span>
	</div>
</div>
div#wheel {
    background: #fff;
    height: 55px;
    width: 55px;
    border-radius: 50%;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    border: 2px solid darkblue;
}
span.wheelLine {
    background: darkblue;
    height: 100%;
    width: 2px;
    position: absolute;
    left: 46%;
}
span.wheelLine:nth-child(1) {transform: rotate(10deg);}
span.wheelLine:nth-child(2) {transform: rotate(20deg);}
span.wheelLine:nth-child(3) {transform: rotate(30deg);}
span.wheelLine:nth-child(4) {transform: rotate(40deg);}
span.wheelLine:nth-child(5) {transform: rotate(50deg);}
span.wheelLine:nth-child(6) {transform: rotate(60deg);}
span.wheelLine:nth-child(7) {transform: rotate(70deg);}
span.wheelLine:nth-child(8) {transform: rotate(80deg);}
span.wheelLine:nth-child(9) {transform: rotate(90deg);}
span.wheelLine:nth-child(10) {transform: rotate(100deg);}
span.wheelLine:nth-child(11) {transform: rotate(110deg);}
span.wheelLine:nth-child(12) {transform: rotate(120deg);}
span.wheelLine:nth-child(13) {transform: rotate(130deg);}
span.wheelLine:nth-child(14) {transform: rotate(140deg);}
span.wheelLine:nth-child(15) {transform: rotate(150deg);}
span.wheelLine:nth-child(16) {transform: rotate(160deg);}
span.wheelLine:nth-child(17) {transform: rotate(170deg);}
span.wheelLine:nth-child(18) {transform: rotate(180deg);}
span.wheelLine:nth-child(19) {transform: rotate(190deg);}
STEP 4

Now our Flag is generated, Now lets create simple human structure saying salute to Indian flag.

<div id="humans">
	<span class="human">
		<span class="leg-left"></span>
		<span class="leg-right"></span>
		<span class="hands"></span>
		<span class="selute"></span>
		<span class="cap"></span>
	</span>
	<span class="human1">
		<span class="leg-left"></span>
		<span class="leg-right"></span>
		<span class="hands"></span>
		<span class="selute"></span>
	</span>
	<span class="human2">
		<span class="leg-left"></span>
		<span class="leg-right"></span>
		<span class="hands"></span>
		<span class="selute"></span>
	</span>
	<span class="human3">
		<span class="leg-left"></span>
		<span class="leg-right"></span>
		<span class="hands"></span>
		<span class="selute"></span>
	</span>
	
</div>
span.human,span.human1,span.human2,span.human3 {
    width: 40px;
    height: 40px;
    background: #000;
    position: absolute;
    top: 74%;
    left: 41%;
    border-radius: 50px;
}
.human span.leg-left,.human1 span.leg-left,.human2 span.leg-left,.human3 span.leg-left {
    height: 45px;
    width: 2px;
    background: black;
    position: absolute;
    top: 28px;
    left: 12px;
    transform: rotate(27deg);
}
.human span.leg-right,.human1 span.leg-right,.human2 span.leg-right,.human3 span.leg-right {
    height: 43px;
    width: 2px;
    background: black;
    position: absolute;
    top: 28px;
    left: 28px;
    transform: rotate(-33deg);
}
.human span.hands,.human1 span.hands,.human2 span.hands,.human3 span.hands {
    height: 2px;
    width: 60px;
    background: black;
    position: absolute;
    top: 38px;
    left: -9px;
}
span.human1 {
    left: 46%;
}
span.human2 {
    left: 51%;
}
span.human3 {
    left: 56%;
}
.human .selute,.human1 .selute,.human2 .selute,.human3 .selute{
    background: #000;
    width: 18px;
    height: 2px;
    position: absolute;
    top: 30px;
    left: 36px;
    transform: rotate(
55deg
);
}
STEP 5

Now lets give a final touch to our Indian flag with flowers falling from flag.

  • Add the img tag under inside Indian flag tag

 

<img class="flowers" src="C:/Users/abc/Videos/flowers.gif">
<img class="flowers1" src="C:/Users/abc/Videos/flowers.gif">
.flowers{
	position: absolute;
    top: 60px;
}

This is our final Indian flag created Using HTML and CSS.

Complete HTML & CSS Code

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Indian Flag</title>
      <style type="text/css">
         div#flagStick {
         background: #000;
         height: 500px;
         width: 7px;
         border-radius: 10px;
         }
         div#indianFlag{
         background: #f9f9f9;
         position: relative;
         top: -498px;
         left: 7px;
         height: 179px;
         width: 33%;
         box-shadow: 10px 9px 7px -1px #f2eeee;
         }
         div#orange {
         height: 60px;
         background: orange;
         z-index: 999;
         }
         div#white {
         height: 60px;
         background: #fff;
         z-index: 999;
         }
         div#green {
         height: 60px;
         background: green;
         z-index: 999;
         }
         #wrapper{
         padding-left: 38%;
         padding-top: 5%;
         }
         div#wheel {
         background: #fff;
         height: 55px;
         width: 55px;
         border-radius: 50%;
         position: relative;
         margin-left: auto;
         margin-right: auto;
         border: 2px solid darkblue;
         }
         span.wheelLine {
         background: darkblue;
         height: 100%;
         width: 2px;
         position: absolute;
         left: 46%;
         }
         span.wheelLine:nth-child(1) {transform: rotate(10deg);}
         span.wheelLine:nth-child(2) {transform: rotate(20deg);}
         span.wheelLine:nth-child(3) {transform: rotate(30deg);}
         span.wheelLine:nth-child(4) {transform: rotate(40deg);}
         span.wheelLine:nth-child(5) {transform: rotate(50deg);}
         span.wheelLine:nth-child(6) {transform: rotate(60deg);}
         span.wheelLine:nth-child(7) {transform: rotate(70deg);}
         span.wheelLine:nth-child(8) {transform: rotate(80deg);}
         span.wheelLine:nth-child(9) {transform: rotate(90deg);}
         span.wheelLine:nth-child(10) {transform: rotate(100deg);}
         span.wheelLine:nth-child(11) {transform: rotate(110deg);}
         span.wheelLine:nth-child(12) {transform: rotate(120deg);}
         span.wheelLine:nth-child(13) {transform: rotate(130deg);}
         span.wheelLine:nth-child(14) {transform: rotate(140deg);}
         span.wheelLine:nth-child(15) {transform: rotate(150deg);}
         span.wheelLine:nth-child(16) {transform: rotate(160deg);}
         span.wheelLine:nth-child(17) {transform: rotate(170deg);}
         span.wheelLine:nth-child(18) {transform: rotate(180deg);}
         span.wheelLine:nth-child(19) {transform: rotate(190deg);}
         span.human,span.human1,span.human2,span.human3 {
         width: 40px;
         height: 40px;
         background: #000;
         position: absolute;
         top: 74%;
         left: 41%;
         border-radius: 50px;
         }
         .human span.leg-left,.human1 span.leg-left,.human2 span.leg-left,.human3 span.leg-left {
         height: 45px;
         width: 2px;
         background: black;
         position: absolute;
         top: 28px;
         left: 12px;
         transform: rotate(27deg);
         }
         .human span.leg-right,.human1 span.leg-right,.human2 span.leg-right,.human3 span.leg-right {
         height: 43px;
         width: 2px;
         background: black;
         position: absolute;
         top: 28px;
         left: 28px;
         transform: rotate(-33deg);
         }
         .human span.hands,.human1 span.hands,.human2 span.hands,.human3 span.hands {
         height: 2px;
         width: 60px;
         background: black;
         position: absolute;
         top: 38px;
         left: -9px;
         }
         span.human1 {
         left: 46%;
         }
         span.human2 {
         left: 51%;
         }
         span.human3 {
         left: 56%;
         }
         .human .selute,.human1 .selute,.human2 .selute,.human3 .selute{
         background: #000;
         width: 18px;
         height: 2px;
         position: absolute;
         top: 30px;
         left: 36px;
         transform: rotate(
         55deg
         );
         }
         .flowers{
         position: absolute;
         top: 60px;
         }
      </style>
   </head>
   <body>
      <div id="wrapper">
         <h2>HAPPY INDEPENDENCE DAY</h2>
         <div id="flagStick"></div>
         <div id="indianFlag">
            <div id="orange"></div>
            <div id="white">
               <div id="wheel">
                  <span class="wheelLine"></span>
                  <span class="wheelLine"></span>
                  <span class="wheelLine"></span>
                  <span class="wheelLine"></span>
                  <span class="wheelLine"></span>
                  <span class="wheelLine"></span>
                  <span class="wheelLine"></span>
                  <span class="wheelLine"></span>
                  <span class="wheelLine"></span>
                  <span class="wheelLine"></span>
                  <span class="wheelLine"></span>
                  <span class="wheelLine"></span>
                  <span class="wheelLine"></span>
                  <span class="wheelLine"></span>
                  <span class="wheelLine"></span>
                  <span class="wheelLine"></span>
                  <span class="wheelLine"></span>
                  <span class="wheelLine"></span>
                  <span class="wheelLine"></span>
               </div>
            </div>
            <div id="green"></div>
            <img class="flowers" src="C:/Users/abc/Videos/flowers.gif">
            <img class="flowers1" src="C:/Users/abc/Videos/flowers.gif">
         </div>
         <div id="humans">
            <span class="human">
            <span class="leg-left"></span>
            <span class="leg-right"></span>
            <span class="hands"></span>
            <span class="selute"></span>
            <span class="cap"></span>
            </span>
            <span class="human1">
            <span class="leg-left"></span>
            <span class="leg-right"></span>
            <span class="hands"></span>
            <span class="selute"></span>
            </span>
            <span class="human2">
            <span class="leg-left"></span>
            <span class="leg-right"></span>
            <span class="hands"></span>
            <span class="selute"></span>
            </span>
            <span class="human3">
            <span class="leg-left"></span>
            <span class="leg-right"></span>
            <span class="hands"></span>
            <span class="selute"></span>
            </span>
         </div>
      </div>
   </body>
</html>

Hope you like this article.Comment down your views and follow us on our social media platform for daily updates. If you face any issue just let me know through your comments or join us in our telegram group for instant response. 

Related articles:

For more updates:

Follow us on our Facebook page :
Facebook

Do Follow my Instagram page for more updates :
Instagram

Join Our Telegram group for more updates :

Telegram

Leave a Reply

Your email address will not be published. Required fields are marked *

The maximum upload file size: 2 MB. You can upload: image, document. Links to YouTube, Facebook, Twitter and other services inserted in the comment text will be automatically embedded.