flag.css

@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@500&family=Roboto:ital,wght@1,100&display=swap');
*{
padding: 0;    
margin: 0;
}
.text-container{
    width: 600px;
    text-align: center;
    font-family: 'Oleo Script Swash Caps', cursive;
   font-size: 22px;
   font-style: italic;
   margin: auto;
}
.line-01{
    color: blue;
}
.line-02{
    color:orange;
|}
.main-container{
    width: 600px;
    height: 300px;
    margin: auto;
    border: 2px solid #e1e1e1;
}
.saffron{
    height: 133px;
    background: orange;
    width: 100%;
}
.white{
    height: 134px;
    width: 100%;
}
.ashok-chakra{
    position: relative;
    width: 124px;
    height: 124px;
    margin: auto;
    border: 5px solid blue;
    border-radius: 50%;
}
.ashok-chakra .spikes,
.ashok-chakra .spikes .spike{
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}
.ashok-chakra .spikes .spike{
    transform: rotate(calc(15deg*var(--i)));
}
.ashok-chakra .spikes .spike::before {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    background: blue;
    border-radius: 50%;
    top: -5px;
    left: calc(50% - 8px);
}
.ashok-chakra .spikes .spike::after {
    content: "";
    position: absolute;
    width: 6px;
    height: 50%;
    background: blue;
    top: -8px;
    left: calc(50% - 5px);
    transform-origin: bottom;
    transform: rotate(7.5deg);
    clip-path: polygon(50% 5%, 100% 50%, 50% 95%, 0% 50%);
}
.ashok-chakra::after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    background: blue;
    top: calc(50% - 8px);
    left: calc(50% - 8px);
    border-radius: 50%;
}

.green{
    height: 133px;
    background: green;
    width: 100%;
}

.text-content{
    text-align: center;
    margin: 100px 380px;
    font-family: 'Oleo Script Swash Caps', cursive;
    font-style: italic;
    font-size: 62px;
    width: 600px;
}
.text1{
    color:orange;
}
.text2{
    color:green;
    line-height: 15px;
}
.year{
    color:blue;
}