Happy Republic Day From Maa Blogger By This Coding

Indian Flag Create by This Source Code

HTML

<html>

<head>

</head>

<body>

<center><h1> <font color="orange">Happy <font color="cornsilk">Republic <font color="green">Day <font color="blue">( 26th Jan 1950 ) </font></h1></center>

</div>

</div>

</div>

</body>

</html>

CSS

.ground{

background-image:url(https://www.itl.cat/pngfile/big/41-412730_india-independence-day-wallpaper-26-january-photo-editing.jpg);

padding-bottom: 620px;

}

.flag.rect{

position: absolute;

display: inline-block;

box-sizing: border-box;

margin: 2em 3em 120px;

width: 500px;

height: 190px;

border: 1px solid #bbb;

box-shadow: 2px 5px 14px 0px rgba(0,0,0,0.4);

-webkit-backface-visibility:hidden;

-webkit-prespctive:1000;

-webkit-transform-origin:0 250px;

-webkit-transform-style:preserve3d;

-webkit-animation-name:wave;

-webkit-animation-duration:5s;

-webkit-animation-timing-function:cubic-bezier(0.16,0.14,0.82,0.73);

-webkit-animation-timing-function:linear;

webkit-animation-iteration-count:infinite;

}

.flag.rect{

margin-left: 300px;

width: 295px;

}

.flag:before{

position: absolute;

content: " ";

height: 520px;

left: -15px;

top: -10px;

width: 15px;

border-radius: 1px solid white;

border-radius: 3px;

background-color: #000080;

box-shadow: -3px 3px 8px 0px rgba(0,0,0,0.4);

transform: rotate(0deg);

}

.box-1{

position: absolute;

top: 85.7%;

left: 19.5%;

width: 70px;

height: 27px;

background: #ff9933;

}

.box-2{

position: absolute;

top: 89.5%;

left: 17.5%;

width: 120px;

height: 27px;

background: #fff;

}

.box-3{

position: absolute;

top: 93.5%;

left: 16%;

height: 35px;

width: 160px;

background: #138808;

border-radius: 3px;

}

.flag-pattern{

position: absolute;

width: 100%;

height: 100%;

box-sizing: border-box;

-webkit-reflect:below 6px;

-webkit-gradient(linear,left top,left bottom,from(transparent),color-stop(70%,transparent),to(rgba(255,255,255,0.5)));

}

.flag-pattern.ind{

background-color: green;

background-image: linear-gradient(orange 33.3%, transparent 33.3%),

linear-gradient(white 66.6%, transparent 66.6%);

}

.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: flutter;

-webkit-animation-duration: 8s;

-webkit-animation-timing-function: cubic-bezier(0.16, 0.14, 0.82, 0.73);

-webkit-animation-iteration-count: infinite;

}

.circle{

position: absolute;

top: 38%;

left: 40%;

width: 36px;

height: 36px;

border:2px solid #231BBF;

border-radius: 50%;

animation:bar-animate 8s linear infinite;

}

.circle:after{

content: " ";

position: absolute;

top: 42%;

left: 42%;

width: 4px;

height: 4px;

border-radius: 50%;

background: #231BBF;

}

.bar{

position: absolute;

left: 16px;

display: inline-block;

height: 36px;

width: 2px;

background: #231BBF;

}

.bar:nth-child(1){

transform:rotate(15deg);

}

.bar:nth-child(2){

transform:rotate(30deg);

}

.bar:nth-child(3){

transform:rotate(45deg);

}

.bar:nth-child(4){

transform:rotate(60deg);

}

.bar:nth-child(5){

transform:rotate(75deg);

}

.bar:nth-child(6){

transform:rotate(90deg);

}

.bar:nth-child(7){

transform:rotate(105deg);

}

.bar:nth-child(8){

transform:rotate(120deg);

}

.bar:nth-child(9){

transform:rotate(135deg);

}

.bar:nth-child(10){

transform:rotate(150deg);

}

.bar:nth-child(11){

transform:rotate(165deg);

}

.bar:nth-child(12){

transform:rotate(180deg);

}

@keyframes bar-animate{

0%{

transform: rotate(0deg);

}

100%{

transform: rotate(360deg);

}

@-webkit-keyframes flutter{

0%{

background-position: -400% 0px;

}

30%{

background-position: -200% 5px;

}

70%{

background-position: 200% -5px;

}

100%{

background-position: 400% 0px;

}

@-webkit-keyframes wave{

0%{

box-shadow:4px 5px 5px 0 rgba(0,0,0,0.1);