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 & 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