Connect with us!

Indian Flag using HTML and CSS

Rachel Benita
September 18, 2023
CSS

In this tutorial we will learn how to create the vibrant and iconic tricolor flag of India using HTML and CSS. We created this website using HTML and CSS, ensuring a lightweight and fast-loading experience. The flag’s design is achieved through precise CSS styling, with attention to detail to maintain the correct proportions and colors.

Here I am using Visual studio code demonstrate Indian Flag. Visual Studio Code (VS Code) is the perfect integrated development environment (IDE). You can write and edit HTML and CSS code with ease using VS Code’s powerful code editing features, including autocompletion, syntax highlighting, and error checking.

You can find how to install and get started with Visual Studio code by checking out my tutorial – Running HTML using Live server in Visual Studio Code Editor – Salow Studios

Table of Contents

CSS Properties used in the code

Following are the CSS properties used:

Height: The height CSS property specifies the height of an element. By default, the property defines the height of the content area. If box-sizing is set to border-box, however, it instead determines the height of the border area.

Margin-left: The margin-left CSS property sets the margin area on the left side of an element. A positive value places it farther from its neighbors, while a negative value place it closer.

Background-repeat: The background-repeat CSS property sets how background images are repeated. A background image can be repeated along the horizontal and vertical axes, or not repeated at all.

Width: The width CSS property sets an element’s width. By default, it sets the width of the content area, but if box-sizing is set to border-box, it sets the width of the border area.

Background-position: The background-position CSS property sets the initial position for each background image. The position is relative to the position layer set by background-origin.

Border-radius: The border-radius CSS property rounds the corners of an element’s outer border edge. You can set a single radius to make circular corners, or two radii to make elliptical corners.

Background: The background shorthand CSS property sets all background style properties at once, such as color, image, origin and size, or repeat method.

Code Snippet Block

Here is the code for implementing the Pie Graph Animation.

.india {
        margin-left: 150px;
        width: 200px;
        height: 140px;
        background: radial-gradient(
            circle,
            transparent calc(100% / 6),
            #000080 calc((100% / 6) + 3%),
            transparent calc((100% / 6) + 3%)
          ),
          linear-gradient(
            to bottom,
            #ff9933 calc(100% / 3),
            white calc(100% / 3),
            white calc(100% / 3 * 2),
            #138808 calc(100% / 3 * 2)
          );
        position: relative;
      }

      .india:before {
        position: absolute;
        padding: 0;
        content: "✺";
        font-size: 48px;
        line-height: 42px;
        text-align: center;
        font-weight: 100;
        height: calc(100% / 3);
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        color: #000080;
      }

Yay! We have created the static Indian Flag Design.

Here is the output:

Indian Flag using HTML and CSS

YouTube Video Tutorial

You can find the complete coding tutorial in the following YouTube video.

Create Indian Flag using HTML and CSS

HTML and CSS Snippet Block

Copy and paste the complete code in Visual studio code to view the output.

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      .india {
        margin-left: 150px;
        width: 200px;
        height: 140px;
        background: radial-gradient(
            circle,
            transparent calc(100% / 6),
            #000080 calc((100% / 6) + 3%),
            transparent calc((100% / 6) + 3%)
          ),
          linear-gradient(
            to bottom,
            #ff9933 calc(100% / 3),
            white calc(100% / 3),
            white calc(100% / 3 * 2),
            #138808 calc(100% / 3 * 2)
          );
        position: relative;
      }

      .india:before {
        position: absolute;
        padding: 0;
        content: "✺";
        font-size: 48px;
        line-height: 42px;
        text-align: center;
        font-weight: 100;
        height: calc(100% / 3);
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        color: #000080;
      }
    </style>
    <title>Salow Studios</title>
  </head>
  <body>
    <h1>India Flag</h1>
    <div class="india"></div>
  </body>
</html>

Thank you for reading this article. I hope that it helps you creating your own Indian Flag Design using CSS and HTML. See you in next tutorial! Happy Coding!

Tags

# Animation # loader # preloader