Indian Flag || Indian Flag using HTML CSS

In this video,I explained how to create Indian Flag using HTML CSS. Feel free to comment. For more, please subscribe and press the BELL icon. Please visit my Angular Playlist. Please visit my YouTube Videos. The code is as follows -

HTML File -
<html>
  <head>
     <title> Indian Flag </title>
     <link rel="stylesheet" href="flag.css">
  </head>

  <body>
     <div class="flag">
    <div class="stripe stripe1"> </div>
  <div class="stripe stripe2">
     <div class="chakra">
    <div class="spoke spoke1"> </div>
<div class="spoke spoke2"> </div>
<div class="spoke spoke3"> </div>
<div class="spoke spoke4"> </div>
<div class="spoke spoke5"> </div>
<div class="spoke spoke6"> </div>
<div class="spoke spoke7"> </div>
<div class="spoke spoke8"> </div>
<div class="spoke spoke9"> </div>
<div class="spoke spoke10"> </div>
<div class="spoke spoke11"> </div>
<div class="spoke spoke12"> </div>
<div class="spoke spoke13"> </div>
<div class="spoke spoke14"> </div>
<div class="spoke spoke15"> </div>
<div class="spoke spoke16"> </div>
<div class="spoke spoke17"> </div>
<div class="spoke spoke18"> </div>
<div class="spoke spoke19"> </div>
<div class="spoke spoke20"> </div>
<div class="spoke spoke21"> </div>
<div class="spoke spoke22"> </div>
<div class="spoke spoke23"> </div>
<div class="spoke spoke24"> </div>
  </div>
</div>

<div class="stripe stripe3"> </div>
  </div>
  </body>
</html>

CSS File - 
body {
background-color: lightgray;
}

.flag {
font-size: 10px;
height: 60em;
width: 90em;
border: 1px solid black;
margin: 0 auto;
}

.stripe {
height: 33.33%;
box-sizing: border-box;
}

.stripe1 {
background-color: orange;
}

.stripe2 {
background-color: white;
padding: 1em;
}

.stripe3 {
background-color: green;
}

.chakra {
height: 16em;
width: 16em;
position: relative;
border: 1em solid navy;
border-radius: 50%;
margin: 0 auto;
}

.chakra:before {
content: "";
position: absolute;
height: 3em;
width: 3em;
top: 6.5em;
left: 6.5em;
background-color: navy;
border-radius: 50%;
}

.spoke {
width: 1em;
top: 7.75em;
left: 8em;
position: absolute;
border-top: 0.25em solid transparent;
border-bottom: 0.25em solid transparent;
border-right: 2em solid navy;
transform-origin: 0 0.25em;
}

.spoke:before {
content: "";
position: absolute;
top: -0.25em;
left: 3em;
border-top: 0.25em solid transparent;
border-bottom: 0.25em solid transparent;
border-left: 5em solid navy;
}
.spoke:after {
content: "";
position: absolute;
top: 0.66em;
left: 7.6em;
width: 0.8em;
height: 0.8em;
background-color: navy;
border-radius: 50%;
}

.spoke1 {
transform: rotate(0deg);
}

.spoke2 {
transform: rotate(15deg);
}

.spoke3 {
transform: rotate(30deg);
}

.spoke4 {
transform: rotate(45deg);
}

.spoke5 {
transform: rotate(60deg);
}

.spoke6 {
transform: rotate(75deg);
}

.spoke7 {
transform: rotate(90deg);
}

.spoke8 {
transform: rotate(105deg);
}

.spoke9 {
transform: rotate(120deg);
}

.spoke10 {
transform: rotate(135deg);
}

.spoke11 {
transform: rotate(150deg);
}

.spoke12 {
transform: rotate(165deg);
}

.spoke13 {
transform: rotate(180deg);
}

.spoke14 {
transform: rotate(195deg);
}

.spoke15 {
transform: rotate(210deg);
}

.spoke16 {
transform: rotate(225deg);
}

.spoke17 {
transform: rotate(240deg);
}

.spoke18 {
transform: rotate(255deg);
}

.spoke19 {
transform: rotate(270deg);
}

.spoke20 {
transform: rotate(285deg);
}

.spoke21 {
transform: rotate(300deg);
}

.spoke22 {
transform: rotate(315deg);
}

.spoke23 {
transform: rotate(330deg);
}

.spoke24 {
transform: rotate(345deg);
}


Comments

Post a Comment

Popular posts from this blog

Alert Dialog Box in JS || JavaScript Dialog Box

Image
In this video,I explained the Alert Dialog Box . Feel free to comment. For more, please subscribe and press the BELL icon. The code is as follows - HTML File -  <html>  <head> <title> Alert Dialog Box in JS </title> </head>  <!--  JS - Dynamic web pages        <script>    </script>    Interaction with the users    <head>   </head>       <body>    </body>    JS - Dialog boxes - alert, confirm and prompt        -->  <body>    <script language="javascript">      alert("Hi Everyone ...!!!");      document.write("<h1> Hello..!!! Welcome to my </h1> "+ "<b> channel </b>");    </script>  </body>  </html>
Read more

HTML - Frameset Tag in html

Image
Hello everyone. In this video, I explained the frameset tag in html -  HTML - Frameset Tag in html . For more, please subscribe the channel. If you have any doubt, please comment in this video. Check my playlist -  HTML Playlist Please like, comment, share and subscribe.
Read more