Free Coding Ebook 👉 Get Now

Indian Flag HTML and CSS Code

To make the Indian flag in this article we will be using only HTML and CSS . For me personally and for our mighty nation of India, this is a highly fascinating subject.

As a result, we design the Indian flag on Independence Day so that people can learn to code in India and commemorate the holiday. As a result, we wrote the HTML code for this project first, and then we added CSS styling.

Code by	procoding13
Project Download	Link Available Below
Language used	HTML and CSS
External link / Dependencies	NO
Responsive	YES

Indian Flag Table

100+ JavaScript Projects With Source Code ( Beginners to Advanced)

So let’s start writing Html code with proud💪🇮🇳 .

Html Code For Indian Flag

<!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>Independence Day</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>

  <body>
    <div id="top"></div>
    <div id="middle">
      <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Ashoka_Chakra.svg/50px-Ashoka_Chakra.svg.png">
    </div>
    <div id="bottom"></div>
    <div id="rod"></div>
    <div id="text">Independence Day</div>
  </body>

</html>

So this is all html code for our indian flag code, we use only html code and you can see in our code we link css files also so when we write css code it’s easy to see a preview.

Flag Structure:

For creating html structure we use a simple html div tag and an image tag in the image we have our ashoka chakra🇮🇳 . And after the image tag, we have text independence day you can change text like any motivation line our proud line of india🇮🇳.

Portfolio Website Using HTML CSS And JAVASCRIPT ( Source Code)

Indian Flag html output

So let’s write css code and style our flag 🇮🇳.

Css Code For Indian Flag

