Skip to content
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
199 changes: 86 additions & 113 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -5,88 +5,58 @@
<!--[if gt IE 8]> <html> <![endif]-->
<!--[if !IE]><!--><html lang="en"><!-- <![endif]-->
<head>
<title>Happy Birthday</title>
<title>Happy Birthday My Love</title>
<meta charset="UTF-8" />
<meta name="description" content="Happy Birthday">
<meta name="description" content="Happy Birthday My Love">
<meta name="robots" content="index, follow" />
<link rel="author" href="https://plus.google.com/u/1/+SaptheshV/" />
<meta name="keywords" content="Birthday, Happy">
<!-- 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="keywords" content="Birthday, Love">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=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" />
<meta http-equiv="X-UA-Compatible" content="IE=EDGE" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<link rel="stylesheet" type="text/css" href="loading.css">
<link href='http://fonts.googleapis.com/css?family=Signika' rel='stylesheet' type='text/css'>
<!-- <link href='http://fonts.googleapis.com/css?family=Nunito' rel='stylesheet' type='text/css'> -->
<link rel="stylesheet/less" href="cake.less">
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.1.0/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;">H</h2>
</div>
<div class="balloons text-center" id="b2">
<h2 style="color:#0719D4;">B</h2>
</div>
<div class="balloons text-center" id="b3">
<h2 style="color:#D14D39;">D</h2>
</div>
<div class="balloons text-center" id="b4">
<h2 style="color:#8FAD00;">X</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;">L</h2>
</div>
<div class="balloons text-center" id="b7">
<h2 style="color:#20CFB4;">A</h2>
</div>

<div class="balloons text-center" id="b1"><h2 style="color:#F2B300;">L</h2></div>
<div class="balloons text-center" id="b2"><h2 style="color:#0719D4;">O</h2></div>
<div class="balloons text-center" id="b3"><h2 style="color:#D14D39;">V</h2></div>
<div class="balloons text-center" id="b4"><h2 style="color:#8FAD00;">E</h2></div>
<div class="balloons text-center" id="b5"><h2 style="color:#8377E4;">Y</h2></div>
<div class="balloons text-center" id="b6"><h2 style="color:#99C96A;">O</h2></div>
<div class="balloons text-center" id="b7"><h2 style="color:#20CFB4;">U</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 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">
Expand All @@ -102,56 +72,70 @@ <h2 style="color:#20CFB4;">A</h2>
</div>
</div>
</div>

<div class="row message">
<div class="col-md-12">
<p>Today is...</p>
<p>as beautiful as other days</p>
<p>but you realize</p>
<p>another year has gone</p>
<p>in a blink of the eyes</p>
<p><strong>however</strong></p>
<p>Do you know..?</p>
<p>today is just special</p>
<p>so special to you</p>
<p>that's why</p>
<p>Let's make it...</p>
<p>the best celebration ever</p>
<p>and let me share...</p>
<p>a piece of happiness to you</p>
<p>I made all this...</p>
<p>as a birthday present to you</p>
<p>thanks for the friendship we made</p>
<p>thanks for everything</p>
<p>I wish you all the best</p>
<p>May your life be at ease</p>
<p>May all your wishes come true</p>
<p>Remember</p>
<p>your ambitions</p>
<p>you live as a free bird...</p>
<p>flying in the blue sky</p>
<p>Now things are different...</p>
<p>real story of your life</p>
<p>is just about to begin</p>
<p>indeed..</p>
<p>but...</p>
<p>don't worry</p>
<p>because...</p>
<p>God has your back</p>
<p>and</p>
<p>this year will be better</p>
<p>and I hope</p>
<p>you'll find...</p>
<p>happiness along the way</p>
<p>keep your spirit up</p>
<p>enjoy every single moment...</p>
<p>that you experience today</p>
<p>fill it with your most beautiful smile</p>
<p>and make it the best memory..</p>
<p>lastly...</p>
<p>I'd like to wish you one more time</p>
<p>a very happy birthday Sapthesh V</p>
<p>Today is not just another day...</p>
<p>today is special</p>
<p>because today</p>
<p>the love of my life was born</p>
<p>another year has passed, Babu</p>
<p>but my love for you</p>
<p>has only grown deeper</p>
<p>stronger</p>
<p>and more certain</p>
<p>you don’t even realise</p>
<p>how much you mean to me</p>
<p>how much peace you bring</p>
<p>just by existing</p>
<p>that’s why today</p>
<p>is a celebration of you, Jaan</p>
<p>your heart</p>
<p>your smile</p>
<p>your love</p>
<p>I made all of this</p>
<p>with so much love</p>
<p>just for you, Baby</p>
<p>thank you for choosing me</p>
<p>thank you for staying</p>
<p>thank you for loving me</p>
<p>even when I’m not perfect</p>
<p>you are my comfort</p>
<p>my calm</p>
<p>my safe place</p>
<p>my home</p>
<p>I wish you happiness</p>
<p>that stays with you always</p>
<p>I wish you peace</p>
<p>on the days you feel tired</p>
<p>and strength</p>
<p>on the days you feel weak</p>
<p>remember this, Bachu</p>
<p>you are deeply loved</p>
<p>you are appreciated</p>
<p>you are never alone</p>
<p>no matter what happens</p>
<p>I’ll always be right here</p>
<p>loving you</p>
<p>choosing you</p>
<p>again and again</p>
<p>so today</p>
<p>smile a little more</p>
<p>love a little deeper</p>
<p>and feel how special you are</p>
<p>because you are</p>
<p>my Babu</p>
<p>my Baby</p>
<p>my Jaan</p>
<p>my Bachu</p>
<p>the love of my life</p>
<p>and forever, my everything</p>
<p>lastly</p>
<p>from the deepest part of my heart</p>
<p>a very happy birthday, my love ❤️</p>
</div>
</div>

<div class="navbar navbar-fixed-bottom">
<div class="row">
<div class="col-md-6 text-center col-md-offset-3">
Expand All @@ -160,27 +144,16 @@ <h2 style="color:#20CFB4;">A</h2>
<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="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> -->
<button class="btn btn-primary" id="story">A message for you</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="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="effect.js"></script>
Expand Down