Telegram Group Join Now

Raksha Bandhan Wishes Using Html Css Code

In this today article, we create a page that wishes Raksha Bandhan. We create this page using html and css and for some heavy effect, we use JavaScript code too in this project.

50+ Frontend Project With Code

So that’s all plan for Rakhi Project. Let’s write Html code first for creating a basic structure for Rakhi Project.

Html 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 u 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>
</body>

</html>

In this Html code, we use Html boilerplate code then link css file and JavaScript file so later just write css and JavaScript code for Rakhsabandan.

Then we use some div for completely styling animation between Rakhi’s wishes letter(I understand this animation In the final output). And at the end of the Html code, we create rainBg to create a rain animation on Rakhi wishes project using Html css, and JavaScript.

So below 👇I share the output with only Html code.

Html Output

Let’s Write Css Code.

Css Code

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "poppins", sans-serif;
}
h3 {
  font-size: 1.5em;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-weight: 300;
  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: 5em;
  color: #e8505b;
  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%;
  }
}

In this css code, we use basic css styling for text and Rakhi wishes animation. We use a keyframe for animation and in Rakhi letters there’s animation rotate Rakhi animation.

So we also make this project using Html and Css but we use JavaScript to make our project more Beautiful😍.

So let’s see a screenshot of css output and then we see the final output with complete animation.

Css Output

Javascript Code

let colors = ['#318fb5', '#b52b65', '#2ecc71', '#f1c40f', '#e67e22', '#c0392b', '#9b59b6'];

setInterval(() => {
    let i = document.createElement('i');
    i.style.left = Math.floor(Math.random() * window.innerWidth) + 'px';
    i.style.background = colors[Math.floor(Math.random() * colors.length)]
    document.querySelector('.rainBg').appendChild(i);
}, 500);

setInterval(() => {
    document.querySelector('.rainBg').firstChild.remove();
}, 6000);

This is just a small code of how to create rain in our project. We use some hex color code and use a JavaScript random method to different color rain.

And then we write code for timing animation and remove our rain drop. Here you 👇 can see the final output of how rain drops on Rakhi’s wishes and in the text of Rakhi best wishes there is also animation so hope you create this project.

And Form My Side

Happy Rakshabandhan all my brother sister💝

Final Output

Hope you like this project, we create your own and use this project in any project as a part project like the reviews section, and a contact form. If you need any more project-related frontend. Visit our homepage and you get 100+ projects💝.

Quiz Project Using Javascript

if you have any confusion Comment below or you can contact us by filling out our contact us form from the home section. 🤞🎉

Code By – Umesh Balamurugan

written by – Codewithrandom

Telegram Group Join Now

Raksha Bandhan Wishes Using Html Css Code

Html Code

Css Code

Javascript Code

Final Output

Telegram Group Join Now

Leave a Comment Cancel reply