body {
    background: #111;
    position: relative;
    left: 45%;
    top: 15px;
        overflow: hidden;
}
#top {
    height: 50px;
    background: #ff9c51;
    box-shadow: 0 0 5px #ff9c51;
    -webkit-animation: top_anim 4.5s infinite;
    animation: top_anim 4.5s infinite;
}
@-webkit-keyframes top_anim 
{
    0% {width: 0px;}
    30%{width: 250px;}
    70%{width: 250px;}
    100%{width: 0px;}
}
@keyframes top_anim
{
    0% {width: 0px;}
    30%{width: 250px;}
    70%{width: 250px;}
    100%{width: 0px;}
}
#middle {
    height: 50px;
    background: white;
    box-shadow: 0 0 5px white;
    -webkit-animation: middle_anim 4.5s infinite;
    animation: middle_anim 4.5s infinite;
    -webkit-animation-delay: .2s;
    animation-delay: .2s;
}
@-webkit-keyframes middle_anim 
{
    0% {width: 0px;}
    30%{width: 250px;}
    70%{width: 250px;}
    100%{width: 0px;}
}
@keyframes middle_anim
{
    0% {width: 0px;}
    30%{width: 250px;}
    70%{width: 250px;}
    100%{width: 0px;}
}
#middle img {
    display: block;
    width: 50px;
    height: 50px;
    margin: auto;
    -webkit-animation: img_anim 4.5s infinite linear;
    -webkit-animation-delay: .2s;
    animation: img_anim 4.5s infinite;
    animation-delay: .2s;
}
@-webkit-keyframes img_anim
{
    0% {opacity: 0;}
    30% {opacity: 0;-webkit-transform:rotate(0deg);transform:rotate(0deg);-ms-transform:rotate(0deg);}
    38% {opacity: 1;}
    62% {opacity: 1;}
    70% {opacity: 0;-webkit-transform:rotate(360deg);transform:rotate(360deg);-ms-transform:rotate(360deg);}
    100% {opacity: 0;}
}
@keyframes img_anim
{
    0% {opacity: 0;}
    30% {opacity: 0;-webkit-transform:rotate(0deg);transform:rotate(0deg);-ms-transform:rotate(0deg);}
    38% {opacity: 1;}
    62% {opacity: 1;}
    70% {opacity: 0;-webkit-transform:rotate(360deg);transform:rotate(360deg);-ms-transform:rotate(360deg);}
    100% {opacity: 0;}
}
#bottom {
    height: 50px;
    background: #5aad5e;
    box-shadow: 0 0 5px #5aad5e;
    -webkit-animation: bottom_anim 4.5s infinite;
    animation: bottom_anim 4.5s infinite;
    -webkit-animation-delay: .4s;
    animation-delay: .4s;
}
@-webkit-keyframes bottom_anim
{
    0% {width: 0px;}
    30%{width: 250px;}
    70%{width: 250px;}
    100%{width: 0px;}
}
@keyframes bottom_anim
{
    0% {width: 0px;}
    30%{width: 250px;}
    70%{width: 250px;}
    100%{width: 0px;}
}
#rod {
    width: 10px;
    height: 450px;
    background: #874a21;
    position: relative;
    top: -152px;
    left: -7px;
  border-radius: 40%;
}
#text {
  font-size: 35px;
  color: white;
  line-height: 50px;
  text-align: center;
  border-top: 4px solid #FF8915;
  border-left: 4px solid white;
  border-right: 4px solid white;
  border-bottom: 4px solid #148809;
  border-radius: 4px;
  display: block;
  width: 250px;
  height: 100px;
  position: relative;
  left: -300px;
  top: -600px;
  -webkit-animation: text_anim 4.5s infinite;
  animation: text_anim 4.5s infinite;
}
@-webkit-keyframes text_anim {
  0% {text-shadow: 0 0 20px #6da2ff;}
  50% {text-shadow: none;}
  100% {text-shadow: 0 0 20px #6da2ff;}
}
@keyframes text_anim {
  0% {text-shadow: 0 0 20px #6da2ff;}
  50% {text-shadow: none;}
  100% {text-shadow: 0 0 20px #6da2ff;}
}

Step1:We’ll first add some fundamental styling to our page’s body using the body tag selector. In order to hide the overflow content, we will use the overflow property to set the overflow as “hidden” and the background attribute to set the background as “black,” relative to the position.

body {
    background: #111;
    position: relative;
    left: 45%;
    top: 15px;
    overflow: hidden;
}

Step2: Now using the id selector (#top) we will add a height of 50px to the top section of our flag. Then using the background property we will set the bakcground as “Orange” and using the animation property we will add an animation of increase width with the help of keyframes.

How To Create Movie App Using HTML & CSS

#top {
    height: 50px;
    background: #ff9c51;
    box-shadow: 0 0 5px #ff9c51;
    -webkit-animation: top_anim 4.5s infinite;
    animation: top_anim 4.5s infinite;
}

@-webkit-keyframes top_anim {
    0% {
        width: 0px;
    }
    30% {
        width: 250px;
    }
    70% {
        width: 250px;
    }
    100% {
        width: 0px;
    }
}

@keyframes top_anim {
    0% {
        width: 0px;
    }
    30% {
        width: 250px;
    }
    70% {
        width: 250px;
    }
    100% {
        width: 0px;
    }
}

Step3: Now using the id selector (#middle) we will add styling to the middle section of our flag.we will add a height of 50px to the middle section of our flag. Then using the background property we will set the bakcground as “white” and using the animation property we will add an animation of increase width with the help of keyframes.

Memory Game Using HTML, CSS, & JavaScript (Source Code)

#middle {
    height: 50px;
    background: white;
    box-shadow: 0 0 5px white;
    -webkit-animation: middle_anim 4.5s infinite;
    animation: middle_anim 4.5s infinite;
    -webkit-animation-delay: .2s;
    animation-delay: .2s;
}

@-webkit-keyframes middle_anim {
    0% {
        width: 0px;
    }
    30% {
        width: 250px;
    }
    70% {
        width: 250px;
    }
    100% {
        width: 0px;
    }
}

@keyframes middle_anim {
    0% {
        width: 0px;
    }
    30% {
        width: 250px;
    }
    70% {
        width: 250px;
    }
    100% {
        width: 0px;
    }
}

#middle img {
    display: block;
    width: 50px;
    height: 50px;
    margin: auto;
    -webkit-animation: img_anim 4.5s infinite linear;
    -webkit-animation-delay: .2s;
    animation: img_anim 4.5s infinite;
    animation-delay: .2s;
}

@-webkit-keyframes img_anim {
    0% {
        opacity: 0;
    }
    30% {
        opacity: 0;
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        -ms-transform: rotate(0deg);
    }
    38% {
        opacity: 1;
    }
    62% {
        opacity: 1;
    }
    70% {
        opacity: 0;
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
        -ms-transform: rotate(360deg);
    }
    100% {
        opacity: 0;
    }
}

@keyframes img_anim {
    0% {
        opacity: 0;
    }
    30% {
        opacity: 0;
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        -ms-transform: rotate(0deg);
    }
    38% {
        opacity: 1;
    }
    62% {
        opacity: 1;
    }
    70% {
        opacity: 0;
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
        -ms-transform: rotate(360deg);
    }
    100% {
        opacity: 0;
    }
}

Step4: Now we will add styling to the third section of our flag. Using the bottom id selector we will set the height as “50px” and using the background property we will set the background as “green”and using the animation property we will add animation to the bottom of the flag.

#bottom {
    height: 50px;
    background: #5aad5e;
    box-shadow: 0 0 5px #5aad5e;
    -webkit-animation: bottom_anim 4.5s infinite;
    animation: bottom_anim 4.5s infinite;
    -webkit-animation-delay: .4s;
    animation-delay: .4s;
}

@-webkit-keyframes bottom_anim {
    0% {
        width: 0px;
    }
    30% {
        width: 250px;
    }
    70% {
        width: 250px;
    }
    100% {
        width: 0px;
    }
}

@keyframes bottom_anim {
    0% {
        width: 0px;
    }
    30% {
        width: 250px;
    }
    70% {
        width: 250px;
    }
    100% {
        width: 0px;
    }
}

#rod {
    width: 10px;
    height: 450px;
    background: #874a21;
    position: relative;
    top: -152px;
    left: -7px;
    border-radius: 40%;
}

#text {
    font-size: 35px;
    color: white;
    line-height: 50px;
    text-align: center;
    border-top: 4px solid #FF8915;
    border-left: 4px solid white;
    border-right: 4px solid white;
    border-bottom: 4px solid #148809;
    border-radius: 4px;
    display: block;
    width: 250px;
    height: 100px;
    position: relative;
    left: -300px;
    top: -600px;
    -webkit-animation: text_anim 4.5s infinite;
    animation: text_anim 4.5s infinite;
}

