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 Father's Day</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1 class="wish"><span>Happy</span><span>Father's</span><span>Day</span></h1>
<div class="container">
<div class="dad">
<div class="left arm"></div>
<div class="right arm"></div>
<div class="body">
<div class="ear right"></div>
<div class="ear left"></div>
<div class="eye right"></div>
<div class="eye left"></div>
<div class="pants"></div>
</div>
</div>
<div class="child">
<div class="left arm"></div>
<div class="right arm"></div>
<div class="body">
<div class="ear right"></div>
<div class="ear left"></div>
<div class="eye right"></div>
<div class="eye left"></div>
<div class="pants"></div>
</div>
</div>
</div>
<p class="quote">Father's Day is for all men who love with a father's heart.</p>
</body>
</html>Below is the css code for this video.
style.css
body {
animation: bgAnim 6s linear infinite;
}
@keyframes bgAnim {
0%, 100% {
background-color: #ddaadd;
}
25% {
background-color: #daddad;
}
50% {
background-color: #daaaad;
}
75% {
background-color: #daddee;
}
}
.wish {
position: absolute;
top: 30%;
left: 30%;
transform: translate(-30%, -30%);
font-family: monospace;
font-size: 60px;
}
.wish span {
display: block;
animation: wishAnim 3s infinite;
}
@keyframes wishAnim {
0%, 100% {
text-shadow: 0 0 3px #000000;
color: #ffffff;
}
25%, 75% {
text-shadow: 0 0 12px #000000;
}
50% {
text-shadow: 0 0 20px #000000;
}
}
.container, .body {
position: relative;
}
.container {
width: 0px;
margin: 30vh auto;
}
.child .pants:before, .child .body:before, .child .body:after, .dad .pants:after, .dad .pants:before,
.dad .body .eye:before, .dad .body .eye:after, .dad .body:before, .dad .body:after, .ear {
content: "";
display: block;
position: absolute;
}
.arm {
position: absolute;
border-radius: 50px;
}
.eye {
position: absolute;
border-radius: 50%;
display: block;
}
.ear {
border-radius: 50%;
}
.pants {
position: absolute;
bottom: 0;
z-index: 50;
}
.body, .pants {
border-radius: 50px 50px 0 0;
}
.dad {
position: relative;
}
.dad .body {
width: 100px;
height: 200px;
background-color: #c68642;
animation: tipAnim 1.25s cubic-bezier(1, 0.35, 0, 2) infinite;
}
.dad .body:after {
width: 30px;
height: 10px;
top: 70px;
left: 40px;
border: 3px solid transparent;
border-radius: 50%;
border-bottom: 3px solid #2e1e0e;
}
.dad .body:before {
width: 110px;
height: 10px;
z-index: 100;
bottom: 0;
background-color: #070502;
}
.dad .body .ear {
width: 20px;
height: 20px;
background-color: #c68642;
}
.dad .body .ear.left {
top: 60px;
left: -10px;
box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.25);
}
.dad .body .ear.right {
top: 60px;
right: -10px;
}
.dad .body .eye {
width: 20px;
height: 20px;
background-color: #ffffff;
top: 50px;
border-top: 2px solid #7c5226;
animation: blinkAnim 1.25s infinite;
}
.dad .body .eye.left {
left: 30px;
}
.dad .body .eye.right {
left: 70px;
}
.dad .body .eye:after {
width: 10px;
height: 10px;
right: 2px;
background: #55381a;
animation: eyeAnim 1.25s infinite;
border-radius: 50%;
}
.dad .body .eye:before {
width: 20px;
height: 20px;
top: -15px;
left: -15px;
border-radius: 50%;
border: 3px solid transparent;
border-top: 3px solid #55381a;
}
.dad .pants {
width: 100px;
height: 100px;
background-color: #a46c31;
}
.dad .pants:before {
width: 100px;
height: 45px;
background-color: #ffffff;
}
.dad .pants:after {
width: 3px;
height: 30px;
bottom: 0;
left: 60px;
background-color: #070502;
}
.dad .arm {
width: 30px;
height: 60px;
background-color: #c68642;
animation: rightArmSwingAnim 1.25s ease-out infinite;
transform-origin: 0 100%;
}
.dad .arm.right {
left: 65px;
top: 35px;
}
.dad .arm.left {
left: 40px;
top: 45px;
z-index: 100;
box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.25);
}
.child {
position: absolute;
z-index: 51;
left: 100px;
animation: babyTossAnim 1.25s ease-in-out infinite;
}
.child .body {
width: 50px;
height: 100px;
background-color: #f1c27d;
}
.child .body:after {
width: 0;
height: 0;
left: 15px;
border-style: solid;
animation: mouthAnim 1.25s ease-in-out infinite;
}
.child .body:before {
width: 56px;
height: 3px;
z-index: 100;
bottom: 0;
left: -3px;
background-color: #070502;
}
.child .body .eye {
width: 10px;
height: 10px;
background: transparent;
border: 2px solid transparent;
border-top: 2px solid #c07b15;
top: 25px;
z-index: 1;
}
.child .body .eye.right {
left: 5px;
}
.child .body .eye.left {
left: 25px;
}
.child .body .ear {
width: 10px;
height: 10px;
top: 30px;
background-color: #f1c27d;
}
.child .body .ear.left {
left: -5px;
}
.child .body .ear.right {
right: -5px;
}
.child .pants {
width: 50px;
height: 50px;
background-color: #ecac4f;
}
.child .pants:before {
width: 50px;
height: 25px;
background-color: #ffffff;
}
.child .arm {
width: 20px;
height: 40px;
top: 35px;
background-color: #f1c27d;
}
.child .arm.right {
left: -5px;
animation: rightArmSwingAnim 1.25s cubic-bezier(1, 0.35, 0, 2) infinite;
}
.child .arm.left {
left: 35px;
animation: leftArmSwingAnim 1.25s cubic-bezier(1, 0.35, 0, 2) infinite;
}
@keyframes rightArmSwingAnim {
0%, 10%, 90%, 100% {
transform: rotate(80deg);
}
40%, 60% {
transform: rotate(20deg);
}
}
@keyframes leftArmSwingAnim {
0%, 10%, 90%, 100% {
transform: rotate(-80deg);
}
40%, 60% {
transform: rotate(-20deg);
}
}
@keyframes babyTossAnim {
0%, 90%, 100% {
top: 20%;
transform: rotate(20deg);
}
40%, 50% {
top: -60%;
transform: rotate(0deg);
}
}
@keyframes tipAnim {
0%, 90%, 100% {
transform: rotate(10deg);
}
40%, 50% {
transform: rotate(0deg);
}
}
@keyframes blinkAnim {
0%, 2%, 60%, 62%, 100% {
transform: scaleX(1) scaleY(1);
}
1%, 61% {
transform: scaleX(1.3) scaleY(0.1);
}
}
@keyframes eyeAnim {
0%, 100% {
top: 6px;
}
40%, 50% {
top: 2px;
}
}
@keyframes mouthAnim {
0%, 100% {
border-radius: 0;
border-width: 8px 5px 5px 5px;
border-color: #ffffff transparent transparent transparent;
top: 35%;
}
40%, 50% {
width: 10px;
height: 5px;
border-radius: 50%;
border-width: 2px;
border-color: transparent transparent #ffffff transparent;
top: 30px;
}
}
.quote {
position: absolute;
bottom: 5%;
width: 100%;
text-align: center;
font-family: cursive;
font-size: 30px;
color: #ffffff;
letter-spacing: 5px;
animation: quoteAnim 0.5s infinite;
}
@keyframes quoteAnim {
0% {
text-shadow: 0 0 6px #000000;
}
100% {
text-shadow: 0 0 0px #000000;
}
}Thanks for visiting