Telegram Group Join Now
ADVERTISEMENT
Happy Diwali HTML & CSS Code Wish | Happy Diwali Coding
Welcome to The Codewithrandom blog. 1st of all Happy Diwali to everyone who reads this blog post, and thanks to you for being part of the codewithrandom blog. So let’s start our Diwali wishes but not in the text, we are HTML developers so We wish Happy Diwali in pure HTML and CSS Code With Diwali Animation.
ADVERTISEMENT
Code by | N/A |
Project Download | Link Available Below |
Language used | HTML and CSS |
External link / Dependencies | No |
Responsive | No |
ADVERTISEMENT
So first we start with our HTML Code structure For Diwali Wish.
Happy Diwali Html Code
<div class="container"> <div class="title">Happy Diwali from codewithrandom</div> <ul class="fireworks"> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> </ul> </div>
There is all the HTML Code for the Diwali Wish. Now, you can see output without CSS. then we write CSS Code for Diwali wish With Animation.
ADVERTISEMENT
100+ JavaScript Projects With Source Code ( Beginners to Advanced)
ADVERTISEMENT
Only HTML Code Output For Diwali Wish
Diwali Animation Css Code
@import url('https://fonts.googleapis.com/css?family=Sacramento'); body { background-color: #212121; font-family: 'Sacramento', cursive; } .container { height: 200px; width: 600px; position: fixed; top: 0; bottom: 0; left: 0; right: 0; margin: auto; } .container .title { font-size: 5rem; color: rgba(255, 255, 255, 0.5); text-align: center; text-shadow: 0px 2px 1px orange, 0px 0px 6px orangered, 0px 5px 10px rgba(0, 0, 0, 1); } .fireworks { list-style-type: none; padding: 0; } .fireworks li { display: inline-block; margin: 20px; height: 50px; width: 50px; border-radius: 500px; position: relative; background-color: #8d6e63; box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5); } .fireworks li::before { content: ""; position: absolute; height: 100%; background-color: #212121; width: 100%; border-radius: 500px; top: -40%; left: -30%; } .fireworks li::after { content: ""; position: absolute; height: 100%; background-color: #212121; width: 100%; border-radius: 500px; top: -40%; right: -30%; } .fireworks li span { display: inline-block; height: 20px; width: 20px; position: absolute; left: 0; right: 0; margin: auto; z-index: 1; border-bottom-left-radius: 50px; border-bottom-right-radius: 50px; border-top-right-radius: 50px; transform: rotate(45deg); animation: fire 0.3s ease infinite; } .fireworks li:nth-child(1) span { animation-delay: 0.5s; } .fireworks li:nth-child(2) span { animation-delay: 1s; } .fireworks li:nth-child(3) span { animation-delay: 1.5s; } .fireworks li:nth-child(4) span { animation-delay: 2s; } .fireworks li:nth-child(5) span { animation-delay: 2.5s; } .fireworks li:nth-child(6) span { animation-delay: 3s; } @keyframes fire { 0%, 100% { transform: rotate(55deg); width: 20px; background: linear-gradient(90deg, orange, orangered); } 50% { transform: rotate(35deg); width: 18px; background: linear-gradient(90deg, orangered, orange); } }
Now we have completed our CSS Code Section For Diwali Animation Wish. Here is our updated output With HTML and CSS Code.
ADVERTISEMENT
50+ Html ,Css & Javascript Projects With Source Code
Final output Happy Diwali HTML & CSS Code Wish
Hope you like the Happy Diwali wish Using HTML and CSS Code. You Can See the Output video and project screenshots Of Diwali’s wish. See our other blogs and gain knowledge in front-end development.
ADVERTISEMENT
Portfolio Website Using HTML ,CSS and Javascript Source Code
ADVERTISEMENT
Thank you
In this post, we learn how to create a Happy Diwali Wish using HTML and CSS. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.
Written by – Code With Random/Anki
Which code editor do you use for this Diwali Animation coding?
I personally recommend using VS Code Studio, it’s straightforward and easy to use.
ADVERTISEMENT
is this project responsive or not?
No! this is Not a responsive project
ADVERTISEMENT
Do you use any external links to create this project?
No!
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT