<body >
<div class="container">
<div class="title">
<h6>
सारे जहाँ से अच्छा, हिन्दोस्तां हमारा हम बुलबुले हैं इसकी, वो गुलसितां हमारा !</h6>
</div>
<div class="flag">
<div class="saffron flag-item"></div>
<div class="white flag-item">
<div class="circle">
<span class="bar"></span><span class="bar"></span><span class="bar"></span><span class="bar"></span><span class="bar"></span><span class="bar"></span><span class="bar"></span><span class="bar"></span><span class="bar"></span><span class="bar"></span><span class="bar"></span><span class="bar"></span></div></div><div class="green flag-item"></div><div class="flag-wave"></div></div>
</div><br><br><br><br>
<div class="title"> <marquee direction="up" behavior="alternate" height="180"> <marquee behavior="alternate">
🌸🌺🌹🌷💐<br>
🌸🌹🌷🌸🌹🌷💐<br>
🌺🌹🌷💐🌸🌹🌺🌷<br>
🌹🌸💐🌹🌸🌺🌷🌹🌺<br>
🌸🌹🌷💐🌸🌹🌹🌷🌹<br>
</marquee> </marquee> 🌸🌺🌹🌷💐<br>
🌸🌹🌷🌸🌹🌷💐<br>
🌺🌹🌷💐🌸🌹🌺🌷<br>
🌹🌸💐🌹🌸🌺🌷🌹🌺<br>
🌸🌹🌷💐🌸🌹🌹🌷🌹<br>
Happy
Republic Day !
<br>
<video width="400" height="100"controls>
<source src="mov_bbb.mp4" type="video/mp4">
<source src=
"mov_bbb.ogg "
type="video/ogg">
Your browser does not support HTML5 video.
</video>
</div>
</body></html>
<style>
.title{margin: auto 60px;padding: 5px;text-align: center;font-size: 45px;font-weight: 600;}
.flag {margin:30px auto;position: relative;width:250px;height:150px;
animation-name:
wave;animation-duration: 8s;animation-timing-function: cubic-bezier(0.16, 0.14, 0.82, 0.73);animation-timing-function: linear;animation-iteration-count: infinite;}
.flag:before {position: absolute;content: "";height: 400px;left: -5px;top: -3px;width: 8px;border-right: 1px solid #FFF;border-radius: 3px;background-color: #422;box-shadow: -3px 3px 8px 0px rgba(0, 0, 0, 0.4);}
.white {background: #FFF;}
.green {background: #006400;}
.saffron {background: #F93;}
.flag-item {height:33.33%;box-sizing:border-box;}
.flag-wave {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-image: -webkit-gradient(linear, 0 -25%, 100% top, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(20%, rgba(255, 255, 255, 0)), color-stop(30%, rgba(0, 0, 0, 0.04)), color-stop(40%, rgba(255, 255, 255, 0.2)), color-stop(60%, rgba(255, 255, 255, 0)), color-stop(65%, rgba(255, 255, 255, 0.2)), color-stop(80%, rgba(0, 0, 0, 0.05)), color-stop(100%, rgba(255, 255, 255, 0)));background-size: 200%;
-webkit-animation-name: air;-webkit-animation-duration: 8s;-webkit-animation-timing-function: cubic-bezier(0.16, 0.14, 0.82, 0.73);-webkit-animation-iteration-count: infinite;
}
.circle {width:47px;height:47px;border:2px solid #000080;border-radius:50%;position:absolute;left:40%;-webkit-animation: circle 5s infinite;animation: circle 10s linear 2s infinite;}.circle:after {content:"";width:3px;height:3px;border-radius:50%;background:#00080;position:absolute;top:45%;left:45%;}.bar {position: absolute;display:inline-block;height:47px;width:2px;background:#000080;left:47%;}
.bar:nth-child(1) {-ms-transform: rotate(15deg);-webkit-transform: rotate(15deg);transform: rotate(15deg);}.bar:nth-child(2) {-ms-transform: rotate(30deg);-webkit-transform: rotate(30deg);transform: rotate(30deg);}.bar:nth-child(3) {-ms-transform: rotate(45deg);-webkit-transform: rotate(45deg);transform: rotate(45deg);}.bar:nth-child(4) {-ms-transform: rotate(60deg);-webkit-transform: rotate(60deg);transform: rotate(60deg);}.bar:nth-child(5) {-ms-transform: rotate(75deg);-webkit-transform: rotate(75deg);transform: rotate(75deg);}.bar:nth-child(6) {-ms-transform: rotate(90deg);-webkit-transform: rotate(90deg);transform: rotate(90deg);}.bar:nth-child(7) {-ms-transform: rotate(105deg);-webkit-transform: rotate(105deg);transform: rotate(105deg);}.bar:nth-child(8) {-ms-transform: rotate(120deg);-webkit-transform: rotate(120deg);transform: rotate(120deg);}.bar:nth-child(9) {-ms-transform: rotate(135deg);-webkit-transform: rotate(135deg);transform: rotate(135deg);}.bar:nth-child(10) {-ms-transform: rotate(150deg);-webkit-transform: rotate(150deg);transform: rotate(150deg);}.bar:nth-child(11) {-ms-transform: rotate(165deg);-webkit-transform: rotate(165deg);transform: rotate(165deg);}@-webkit-keyframes circle {from {-ms-transform: rotate(0deg);-webkit-transform: rotate(0deg);transform: rotate(0deg);}to {-ms-transform: rotate(360deg);-webkit-transform: rotate(360deg);transform: rotate(360deg);}}
@-webkit-keyframes wave {0% {box-shadow: 4px 5px 5px 0 rgba(0, 0, 0, 0.1);-webkit-transform: translate3d(0, 0, 0) rotateZ(0deg) rotateY(22deg);}20% {box-shadow: 4px 5px 15px 0 rgba(0, 0, 0, 0.1);-webkit-transform: translate3d(0, 0, 0) rotateZ(0deg) rotateY(0deg);}40% {box-shadow: 4px 5px 20px 0 rgba(0, 0, 0, 0.4);-webkit-transform: translate3d(0, 0, 0) rotateZ(0deg) rotateY(-22deg);}60% {box-shadow: 4px 5px 5px 0 rgba(0, 0, 0, 0.1);-webkit-transform: translate3d(0, 0, 0) rotateZ(0deg) rotateY(0deg);}80% {box-shadow: 4px 5px 5px 0 rgba(0, 0, 0, 0.3);-webkit-transform: translate3d(0, 0, 0) rotateZ(0deg) rotateY(16deg);}100% {box-shadow: 4px 5px 5px 0 rgba(0, 0, 0, 0.1);-webkit-transform: translate3d(0, 0, 0) rotateZ(0deg) rotateY(22deg);}}
@-webkit-keyframes air {0% {background-position: -200% 0px;}30% {background-position: -60% 5px;}70% {background-position: 70% -5px;}100% {background-position: 200% 0px;}}
</style>
