ADVERTISEMENT

Raksha Bandhan Wishes Using Html Css Code

Telegram Group Join Now

ADVERTISEMENT

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.

ADVERTISEMENT

ADVERTISEMENT

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.

ADVERTISEMENT

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.

ADVERTISEMENT

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

ADVERTISEMENT

Raksha Bandhan Wishes Html Css

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.

ADVERTISEMENT

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

ADVERTISEMENT

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

Css Output

Raksha Bandhan Wishes

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.

ADVERTISEMENT

And Form My Side

ADVERTISEMENT

Happy Rakshabandhan all my brother sister💝

ADVERTISEMENT

Final Output

Raksha Bandhan Wishes Javascript

ADVERTISEMENT

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💝.

ADVERTISEMENT

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

ADVERTISEMENT

Telegram Group Join Now

Share on:

Leave a Comment

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT