🎉 Create a Stunning "Happy Diwali" Web Page with HTML and CSS
Want to surprise your friends and family with a custom Diwali greeting page? With a few lines of HTML and CSS, you can create a beautiful "Happy Diwali" webpage that glows with the festival's joy!
Why Use HTML and CSS for Diwali Greetings?
Using HTML and CSS allows you to design a simple yet eye-catching webpage without needing advanced tools or complex coding. This is perfect for anyone wanting to share their coding skills in a festive way!
Step-by-Step Diwali Greeting Page Code
Here's the complete HTML and CSS code to create your own Diwali greeting page. Simply copy and paste this code into your HTML file, save it, and open it in a web browser to see the magic.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Happy Diwali</title>
<style>
body {
background-color: #141414;
color: #fff;
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
overflow: hidden;
}
h1 {
font-size: 3em;
text-align: center;
animation: glow 1.5s ease-in-out infinite alternate;
}
@keyframes glow {
from {
text-shadow: 0 0 10px #f3c623, 0 0 20px #f3c623, 0 0 30px #f3c623;
}
to {
text-shadow: 0 0 20px #ffe564, 0 0 30px #ffe564, 0 0 40px #ffe564;
}
}
.lights {
display: flex;
gap: 10px;
margin-top: 20px;
}
.light {
width: 15px;
height: 15px;
border-radius: 50%;
background-color: #f3c623;
animation: twinkle 1.5s infinite;
}
.light:nth-child(odd) {
animation-delay: 0.5s;
}
@keyframes twinkle {
0%, 100% {
opacity: 0.8;
transform: scale(1);
}
50% {
opacity: 1;
transform: scale(1.2);
}
}
</style>
</head>
<body>
<h1>Happy Diwali! 🪔</h1>
<div class="lights">
<div class="light"></div>
<div class="light"></div>
<div class="light"></div>
<div class="light"></div>
<div class="light"></div>
<div class="light"></div>
<div class="light"></div>
<div class="light"></div>
</div>
</body>
</html>
How to Use This Code
- Copy and Paste: Copy the code above and paste it into a new HTML file.
- Save the File: Save it as
diwali_greeting.htmlor any name you like. - Open in a Browser: Double-click the file, and it will open in your default web browser.
You'll see a glowing "Happy Diwali" message and twinkling lights below it, creating a festive effect perfect for Diwali.
