<!DOCTYPE html>
<html>
<head>
    <title>Indian Flag by Priyank vaghani</title>
    <style type="text/css">
      .all{
      display: flex;
      margin-top: 7%;
      margin-left: 20%;
  }

  .sti{
      height: 450px;
      width: 10px;
      background: black;
      border-top-left-radius: 10px;
      border-bottom-left-radius: 5px;
      border-bottom-right-radius: 5px;
  }

  .flag{
      width: 270px;
      height: 180px;
      box-shadow: 0px 0px 90px 1px #989;
      background-color: transparent;
      position: relative;
  }

  .top{
      height: 60px;
      background-color: #ff9933
  }

  .middle{
      height: 60px;
      display: flex;
      justify-content: center;
      align-items: center;
  }

  .bottom{
      height: 60px;
      background-color: green;
  }

  .round{
      height: 47px;
      width: 47px;
      border: 1px solid darkblue;
      border-radius: 45px;
      position: relative;
      margin: 0 auto;
      animation: round1 5s linear infinite;
  }

  .round .line{
      height: 100%;
      width: 1.1px;
      border-radius: 50%;
      display: inline-block;
      position: absolute;
      left: 50%;
      background: darkblue;
  }

  .line:nth-child(1) {
      transform: rotate(15deg)
  }

  .line:nth-child(2) {
      transform: rotate(30deg)
  }

  .line:nth-child(3) {
      transform: rotate(45deg)
  }

  .line:nth-child(4) {
      transform: rotate(60deg)
  }

  .line:nth-child(5) {
      transform: rotate(75deg)
  }

  .line:nth-child(6) {
      transform: rotate(90deg)
  }

  .line:nth-child(7) {
      transform: rotate(105deg)
  }

  .line:nth-child(8) {
      transform: rotate(120deg)
  }

  .line:nth-child(9) {
      transform: rotate(135deg)
  }

  .line:nth-child(10) {
      transform: rotate(150deg)
  }

  .line:nth-child(11) {
      transform: rotate(165deg)
  }

  .line:nth-child(12) {
      transform: rotate(180deg)
  }
  @keyframes round1{
    0%{
      transform: rotate(0deg);
    }
    100%{
      transform: rotate(360deg);
    }
  }
  .wave{
    position: absolute;
    height: 100%;
    width: 100%;
    background-image: linear-gradient(
        128deg, rgba(89,72,21,0) 39%,
        rgba(250,245,245,0.8474025974025974)
        46%, rgba(89,72,21,0) 53%);
    animation: wavy 10s linear infinite;
  }

  @keyframes wavy {
     0%{
      background-position:
      -400px 0px, -400px 0px,
      -400px 0px,-400px 0px;
     }
     100%{
      background-position: 800px 0px,
      800px 0px, 800px 0px, 800px 0px;
     }
   }
   .ro{
    margin-top: -10px;
    margin-left: 15.9%;
    background-color: black;
    height: 50px;
    width: 140px;
    border-radius: 50%;
   }
   .india{
    margin-top: -12%;
   }
   .des p{
    font-size: 25px;
    align-items: center;
    font-family: cursive;
   }
   .c1{
    margin-left: 33%;
    margin-top: -18px;
    position: absolute;
    background: linear-gradient(60deg,orange,#FFFFFF,green,orange,#FFFFFF,green,orange,#FFFFFF,green);
    background-size: 400%;
    align-items: center;
    text-align: center;
    font-family: cursive;
    letter-spacing: 5px;
    font-weight: 600;
    word-spacing: 5px;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    animation: flag 5s linear infinite;
   }
   @keyframes flag{
    0%{
      background-position: 0%;
    }
    100%{
      background-position: 100%;
    }
   }
   .c2{
    font-family: cursive;
    margin-top: -2px;
    color: white;
    text-shadow: 0 0 9px green,
                 0 0 9px green,
                 0 0 9px green,
                 0 0 9px green;
    animation: name 3.5s linear 1;
    }
    @keyframes name{
      0%{
        filter: hue-rotate(0deg);
        transform: rotatey(0deg);
      }
      50%{
        filter: hue-rotate(240deg);
        transform: rotatey(240deg);
      }
      100%{
        filter: hue-rotate(360deg);
        transform: rotatey(360deg);
      }
    }
    </style>
</head>
<body>
    <div class="all">
        <div class="sti"></div>
        <div class="flag">
            <div class="wave"></div>
            <div class="top"></div>
            <div class="middle">
                <div class="round">
                    <span class="line"></span>
                    <span class="line"></span>
                    <span class="line"></span>
                    <span class="line"></span>
                    <span class="line"></span>
                    <span class="line"></span>
                    <span class="line"></span>
                    <span class="line"></span>
                    <span class="line"></span>
                    <span class="line"></span>
                    <span class="line"></span>
                    <span class="line"></span>
                </div>
            </div>
            <div class="bottom"></div>
        </div>
    </div>
    <div class="ro"></div>

    <div class="india">
      <div class="des">
        <center><p>Love india, Live in india & Make our india <br>pride in world by being indian 🔥</p></center>
        <center><h2 class="c1">Happy Independence day 2023</h2></center>
        <center><br><p class="c2">priyank vaghani</p></center>
      </div>
    </div>
</body>

</html>