Loading
.
.
.
We use cookies to personalize ads and analyze traffic. By continuing to browse the site, you agree to our Privacy Policy. You can also choose to reject cookies.
The content on this website, including videos and code examples, is for educational purposes only. All demonstrations and designs are fictional and created to illustrate coding techniques. Any resemblance to existing websites or brands is purely coincidental.
The creators and administrators of this website do not claim ownership or affiliation with any existing websites or companies. Users are encouraged to use the information responsibly for learning purposes. Liability for any misuse of the content provided is not accepted.
Below is the html code for this video.
index.html
<!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>Republic Day</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<!-- title block starts here -->
<div class="title-container">
<h1>Happy Republic Day</h1>
</div>
<!-- title block ends here -->
<!-- flag block starts here -->
<div class="flag-outer-container">
<div class="flag-container">
<div class="slice slice0">
<div class="slice slice1">
<div class="slice slice2">
<div class="slice slice3">
<div class="slice slice4">
<div class="slice slice5">
<div class="slice slice6">
<div class="slice slice7">
<div class="slice slice8">
<div class="slice slice9">
<div class="slice slice10">
<div class="slice slice11">
<div class="slice slice12">
<div class="slice slice13">
<div class="slice slice14">
<div class="slice slice15">
<div class="slice slice16">
<div class="slice slice17">
<div class="slice slice18">
<div class="slice slice19">
<div class="slice slice20">
<div class="slice slice21">
<div class="slice slice22">
<div class="slice slice23">
<div class="slice slice24">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- flag block ends here -->
<!-- grass block starts here -->
<div>
<img src="https://i.pinimg.com/originals/6b/2c/8e/6b2c8e8c2e08ee9604f002c6da595939.gif" height="100" width="300"
class="grass grass1" />
<img src="https://i.pinimg.com/originals/6b/2c/8e/6b2c8e8c2e08ee9604f002c6da595939.gif" height="100" width="300"
class="grass grass2" />
<img src="https://i.pinimg.com/originals/6b/2c/8e/6b2c8e8c2e08ee9604f002c6da595939.gif" height="100" width="300"
class="grass grass3" />
<img src="https://i.pinimg.com/originals/6b/2c/8e/6b2c8e8c2e08ee9604f002c6da595939.gif" height="100" width="300"
class="grass grass4" />
<img src="https://i.pinimg.com/originals/6b/2c/8e/6b2c8e8c2e08ee9604f002c6da595939.gif" height="100" width="300"
class="grass grass5" />
<img src="https://i.pinimg.com/originals/6b/2c/8e/6b2c8e8c2e08ee9604f002c6da595939.gif" height="100" width="300"
class="grass grass6" />
<img src="https://i.pinimg.com/originals/6b/2c/8e/6b2c8e8c2e08ee9604f002c6da595939.gif" height="100" width="300"
class="grass grass7" />
</div>
<!-- grass block ends here -->
</body>
</html>Below is the css code for this video.
style.css
@import url('https://fonts.googleapis.com/css2?family=Kumar+One&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: inherit;
}
html {
height: 100%;
box-sizing: border-box;
}
body {
height: 100%;
background-color: #87ceeb;
background-image: linear-gradient(to bottom, #87ceeb, #fff, #567d46);
overflow: hidden;
}
.title-container {
text-align: center;
margin-top: 1%;
}
.title-container h1 {
color: #fff;
font-size: 5rem;
font-weight: 700;
font-family: 'Kumar One', cursive;
background: linear-gradient(135deg, #ff9933, #fff, #000080, #fff, #138808);
background-size: auto auto;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
display: inline-block;
}
.flag-outer-container {
display: flex;
justify-content: center;
align-items: center;
perspective: 700px;
margin-top: 2.5%;
}
.flag-container {
position: relative;
width: 360px;
height: 180px;
transform: rotateY(20deg);
transform-style: preserve-3d;
background-image: url("https://flags.fmcdn.net/data/flags/w580/in.png");
background-size: 0;
background-position: -200% -200%;
}
.flag-container::before {
content: "";
display: block;
position: absolute;
width: 2.5%;
height: 250%;
background: silver;
left: 7px;
}
.slice {
position: absolute;
transform-style: preserve-3d;
left: 14px;
width: 15px;
height: 100%;
transform-origin: 0 0;
background-repeat: no-repeat;
background-size: 360px 100%;
transform: translateZ(0.0001px) rotateY(14deg);
background-image: inherit;
}
.slice1 {
background-position-x: -15px;
animation: flagAnim 1s 0.08s ease-in-out infinite alternate;
}
.slice2 {
background-position-x: -30px;
animation: flagAnim 1s 0.16s ease-in-out infinite alternate;
}
.slice3 {
background-position-x: -45px;
animation: flagAnim 1s 0.24s ease-in-out infinite alternate;
}
.slice4 {
background-position-x: -60px;
animation: flagAnim 1s 0.32s ease-in-out infinite alternate;
}
.slice5 {
background-position-x: -75px;
animation: flagAnim 1s 0.40s ease-in-out infinite alternate;
}
.slice6 {
background-position-x: -90px;
animation: flagAnim 1s 0.48s ease-in-out infinite alternate;
}
.slice7 {
background-position-x: -105px;
animation: flagAnim 1s 0.56s ease-in-out infinite alternate;
}
.slice8 {
background-position-x: -120px;
animation: flagAnim 1s 0.64s ease-in-out infinite alternate;
}
.slice9 {
background-position-x: -135px;
animation: flagAnim 1s 0.72s ease-in-out infinite alternate;
}
.slice10 {
background-position-x: -150px;
animation: flagAnim 1s 0.80s ease-in-out infinite alternate;
}
.slice11 {
background-position-x: -165px;
animation: flagAnim 1s 0.88s ease-in-out infinite alternate;
}
.slice12 {
background-position-x: -180px;
animation: flagAnim 1s 0.96s ease-in-out infinite alternate;
}
.slice13 {
background-position-x: -195px;
animation: flagAnim 1s 1.04s ease-in-out infinite alternate;
}
.slice14 {
background-position-x: -210px;
animation: flagAnim 1s 1.12s ease-in-out infinite alternate;
}
.slice15 {
background-position-x: -225px;
animation: flagAnim 1s 1.20s ease-in-out infinite alternate;
}
.slice16 {
background-position-x: -240px;
animation: flagAnim 1s 1.28s ease-in-out infinite alternate;
}
.slice17 {
background-position-x: -255px;
animation: flagAnim 1s 1.36s ease-in-out infinite alternate;
}
.slice18 {
background-position-x: -270px;
animation: flagAnim 1s 1.44s ease-in-out infinite alternate;
}
.slice19 {
background-position-x: -285px;
animation: flagAnim 1s 1.52s ease-in-out infinite alternate;
}
.slice20 {
background-position-x: -300px;
animation: flagAnim 1s 1.60s ease-in-out infinite alternate;
}
.slice21 {
background-position-x: -315px;
animation: flagAnim 1s 1.68s ease-in-out infinite alternate;
}
.slice22 {
background-position-x: -330px;
animation: flagAnim 1s 1.76s ease-in-out infinite alternate;
}
.slice23 {
background-position-x: -345px;
animation: flagAnim 1s 1.84s ease-in-out infinite alternate;
}
.slice24 {
background-position-x: -360px;
animation: flagAnim 1s 1.92s ease-in-out infinite alternate;
}
@keyframes flagAnim {
to {
transform: translateZ(0.0001px) rotateY(-14deg);
}
}
.grass {
position: absolute;
bottom: 0;
}
.grass1 {
left: 0px;
z-index: 10;
}
.grass2 {
left: 190px;
z-index: 1;
}
.grass3 {
left: 380px;
z-index: 10;
}
.grass4 {
left: 570px;
right: 570px;
z-index: 1;
}
.grass5 {
right: 380px;
z-index: 10;
}
.grass6 {
right: 190px;
z-index: 1;
}
.grass7 {
right: 0;
z-index: 10;
}Thanks for visiting