Indian Flag Source Code Html And Css | Indian Flag Html Css

Indian Flag Source Code Html And Css | Indian Flag Html Css

In this today’s article, we create an Indian 🇮🇳 flag using coding. We create this Indian flag using pure html 🔥 and css. This is a very interesting topic for me and our proudly india🇮🇳.

That’s why we create the Indian flag on independence day so people can grow in India through coding and celebrate independence day also. So in this project, we write 1st html code and then styling using css.

100+ Front-end Projects for Web developers (Source Code)

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.

So now the basic structure of the indian flag is complete.

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

indian Flag Code

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;}
}

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

50+ Front-end Projects With Source Code | Front-end 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

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

Share on:

Leave a Comment