Wish U All Guys Happy Makar Sankranti With Kite by Coding 😝😅😅😂
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kite</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>
Happy Makar Sankranti
</h1>
<div class="kite">
<div class="tail">
</div>
</div>
</body>
</html>
CSS
@import
url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@5 00&display=swap');
body{
margin: 0;
padding: 0;
background: url(https://images.pexels.com/photos/158827/field-corn-air-frisch-158827.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260);
font-family: 'Josefin Sans', sans-serif;
}
h1{
position: relative;
left: 40%;
top: 10%;
color: yellow;
font-size: 4em;
border: 2px dashed rgb(32, 121, 255);
overflow: hidden;
width: 50vw;
border-radius: 5px;
text-align: center;
}
.kite {
position: absolute;
width: 100px;
height: 100px;
background: rgb(255,0,0);
transform: rotate(45deg);
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
animation: flying 3s ease-in-out infinite;
border: 4px solid rgb(255, 255, 0);
}
.kite:before, .kite:after {
content: '';
position: absolute;
}
.kite:before {
top: 50%;
left: -20%;
width: 141%;
border-top: 1px solid rgb(255,255,0);
transform: rotate(45deg);
}
.kite:after {
top: 0;
left: 0;
width: 100px;
height: 100px;
border-top-left-radius: 100%;
border-left: 3px solid rgb(255, 100, 29);
border-top: 2.5px solid rgb(255, 100, 29);
}
.tail {
position: relative;
top: 95px;
left: 80px;
width: 0;
height: 0;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
border-bottom: 30px solid rgb(255, 255, 0);
transform: rotate(-45deg);
overflow: hidden;
}
@keyframes flying {
0% , 100% {
top: 0%;
left: 0%;
}
20% {
top: -30%;
left: 5%;
}
40% {
top: -15%;
left: 20%;
}
60% {
top: -10%;
left: 5%;
}
80%{
top: -20%;
left: 15%;
}
}
OUTPUT SCREEN
Posts
42 Comments
Happy Makar Sankranti
ReplyDeleteHappy Makar Sankranti
ReplyDeleteAwesome
ReplyDeleteSuper
ReplyDeleteWonderful
ReplyDeleteFantastic
ReplyDeleteWonderful
ReplyDeleteHappy Makar Sankranti
ReplyDeleteExcellent
ReplyDeleteHappy Makar Sankranti
ReplyDeleteMind Blowing
ReplyDeleteHappy Makar Sankranti
ReplyDeleteBrilliant
ReplyDeleteWonderful
ReplyDeleteSuperb
ReplyDeleteExcellent
ReplyDeleteSuperb Work
ReplyDeleteHappy Makar Sankranti
ReplyDeleteHappy Makar Sankranti
ReplyDeleteInteresting
ReplyDeleteHappy Makar Sankranti
ReplyDeleteHappy Makar Sankranti
ReplyDeleteWonderful
ReplyDeleteItereting
ReplyDeleteHappy Makar Sankranti
ReplyDeleteWonderful
ReplyDeleteAwesome
ReplyDeleteHappy Makar Sankranti
Happy Makar sankranti 😍
DeleteWonderful✨😍
ReplyDeleteVery Interesting Work
ReplyDeleteWonderful & Fantastic job
ReplyDeleteAwesome & Excellent Work Done
ReplyDeletePerfect 👌
ReplyDeleteWonderful & Very nice
ReplyDeleteAwesome Creation
ReplyDeleteBrilliant idea
ReplyDeleteHappy Makar Sankranti
ReplyDeleteFantastic & Excellent job
ReplyDeleteVery nice Work
ReplyDeleteHappy Makar Sankranti
ReplyDeleteWow Very interesting & Excellent
ReplyDeleteKallu
ReplyDeleteVery nice