Indian flag using HTML & CSS | Code With Random

Indian flag using HTML | Code With Random

Indian flag using HTML & CSS | Code With Random





Hello, guys welcome🎉 to Code With Random blog, in this blog post we create our Indian🇮🇳 flag with HTML & CSS with ❤.

Firstly we show output that we create in this blog post that indian🇮🇳 flag so let's start with Html.

indian falg using CSS Html
Pure HTML & CSS



Simple HTML

 <div id="flag">  
     <div class="stripe" id="saffron"></div>  
     <div class="stripe" id="white">  
       <div id="outer-blue-ring"></div>  
       <div id="spoke_set">  
         <div id="ss1" class="sc"></div>  
         <div id="ss2" class="sc"></div>  
         <div id="ss3" class="sc"></div>  
         <div id="ss4" class="sc"></div>  
         <div id="ss5" class="sc"></div>  
         <div id="ss6" class="sc"></div>  
         <div id="ss7" class="sc"></div>  
         <div id="ss8" class="sc"></div>  
         <div id="ss9" class="sc"></div>  
         <div id="ss10" class="sc"></div>  
         <div id="ss11" class="sc"></div>  
         <div id="ss12" class="sc"></div>  
       </div>        
       <div id="dot_set">  
         <div id="ds1" class="dc"></div>  
         <div id="ds2" class="dc"></div>  
         <div id="ds3" class="dc"></div>  
         <div id="ds4" class="dc"></div>  
         <div id="ds5" class="dc"></div>  
         <div id="ds6" class="dc"></div>  
         <div id="ds7" class="dc"></div>  
         <div id="ds8" class="dc"></div>  
         <div id="ds9" class="dc"></div>  
         <div id="ds10" class="dc"></div>  
         <div id="ds11" class="dc"></div>  
         <div id="ds12" class="dc"></div>  
       </div>        
     </div>  
     <div class="stripe" id="green"></div>  
 </div>  

That's the Html section we use for making our indian🇮🇳 flag. Yeah, it looks like a very big part of Html but we create it with pure HTML and the help of CSS, so now move to our CSS file.


CSS

 #flag {  
   width:600px;  
   height:400px;  
   border:1px solid #ccc;  
 }  
 .stripe {   
   height: 134px;  
   width: 100%;   
   position:relative;  
 }  
 #saffron { background: #FF9933;}  
 #green  { background: #138808;}  
 #white  { background: #FFF;}  
 #outer-blue-ring {  
   width: 0px;  
   height: 0px;    
   border: 54px solid #008;  
   border-radius: 54px;  
   position:absolute;  
   top: 13px;  
   left: 246px;  
 }  
 #spoke_set {  
   border: 37px solid #fff;  
   border-radius: 47px;  
   position:absolute;    
   top: 20px;  
   left: 253px;  
   width: 20px;  
   height: 20px;  
   background:#008;  
 }  
 .sc {  
   border-top: 2px solid transparent;  
   border-bottom: 2px solid transparent;  
   border-right: 15px solid #008;  
   border-left: 15px solid #008;  
   width:8px;  
   height:0px;  
   position:absolute;  
   top: 47px;  
   left: 28px;  
   top: 9px;  
   left:-9px  
 }  
 .sc:before {  
   border-top: 2px solid transparent;  
   border-bottom: 2px solid transparent;  
   border-right: 27px solid #008;  
   border-left: 0px;  
   display:block;  
   width:0px;  
   height:0px;  
   content:"";  
   margin: -2px 0px 0px -41px;  
 }  
 .sc:after {  
   border-top: 2px solid transparent;  
   border-bottom: 2px solid transparent;  
   border-right: 0px;  
   border-left: 27px solid #008;  
   display:block;  
   width:0px;  
   height:0px;  
   content:"";  
   margin: -4px 0px 0px 22px;  
 }  
 #ss1:before {  
   border-right: 32px solid #008;  
   margin: -2px 0px 0px -47px;  
 }  
 #ss1:after {  
   border-left: 32px solid #008;  
 }  
 #ss1 {  
   transform:     rotate(0deg);  
   -ms-transform:   rotate(0deg);  
   -moz-transform:  rotate(0deg);  
   -webkit-transform: rotate(0deg);  
   -o-transform:   rotate(0deg);  
 }  
 #ss2 {  
   transform:     rotate(15deg);  
   -ms-transform:   rotate(15deg);  
   -moz-transform:  rotate(15deg);  
   -webkit-transform: rotate(15deg);  
   -o-transform:   rotate(15deg);  
 }  
 #ss3 {  
   transform:     rotate(30deg);  
   -ms-transform:   rotate(30deg);  
   -moz-transform:  rotate(30deg);  
   -webkit-transform: rotate(30deg);  
   -o-transform:   rotate(30deg);  
 }  
 #ss4 {  
   transform:     rotate(45deg);  
   -ms-transform:   rotate(45deg);  
   -moz-transform:  rotate(45deg);  
   -webkit-transform: rotate(45deg);  
   -o-transform:   rotate(45deg);  
 }  
 #ss5 {  
   transform:     rotate(60deg);  
   -ms-transform:   rotate(60deg);  
   -moz-transform:  rotate(60deg);  
   -webkit-transform: rotate(60deg);  
   -o-transform:   rotate(60deg);  
 }  
 #ss6 {  
   transform:     rotate(75deg);  
   -ms-transform:   rotate(75deg);  
   -moz-transform:  rotate(75deg);  
   -webkit-transform: rotate(75deg);  
   -o-transform:   rotate(75deg);  
 }  
 #ss7 {  
   transform:     rotate(90deg);  
   -ms-transform:   rotate(90deg);  
   -moz-transform:  rotate(90deg);  
   -webkit-transform: rotate(90deg);  
   -o-transform:   rotate(90deg);  
 }  
 #ss8 {  
   transform:     rotate(105deg);  
   -ms-transform:   rotate(105deg);  
   -moz-transform:  rotate(105deg);  
   -webkit-transform: rotate(105deg);  
   -o-transform:   rotate(105deg);  
 }  
 #ss9 {  
   transform:     rotate(120deg);  
   -ms-transform:   rotate(120deg);  
   -moz-transform:  rotate(120deg);  
   -webkit-transform: rotate(120deg);  
   -o-transform:   rotate(120deg);  
 }  
 #ss10{  
   transform:     rotate(135deg);  
   -ms-transform:   rotate(135deg);  
   -moz-transform:  rotate(135deg);  
   -webkit-transform: rotate(135deg);  
   -o-transform:   rotate(135deg);  
 }  
 #ss11{  
   transform:     rotate(150deg);  
   -ms-transform:   rotate(150deg);  
   -moz-transform:  rotate(150deg);  
   -webkit-transform: rotate(150deg);  
   -o-transform:   rotate(150deg);  
 }  
 #ss12{  
   transform:     rotate(165deg);  
   -ms-transform:   rotate(165deg);  
   -moz-transform:  rotate(165deg);  
   -webkit-transform: rotate(165deg);  
   -o-transform:   rotate(165deg);  
 }  
 #dot_set {  
   position: absolute;  
   top: 20px;  
   left: 253px;  
   width: 94px;  
   height: 94px;  
 }  
 .dc {  
   position: absolute;  
   top: 43px;  
   left: 0px;  
   width:94px;  
   height:8px;  
 }  
 .dc:before, .dc:after {  
   content:"";  
   display:block;  
   border: 3px solid #008;  
   border-radius: 3px;  
   width: 0px;  
   height: 0px;  
 }  
 .dc:before {  
 margin: 1px 0px 0px -3px;  
 }  
 .dc:after {  
 margin: -6px 0px 0px 92px;  
 }    
 #ds1 {  
   transform:     rotate(7deg);  
   -ms-transform:   rotate(7deg);  
   -moz-transform:  rotate(7deg);  
   -webkit-transform: rotate(7deg);  
   -o-transform:   rotate(7deg);  
 }  
 #ds2 {  
   transform:     rotate(22deg);  
   -ms-transform:   rotate(22deg);  
   -moz-transform:  rotate(22deg);  
   -webkit-transform: rotate(22deg);  
   -o-transform:   rotate(22deg);  
 }  
 #ds3 {    
   transform:     rotate(37deg);  
   -ms-transform:   rotate(37deg);  
   -moz-transform:  rotate(37deg);  
   -webkit-transform: rotate(37deg);  
   -o-transform:   rotate(37deg);  
 }  
 #ds4 {  
   transform:     rotate(52deg);  
   -ms-transform:   rotate(52deg);  
   -moz-transform:  rotate(52deg);  
   -webkit-transform: rotate(52deg);  
   -o-transform:   rotate(52deg);  
 }  
 #ds5 {  
   transform:     rotate(67deg);  
   -ms-transform:   rotate(67deg);  
   -moz-transform:  rotate(67deg);  
   -webkit-transform: rotate(67deg);  
   -o-transform:   rotate(67deg);  
 }  
 #ds6 {  
   transform:     rotate(82deg);  
   -ms-transform:   rotate(82deg);  
   -moz-transform:  rotate(82deg);  
   -webkit-transform: rotate(82deg);  
   -o-transform:   rotate(82deg);  
 }  
 #ds7 {  
   transform:     rotate(97deg);  
   -ms-transform:   rotate(97deg);  
   -moz-transform:  rotate(97deg);  
   -webkit-transform: rotate(97deg);  
   -o-transform:   rotate(97deg);  
 }  
 #ds8 {  
   transform:     rotate(112deg);  
   -ms-transform:   rotate(112deg);  
   -moz-transform:  rotate(112deg);  
   -webkit-transform: rotate(112deg);  
   -o-transform:   rotate(112deg);  
 }  
 #ds9 {    
   transform:     rotate(127deg);  
   -ms-transform:   rotate(127deg);  
   -moz-transform:  rotate(127deg);  
   -webkit-transform: rotate(127deg);  
   -o-transform:   rotate(127deg);  
 }  
 #ds10{  
   transform:     rotate(142deg);  
   -ms-transform:   rotate(142deg);  
   -moz-transform:  rotate(142deg);  
   -webkit-transform: rotate(142deg);  
   -o-transform:   rotate(142deg);  
 }  
 #ds11{  
   transform:     rotate(157deg);  
   -ms-transform:   rotate(157deg);  
   -moz-transform:  rotate(157deg);  
   -webkit-transform: rotate(157deg);  
   -o-transform:   rotate(157deg);  
 }  
 #ds12{  
   transform:     rotate(172deg);  
   -ms-transform:   rotate(172deg);  
   -moz-transform:  rotate(172deg);  
   -webkit-transform: rotate(172deg);  
   -o-transform:   rotate(172deg);  
 }  

Here is all the CSS code, yeah it's 273 lines of CSS code but in end, we do proud😌 work on independence day! Also, meet the man who creates this amazing India flag with HTML CSS.

Ananda B Ajith
Also here is codepen link of India flag with Html CSS
India flag with HTML CSS

Everyone's journey starts as Beginners so if you have any type of confusion drop a comment we are here to reply & provide the best information regarding your comment. Thank you for reading!


Written by - codewithrandoom/Anki


Post a Comment

Previous Post Next Post