Happy Diwali pure css | Happy Diwali wish using css - codewithrandom

Happy Diwali pure css |  Happy Diwali wishes using css - codewithrandom 

Happy Diwali pure css |  Happy Diwali wish using css - codewithrandom


Welcome🎉 to Code With Random blog. 1st of all happy Diwali to everyone who reads this blog post, and thanks to you for being part of 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 css. So 1st we start with our HTML structure.

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 HTML code for the Diwali wish. Now, you can see output without CSS, then we write CSS for Diwali wish.
output
Happy Diwali pure css |  Happy Diwali wish using css - codewithrandom

CSS Code

 @import url('https://fonts.googleapis.com/css?family=Sacramento');  
 $mattBlack:#212121;  
 body{  
  background-color: $mattBlack;  
  font-family: 'Sacramento', cursive;  
 }  
 .container{  
  height:200px;  
  width:600px;  
  position:fixed;  
  top: 0;  
  bottom: 0;  
  left: 0;  
  right: 0;  
  margin:auto;  
  .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;  
  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);  
   &::before{  
    content:"";  
    position:absolute;  
    height:100%;  
    background-color: $mattBlack;  
    width:100%;  
    border-radius:500px;  
    top:-40%;  
    left:-30%;  
   }  
   &::after{  
    content:"";  
    position:absolute;  
    height:100%;  
    background-color: $mattBlack;  
    width:100%;  
    border-radius:500px;  
    top:-40%;  
    right:-30%;  
   }  
   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;  
   }  
  }  
  @for $i from 1 through 6{  
   li:nth-child(#{$i}){  
    span{  
     animation-delay:#{$i*0.5}s;  
    }  
   }  
  }  
 }  
 @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 section,  Here is our updated output CSS.

Final output


Happy Diwali pure css |  Happy Diwali wish using css - codewithrandom

Now we have completed our css section,  Here is our updated output cssHope you like the Happy Diwali wish. you can see output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you 🙏💕

In this post, we learn how to create a Happy Diwali wish using simple HTML & 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 

Post a Comment

Previous Post Next Post