Happy Independence Day Using Html & Css

Happy Independence Day Using Html & Css

 Happy Independence Day Using Html & Css




See the Pen Happy Independence Day Using Html & Css by Mohit Arya (@mohit_arya2002) on CodePen.


Source Code 

<html>

 <head> 

  <title>Happy Independence Day</title> 

  <meta name="description" content="National Flag Using Html &amp; CSS"> 

  <meta name="keywords" content="Happy Independence Day"> 

  <meta name="author" content="Mohit Arya"> 

  <style>

    body {

        /* Grey Background so that white stripe doesn't bleed into background */

        background: #ccc;

      }

       

      .container {

      /* Make Flag at the center of the container */

        display: flex;

        justify-content: center;

        margin-top: 5px;

      }

      /* Stripe */

      .stripe {

        width: 500px;

        height: 100px;

      }

      /* Saffron Stripe */

      #saffron {

        background: #FF9933;

      }

      /* White Stripe */

      #white {

        background: #FFFFFF;

        display: flex;

        justify-content: center;

        align-items: center;

      }

      /* Green Stripe */

      #green {

        background: #138808;

      }

      /* Ashoka Chakra Image */

      .ashok_chakra {

        height: 40px;

        width: 40px;

      }

      /* Patriotic Message */

      .message {

        text-align: center;

      }

      /* Color of INDIA */

      .message span{

        /* Navy Blue of Ashoka Chakra */

        color: #000080;

      }

      marquee{padding:20px;}

      

        a:link, a:visited {

                  background-color: #FF9933;

                  color: white;

                  padding: 14px 25px;

                  text-align: center;

                  text-decoration: none;

                  display: inline-block;

                }


      a:hover, a:active {

                  background-color:#138808;

                }

  </style> 

 </head> 

 <body> 

  <div class="container"> 

   <!--Flag--> 

   <div id="flag"> 

    <!--Saffron Stripe--> 

    <div class="stripe" id="saffron"> 

     <marquee behavior="alternate"> 

      <h3>Happy Independence Day </h3> 

     </marquee> 

    </div> 

    <!--White Stripe--> 

    <div class="stripe" id="white"> 

     <!--Ashoka Chakra--> 

     <img class="ashok_chakra" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Ashoka_Chakra.svg/630px-Ashoka_Chakra.svg.png" alt="Ashoka Chakra"> 

    </div> 

    <!--Green Stripe--> 

    <div class="stripe" id="green"> 

     <marquee behavior="alternate"> 

      <h3>Proud to be an INDIAN</h3> 

     </marquee> 

    </div> 

   </div> 

  </div> 

  <!--Message--> 

  <h3 class="message">I ❤ My <span>INDIA<span></span></span></h3> 

  <h2> 

   <center>

     Happy Independence Day 

   </center></h2> 

  <marquee>

    -----by mohit raj----- 

  </marquee> 

  <div class="container"> 

   <a href="https://linktr.ee/digitalmohitarya" target="_blank">Visit My Profile</a> 

  </div> 

 </body>

</html>



Also Visit: happy independence day

Post a Comment

Previous Post Next Post