Happy Independence Day 2024 | National Flag Design using HTML and CSS

Independence Day is celebrated annually on the 15th of August as a National Holiday. On 15th August 2024, we will celebrate the 78th Independence Day.

The national flag of India is a Horizontal Rectangular Tricolor Flag that contains a Saffron at the top, White and Ashoka Chakra with 24 Spikes wheels in a Navi Blue color in the center and Green color at the bottom. Ashoka Chakra is positioned at the center of the White Background Color. The Ratio of Length and Breadth of the National Flag (Tiranga) is 3 : 2.

Be a part of #harrscreentiranga this Independence Day! Copy the code given in this article, run it, take a screenshot and showcase the spirit of freedom by sharing on your social profiles!

Don't forget to tag @GeeksforGeeks in your post so that we can help you increase your reach!

Here, we will design the Indian Flag using HTML and CSS. To create the Indian Flag, we will create the main div container, and inside the main div, we will use three sub divs. The first div displays the Saffron background color, the second div displays the white background color and this div contains another div that will display the Ashok Chakra. The third div displays the green background color.

Example: In this example, we are using the above-explained approach.

Output:

Reference: You can read the following reference links to read the HTML tags, Attributes, and CSS properties:

• HTML Tags
• HTML Attributes
• CSS Basics
• CSS Properties
• CSS Selectors
• CSS Functions