Skip to content

CampWeather/birthday

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

19 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

<title>Happy Birthday</title> <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.1.0/less.min.js"></script>
Your browser isn't invited for super fun audio time.

H

B

D

D

E

N

D

<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">
			<p>Today is...</p>
			<p>Your Birthdayy, Special Day</p>
			<p>Today is so beautiful than 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 being there</p>
			<p>thanks for the friendship we made</p>
			<p><strong>wkwkw.. dari TK neh..</strong><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>Want to become Doctor</p>
			<p>Saving People Lifes</p>
			<p>Make it Come True...</p>
			<p>real story of your life</p>
			<p>is just about to begin, Friend</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 Dendro Liklikwatil</p>
			<p><strong>Umur Panjang Sehat Lalu</strong></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>
<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> <script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-58229732-1', 'auto'); ga('send', 'pageview');

</script>

About

A Happy Birthday animation design in CSS3, HTML5

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors

Languages

  • CSS 59.6%
  • HTML 16.3%
  • JavaScript 12.7%
  • Less 11.4%