<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Suitable" content material="IE=edge">
<meta identify="viewport" content material="width=device-width, initial-scale=1.0">
<title>Completely satisfied Independence Day 2022</title>
<model>
* {
margin: 0;
padding: 0;
}
.text-container {
width: 600px;
font-size: 32px;
font-family: 'Oleo Script Swash Caps', cursive;
font-style: italic;
margin: auto;
text-align: heart;
}
.line-1 {
shade: blue;
}
.line-2 {
shade: #FF9933;
}
.main-container {
width: 600px;
top: 400px;
border: 1px strong #e1e1e1;
margin: auto;
}
.saffron {
top: 133px;
width: 100%;
background-color: #FF9933;
}
.white {
top: 134px;
width: 100%;
background-color: white;
}
.ashok-chakra {
place: relative;
width: 124px;
top: 124px;
border-radius: 50%;
border: 5px strong blue;
margin: auto;
}
.ashok-chakra .spikes,
.ashok-chakra .spikes .spike {
place: absolute;
high: 0;
left: 0;
width: 100%;
top: 100%;
}
.ashok-chakra .spikes .spike {
rework: rotate(calc(15deg * var(--i)));
}
.ashok-chakra .spikes .spike::earlier than {
content material: "";
place: absolute;
width: 10px;
top: 10px;
background: blue;
border-radius: 50%;
high: -5px;
left: calc(50% - 8px);
}
.ashok-chakra .spikes .spike::after {
content material: "";
place: absolute;
width: 6px;
top: 50%;
background: blue;
high: -8px;
left: calc(50% - 5px);
transform-origin: backside;
rework: rotate(7.5deg);
clip-path: polygon(50% 5%, 100% 50%, 50% 95%, 0% 50%);
}
.ashok-chakra::after {
content material: "";
place: absolute;
width: 16px;
top: 16px;
background: blue;
high: calc(50% - 8px);
left: calc(50% - 8px);
border-radius: 50%;
}
.inexperienced {
top: 133px;
width: 100%;
background-color: inexperienced;
}
.text-content {
text-align: heart;
font-size: 62px;
font-family: 'Oleo Script Swash Caps', cursive;
font-style: italic;
}
.text1 {
shade: #FF9933;
}
.text2 {
shade: inexperienced;
line-height: 15px;
}
.12 months {
shade: blue;
}
</model>
</head>
<physique>
<div class="text-container">
<div class="line-1">Azadi Ka Amrit Mahotsav</div>
<div class="line-2">
75<sup>th</sup> Anniversary of
Indian Independence
</div>
</div>
<div class="main-container">
<div class="saffron"></div>
<div class="white">
<div class="ashok-chakra">
<div class="spikes">
<div class="spike" model="--i: 1"></div>
<div class="spike" model="--i: 2"></div>
<div class="spike" model="--i: 3"></div>
<div class="spike" model="--i: 4"></div>
<div class="spike" model="--i: 5"></div>
<div class="spike" model="--i: 6"></div>
<div class="spike" model="--i: 7"></div>
<div class="spike" model="--i: 8"></div>
<div class="spike" model="--i: 9"></div>
<div class="spike" model="--i: 10"></div>
<div class="spike" model="--i: 11"></div>
<div class="spike" model="--i: 12"></div>
<div class="spike" model="--i: 13"></div>
<div class="spike" model="--i: 14"></div>
<div class="spike" model="--i: 15"></div>
<div class="spike" model="--i: 16"></div>
<div class="spike" model="--i: 17"></div>
<div class="spike" model="--i: 18"></div>
<div class="spike" model="--i: 19"></div>
<div class="spike" model="--i: 20"></div>
<div class="spike" model="--i: 21"></div>
<div class="spike" model="--i: 22"></div>
<div class="spike" model="--i: 23"></div>
<div class="spike" model="--i: 24"></div>
</div>
</div>
</div>
<div class="inexperienced"></div>
</div>
<div class="text-content">
<div class="text1">Completely satisfied</div>
<div class="text2">Independence Day</div>
<div class="12 months">2022</div>
</div>
</physique>
</html>
