<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container w-100 h-100 d-flex align-items-center justify-content-center">
<!--<button onclick="startConfetti();" class="btn btn-danger">Start</button>
<button onclick="stopConfetti();" class="btn btn-info">Stop</button>
<button onclick="toggleConfetti();" class="btn btn-warning">Toggle</button>-->
<div class="card my-auto py-5 text-center shadow mx-auto w-50 d-flex bg-white position-absolute">
<span><i class="mb-3 d-block">|| Om Sai Ram ||</i></span>
<h3 class="card-title">Hello My <i class="fa fa-heart text-danger"></i></h3>
<h1 class="my-auto text-center text-danger"><i class="far fa-icons text-danger"></i> Happy Hug Day</h1>
<br><center><img src="https://media1.tenor.com/images/e3a906a565a5ed8c11b4d940c10ca06f/tenor.gif?itemid=12129586" class="svg" width="200" ></center>
</div>
</div>
@import url('https://fonts.googleapis.com/css?family=Montserrat:200,300,400,500,600&display=swap');
@import url('https://use.fontawesome.com/releases/v5.0.1/css/all.css');
body { min-height: 100vh; overflow: hidden;
background:url(https://cmkt-image-prd.freetls.fastly.net/0.1.0/ps/6519889/600/400/m2/fpnw/wm0/12-.jpg?1560246853&s=212715eb92104b92e3873af4fad9457e) no-repeat 0 0/100%;
}
.container { margin: 0 auto; text-align: center; }
h1{font-family: 'Montserrat', sans-serif;font-weight: 200; font-style: normal;}
.card{
top:calc(100% - 75%);
}
var maxParticleCount=150;var particleSpeed=2;var startConfetti;var stopConfetti;var toggleConfetti;var removeConfetti;(function(){startConfetti=startConfettiInner;stopConfetti=stopConfettiInner;toggleConfetti=toggleConfettiInner;removeConfetti=removeConfettiInner;var colors=["DodgerBlue","OliveDrab","Gold","Pink","SlateBlue","LightBlue","Violet","PaleGreen","SteelBlue","SandyBrown","Chocolate","Crimson"]
var streamingConfetti=false;var animationTimer=null;var particles=[];var waveAngle=0;function resetParticle(particle,width,height){particle.color=colors[(Math.random()*colors.length)|0];particle.x=Math.random()*width;particle.y=Math.random()*height-height;particle.diameter=Math.random()*10+5;particle.tilt=Math.random()*10-10;particle.tiltAngleIncrement=Math.random()*0.07+0.05;particle.tiltAngle=0;return particle;}
function startConfettiInner(){var width=window.innerWidth;var height=window.innerHeight;window.requestAnimFrame=(function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(callback){return window.setTimeout(callback,16.6666667);};})();var canvas=document.getElementById("confetti-canvas");if(canvas===null){canvas=document.createElement("canvas");canvas.setAttribute("id","confetti-canvas");canvas.setAttribute("style","display:block;z-index:999999;pointer-events:none");document.body.appendChild(canvas);canvas.width=width;canvas.height=height;window.addEventListener("resize",function(){canvas.width=window.innerWidth;canvas.height=window.innerHeight;},true);}
var context=canvas.getContext("2d");while(particles.length<maxParticleCount)
particles.push(resetParticle({},width,height));streamingConfetti=true;if(animationTimer===null){(function runAnimation(){context.clearRect(0,0,window.innerWidth,window.innerHeight);if(particles.length===0)
animationTimer=null;else{updateParticles();drawParticles(context);animationTimer=requestAnimFrame(runAnimation);}})();}}
function stopConfettiInner(){streamingConfetti=false;}
function removeConfettiInner(){stopConfetti();particles=[];}
function toggleConfettiInner(){if(streamingConfetti)
stopConfettiInner();else
startConfettiInner();}
function drawParticles(context){var particle;var x;for(var i=0;i<particles.length;i++){particle=particles[i];context.beginPath();context.lineWidth=particle.diameter;context.strokeStyle=particle.color;x=particle.x+particle.tilt;context.moveTo(x+particle.diameter/2,particle.y);context.lineTo(x,particle.y+particle.tilt+particle.diameter/2);context.stroke();}}
function updateParticles(){var width=window.innerWidth;var height=window.innerHeight;var particle;waveAngle+=0.01;for(var i=0;i<particles.length;i++){particle=particles[i];if(!streamingConfetti&&particle.y<-15)
particle.y=height+100;else{particle.tiltAngle+=particle.tiltAngleIncrement;particle.x+=Math.sin(waveAngle);particle.y+=(Math.cos(waveAngle)+particle.diameter+particleSpeed)*0.5;particle.tilt=Math.sin(particle.tiltAngle)*15;}
if(particle.x>width+20||particle.x<-20||particle.y>height){if(streamingConfetti&&particles.length<=maxParticleCount)
resetParticle(particle,width,height);else{particles.splice(i,1);i--;}}}}})();
window.onload = startConfetti();
