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:
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
0 Comments