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