HomeHappy Rakhi AppCreate Happy Raksha Bandhan App with Free source code

Create Happy Raksha Bandhan App with Free source code

Create Happy Raksha Bandhan App with Free source code Free . Happy Raksha Bandhan to my brothers and cute sisters This is an ADVANCE WISH code as I won’t be able to make it tomorrow due to few issues:

<img width=

HTML CODE




<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="Style.css" type="text/css" media="all" />
    <title>Happy Raksha bandhan </title>
</head>

<body>
<div class="box_1">
 
  <div onclick="open_g()" class="gift">
    <div class="ribbon-4"></div>

    <div id="open_gift" class="gift-lid">
       <div class="ribbon-1"></div>
     <div class="ribbon-2"></div>
     <div class="ribbon-3"></div>
    </div>
     <img src="" id="gifts" class="gifts">
  </div>
 
</div>
 <h1>Happy Raksha Bandhan</h1>
<script type="text/javascript" charset="utf-8">
  var gifts=["https://i.postimg.cc/8P6JP7wt/Daco-4907786.png",
  
  "https://i.postimg.cc/sgPM7bkW/Daco-5600753.png",
  
  "https://i.postimg.cc/6qM61n8w/teddy-bear-PNG94.png"
  
  ,"https://i.postimg.cc/nMbLQ1TT/kindpng-2810878.png",
  
  "https://i.postimg.cc/h47ThZtL/Birthday-Cake-PNG-Clip-Art-Image-876450906.png",
  
  "https://i.postimg.cc/Vk81BKGM/kisspng-rail-transport-hamilton-watch-company-new-hamilton-hamilton-watch-black-watches-female-form.png", 
  
  "https://i.postimg.cc/8kmTzpcf/laptop-notebook-18.png ",
   "https://i.postimg.cc/P5rYxQWb/cadbury-world-white-chocolate-cadbury-dairy-milk-chocolate-7ca2539a17147229e25a53df9e1fd92c.png"];
  var random_no=Math.floor(Math.random()*8);
  random_gift=gifts[random_no]
  
  document.getElementById('gifts').src=random_gift;
 function open_g(){
   document.getElementById('open_gift').style.transform='rotate(-180deg) '
   document.getElementById('gifts').style.opacity='1';
   document.getElementById('gifts').style.display='block';
   document.getElementById('gifts').style.display='block';
   document.getElementById('gifts').style.transform='scale(1)';
   
 } </script>
 <audio controls style="display:none;" loop id="audio">
     <source id="audio-source"
     src="https://dailyringtone.com/download/oh-behna-meri-tu-brother-ringtone/mp3"> </audio>
     
 <script>
 window.addEventListener("mouseover",play);
window.addEventListener("click",play);
function play(){ document.getElementById("audio").play()
}
     
</script>
</body>

</html>

CSS CODE

@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
*{
  margin:0;
  padding:0;
  font-family: 'Montserrat', sans-serif;
}

.box_1{
  width:100%;
  height:100vh;
  background:#3B0055 url("https://i.postimg.cc/wjc4K26h/yes.gif");
  display:flex;
  align-items:center;
 justify-content:center;
}
.gift{
  width:200px;
  height:150px;
  background-color:#195AFF;
  position:absolute;
  top:40%;
  left:50%;
  z-index:100;
  transform:translate(-50%,-50%);
}
.gift-lid{
  width:210px;
  height:30px;
  background-color:#0039CB;
  position:absolute;
  left:-5px;
  transition:2s transform;
  transform-origin:left;
}
.ribbon-2{
  width:70px;
  height:70px;
  border:10px solid #FFA804;
  box-sizing:border-box;
  border-radius:100px 100px 0px 100px;
  transform:rotate(5deg);
  z-index:-10000;
  position:absolute;
  top:-65px;
  left:35px;
  
}
.ribbon-3{
  width:70px;
  height:70px;
  border:10px solid #FFA804;
  box-sizing:border-box;
  border-radius:100px 100px 100px 0px;
  transform:rotate(5deg);
  z-index:-10000;
  position:absolute;
  top:-65px;
  left:105px;
  
}
.ribbon-1{
  width:40px;
  height:30px;
  box-sizing:border-box;
  background-color:#FEC401 ; 
  position:absolute;
  top:0px;
  left:85px;
  z-index:100;
  
  
}
.ribbon-4{
  width:35px;
  height:150px;
  box-sizing:border-box;
  background-color:#FFA401; 
  position:absolute;
  top:0px;
  left:82.5px;
  z-index:;
  
  
}
.gifts{
  width:150px;
  height:200px;
  position:absolute;
  
  left:30px;
  background-size:100% 100%;
  opacity:0;
  display:none;
  transform:scale(0.4);
  transition:2s;
  top:0px;
  opacity:0;
  animation:mymove 2s linear ;
}
@keyframes mymove {
  0%{
    opacity:0;
  }
  
  49.9%{
    opacity:0;
    display:none;
  }
  50%{
    top:-200px;
    z-index:-1000;
  }
}
h1{
    position:absolute ;
    top:85%;
    left:50%;
    transform:translate(-50%,-50%);
    color:white;
    text-align:center;
    
}






JS CODE

alert("gifts are random")

RUN THIS CODE NOW

READ MORE

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

- Advertisment -

Most Popular

- Advertisment -