@-webkit-keyframes text_anim {
    0% {
        text-shadow: 0 0 20px #6da2ff;
    }
    50% {
        text-shadow: none;
    }
    100% {
        text-shadow: 0 0 20px #6da2ff;
    }
}

@keyframes text_anim {
    0% {
        text-shadow: 0 0 20px #6da2ff;
    }
    50% {
        text-shadow: none;
    }
    100% {
        text-shadow: 0 0 20px #6da2ff;
    }
}

Indian Flag Using HTML and CSS Code | Indian Flag HTML CSS

Yes, this is a 100+ line code of css for our Indian flag 🇮🇳 code.

50+ HTML, CSS & JavaScript Projects With Source Code

We complete our code. You can see the output screenshot and video preview of how awesome our Indian🇮🇳 flag is.

Final Output Of Indian Flag Source Code Html And Css

See the Pen <a href="https://codepen.io/procoding13/pen/BaLXavg" target="_blank" rel="noopener"> India Flag Animation </a> by procoding13 (<a href="https://codepen.io/procoding13" target="_blank" rel="noopener">@procoding13</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

You can see in the video, that the Indian flag with animation is made by pure Html css. In flag, Ashoka chakra rotates animation and text coming animation also.

In css, we use a simple css selector to target our Html elements. We use Keyframe for animation, so our Ashoka chakra🇮🇳 rotates by animation. Then we simply styled our text and give an animation so it’s run every second.

Ecommerce Website Using Html Css And Javascript Source Code

That’s it for this project, hope you like our blog website and enjoy creating this Indian flag code using Html css.

If you need any more project-related frontend. Visit our homepage and you get 100+ projects💝.

if you have any confusion Comment below or you can contact us by filling out our contact us form from the home section. 🤞🎉

Code By – procoding13

written by – Codewithrandom

Which code editor do you use for this Indian Flag coding?

I personally recommend using VS Code Studio, it’s straightforward and easy to use.

Indian Flag Using HTML and CSS Code | Indian Flag HTML CSS

Free Coding Ebook 👉 Get Now

Indian Flag HTML and CSS Code

Html Code For Indian Flag

Css Code For Indian Flag

Final Output Of Indian Flag Source Code Html And Css

Which code editor do you use for this Indian Flag coding?

is this project responsive or not?

Do you use any external links to create this project?

Free Coding Ebook 👉 Get Now

Leave a Reply Cancel reply

Quick Intro!!

Navigate

Subscribe Now

Designed & Maintained By Sahitya Porwal 🔥

Thanks For Visiting CodeWithRandom

Free Coding Ebook 👉 Get Now

Indian Flag HTML and CSS Code

Html Code For Indian Flag

Css Code For Indian Flag

Final Output Of Indian Flag Source Code Html And Css

Which code editor do you use for this Indian Flag coding?

is this project responsive or not?

Do you use any external links to create this project?

Free Coding Ebook 👉 Get Now

You Might Also Like

Create Dictionary App Using HTML , CSS & Javascript

Create a Responsive Pricing Table Using HTML and CSS Code

Flip Image Animation Using HTML and CSS

Leave a Reply Cancel reply

Quick Intro!!

Navigate

Subscribe Now

Designed & Maintained By Sahitya Porwal 🔥

Thanks For Visiting CodeWithRandom