mirror of https://github.com/IoTcat/birthday.git
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
190 lines
6.3 KiB
190 lines
6.3 KiB
<!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> |
|
<p>是个美丽的日子</p> |
|
<p>只因为，</p> |
|
<p>24年前的今天</p> |
|
<p>一只有史以来</p> |
|
<p>最最可爱滴宝</p> |
|
<p>来到了这个世界~</p> |
|
<p>在人们的祝福下，</p> |
|
<p>她开始了人生的旅程。</p> |
|
<p>24年来，</p> |
|
<p>小可爱一直非常地勇敢</p> |
|
<p>非常地努力</p> |
|
<p>就像一只小cat</p> |
|
<p>好奇地</p> |
|
<p>小心翼翼地</p> |
|
<p>摸索着</p> |
|
<p>自己存在的意义;</p> |
|
<p>又像一支蜡烛</p> |
|
<p>柔和地</p> |
|
<p>悄悄地</p> |
|
<p>给大家带来温暖~</p> |
|
<p>谢谢宝</p> |
|
<p>谢谢你的存在</p> |
|
<p>4年前遇见你</p> |
|
<p>是我最幸运的事情</p> |
|
<p>和你在一起2.5年</p> |
|
<p>我真的非常开心</p> |
|
<p>(*^▽^*)</p> |
|
<p>遇见你真是太好啦！</p> |
|
<p>过去的一年</p> |
|
<p>是我人生最迷茫的一年</p> |
|
<p>谢谢你和我一起</p> |
|
<p>陪伴着我</p> |
|
<p>度过这难关</p> |
|
<p>你真好♥(๑> ₃ <)♥</p> |
|
<p>以后的征程</p> |
|
<p>请放手去拼搏</p> |
|
<p>去探索吧！</p> |
|
<p>我会永远支持你~</p> |
|
<p>祝宝不负韶华</p> |
|
<p>去做想做的事</p> |
|
<p>去爱想爱的人</p> |
|
<p>去过想过的生活,</p> |
|
<p>去拥有属于自己</p> |
|
<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>
|
|
|