Happy independence day - National flag with HTML and SCSS

happy-independence-day-national-flag-with-html-and-scss.markdown

Happy independence day - National flag with HTML and SCSS

A Pen by Jothin kumar on CodePen.

License.

index.html

<div id="india-flag">
  <span class="band" id="saffron-band"></span>
  <span class="band" id="white-band">
    <span id="chakra">
      <!--class "spokes" refers to a pair of spokes on the flag, which are opposite to each other-->
      <span class="spokes"></span>
      <span class="spokes"></span>
      <span class="spokes"></span>
      <span class="spokes"></span>
      <span class="spokes"></span>
      <span class="spokes"></span>
      <span class="spokes"></span>
      <span class="spokes"></span>
      <span class="spokes"></span>
      <span class="spokes"></span>
      <span class="spokes"></span>
      <span class="spokes"></span>
    </span>
  </span>
  <span class="band" id="green-band"></span>
</div>
<p id="wish">Happy independence day :-)</p>

style.scss

body {
  background-color: #ebf6fa;
}

$flag-width: 500px;
$flag-height: 300px;
$saffron-color: #f58936;
$white-color: #faf7f7;
$green-color: #428c22;
$navyblue-color: #1702d4;

#india-flag {
  width: $flag-width;
  height: $flag-height;
  
  margin: auto;
  display: grid;
  
  .band {
    height: $flag-height / 3;
    width: $flag-width;
  }
  #saffron-band {background-color: $saffron-color}
  #green-band {background-color: $green-color}
  #white-band {
    background-color: $white-color;
    justify-content: center;
    align-items: center;
    display: flex;
    
    #chakra {
      width: $flag-height / 3 - 10px;
      height: $flag-height / 3 - 10px;
    
      border-radius: 50%;
      border: $navyblue-color 2px solid;
      
      justify-content: center;
      align-items: center;
      display: flex;
      
      .spokes {
        position: absolute;
        
        width: 3px;
        height: $flag-height / 3 - 12px;
        
        background-color: $navyblue-color;
        border-radius: 100%;
        
        @for $i from 1 through 12 {
          &:nth-child(1n + #{$i}) {
            rotate: 15deg * $i;
          }
        }
      }
    }
  }
}

#wish {
  color: red;
  text-align: center;
  font-weight: bold;
  font-size: x-large;
  font-family: Arial, sans-serif;
}