Diwali, the Festival of Lights, is one of the most celebrated occasions in India and around the world. It’s a time for joy, celebration, and spreading happiness. In this blog post, we’ll explore a simple yet beautiful HTML and CSS design to wish everyone a “Happy Diwali 2024”. We’ll also include a bit of JavaScript to enhance the interactivity.
Overview of the Design
The design will feature vibrant colors, traditional Diwali elements like diyas (lamps), and festive typography. We will create a welcoming and cheerful layout that captures the essence of this joyous occasion.
HTML
<html lang="en"> <head> <title>Happy Diwali Animated Background TechyTechs</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="container"></div> <script src="script.js"></script> </body> </html>
CSS
Next, we will add some CSS to style our page. This includes colors, fonts, and positioning.
@import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
.container
{
position: relative;
background: #111;
width: 100vw;
height: 100vh;
display: flex;
flex-wrap: wrap;
overflow: hidden;
gap: 0 10px;
}
.text-box
{
position: relative;
font-weight: 700;
text-transform: uppercase;
font-size: 1.33em;
color: #222;
}
.text-box:nth-child(odd):before
{
content: '• Happy Diwali •';
}
.text-box:nth-child(even):before
{
content: '2024';
filter: hue-rotate(180deg);
}
.text-box.animation
{
color: #0f0;
text-shadow: 0 0 5px #0f0,
0 0 20px #0f0,
0 0 50px #0f0;
}
JavaScript
Finally, we’ll add a bit of JavaScript to make the celebration interactive. When the button is clicked, it will display a celebratory message.
document.addEventListener("DOMContentLoaded", function() {
for(let i = 1; i <= 300; i++){
let box = document.createElement('div');
box.classList.add('text-box');
box.style.filter = `hue-rotate(${i*15}deg)`;
document.querySelector('.container').appendChild(box);
}
setInterval(BoxAnimation,100)
});
const BoxAnimation=()=>{
let boxes = document.querySelectorAll('.text-box');
let num = Math.floor(Math.random()*boxes.length);
boxes[num].classList.toggle('animation');
}
Conclusion
This simple HTML, CSS, and JavaScript design captures the spirit of Diwali 2024. You can further customize the colors, fonts, and animations to make it more unique. Share this festive design with friends and family to spread the joy of Diwali!
Happy Diwali to you all! May your days be filled with light and happiness.
