|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<!--[if lt IE 7]> <html class="ie lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
|
|
|
|
|
<!--[if IE 7]> <html class="ie lt-ie9 lt-ie8"> <![endif]-->
|
|
|
|
|
<!--[if IE 8]> <html class="ie lt-ie9"> <![endif]-->
|
|
|
|
|
<!--[if gt IE 8]> <html> <![endif]-->
|
|
|
|
|
<!--[if !IE]><!--><html lang="en"><!-- <![endif]-->
|
|
|
|
|
<head>
|
|
|
|
|
<title>Happy Birthday</title>
|
|
|
|
|
<meta charset="UTF-8" />
|
|
|
|
|
<meta name="description" content="Happy Birthday Xola">
|
|
|
|
|
<meta name="robots" content="index, follow" />
|
|
|
|
|
<link rel="author" href="https://plus.google.com/u/1/+AyushSharma1/" />
|
|
|
|
|
<meta name="keywords" content="Birthday, Happy">
|
|
|
|
|
<link rel="icon" type="image/x-icon" href="https://cdn.yimian.xyz/img/head/head3r.ico">
|
|
|
|
|
<!-- Strat of Facebook Meta -->
|
|
|
|
|
<meta property="og:type" content="E-Greeting" />
|
|
|
|
|
<meta property="og:image" content="favicon.ico" />
|
|
|
|
|
<meta property="og:description" content="Wish you a very Happy Birthday">
|
|
|
|
|
<!-- End of Facebook Meta Tags -->
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
|
|
|
|
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
|
|
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
|
|
|
|
<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE" />
|
|
|
|
|
<link rel="stylesheet" href="bootstrap.min.css">
|
|
|
|
|
<link rel="stylesheet" type="text/css" href="stylesheet.css">
|
|
|
|
|
<link rel="stylesheet" type="text/css" href="loading.css">
|
|
|
|
|
<link href='font.css' rel='stylesheet' type='text/css'>
|
|
|
|
|
<link rel="stylesheet/less" href="cake.less">
|
|
|
|
|
<script src="less.min.js"></script>
|
|
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
<body>
|
|
|
|
|
<div class="loading"></div>
|
|
|
|
|
<audio class="song" controls loop>
|
|
|
|
|
<source src="hbd.mp3"></source>
|
|
|
|
|
Your browser isn't invited for super fun audio time.
|
|
|
|
|
</audio>
|
|
|
|
|
<div class="balloons text-center" id="b1">
|
|
|
|
|
<h2 style="color:#F2B300;"> </h2>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="balloons text-center" id="b2">
|
|
|
|
|
<h2 style="color:#0719D4;"> </h2>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="balloons text-center" id="b3">
|
|
|
|
|
<h2 style="color:#D14D39;">H</h2>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="balloons text-center" id="b4">
|
|
|
|
|
<h2 style="color:#8FAD00;">A</h2>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="balloons text-center" id="b5">
|
|
|
|
|
<h2 style="color:#8377E4;">O</h2>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="balloons text-center" id="b6">
|
|
|
|
|
<h2 style="color:#99C96A;"> </h2>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="balloons text-center" id="b7">
|
|
|
|
|
<h2 style="color:#20CFB4;"> </h2>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<img src="Balloon-Border.png" width="100%" class="balloon-border">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="container">
|
|
|
|
|
|
|
|
|
|
<div class="row">
|
|
|
|
|
<div class="col-md-2 col-xs-2 bulb-holder">
|
|
|
|
|
<div class="bulb" id="bulb_yellow"></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-md-2 col-xs-2 bulb-holder">
|
|
|
|
|
<div class="bulb" id="bulb_red"></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-md-2 col-xs-2 bulb-holder">
|
|
|
|
|
<div class="bulb" id="bulb_blue"></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-md-2 col-xs-2 bulb-holder">
|
|
|
|
|
<div class="bulb" id="bulb_green"></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-md-2 col-xs-2 bulb-holder">
|
|
|
|
|
<div class="bulb" id="bulb_pink"></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-md-2 col-xs-2 bulb-holder">
|
|
|
|
|
<div class="bulb" id="bulb_orange"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="row">
|
|
|
|
|
<div class="col-md-12 text-center">
|
|
|
|
|
<img src="banner.png" class="bannar">
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="row cake-cover">
|
|
|
|
|
<div class="col-md-12 texr-center">
|
|
|
|
|
<div class="cake">
|
|
|
|
|
<div class="velas">
|
|
|
|
|
<div class="fuego"></div>
|
|
|
|
|
<div class="fuego"></div>
|
|
|
|
|
<div class="fuego"></div>
|
|
|
|
|
<div class="fuego"></div>
|
|
|
|
|
<div class="fuego"></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="cobertura"></div>
|
|
|
|
|
<div class="bizcocho"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="row message">
|
|
|
|
|
<div class="col-md-12" id="message_row">
|
|
|
|
|
<p>今天</p>
|
|
|
|
|
<p>是个美丽的日子</p>
|
|
|
|
|
<p>生日快乐~</p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="navbar navbar-fixed-bottom">
|
|
|
|
|
<div class="row">
|
|
|
|
|
<div class="col-md-6 text-center col-md-offset-3">
|
|
|
|
|
<button class="btn btn-primary" id="turn_on">Turn On Lights</button>
|
|
|
|
|
<button class="btn btn-primary" id="play">Play Music</button>
|
|
|
|
|
<button class="btn btn-primary" id="bannar_coming">Let's Decorate</button>
|
|
|
|
|
<button class="btn btn-primary" id="balloons_flying">Fly With Balloons</button>
|
|
|
|
|
<button class="btn btn-primary" id="cake_fadein">Most Delicious Cake Ever</button>
|
|
|
|
|
<button class="btn btn-primary" id="light_candle"> Light Candle</button>
|
|
|
|
|
<button class="btn btn-primary" id="wish_message">Happy Birthday</button>
|
|
|
|
|
<button class="btn btn-primary" id="story">A mesage for you</button>
|
|
|
|
|
<!-- <button class="btn btn-primary" id="cake_cut">Lrt's Cut the Cake</button> -->
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- <div class="col-md-2">
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-md-2">
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-md-2">
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-md-2">
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-md-2">
|
|
|
|
|
</div> -->
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
</body>
|
|
|
|
|
<script src="jquery.min.js"></script>
|
|
|
|
|
<script src="bootstrap.min.js"></script>
|
|
|
|
|
<script src="effect.js"></script>
|
|
|
|
|
</html>
|
