Wish Your Sister and friends Family HAPPY Raksha Bandhan Using Coding in HTML || CSS
WHY AND WHEN GOING TO CELLEBRATE
In 2023, Raksha Bandhan is observed on August 30th, but it can also be celebrated on August 31st due to Bhadra Kaal. This special day is about the strong bond between siblings, where sisters tie Rakhi threads on their brothers' wrists, symbolizing love and protection.
Using HTML & CSS
SAVE file name index.html (as your wish you can give)
Code:
<!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>Raksha Bandhan Rakhi Design</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h3>Wish You A happy </h3>
<h1>R
<div class="flower">
<div class="inner-most-part"></div>
<div class="middle-part" style="--t: 1; --l:0"></div>
<div class="middle-part" style="--t: 0; --l:-1"></div>
<div class="middle-part" style="--t: -1; --l:0"></div>
<div class="middle-part" style="--t: 0; --l:1"></div>
</div>
ksh
<div class="flower">
<div class="inner-most-part"></div>
<div class="middle-part" style="--t: 1; --l:0"></div>
<div class="middle-part" style="--t: 0; --l:-1"></div>
<div class="middle-part" style="--t: -1; --l:0"></div>
<div class="middle-part" style="--t: 0; --l:1"></div>
</div><br />
B
<div class="flower">
<div class="inner-most-part"></div>
<div class="middle-part" style="--t: 1; --l:0"></div>
<div class="middle-part" style="--t: 0; --l:-1"></div>
<div class="middle-part" style="--t: -1; --l:0"></div>
<div class="middle-part" style="--t: 0; --l:1"></div>
</div>ndh
<div class="flower">
<div class="inner-most-part"></div>
<div class="middle-part" style="--t: 1; --l:0"></div>
<div class="middle-part" style="--t: 0; --l:-1"></div>
<div class="middle-part" style="--t: -1; --l:0"></div>
<div class="middle-part" style="--t: 0; --l:1"></div>
</div>n
</h1>
<div class="rainBg"></div>
<!-- JAVASCRIPT -->
<script src="app.js"></script>
<style >
body {
background-image:url(https://www.fabhotels.com/blog/wp-content/uploads/2019/03/Raksha-Bandhan600x400.jpg);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "poppins", sans-serif;
}
h3 {
font-size: 2em;
color: deepskyblue;
text-transform: uppercase;
letter-spacing: 2px;
font-weight: 800;
position: absolute;
top: 30%;
left: 50%;
transform: translate(-50%, -50%);
}
h1 {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
line-height: 100px;
font-size: 6em;
color: red;
width: 100%;
}
.flower {
display: inline-block;
position: relative;
width: 80px;
height: 80px;
animation: flower 5s linear infinite;
}
@keyframes flower {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.inner-most-part {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 40px;
height: 40px;
border-radius: 50%;
background: #f1c40f;
z-index: 4;
}
.middle-part {
width: 40px;
height: 40px;
position: absolute;
border-radius: 50%;
background: #3498db;
top: calc(50% - var(--t) * 20px);
left: calc(50% - var(--l) * 20px);
transform: translate(-50%, -50%);
}
.rainBg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
overflow: hidden;
z-index: -1;
}
.rainBg i {
position: absolute;
top: -7%;
width: 10px;
height: 40px;
border-radius: 10px;
z-index: 1;
animation: animate 6s linear;
}
@keyframes animate {
0% {
top: -7%;
}
100% {
top: 100%;
}
}
</style>
</body>
</ht
Comments
Post a Comment
Hello Coders If You Have any Doughts Contact Us