Comments (2)
commented on July 23, 2024
6
update index.html file with the following code
<!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">
<!-- 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="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">
<style type="text/css" id="less:birthday-cake">
/* ============================================== POSITION
*/
.cake {
position: absolute;
display: none;
left: 50%;
margin-left: -150px;
width: 300px;
height: 300px;
}
/* ============================================== BASE
*/
.cake:after {
background: #ffffff;
border-radius: 300px;
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 300px;
height: 6px;
}
/* ============================================== Candle
*/
.velas {
background: #ffffff;
border-radius: 100%;
position: absolute;
top: 50%;
left: 50%;
margin-left: -7.5px;
margin-top: -25px;
width: 15px;
height: 50px;
}
.velas:after,
.velas:before {
background: rgba(255, 0, 0, 0.4);
content: "";
position: absolute;
width: 100%;
height: 6.66666667px;
}
.velas:after {
top: 25%;
left: 0;
}
.velas:before {
top: 45%;
left: 0;
}
/* ============================================== Fire
*/
.fuego {
display: none;
border-radius: 100%;
box-shadow: 0 0 40px 10px rgba(248, 233, 209, 0.2);
position: absolute;
top: -12px;
left: 50%;
margin-left: -10px;
width: 20px;
height: 37.5px;
}
.fuego:nth-child(1) {
-webkit-animation: fuego 2s infinite;
-moz-animation: fuego 2s infinite;
-o-animation: fuego 2s infinite;
-ms-animation: fuego 2s infinite;
animation: fuego 2s infinite;
}
.fuego:nth-child(2) {
-webkit-animation: fuego 1.5s infinite;
-moz-animation: fuego 1.5s infinite;
-o-animation: fuego 1.5s infinite;
-ms-animation: fuego 1.5s infinite;
animation: fuego 1.5s infinite;
}
.fuego:nth-child(3) {
-webkit-animation: fuego 1s infinite;
-moz-animation: fuego 1s infinite;
-o-animation: fuego 1s infinite;
-ms-animation: fuego 1s infinite;
animation: fuego 1s infinite;
}
.fuego:nth-child(4) {
-webkit-animation: fuego 0.5s infinite;
-moz-animation: fuego 0.5s infinite;
-o-animation: fuego 0.5s infinite;
-ms-animation: fuego 0.5s infinite;
animation: fuego 0.5s infinite;
}
.fuego:nth-child(5) {
-webkit-animation: fuego 0.2s infinite;
-moz-animation: fuego 0.2s infinite;
-o-animation: fuego 0.2s infinite;
-ms-animation: fuego 0.2s infinite;
animation: fuego 0.2s infinite;
}
/* ============================================== Animation Fire
*/
@-webkit-keyframes fuego {
0% {
background: rgba(254, 248, 97, 0.5);
-webkit-transform: translateY(0) scale(1);
}
50% {
background: rgba(255, 50, 0, 0.1);
-webkit-transform: translateY(-60px) scale(0);
}
100% {
background: rgba(254, 248, 97, 0.5);
-webkit-transform: translateY(0) scale(1);
}
}
@-moz-keyframes fuego {
0% {
background: rgba(254, 248, 97, 0.5);
-moz-transform: translateY(0) scale(1);
}
50% {
background: rgba(255, 50, 0, 0.1);
-moz-transform: translateY(-60px) scale(0);
}
100% {
background: rgba(254, 248, 97, 0.5);
-moz-transform: translateY(0) scale(1);
}
}
@-o-keyframes fuego {
0% {
background: rgba(254, 248, 97, 0.5);
-o-transform: translateY(0) scale(1);
}
50% {
background: rgba(255, 50, 0, 0.1);
-o-transform: translateY(-60px) scale(0);
}
100% {
background: rgba(254, 248, 97, 0.5);
-o-transform: translateY(0) scale(1);
}
}
@-ms-keyframes fuego {
0% {
background: rgba(254, 248, 97, 0.5);
-ms-transform: translateY(0) scale(1);
}
50% {
background: rgba(255, 50, 0, 0.1);
-ms-transform: translateY(-60px) scale(0);
}
100% {
background: rgba(254, 248, 97, 0.5);
-ms-transform: translateY(0) scale(1);
}
}
@keyframes fuego {
0% {
background: rgba(254, 248, 97, 0.5);
transform: translateY(0) scale(1);
}
50% {
background: rgba(255, 50, 0, 0.1);
transform: translateY(-60px) scale(0);
}
100% {
background: rgba(254, 248, 97, 0.5);
transform: translateY(0) scale(1);
}
}
/* ============================================== Frosting
*/
.cobertura {
background: #ece7e3;
border-radius: 150px;
position: absolute;
top: 60%;
left: 50%;
margin-left: -83.33333333px;
margin-top: -15px;
width: 166.66666667px;
height: 37.5px;
z-index: 10;
}
.cobertura:after,
.cobertura:before {
background: #ece7e3;
border-radius: 300px;
content: "";
position: absolute;
width: 15px;
height: 30px;
}
.cobertura:after {
top: 20px;
right: 42.85714286px;
}
.cobertura:before {
top: 30px;
right: 27.27272727px;
}
/* ============================================== BIZCOCHO
*/
.bizcocho {
background: #6d3826;
position: absolute;
bottom: 0;
left: 50%;
margin-left: -75px;
width: 150px;
height: 100px;
}
.bizcocho:after,
.bizcocho:before {
background: rgba(236, 231, 227, 0.6);
content: "";
position: absolute;
width: 100%;
height: 15px;
}
.bizcocho:after {
top: 30%;
left: 0;
}
.bizcocho:before {
top: 60%;
left: 0;
}
/* ============================================== TEXT
*/
h1,
p {
font-family: 'Lato', sans-serif;
font-weight: 300;
font-style: italic;
text-align: center;
width: 100%;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
</style>
<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>
<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 message">
<div class="col-md-12"><p>Khushbu</p></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>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 being there</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 Xola Mathembisa</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="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>
</html>
from birthday.
Surya-1732
commented on July 23, 2024
its working that's great
from birthday.
Related Issues (20)
- what is the music's name, thanks!!!
- help! HOT 1
- nothing is working HOT 2
- Hey Ayush I was going plan to make a website but ...this is a milestone model you have prepared..i need some guide from you.can you help me with it ..i wanna wish my special..its a one week remaining..help me
- Any way to include picture ?
- Replace "XKLPJRT" in baloon HOT 2
- Unable to change the name on the balloons. HOT 1
- Make messages display longer
- make a delicious cake and light candle functions are not being called; (iam running in the chrome and firefox) HOT 2
- Happy birthday kiki
- Good
- The animation should stop after done wishing HOT 1
- Not mobile Friendly HOT 2
- KL
- Cake Cutting
- Need more balloons
- how do make it a link after you finish editing the code????? HOT 1
- Happy birthday
- para kan mika
- melly
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from birthday.