<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Happy Independence Day 2022</title>
<style>
@import url(
* {
margin: 0;
padding: 0;
}
.cont {
width: 600px;
font-size: 32px;
font-family: 'Oleo Script Swash Caps', cursive;
font-style: italic;
color: #FF9933;
margin: auto;
text-align: center;
}
.main-container {
width: 600px;
height: 400px;
border: 1px solid #e1e1e1;
margin: auto;
}
.saffron {
height: 133px;
width: 100%;
background-color: #FF9933;
}
.white {
height: 134px;
width: 100%;
background-color: white;
}
.ashok-chakra {
position: relative;
width: 124px;
height: 124px;
border-radius: 50%;
border: 5px solid blue;
margin: auto;
}
.ashok-chakra .spikes,
.ashok-chakra .spikes .spike {
position: absolute;
top: 0;
left: 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;
width: 100%;
background-color: green;
}
.text-content {
text-align: center;
font-size: 62px;
font-family: 'Oleo Script Swash Caps', cursive;
font-style: italic;
}
.text1 {
color: #FF9933;
}
.text2 {
color: green;
line-height: 15px;
}
.year {
color: blue;
}
</style>
</head>
<body>
<div class="cont">75<sup>th</sup> Independence Day</div>
<div class="main-container">
<div class="saffron"></div>
<div class="white">
<div class="ashok-chakra">
<div class="spikes">
<div class="spike" style="--i: 1"></div>
<div class="spike" style="--i: 2"></div>
<div class="spike" style="--i: 3"></div>
<div class="spike" style="--i: 4"></div>
<div class="spike" style="--i: 5"></div>
<div class="spike" style="--i: 6"></div>
<div class="spike" style="--i: 7"></div>
<div class="spike" style="--i: 8"></div>
<div class="spike" style="--i: 9"></div>
<div class="spike" style="--i: 10"></div>
<div class="spike" style="--i: 11"></div>
<div class="spike" style="--i: 12"></div>
<div class="spike" style="--i: 13"></div>
<div class="spike" style="--i: 14"></div>
<div class="spike" style="--i: 15"></div>
<div class="spike" style="--i: 16"></div>
<div class="spike" style="--i: 17"></div>
<div class="spike" style="--i: 18"></div>
<div class="spike" style="--i: 19"></div>
<div class="spike" style="--i: 20"></div>
<div class="spike" style="--i: 21"></div>
<div class="spike" style="--i: 22"></div>
<div class="spike" style="--i: 23"></div>
<div class="spike" style="--i: 24"></div>
</div>
</div>
</div>
<div class="green"></div>
</div>
<div class="text-content">
<div class="text1">Happy</div>
<div class="text2">Independence Day</div>
<div class="year">2022</div>
</div>
</body>
</html>