Hello fellow developers !!!
To immerse yourself in the celebration, simply copy the following HTML and CSS code into your favorite code editor and witness the festive spirit come to life on your screen.
Preview
HTML Code Structure :-
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Makar Sankranti</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="background-wrap">
<div class="x1">
<div class="cloud"></div>
</div>
<div class="x2">
<div class="cloud"></div>
</div>
<div class="x3">
<div class="cloud"></div>
</div>
<div class="x4">
<div class="cloud"></div>
</div>
<div class="x5">
<div class="cloud"></div>
</div>
</div>
<div class="kite">
<div class="tail"></div>
</div>
<div class="kite1">
<div class="tail"></div>
</div>
<div class="wish">
<h1 class="heading">happy makar sankranti</h1>
</div>
<div id="footer">
<p>Created with ❤️ by LOADS OF LOGIC</p>
</div>
</body>
</html>
CSS Code Structure :-
style.css
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,500,600|Muli:400,600,700&display=swap');
* {
margin: 0;
padding: 0;
}
body {
background: #87cefa;
}
.kite {
position: absolute;
width: 100px;
height: 100px;
background: #ff0;
transform: rotate(45deg);
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
animation: flying 5s ease-in-out infinite;
}
.kite:before,
.kite:after {
content: '';
position: absolute;
}
.kite:before {
top: 50%;
left: -20%;
width: 141%;
border-top: 1px solid #000;
transform: rotate(45deg);
}
.kite:after {
top: 0;
left: 0;
width: 100px;
height: 100px;
border-top-left-radius: 100%;
border-left: 1px solid #000;
border-top: 1px solid #000;
}
.kite1 {
position: absolute;
width: 100px;
height: 100px;
background: #FF5722;
transform: rotate(45deg);
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
animation: flying1 5s ease-in-out infinite;
}
.kite1:before,
.kite1:after {
content: '';
position: absolute;
}
.kite1:before {
top: 50%;
left: -20%;
width: 141%;
border-top: 1px solid #fff;
transform: rotate(45deg);
}
.kite1:after {
top: 0;
left: 0;
width: 100px;
height: 100px;
border-top-left-radius: 100%;
border-left: 1px solid #fff;
border-top: 1px solid #fff;
}
.tail {
position: relative;
top: 95px;
left: 85px;
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 20px solid black;
transform: rotate(-45deg);
overflow: hidden;
background: transparent;
}
@keyframes flying {
0%,
100% {
top: 0%;
left: 0%;
}
25% {
top: -20%;
left: 5%;
}
50% {
top: -15%;
left: 20%;
}
75% {
top: -10%;
left: 5%;
}
}
@keyframes flying1 {
0%,
100% {
top: -30%;
left: -30%;
}
25% {
top: -20%;
left: 5%;
}
50% {
top: -25%;
left: 20%;
}
75% {
top: -10%;
left: 15%;
}
}
.wish {
position: absolute;
right: 0;
bottom: 50px;
z-index: -1;
background: transparent;
width: 100%;
}
.heading {
color: #252525;
text-align: center;
letter-spacing: 5px;
font-family: 'Montserrat', sans-serif;
font-weight: 600 !important;
letter-spacing: 1px;
text-transform: uppercase;
width: 100%;
font-size: 60px;
text-shadow:
0 0 7px #fff,
0 0 10px #fff,
0 0 21px #fff,
0 0 42px #87cefa,
0 0 82px #87cefa,
0 0 92px #87cefa,
0 0 102px #87cefa,
0 0 151px #87cefa;
}
#background-wrap {
bottom: 0;
left: 0;
padding-top: 50px;
position: fixed;
right: 0;
top: 0;
z-index: -2;
}
/* KEYFRAMES */
@-webkit-keyframes animateCloud {
0% {
margin-left: -1000px;
}
100% {
margin-left: 100%;
}
}
@-moz-keyframes animateCloud {
0% {
margin-left: -1000px;
}
100% {
margin-left: 100%;
}
}
@keyframes animateCloud {
0% {
margin-left: -1000px;
}
100% {
margin-left: 100%;
}
}
/* ANIMATIONS */
.x1 {
-webkit-animation: animateCloud 35s linear infinite;
-moz-animation: animateCloud 35s linear infinite;
animation: animateCloud 35s linear infinite;
-webkit-transform: scale(0.65);
-moz-transform: scale(0.65);
transform: scale(0.65);
}
.x2 {
-webkit-animation: animateCloud 20s linear infinite;
-moz-animation: animateCloud 20s linear infinite;
animation: animateCloud 20s linear infinite;
-webkit-transform: scale(0.3);
-moz-transform: scale(0.3);
transform: scale(0.3);
}
.x3 {
-webkit-animation: animateCloud 30s linear infinite;
-moz-animation: animateCloud 30s linear infinite;
animation: animateCloud 30s linear infinite;
-webkit-transform: scale(0.5);
-moz-transform: scale(0.5);
transform: scale(0.5);
}
.x4 {
-webkit-animation: animateCloud 18s linear infinite;
-moz-animation: animateCloud 18s linear infinite;
animation: animateCloud 18s linear infinite;
-webkit-transform: scale(0.4);
-moz-transform: scale(0.4);
transform: scale(0.4);
}
.x5 {
-webkit-animation: animateCloud 25s linear infinite;
-moz-animation: animateCloud 25s linear infinite;
animation: animateCloud 25s linear infinite;
-webkit-transform: scale(0.55);
-moz-transform: scale(0.55);
transform: scale(0.55);
}
/* OBJECTS */
.cloud {
background: #fff;
background: -moz-linear-gradient(top, #fff 5%, #f1f1f1 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(5%, #fff), color-stop(100%, #f1f1f1));
background: -webkit-linear-gradient(top, #fff 5%, #f1f1f1 100%);
background: -o-linear-gradient(top, #fff 5%, #f1f1f1 100%);
background: -ms-linear-gradient(top, #fff 5%, #f1f1f1 100%);
background: linear-gradient(top, #fff 5%, #f1f1f1 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff', endColorstr='#f1f1f1', GradientType=0);
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
-webkit-box-shadow: 0 8px 5px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 8px 5px rgba(0, 0, 0, 0.1);
box-shadow: 0 8px 5px rgba(0, 0, 0, 0.1);
height: 120px;
position: relative;
width: 350px;
}
.cloud:after,
.cloud:before {
background: #fff;
content: '';
position: absolute;
z-indeX: -1;
}
.cloud:after {
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
height: 100px;
left: 50px;
top: -50px;
width: 100px;
}
.cloud:before {
-webkit-border-radius: 200px;
-moz-border-radius: 200px;
border-radius: 200px;
width: 180px;
height: 180px;
right: 50px;
top: -90px;
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
padding: 10px;
background-color: #3e4095;
color: #fff;
}May your life be filled with the colors of joy, the warmth of happiness, and the sweetness of success. On this auspicious occasion, let's soar high like kites in the sky, embracing the spirit of unity and togetherness.
Happy Makar Sankranti to you and your loved ones!
Follow Us