"Diwali Wishes 2019 with Fireworks"
Bootstrap 4.1.1 Snippet by abhijeetka

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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 ---------->
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<meta content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport" />
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
<title>Happy Diwali :: 2019</title>
<audio type="audio/mpeg" controls="none" id="audio1" src="https://doc-14-c4-docs.googleusercontent.com/docs/securesc/il692mlm7m45meherbdo6rn0bdt5au3h/jt4m6pddhi0dd1gn9kpb6hpidhjaesvi/1576058400000/12204571634357119575/12204571634357119575/1_R6BvCSiehomKLXimmyeEFwx0eEXFjPI?e=open&authuser=0"></audio>
<audio type="audio/mpeg" controls="none" id="audio2" src="https://doc-04-c4-docs.googleusercontent.com/docs/securesc/il692mlm7m45meherbdo6rn0bdt5au3h/9p3hpvf7iqjo378gvbia7k94vvpdnckf/1576058400000/12204571634357119575/12204571634357119575/1BBS6kQbv3ZVetKAeR7wZ8tcr-Qj0cjtK?e=open&authuser=0"></audio>
<script>
function playSound(){
var audio2 = document.getElementById('audio2');
if (audio2.paused) {
audio2.play();
}else{
audio2.currentTime = 0
}
}
</script>
</head>
<body onclick="playSound();">
<div class="container-fluid d-flex flex-column h-100" style="background-color:rgba(0, 0, 0, 0.48)">
<p class="text-center display-1 text-danger pb-5">Happy Diwali 2019</p>
<center><p class="text-white display-2 position-relative">click Anywhere on the Screen</p></center>
</div>
<footer class="footer footer-inverse" style=" margin-bottom: 0;">
<div class="container">
<p class="text-center text-danger"> Create by <a target="_blank" href="/#Abhijeet" >Abhijeet Kanal - Pune</a></p>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.display-1.text-center {
font-family:Montserrat;
color:#ff8f03!important;
padding-top:45px;
}
p.text-white.display-2{color:rgba(255,255,255,0.19)!important;z-index:0;}
html,body{height:100%;margin:0;padding:0;user-select: none;
/*background:#000 url("https://media.cntraveller.in/wp-content/uploads/2017/10/Diwali-from-space-866x487.jpg") no-repeat center top/cover;*/
background:#000 url("https://upload.wikimedia.org/wikipedia/commons/4/40/Bombay24a.jpg") no-repeat center bottom/cover;
}
ul,li{text-indent:0;text-decoration:none;margin:0;padding:0}
img{border:0}
body{background-color:#000;color:#999;font:100%/18px helvetica, arial, sans-serif}
canvas{cursor:crosshair;display:block;left:0;position:absolute;top:0;z-index:20}
footer{position:fixed;left:0;right:0;z-index:10; bottom:0;}
audio{position:fixed;display:none;bottom:0;left:0;right:0;width:100%;z-index:5}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
$(function(){
var Fireworks = function(){
var self = this;
var rand = function(rMi, rMa){return ~~((Math.random()*(rMa-rMi+1))+rMi);}
var hitTest = function(x1, y1, w1, h1, x2, y2, w2, h2){return !(x1 + w1 < x2 || x2 + w2 < x1 || y1 + h1 < y2 || y2 + h2 < y1);};
window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(a){window.setTimeout(a,1E3/60)}}();
self.init = function(){
self.canvas = document.createElement('canvas');
self.canvas.width = self.cw = $(window).innerWidth();
self.canvas.height = self.ch = $(window).innerHeight();
self.particles = [];
self.partCount = 150;
self.fireworks = [];
self.mx = self.cw/2;
self.my = self.ch/2;
self.currentHue = 30;
self.partSpeed = 5;
self.partSpeedVariance = 10;
self.partWind = 50;
self.partFriction = 5;
self.partGravity = 1;
self.hueMin = 0;
self.hueMax = 360;
self.fworkSpeed = 4;
self.fworkAccel = 10;
self.hueVariance = 30;
self.flickerDensity = 25;
self.showShockwave = true;
self.showTarget = false;
self.clearAlpha = 25;
$(document.body).append(self.canvas);
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Light Bootstrap Dashboard

Questions / Comments: