Celebrate the Festival of Lights in style with a custom Diwali Wishes Landing Page built using HTML, CSS, and JavaScript.
This project includes:
-
✨ Beautiful festive design with glowing effects
-
🎇 Interactive animations for a lively feel
-
🪔 A personalized Diwali greeting message
-
📱 Fully responsive for both desktop and mobile
Why this project?
Diwali is all about spreading joy and positivity. With this landing page, you can share personalized wishes with your friends, family, or even your website visitors. It’s a fun way to combine creativity and coding while celebrating the festival.
You can also customize the colors, background, or text to match your personal style and make it truly yours.
Do check out the video tutorial of this project on my YouTube channel and do subscribe to support me! Thanks!
Here’s the HTML/CSS code for the project 👇
<!-- Created by CodingPorium,2025. Visit https://youtube.com/c/CodingPorium for more tutorials with free source code --> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Diwali Landing Page | CodingPorium</title> <style> /*Import Great Vibes and Poppins Font*/ @import url('https://fonts.googleapis.com/css2?family=Great+Vibes&family=Poppins:wght@400;600&display=swap'); body{ margin:0; height:100vh; display: flex; justify-content: center; align-items: center; text-align: center; background: radial-gradient(1200px 600px at 80% -20%, #3a1a7a33 0 60%, transparent 60%), radial-gradient(900px 500px at -10% 100%, #8a1a6a33 0 60%, transparent 60%), linear-gradient(160deg,#0e0a1f,#1a0f39); color:#fff; font-family:poppins; overflow: hidden; } .container{ padding:20px; } h1{ font-family: 'Great Vibes',cursive; font-size: 3rem; text-shadow:0 0 15px gold, 0 0 25px orange; animation: glow 2s infinite alternate; } p{ font-size: 1.2rem; margin-top: 10px; } .diyas{ font-size:2rem; margin-top: 20px; animation: float 3s infinite ease-in-out; } @keyframes glow { from { text-shadow: 0 0 10px gold, 0 0 20px orange;} to { text-shadow: 0 0 25px gold, 0 0 40px gold;} } @keyframes float { 0%, 100% {transform: translateY(0);} 50%{transform: translateY(-10px);} } </style> </head> <body> <div class="container"> <h1>🪔 Happy Diwali 🪔</h1> <p>Wishing you joy, light, and prosperity ✨</p> <p>With ❤️ by CodingPorium</p> <div class="diyas">🪔 ✨ 🪔 ✨ 🪔</div> </div> </body> </html>
✨ With just a few lines of code, you’ve built your own Diwali wish land page for this year! Keep practicing and soon you’ll be building bigger and more powerful projects.
Thanks for reading, do subscribe our YouTube channel to support us in providing more awesome projects with free source code!
Post a Comment