75th Independence Day Flag
In this article, we are going to design an animated flag of India with the help of HTML and CSS. As we know, our Indian flag has three colours saffron, white and green and there is also a wheel in the middle of the white part. Then let’s make the Indian flag.
So let’s break down the challenge of into multiple steps.
- Indian Flag has a pre-defined aspect ratio for various flag size. For our reference let’s build a flag of 225px x 150px
- Indian Flag has 3 rectangular stripes. So we need 3
<div>for each stripe which are of same dimension. In our case width needs to be 225px and each stripe needs to be 50px in height. So that 3 x 50px = 150px - We need hex color codes for Saffron, White and Green stripe. My quick glance at Wikipedia gives me following approximate hex codes which will be good to represent our flag.
- India Saffron – #FF9933
- White – #FFFFFF
- India Green – #138808
- We can use this image from Here for Ashoka Chakra at the center of the white stripe.
First Lets Begin With HTML
<!– Wrapper –>
<div class=”container”>
<!– Flag –>
<div id=”flag”>
<!– Saffron Stripe –>
<div class=”stripe” id=”saffron”></div>
<!– White Stripe –>
<div class=”stripe” id=”white”>
<img class=”ashok_chakra” src=”https://leadsgen.in/wp-content/uploads/2022/08/Spinning_Ashoka_Chakra.gif” alt=”Ashoka Chakra”>
</div>
<!– Green Stripe –>
<div class=”stripe” id=”green”></div>
</div>
</div>
<!– Message –>
<h3 class=”message”>💖I Love My <span>INDIA<span>💖</h3>
Now its turn for CSS
body {
/* Dark Blue Background so that white stripe doesn’t blend into background */
background: #001524;
}
.container {
/* Make Flag at the center of the container */
display: flex;
justify-content: center;
margin-top: 5px;
}
/* Stripe */
.stripe {
width: 225px;
height: 50px;
}
/* Saffron Stripe */
#saffron {
background: #FF9933;
}
/* White Stripe */
#white {
background: #FFFFFF;
display: flex;
justify-content: center;
align-items: center;
}
/* Green Stripe */
#green {
background: #138808;
}
/* Ashoka Chakra Image */
.ashok_chakra {
height: 40px;
width: 40px;
}
/* Patriotic Message */
.message {
text-align: center;
color: #FFFFFF
}
/* Color of INDIA */
.message span{
/* Light Blue */
color: #19D3DA;
}
You can see the final result below
See the Pen 75th Independence Day Flag by Jaipreet Soni (@Jaipreetsoni) on CodePen.