ADVERTISEMENT

Indian Flag HTML and CSS Code | Indian Flag HTML CSS

Telegram Group Join Now

ADVERTISEMENT

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.

ADVERTISEMENT

ADVERTISEMENT

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

 

ADVERTISEMENT

10+ HTML CSS Projects For Beginners with Source Code

ADVERTISEMENT

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:

ADVERTISEMENT

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

ADVERTISEMENT

indian Flag Code

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

ADVERTISEMENT

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.

#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.

ADVERTISEMENT

#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 HTML and CSS Code | Indian Flag HTML CSS

ADVERTISEMENT

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

ADVERTISEMENT

50+ HTML, CSS & JavaScript Projects With Source Code

ADVERTISEMENT

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

ADVERTISEMENT

Final Output Of Indian Flag Source Code Html And Css

 

indian Flag Code css

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.

is this project responsive or not?

Yes! this project is a responsive project.

Do you use any external links to create this project?

No!

ADVERTISEMENT

Telegram Group Join Now

Share on:

Leave a Comment

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT