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>Happy Children's Day</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Happy Children's Day</h1>
<div class="container">
<div class="head"></div>
<div class="hair"></div>
<div class="eye eye-left"></div>
<div class="eye eye-right"></div>
<div class="ear ear-left"></div>
<div class="ear ear-right"></div>
<div class="cheek cheek-left"></div>
<div class="cheek cheek-right"></div>
<div class="pacifier">
<div class="pacifier-side pacifier-side-left"></div>
<div class="pacifier-side pacifier-side-right"></div>
<div class="pacifier-middle"></div>
</div>
</div>
<q>
Children are like buds in a garden and should be carefully and lovingly nurtured, as they are the future of the
nation and the citizens of tomorrow.
</q>
</body>
</html>Below is the css code for this video.
style.css
@import url('https://fonts.googleapis.com/css2?family=Bangers&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
height: 100vh;
width: 100%;
background: radial-gradient(#9bddff 15%, transparent 0), radial-gradient(#9bddff 15%, transparent 0), #ff9999;
background-size: 50px 50px;
background-position: 0 0, 25px 25px;
overflow: hidden;
}
h1 {
position: absolute;
top: 10%;
transform: translateY(-10%);
width: 100%;
text-align: center;
font-family: 'Bangers', cursive;
color: #f0f8ff;
font-size: 60px;
letter-spacing: 15px;
z-index: 2;
text-shadow: 1px 1px #e0e7ee, 2px 2px #d0d6dd, 3px 3px #c0c5cc, 4px 4px #b0b4bb, 5px 5px #a0a3aa, 6px 6px #909299,
7px 7px #808188, 8px 8px #707077, 9px 9px #606066, 10px 10px #505055, 10px 10px 30px #404044;
animation: titleAnim 5s linear infinite;
}
@keyframes titleAnim {
0%, 100% {
transform: rotate(-15deg);
}
23%, 27%, 73%, 77% {
transform: rotate(0deg);
}
50% {
transform: rotate(15deg);
}
}
.container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 300px;
width: 300px;
border-radius: 50%;
background-color: #addfad;
}
.head {
position: absolute;
top: 26%;
left: 20%;
height: 50%;
width: 60%;
background-color: #fde9da;
border-radius: 50%;
box-shadow: 0 3px 20px #177871;
}
.eye {
position: absolute;
top: 53%;
height: 5.5%;
width: 5.5%;
border-radius: 50%;
background-color: #333333;
animation: blinkingEye 2s alternate infinite;
}
.eye::after {
content: "";
position: absolute;
top: 20%;
right: 20%;
height: 25%;
width: 25%;
border-radius: 50%;
background-color: #ffffff;
}
@keyframes blinkingEye {
0%, 95% {
transform: scaleY(1);
}
100% {
transform: scaleY(0.1);
}
}
.eye-left {
left: 35%;
}
.eye-right {
right: 35%;
}
.ear {
position: absolute;
top: 48%;
height: 10%;
width: 8%;
border-radius: 50%;
background-color: #fde9da;
}
.ear-left {
left: 16%;
box-shadow: -4px 0 4px rgba(23, 120, 113, 0.5);
}
.ear-right {
right: 16%;
box-shadow: 4px 0 4px rgba(23, 120, 113, 0.5);
}
.cheek {
position: absolute;
top: 60%;
height: 4.5%;
width: 5%;
border-radius: 50%;
background-color: #ffb7bf;
}
.cheek-left {
left: 30%;
}
.cheek-right {
right: 30%;
}
.hair {
position: absolute;
top: 25.5%;
left: 44%;
height: 10%;
width: 10%;
border-radius: 50%;
border-left: 10px solid #663322;
border-bottom: 5px solid #663322;
background-color: transparent;
}
.pacifier {
position: absolute;
top: 62%;
left: 46.1%;
height: 8.5%;
width: 8.5%;
animation: pacifierAnim 0.25s linear alternate infinite;
}
.pacifier-middle {
position: absolute;
height: 100%;
width: 100%;
border-radius: 50%;
background: radial-gradient(#e44d2e, #e34234);
}
.pacifier-side {
position: absolute;
top: -5%;
height: 110%;
width: 105%;
border: 8px solid #e34234;
border-radius: 50%;
opacity: 0.75;
}
.pacifier-side-left {
right: 60%;
}
.pacifier-side-right {
left: 60%;
}
@keyframes pacifierAnim {
to {
transform: translateY(-1px) scale(0.95);
}
}
q {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
background-color: #222222;
color: #f0f8ff;
padding: 2.5%;
text-align: center;
font-family: serif;
font-size: 24px;
animation: quoteAnim 5s ease infinite;
}
@keyframes quoteAnim {
0%, 100% {
color: #f0f8ff;
}
25%, 75% {
color: #00bfff;
}
50% {
color: #007fff;
}
}Thanks for visiting