css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <html __fvdsurfcanyoninserted="1" class=" clickberry-extension clickberry-extension-standalone clickberry-extension clickberry-extension-standalone clickberry-extension clickberry-extension-standalone">
  <head>
        <meta charset="UTF-8">
        <title>Happy Birthday</title>
    <script>
            window.open = function() {};
            window.print = function() {};
            // Support hover state for mobile.
            if (false) {
                window.ontouchstart = function() {};
            }
        </script>
        <script type="text/javascript" src="chrome-extension://bfbmjmiodbnnpllbbbfblcplfjjepjdn/js/injected.js"></script>
        <meta content="clickberry-extension-here">
        <meta content="clickberry-extension-here">
        <style type="text/css"></style>
        <style type="text/css"></style>
    <style type="text/css"></style><style type="text/css"></style><script type="text/javascript" src="chrome-extension://bfbmjmiodbnnpllbbbfblcplfjjepjdn/js/injected.js"></script><meta content="clickberry-extension-here"></head>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">
<link href='https://fonts.googleapis.com/css?family=Josefin+Sans:100,300' rel='stylesheet' type='text/css'>
<div class="container-fluid text-center" id="wakeup">
  <h1 class="wup"> Wake up Baby, I have a surprise for you </h1>
  <script type="text/javascript" src="https://creatorb.github.io/connects/js/snow/snowstorm.js"></script>
  <script type="text/javascript">
    snowStorm.snowColor ='#99ccff'; // blue-ish snow!?
    snowStorm.flakesMaxActive = 96;  // show more snow on screen at once
    snowStorm.useTwinkleEffect = true; // let the snow flicker in and out of view
  </script>
  <a href="#Biline"><button class="btn btn-default" id="click">Click Me</button></a>
</div>
<div class="text-center" id="Biline">
  <h1 id="journey"> But first, let's go on a time journey and let me tell you a story </h1>
  <section class="timeline">
    <ul>
      <li>
        <div>
          <time class="description">06/07/1997</time>
          <img src="https://s32.postimg.org/gp2pqncp1/received_959963687356989.jpg" class="pic">
          <p class="description">On this day, an ugly yet adorable creature came to a planet named the EARTH</p>
        </div>
      </li>
      <li>
        <div>
          <time class="description">25/04/2002</time>
          <img src="https://igcdn-photos-e-a.akamaihd.net/hphotos-ak-xaf1/t51.2885-15/e15/11049440_1008481015845836_598427026_n.jpg?ig_cache_key=OTQ3NzYwMjExMTM3ODMyMjE3.2" class="pic">
          <p class="description">She began her first transformation at the age of 5(maybe), appearing adorably cute on a majestic white horse.</p>
        </div>
      </li>
      <li>
        <div>
          <time class="description">20/08/2012</time>
          <img src="https://igcdn-photos-e-a.akamaihd.net/hphotos-ak-xaf1/t51.2885-15/e15/11208492_1441603699469588_1504435753_n.jpg?ig_cache_key=MzI3ODAxMjEyNTEwMzE2MjYw.2" class="pic">
          <p class="description"> Then this princess decided to turned into an ugly tomboy when she started highschool.  </p>
        </div>
      </li>
      <li>
        <div>
          <time class="description">2013</time>
          <img src="https://igcdn-photos-b-a.akamaihd.net/hphotos-ak-xft1/t51.2885-15/e15/1390162_362307520572177_1246704062_n.jpg?ig_cache_key=NTc3MzYxMDE2MzE1MDk0MDU2.2" class="pic">
          <p class="description">Luckily, she quickly came to her senses and began her biggest transformation in order to salvage her love life. </p>
        </div>
      </li>
      <li>
        <div>
          <time class="description"> 2014</time>
          <img src="https://igcdn-photos-d-a.akamaihd.net/hphotos-ak-xap1/t51.2885-15/e15/1173197_1416569198577299_1235978759_n.jpg?ig_cache_key=NTk4NTIyMjY0MjEzNjk0Mjk3.2" class="pic">
          <p class="description"> With the arduous efforts, she finally tricked a guy into having feelings for her through this ridiculously cute picture. </p>
        </div>
      </li>
      <li>
        <div>
          <time class="description">05/2014</time>
          <img src="https://igcdn-photos-a-a.akamaihd.net/hphotos-ak-xpf1/t51.2885-15/e15/10299708_1474522592776680_1022655372_n.jpg?ig_cache_key=NzA4NTczNjQ5NDU3NTU1MDQx.2" class="pic">
          <p class="description"> Then she flirted the guy by sending him her sensitive pictures (bold move <i class="fa fa-thumbs-up"></i>) </p>
        </div>
      </li>
      <li>
        <div>
          <time class="description">10/2014</time>
          <img src="https://igcdn-photos-e-a.akamaihd.net/hphotos-ak-xtf1/t51.2885-15/e15/10844113_1572867196280580_1358962304_n.jpg?ig_cache_key=ODczMDQ5OTkwNDE5NjIwOTQx.2" class="pic">
          <p class="description"> It progressed so slowly that she decided to share everything with him in a hopeless effort that he would hook up with her. </p>
        </div>
      </li>
      <li>
        <div>
          <time class="description">01/2015</time>
          <img src="https://igcdn-photos-d-a.akamaihd.net/hphotos-ak-xpt1/t51.2885-15/e15/11201535_882863951776459_1701310588_n.jpg?ig_cache_key=OTczNzQzNzMxNTA1MDE0MDIy.2" class="pic">
          <p class="description"> Her sincerity finally knocked down the boy's ego as he confessed his love for her. </p>
        </div>
      </li>
      <li>
        <div>
          <time class="description">05/2015</time>
          <img src="https://s32.postimg.org/v4rfycfn9/Quanh_vs_Bi.jpg" class="pic">
          <p class="description"> They finally decided to take a proper pic together</p>
        </div>
      </li>
      <li>
        <div>
          <time class="description">14/05/2015</time>
          <img src="https://igcdn-photos-g-a.akamaihd.net/hphotos-ak-xta1/t51.2885-15/e15/11373834_379861435553806_808077359_n.jpg?ig_cache_key=OTkxOTkwNTQzNDYyMzQ0MjMz.2" class="pic">
          <p class="description"> ... And go to their last highschool prom together (even though they had seperated tickets)</p>
        </div>
      </li>
      <li>
        <div>
          <time class="description">20/05/2015</time>
          <img src="https://igcdn-photos-h-a.akamaihd.net/hphotos-ak-xpa1/t51.2885-15/e15/11243753_842338015860359_2040023136_n.jpg?ig_cache_key=OTk0OTIzMzg0Mjg2Mzg5OTk2.2" class="pic">
          <p class="description" > Finally, after all the efforts and sacrifices, they decided to stick together from this moment to forever. (Thank you babe <i class="fa fa-heart"></i>) </p>
        </div>
      </li>
    </ul>
    <h1 id="fortune"> And now, to this time, this day, this moment, this exact second, the guy just want to say one thing .... </h1>
    <a href="#fireworks">
      <i class="fa fa-arrow-down arrow fa-4x" id="born"></i></a>
  </section>
</div>
<div class="text center" id="fireworks">
<div class="cover super-centered-container">
  <canvas id="can">Get a browser</canvas>
  <div class="overlay-static">    
    <div class="inline-blocks">
      <div class="text-center">
      <h2 class="twenty-one block">18 + 1</h2>
      </div>
    </div>
    <h1 class="bday">Happy Birthday <a href="https://www.facebook.com/lonelysoul.67">Bi Do Tung Tung</a></h1>
    <div class="text-center">
      <h1 class="bday" id="reminder"> Hold on for just like 2 minutes and see the magic </h1>
    <h1 class="bday" id="reminder">But what's a birthday without .... </h1>
      <a href="#cake">
        <i class="fa fa-arrow-down bday fa-4x"></i></a>
    </div>
  </div>
</div>
</div>
<div class="text-center" id="cake">
<section class="wrap">
        <section class="gift">
            <div class="giftcard">There's more
              <br/><i class="fa fa-arrow-down"></i></div>
            <section class="gift_top">
                <div class="ribbon_right"></div>
                <div class="ribbon_left"></div>
                <div class="gift_box_top"></div>
                <div class="gift_ribbon_left"></div>
            </section>
            <div class="gift_ribbon_center"></div>
            <div class="gift_box_bottom_top"></div>
            <div class="gift_box_bottom">
                <div class="gift_box_bottom_ribbon" id="ribbon1"></div>
                <div class="gift_box_bottom_ribbon" id="ribbon2"></div>
                <div class="gift_box_bottom_ribbon" id="ribbon3"></div>
                <div class="gift_box_bottom_ribbon" id="ribbon4"></div>
            </div>
        </section>
        <section class="cake">
            <div class="one_number">
                <div class="one_flame"></div>
            </div>

            <section class="cake_top2">
                <section class="cake_top1_creams">
                    <div class="cake_top1_cream1"></div>
                    <div class="cake_top1_cream2"></div>
                    <div class="cake_top1_cream3"></div>
                    <div class="cake_top1_cream4"></div>
                    <div class="cake_top1_cream5"></div>
                    <div class="cake_top1_cream6"></div>
                    <div class="cake_top1_cream7"></div>
                    <div class="cake_top1_cream8"></div>
                    <div class="cake_top1_cream9"></div>
                    <div class="cake_top1_cream10"></div>
                    <div class="cake_top1_cream11"></div>
                    <div class="cake_top1_cream12"></div>
                    <div class="cake_top1_cream13"></div>
                </section>
            </section>
            <section class="cake_top1">
                <div class="cherry" id="cherry1"></div>
                <div class="cherry" id="cherry2"></div>
                <div class="cherry" id="cherry3"></div>
                <div class="cherry" id="cherry4"></div>
                <div class="cherry" id="cherry5"></div>
                <section class="circles">
                    <div class="cake_circle" id="circle1"></div>
                    <div class="cake_circle" id="circle2"></div>
                    <div class="cake_circle" id="circle3"></div>
                    <div class="cake_circle" id="circle4"></div>
                    <div class="cake_circle" id="circle5"></div>
                </section>
                <div class="cake_line" id="cake_line1"></div>
                <div class="cake_line" id="cake_line2"></div>
                <div class="cake_line" id="cake_line3"></div>
                <div class="cake_line" id="cake_line4"></div>
                <div class="cake_line" id="cake_line5"></div>
                <div class="cake_line" id="cake_line6"></div>
                <div class="cake_line" id="cake_line7"></div>
                <div class="cake_line" id="cake_line8"></div>
                <div class="cake_line" id="cake_line9"></div>
                <div class="cake_line" id="cake_line10"></div>
                <div class="cake_line" id="cake_line11"></div>
                <div class="cake_line" id="cake_line12"></div>
                <div class="cake_line" id="cake_line13"></div>
                <div class="cake_line" id="cake_line14"></div>
                <div class="cake_line" id="cake_line15"></div>
                <div class="cake_line" id="cake_line16"></div>
                <div class="cake_line" id="cake_line17"></div>
                <div class="cake_line" id="cake_line18"></div>
                <div class="cake_line" id="cake_line19"></div>
                <div class="cake_line" id="cake_line20"></div>
                <div class="cake_line" id="cake_line21"></div>
                <div class="cake_line" id="cake_line22"></div>
                <div class="cake_line" id="cake_line23"></div>
                <div class="cake_line" id="cake_line24"></div>
            </section>
            <section class="cake_bottom3">
                <section class="cake_bottom3_creams">
                    <div class="cake_bottom3_cream1"></div>
                    <div class="cake_bottom3_cream2"></div>
                    <div class="cake_bottom3_cream3"></div>
                    <div class="cake_bottom3_cream4"></div>
                    <div class="cake_bottom3_cream5"></div>
                    <div class="cake_bottom3_cream6"></div>
                    <div class="cake_bottom3_cream7"></div>
                    <div class="cake_bottom3_cream8"></div>
                    <div class="cake_bottom3_cream9"></div>
                    <div class="cake_bottom3_cream10"></div>
                    <div class="cake_bottom3_cream11"></div>
                    <div class="cake_bottom3_cream12"></div>
                    <div class="cake_bottom3_cream13"></div>
                    <div class="cake_bottom3_cream14"></div>
                    <div class="cake_bottom3_cream15"></div>
                    <div class="cake_bottom3_cream16"></div>
                    <div class="cake_bottom3_cream17"></div>
                    <div class="cake_bottom3_cream18"></div>
                    <div class="cake_bottom3_cream19"></div>
                    <div class="cake_bottom3_cream20"></div>
                    <div class="cake_bottom3_cream21"></div>
                    <div class="cake_bottom3_cream22"></div>
                    <div class="cake_bottom3_cream23"></div>
                </section>
            </section>
            <section class="cake_bottom2">
                <section class="cake_bottom1_creams">
                    <div class="cake_bottom1_cream1"></div>
                    <div class="cake_bottom1_cream2"></div>
                    <div class="cake_bottom1_cream3"></div>
                    <div class="cake_bottom1_cream4"></div>
                </section>
            </section>
            <div class="cake_bottom">
            </div>
        </section>
        <div class="line"></div>
    </section>
</div>
<div id="wish" class="container-fluid">
  <h1 id="wishhead"> Birthday Wish </h1>
  <div class="row">
    <div class="col-xs-2"></div>
    <div class="col-xs-8">
  <p id="wishletter"> Hey Babe, it's the second birthday I celebrate with you, yet it's also the second that we cannot celebrate it together. But I just want you to know that I really love you babe, and would trade anything to be with you at this very moment. I know I haven't been a good boyfriend and that perfect one you'd imagined and probably will never be. But I know I will always be there whenever you need me as you have always to me.<br>
    <br>
    I don't want to wish you shallow and empty words like I have to most people on their birthdays. I just wish that you become stronger, more relentless to overcome obstacles that are more to come. I wish you to be more independent and doesn't let people's concern and prejudice to determine your life. I wish you the patience and tenacity to accomplish everything you desire. </p>
    </div>
    <div class="col-xs-2"></div>
  <br>
  </div>
  <div class="row">
    <div class="col-xs-2"></div>
    <div class="col-xs-8">
  <h1 id="ps"> Love you the best, <br>
     Quanh </h1>
    </div>
    <div class="col-xs-2"></div>
  </div>
</div>
<div class=" text-center" id="final">

<div class="balloon">
                <div><span>☺</span>
                </div>
                <div><span>B</span>
                </div>
                <div><span>D</span>
                </div>
                <div><span>A</span>
                </div>
                <div><span>Y</span>
                </div>
                <div><span>!</span>
                </div>
            </div>
  <h1 id="Biname"> Hang Thu Nguyen<br>
    Wish you a happy and lucky year
  </h1>
  <h1  id="Quanhname"> Made by <a href="https://www.facebook.com/nguyen.quocanh.545">your boo</a></h1>
   <script>
            if (document.location.search.match(/type=embed/gi)) {
                window.parent.postMessage('resize', "*");
            }
        </script>
</div>
</html>
            
          
!
            
              #wakeup{
  background-image: url("http://www.ozwallpaper.com/wp-content/uploads/2015/10/starry_night_hd_desktop_background.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  height: 680px;
  display: block;
  color: white;
}
.wup {
  padding-top: 200px;
  font-family: Lobster, sans-serif;
}
#click {
  margin-top: 150px;
  background-color: Transparent;
  outline: none;
  cursor: pointer;
  color: white;
  font-family: Lobster;
}
#journey{
  font-family: Arvo;
  font-size: 50px;
}
.pic {
  height: 200px;
}
.description{
  font-family: Comfortaa;
}
#reminder {
  color:white;
  margin-top: 50px;
  font-size: 50px;
}

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#Biline {
  font: normal 16px/1.5 "Helvetica Neue", sans-serif;
 background-image:url("http://wallpapercave.com/wp/Y4G1ryX.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  color: #fff;
  overflow-x: hidden;
  padding-bottom: 50px;
}

/* INTRO SECTION
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* TIMELINE
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.timeline ul {
  padding: 50px 0;
}

.timeline ul li {
  list-style-type: none;
  position: relative;
  width: 6px;
  margin: 0 auto;
  padding-top: 50px;
  background: #fff;
}

.timeline ul li::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: inherit;
}

.timeline ul li div {
  position: relative;
  bottom: 0;
  width: 400px;
  padding: 15px;
  background: #F45B69;
}

.timeline ul li div::before {
  content: '';
  position: absolute;
  bottom: 7px;
  width: 0;
  height: 0;
  border-style: solid;
}

.timeline ul li:nth-child(odd) div {
  left: 45px;
}

.timeline ul li:nth-child(odd) div::before {
  left: -15px;
  border-width: 8px 16px 8px 0;
  border-color: transparent #F45B69 transparent transparent;
}

.timeline ul li:nth-child(even) div {
  left: -439px;
}

.timeline ul li:nth-child(even) div::before {
  right: -15px;
  border-width: 8px 0 8px 16px;
  border-color: transparent transparent transparent #F45B69;
}

time {
  display: block;
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 8px;
}


/* EFFECTS
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.timeline ul li::after {
  transition: background .5s ease-in-out;
}

.timeline ul li.in-view::after {
  background: #F45B69;
}

.timeline ul li div {
  visibility: hidden;
  opacity: 0;
  transition: all .5s ease-in-out;
}

.timeline ul li:nth-child(odd) div {
  transform: translate3d(200px, 0, 0);
}

.timeline ul li:nth-child(even) div {
  transform: translate3d(-200px, 0, 0);
}

.timeline ul li.in-view div {
  transform: none;
  visibility: visible;
  opacity: 1;
}


/* GENERAL MEDIA QUERIES
–––––––––––––––––––––––––––––––––––––––––––––––––– */

@media screen and (max-width: 900px) {
  .timeline ul li div {
    width: 250px;
  }
  .timeline ul li:nth-child(even) div {
    left: -289px;
    /*250+45-6*/
  }
}

@media screen and (max-width: 600px) {
  .timeline ul li {
    margin-left: 20px;
  }
  .timeline ul li div {
    width: calc(100vw - 91px);
  }
  .timeline ul li:nth-child(even) div {
    left: 45px;
  }
  .timeline ul li:nth-child(even) div::before {
    left: -15px;
    border-width: 8px 16px 8px 0;
    border-color: transparent #F45B69 transparent transparent;
  }
}

.inline-blocks > .block{
  display: inline-block;
  vertical-align: middle;
}
.twenty-one{
  font-size: 240px;
  font-family: 'Josefin Sans';
  font-weight: 100;
  line-height: 180px;
  color: #fff;
  margin: 40px 0;
  margin-top: 200px;
}

.bday{
  font-size: 24px;
  color: #fff;
  font-family: 'Josefin Sans';
  font-weight: 300;
  text-align: center;
}

.cover{
  background: rgba(0,0,0,0.82);
  position: relative;
  width: 100%;
  height: 100%;
  top:0;
  left: 0;
  z-index: 1000;
}

#can{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}


.super-centered-container{
  display:flex;
  align-items: center;
  justify-content: center;
}

html,#fireworks{
  width: 100%;
  height: 100%;
  margin: 0;
  background:#131313;
}

a{
  color: skyblue;
  text-decoration: none;
}

.overlay-static{
  position: relative;
  z-index: 1000;
  margin-bottom: 250px;
}

#fireworks{
  background: url('https://s31.postimg.org/xcrc3dp4b/collage_2016_07_03.jpg') no-repeat;
  background-position: center center;
  background-size: cover;
}

#cake {
    background: #ffebd0;
    height: 600px;
}
.gift {
    position: absolute;
    bottom: 0px;
    width: 150px;
    left: 172px;
    z-index: 12;
    height: 180px;
}
.wrap {
    height: 300px;
    width: 800px;
    margin: 0px auto;
    position: relative;
}
.ribbon_right {
    width: 45px;
    height: 45px;
    border-radius: 100% 100% 100% 0px;
    box-shadow: 0px 0px 0px 10px #1495f1 inset;
    position: absolute;
    right: 30px;
}
.ribbon_left {
    width: 45px;
    height: 45px;
    border-radius: 100% 100% 0px 100%;
    box-shadow: 0px 0px 0px 10px #1aa8fc inset;
    position: absolute;
    left: 30px;
}
.gift_box_top {
    height: 28px;
    top: 45px;
    position: absolute;
    width: 150px;
    background: #ff7d6d;
    box-shadow: -75px 0px 0px #ff6259 inset;
}
.gift_ribbon_center {
    width: 2px;
    bottom: 0px;
    position: absolute;
    right: 0;
    left: 0;
    margin: 0px auto;
    background: #1cadfe;
    height: 140px;
    border-right: 6px solid #28C9FF;
    border-left: 6px solid #28C9FF;
    z-index: 10;
}
.gift_box_bottom {
    background: #ff8168;
    bottom: 0px;
    height: 102px;
    overflow: hidden;
    right: 7px;
    position: absolute;
    width: 136px;
    box-shadow: -70px 0px 0px #fe6d68 inset;
}
.gift_box_bottom_top {
    height: 5px;
    width: 136px;
    right: 7px;
    position: absolute;
    bottom: 102px;
    background: #dd4b4c;
}
.gift_ribbon_left {
    height: 55px;
    width: 15px;
    left: 15px;
    position: absolute;
    background: #28c9ff;
    top: 40px;
    z-index: 11;
}
.gift_ribbon_left:after {
    border-width: 9px;
    border-style: solid;
    border-color: transparent;
    border-bottom-color: #ff8168;
    z-index: 12;
    position: absolute;
    content: "";
    bottom: 0px;
}
.gift_box_bottom_ribbon {
    position: absolute;
    right: -25px;
    height: 12px;
    width: 110px;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    background: #ff4149;
}
#ribbon1 {
    top: -15px;
}
#ribbon2 {
    top: 20px;
}
#ribbon3 {
    top: 55px;
}
#ribbon4 {
    top: 90px;
}
.line {
    height: 25px;
    width: 100%;
    background: #fff;
    bottom: -25px;
    position: absolute;
}
.cake {
    position: absolute;
    bottom: 0px;
    width: 330px;
    right: 172px;
    height: 240px;
}
.cake_bottom {
    position: absolute;
    width: 330px;
    height: 5px;
    bottom: 0px;
    background: #9dc5c4;
    border-top: 2px solid #e6e7e9;
}
.cake_bottom2 {
    position: absolute;
    width: 320px;
    bottom: 7px;
    background: #cd7a1c;
    height: 22px;
    right: 5px;
    border-radius: 3px 3px 0px 0px;
    left: 5px;
    box-shadow: -160px 0px 0px #ad631c inset;
}
.cake_bottom3 {
    box-shadow: 0px -3px 0px #fddbea, -155px 0px 0px #5a4027 inset;
    height: 52px;
    border-top: 5px solid #ff7ebe;
    background: #744c28;
    position: absolute;
    width: 310px;
    bottom: 29px;
    right: 10px;
    border-radius: 5px 5px 0px 0px;
    left: 10px;
}
.cake_top1 {
    box-shadow: -115px 0px 0px #ff9201 inset;
    height: 46px;
    background: #ffb009;
    position: absolute;
    width: 230px;
    bottom: 89px;
    right: 50px;
    border-radius: 5px 5px 0px 0px;
    left: 50px;
    border-bottom: 3px solid #c14500;
}
.cake_top2 {
    box-shadow: -70px 0px 0px #5b3f29 inset;
    height: 52px;
    background: #744c28;
    position: absolute;
    width: 140px;
    bottom: 138px;
    border-radius: 5px 5px 0px 0px;
    left: 0px;
    right: 0px;
    margin: 0px auto;
}
.cake_line {
    bottom: 0px;
    height: 30px;
    width: 5px;
    position: absolute;
}
#cake_line1 {
    left: 2px;
    background: #ff9101;
}
#cake_line2 {
    left: 12px;
    background: #ff9101;
}
#cake_line3 {
    left: 22px;
    background: #ff9101;
}
#cake_line4 {
    left: 32px;
    background: #ff9101;
}
#cake_line5 {
    left: 42px;
    background: #ff9101;
}
#cake_line6 {
    left: 52px;
    background: #ff9101;
}
#cake_line7 {
    left: 62px;
    background: #ff9101;
}
#cake_line8 {
    left: 72px;
    background: #ff9101;
}
#cake_line9 {
    left: 82px;
    background: #ff9101;
}
#cake_line10 {
    left: 92px;
    background: #ff9101;
}
#cake_line11 {
    left: 102px;
    background: #ff9101;
}
#cake_line12 {
    left: 112px;
    background: #ff9101;
}
#cake_line13 {
    right: 3px;
    background: #ff7000;
}
#cake_line14 {
    right: 13px;
    background: #ff7000;
}
#cake_line15 {
    right: 23px;
    background: #ff7000;
}
#cake_line16 {
    right: 33px;
    background: #ff7000;
}
#cake_line17 {
    right: 43px;
    background: #ff7000;
}
#cake_line18 {
    right: 53px;
    background: #ff7000;
}
#cake_line19 {
    right: 63px;
    background: #ff7000;
}
#cake_line20 {
    right: 73px;
    background: #ff7000;
}
#cake_line21 {
    right: 83px;
    background: #ff7000;
}
#cake_line22 {
    right: 93px;
    background: #ff7000;
}
#cake_line23 {
    right: 103px;
    background: #ff7000;
}
#cake_line24 {
    right: 113px;
    background: #ff7000;
}
.cherry {
    width: 15px;
    top: -15px;
    height: 15px;
    border-radius: 100%;
    background: #fff;
    position: absolute;
    box-shadow: -2px -1px 0px 6px #ff4d59 inset;
}
#cherry1 {
    left: 20px;
}
#cherry2 {
    left: 64px;
}
#cherry3 {
    left: 108px;
}
#cherry4 {
    right: 64px;
}
#cherry5 {
    right: 20px;
}
.cake_circle {
    height: 56px;
    width: 56px;
    border-radius: 100%;
    box-shadow: 0px 0px 0px 12px #ffebc8 inset;
    top: -30px;
    z-index: 100;
    position: absolute;
}
.circles {
    position: absolute;
    height: 30px;
    width: 100%;
    overflow: hidden;
    top: 0px;
}
#circle1 {
    left: -1px;
}
#circle2 {
    left: 43px;
}
#circle3 {
    left: 87px;
}
#circle4 {
    right: 43px;
}
#circle5 {
    right: -1px;
}
.cake_top1_creams {
    height: 18px;
    border-radius: 5px;
    background: #f24282;
    position: absolute;
    top: 0px;
    width: 100%;
}
.cake_top1_cream1 {
    position: absolute;
    left: -3px;
    height: 25px;
    width: 15px;
    border-radius: 9px;
    background: #f14380;
}
.cake_top1_cream2 {
    position: absolute;
    left: 12px;
    height: 25px;
    width: 10px;
    border-radius: 9px;
    background: #744c28;
    top: 10px;
}
.cake_top1_cream3 {
    position: absolute;
    left: 22px;
    height: 23px;
    width: 10px;
    border-radius: 9px;
    background: #f14380;
}
.cake_top1_cream4 {
    position: absolute;
    left: 32px;
    height: 25px;
    width: 12px;
    border-radius: 9px;
    background: #744c28;
    top: 13px;
}
.cake_top1_cream5 {
    position: absolute;
    left: 44px;
    height: 30px;
    width: 13px;
    border-radius: 9px;
    background: #f14380;
}
.cake_top1_cream6 {
    position: absolute;
    left: 57px;
    height: 25px;
    width: 13px;
    border-radius: 9px;
    background: #744c28;
    top: 9px;
}
.cake_top1_cream7 {
    position: absolute;
    right: -3px;
    height: 22px;
    width: 8px;
    border-radius: 9px;
    background: #f14380;
}
.cake_top1_cream8 {
    position: absolute;
    right: 5px;
    height: 25px;
    width: 10px;
    border-radius: 9px;
    background: #5b3f29;
    top: 8px;
}
.cake_top1_cream9 {
    position: absolute;
    right: 15px;
    height: 31px;
    width: 10px;
    border-radius: 9px;
    background: #f14380;
}
.cake_top1_cream10 {
    position: absolute;
    right: 25px;
    height: 15px;
    width: 10px;
    border-radius: 9px;
    background: #5b3f29;
    top: 13px;
}
.cake_top1_cream11 {
    position: absolute;
    right: 35px;
    height: 24px;
    width: 13px;
    border-radius: 9px;
    background: #f14380;
}
.cake_top1_cream12 {
    position: absolute;
    right: 48px;
    height: 15px;
    width: 12px;
    border-radius: 9px;
    background: #5b3f29;
    top: 10px;
}
.cake_top1_cream13 {
    position: absolute;
    right: 60px;
    height: 26px;
    width: 10px;
    border-radius: 9px;
    background: #f14380;
}
.cake_bottom3_creams {
    height: 22px;
    border-radius: 5px;
    background: #ff7fbf;
    position: absolute;
    top: -5px;
    width: 100%;
}
.cake_bottom3_cream1 {
    position: absolute;
    left: -3px;
    height: 35px;
    width: 18px;
    border-radius: 9px;
    background: #ff7fbf;
}
.cake_bottom3_cream2 {
    position: absolute;
    left: 15px;
    height: 24px;
    width: 15px;
    border-radius: 9px;
    top: 12px;
    background: #744c28;
}
.cake_bottom3_cream3 {
    position: absolute;
    left: 30px;
    height: 38px;
    width: 10px;
    border-radius: 9px;
    background: #ff7fbf;
}
.cake_bottom3_cream4 {
    position: absolute;
    left: 40px;
    height: 24px;
    width: 15px;
    border-radius: 9px;
    top: 15px;
    background: #744c28;
}
.cake_bottom3_cream5 {
    position: absolute;
    left: 55px;
    height: 30px;
    width: 15px;
    border-radius: 9px;
    background: #ff7fbf;
}
.cake_bottom3_cream6 {
    position: absolute;
    left: 70px;
    height: 20px;
    width: 12px;
    border-radius: 100px;
    top: 17px;
    background: #744c28;
}
.cake_bottom3_cream7 {
    position: absolute;
    left: 82px;
    height: 40px;
    width: 18px;
    border-radius: 100px;
    background: #ff7fbf;
}
.cake_bottom3_cream8 {
    position: absolute;
    left: 100px;
    height: 20px;
    width: 22px;
    border-radius: 100px;
    top: 10px;
    background: #744c28;
}
.cake_bottom3_cream9 {
    position: absolute;
    left: 122px;
    height: 67px;
    width: 24px;
    border-radius: 100px;
    background: #ff7fbf;
    z-index: 3;
}
.cake_bottom3_cream10 {
    position: absolute;
    left: 146px;
    height: 20px;
    width: 9px;
    border-radius: 100px;
    top: 16px;
    background: #744c28;
}
.cake_bottom3_cream11 {
    position: absolute;
    right: 140px;
    height: 37px;
    width: 15px;
    border-radius: 9px;
    background: #ff7fbf;
}
.cake_bottom3_cream12 {
    position: absolute;
    right: 128px;
    height: 23px;
    width: 12px;
    border-radius: 100px;
    top: 13px;
    background: #5b3f27;
}
.cake_bottom3_cream13 {
    position: absolute;
    left: 116px;
    height: 59px;
    width: 36px;
    border-radius: 100px;
    background: #744c28;
    z-index: 2;
    top: 15px;
}
.cake_bottom3_cream14 {
    position: absolute;
    right: 108px;
    height: 64px;
    width: 20px;
    border-radius: 9px;
    background: #ff7fbf;
    z-index: 3;
}
.cake_bottom3_cream15 {
    position: absolute;
    right: 102px;
    height: 55px;
    width: 31px;
    border-radius: 100px;
    background: #5a4027;
    z-index: 2;
    top: 15px;
}
.cake_bottom3_cream16 {
    position: absolute;
    right: 93px;
    height: 23px;
    width: 15px;
    border-radius: 100px;
    top: 8px;
    background: #5b3f27;
}
.cake_bottom3_cream17 {
    position: absolute;
    right: 78px;
    height: 47px;
    width: 15px;
    border-radius: 9px;
    background: #ff7fbf;
}
.cake_bottom3_cream18 {
    position: absolute;
    right: 70px;
    height: 23px;
    width: 8px;
    border-radius: 100px;
    top: 16px;
    background: #5b3f27;
}
.cake_bottom3_cream19 {
    position: absolute;
    right: 58px;
    height: 30px;
    width: 12px;
    border-radius: 9px;
    background: #ff7fbf;
}
.cake_bottom3_cream20 {
    position: absolute;
    right: 43px;
    height: 23px;
    width: 15px;
    border-radius: 100px;
    top: 8px;
    background: #5b3f27;
}
.cake_bottom3_cream21 {
    position: absolute;
    right: 28px;
    height: 38px;
    width: 15px;
    border-radius: 9px;
    background: #ff7fbf;
}
.cake_bottom3_cream22 {
    position: absolute;
    right: 10px;
    height: 23px;
    width: 18px;
    border-radius: 100px;
    top: 14px;
    background: #5b3f27;
}
.cake_bottom3_cream23 {
    position: absolute;
    right: -3px;
    height: 30px;
    width: 13px;
    border-radius: 9px;
    background: #ff7fbf;
}
.cake_bottom1_creams {
    height: 10px;
    position: absolute;
    bottom: 0px;
    width: 100%;
}
.cake_bottom1_cream1 {
    position: absolute;
    left: 56px;
    height: 6px;
    width: 14px;
    border-radius: 20px 20px 0px 0px;
    background: #5a4027;
    bottom: 0px;
}
.cake_bottom1_cream2 {
    position: absolute;
    left: 115px;
    height: 5px;
    width: 10px;
    border-radius: 20px 20px 0px 0px;
    background: #5a4027;
    bottom: 0px;
}
.cake_bottom1_cream3 {
    position: absolute;
    right: 33px;
    height: 8px;
    width: 14px;
    border-radius: 20px 20px 0px 0px;
    background: #744c29;
    bottom: 0px;
}
.cake_bottom1_cream4 {
    position: absolute;
    right: 58px;
    height: 5px;
    width: 11px;
    border-radius: 20px 20px 0px 0px;
    background: #744c29;
    bottom: 0px;
}
.gift_top {
    -webkit-transition: all 0.6s ease-in-out;
    transition: all 0.6s ease-in-out;
    o-transition: all 0.6s ease-in-out;
    width: 100%;
    position: absolute;
    top: 0px;
    -webkit-transition-delay: 0.6s;
    transition-delay: 0.6s;
}
.gift:hover .gift_top {
    top: -100px;
    -webkit-transition-delay: 0.3s;
    transition-delay: 0.3s;
}
.gift_ribbon_left {
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    o-transition: all 0.3s ease-in-out;
    -webkit-transition-delay: 1s;
    transition-delay: 1s;
}
.gift_ribbon_center {
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    o-transition: all 0.3s ease-in-out;
    -webkit-transition-delay: 1s;
    transition-delay: 1s;
}
.gift:hover .gift_ribbon_left {
    height: 32px;
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
}
.gift:hover .gift_ribbon_center {
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
    height: 102px;
}
.gift_box_bottom_top {
    -webkit-transition-delay: 1.1s;
    transition-delay: 1.1s;
}
.gift:hover .gift_box_bottom_top {
    height: 0px;
    opacity: 0;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    -webkit-transition-delay: 0.4s;
    transition-delay: 0.4s;
    o-transition: all 0.3s ease-in-out;
}
.giftcard {
    border-radius: 5px;
    background: #fff;
    box-shadow: 0px 1px 0px 1px #fee4c0;
    padding: 10px;
    width: 80px;
    font-size: 15px;
font-family: 'Comfortaa', sans-serif;
    color: #ff3f48;
    left: 0px;
    top: 100px;
    right: 0px;
    margin: 0px auto;
    position: absolute;
    line-height: 26px;
    z-index: -1;
    text-align: center;
    -webkit-transition: all 0.6s ease-in-out;
    transition: all 0.6s ease-in-out;
    -webkit-transition-delay: 0.5s;
    transition-delay: 0.5s;
    o-transition: all 0.6s ease-in-out;
}
.gift:hover .giftcard {
    top: -10px;
}
.one_number {
    position: absolute;
    left: 160px;
    top: 25px;
    width: 9px;
}

.one_number:before {
    content: "";
    height: 25px;
    width: 5px;
    position: absolute;
    background: #c6c6c6;
    top: 0px;
    right: 0px;
}

.one_flame {
    height: 12px;
    width: 6px;
    border-radius: 100%;
    background: #ffd215;
    position: absolute;
    right: 1px;
    bottom: 2px;
    -webkit-animation: flame 0.5s infinite linear;
    animation: flame 0.5s infinite linear;
    -moz-animation: flame 0.5s infinite linear;
}
@-webkit-keyframes flame {
    0% {
        height: 12px;
        background: #fdd214;
    }
    50% {
        height: 14px;
        background: #ffc617;
    }
    100% {
        height: 12px;
        background: #fdd214;
    }
}
@keyframes flame {
    0% {
        height: 12px;
        background: #fdd214;
    }
    50% {
        height: 14px;
        background: #ffc617;
    }
    100% {
        height: 12px;
        background: #fdd214;
    }
}
@-moz-keyframes flame {
    0% {
        height: 12px;
        background: #fdd214;
    }
    50% {
        height: 14px;
        background: #ffc617;
    }
    100% {
        height: 12px;
        background: #fdd214;
    }
}
#wish{
  height: 700px;
  background-image: url("https://s-media-cache-ak0.pinimg.com/736x/7f/ce/d4/7fced48fd182676c0dcd493dbd2d2fb9.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}

#final {
                font-family:'Wendy One', sans-serif;
    height: 600px;
            }
			
			#final {
  background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 100, color-stop(0%, #374566), color-stop(100%, #010203));
  background-image: -webkit-radial-gradient(#374566, #010203);
  background-image: -moz-radial-gradient(#374566, #010203);
  background-image: -o-radial-gradient(#374566, #010203);
  background-image: radial-gradient(#374566, #010203);
}
            span {
                text-transform: uppercase;
            }
            .container {
                width: 800px;
                height: 420px;
                padding: 10px;
                margin: 0 auto;
                position: relative;
            }
            .balloon {
                width: 738px;
                margin: 0 auto;
                padding-top: 30px;
                position: relative;
            }
            .balloon > div {
                width: 104px;
                height: 140px;
                background: rgba(182, 15, 97, 0.9);
                border-radius: 0;
                border-radius: 80% 80% 80% 80%;
                margin: 0 auto;
                position: absolute;
                padding: 10px;
                box-shadow: inset 17px 7px 10px rgba(182, 15, 97, 0.9);
                -webkit-transform-origin: bottom center;
            }
            .balloon > div:nth-child(1) {
                background: rgba(182, 15, 97, 0.9);
                left: 0;
                box-shadow: inset 10px 10px 10px rgba(135, 11, 72, 0.9);
                -webkit-animation: balloon1 6s ease-in-out infinite;
                -moz-animation: balloon1 6s ease-in-out infinite;
                -o-animation: balloon1 6s ease-in-out infinite;
                animation: balloon1 6s ease-in-out infinite;
            }
            .balloon > div:nth-child(1):before {
                color: rgba(182, 15, 97, 0.9);
            }
            .balloon > div:nth-child(2) {
                background: rgba(242, 112, 45, 0.9);
                left: 120px;
                box-shadow: inset 10px 10px 10px rgba(222, 85, 14, 0.9);
                -webkit-animation: balloon2 6s ease-in-out infinite;
                -moz-animation: balloon2 6s ease-in-out infinite;
                -o-animation: balloon2 6s ease-in-out infinite;
                animation: balloon2 6s ease-in-out infinite;
            }
            .balloon > div:nth-child(2):before {
                color: rgba(242, 112, 45, 0.9);
            }
            .balloon > div:nth-child(3) {
                background: rgba(45, 181, 167, 0.9);
                left: 240px;
                box-shadow: inset 10px 10px 10px rgba(35, 140, 129, 0.9);
                -webkit-animation: balloon4 6s ease-in-out infinite;
                -moz-animation: balloon4 6s ease-in-out infinite;
                -o-animation: balloon4 6s ease-in-out infinite;
                animation: balloon4 6s ease-in-out infinite;
            }
            .balloon > div:nth-child(3):before {
                color: rgba(45, 181, 167, 0.9);
            }
            .balloon > div:nth-child(4) {
                background: rgba(190, 61, 244, 0.9);
                left: 360px;
                box-shadow: inset 10px 10px 10px rgba(173, 14, 240, 0.9);
                -webkit-animation: balloon1 5s ease-in-out infinite;
                -moz-animation: balloon1 5s ease-in-out infinite;
                -o-animation: balloon1 5s ease-in-out infinite;
                animation: balloon1 5s ease-in-out infinite;
            }
            .balloon > div:nth-child(4):before {
                color: rgba(190, 61, 244, 0.9);
            }
            .balloon > div:nth-child(5) {
                background: rgba(180, 224, 67, 0.9);
                left: 480px;
                box-shadow: inset 10px 10px 10px rgba(158, 206, 34, 0.9);
                -webkit-animation: balloon3 5s ease-in-out infinite;
                -moz-animation: balloon3 5s ease-in-out infinite;
                -o-animation: balloon3 5s ease-in-out infinite;
                animation: balloon3 5s ease-in-out infinite;
            }
            .balloon > div:nth-child(5):before {
                color: rgba(180, 224, 67, 0.9);
            }
            .balloon > div:nth-child(6) {
                background: rgba(242, 194, 58, 0.9);
                left: 600px;
                box-shadow: inset 10px 10px 10px rgba(234, 177, 15, 0.9);
                -webkit-animation: balloon2 3s ease-in-out infinite;
                -moz-animation: balloon2 3s ease-in-out infinite;
                -o-animation: balloon2 3s ease-in-out infinite;
                animation: balloon2 3s ease-in-out infinite;
            }
            .balloon > div:nth-child(6):before {
                color: rgba(242, 194, 58, 0.9);
            }
            .balloon > div:before {
                color: rgba(182, 15, 97, 0.9);
                position: absolute;
                bottom: -11px;
                left: 52px;
                content:"▲";
                font-size: 1em;
            }
            span {
                font-size: 4.8em;
                color: white;
                position: relative;
                top: 30px;
                left: 50%;
                margin-left: -70px;
            }
            /*BALLOON 1 4*/
            @-webkit-keyframes balloon1 {
                0%, 100% {
                    -webkit-transform: translateY(0) rotate(-6deg);
                }
                50% {
                    -webkit-transform: translateY(-20px) rotate(8deg);
                }
            }
            @-moz-keyframes balloon1 {
                0%, 100% {
                    -moz-transform: translateY(0) rotate(-6deg);
                }
                50% {
                    -moz-transform: translateY(-20px) rotate(8deg);
                }
            }
            @-o-keyframes balloon1 {
                0%, 100% {
                    -o-transform: translateY(0) rotate(-6deg);
                }
                50% {
                    -o-transform: translateY(-20px) rotate(8deg);
                }
            }
            @keyframes balloon1 {
                0%, 100% {
                    transform: translateY(0) rotate(-6deg);
                }
                50% {
                    transform: translateY(-20px) rotate(8deg);
                }
            }
            /* BAllOON 2 5*/
            @-webkit-keyframes balloon2 {
                0%, 100% {
                    -webkit-transform: translateY(0) rotate(6eg);
                }
                50% {
                    -webkit-transform: translateY(-30px) rotate(-8deg);
                }
            }
            @-moz-keyframes balloon2 {
                0%, 100% {
                    -moz-transform: translateY(0) rotate(6deg);
                }
                50% {
                    -moz-transform: translateY(-30px) rotate(-8deg);
                }
            }
            @-o-keyframes balloon2 {
                0%, 100% {
                    -o-transform: translateY(0) rotate(6deg);
                }
                50% {
                    -o-transform: translateY(-30px) rotate(-8deg);
                }
            }
            @keyframes balloon2 {
                0%, 100% {
                    transform: translateY(0) rotate(6deg);
                }
                50% {
                    transform: translateY(-30px) rotate(-8deg);
                }
            }
            /* BAllOON 0*/
            @-webkit-keyframes balloon3 {
                0%, 100% {
                    -webkit-transform: translate(0, -10px) rotate(6eg);
                }
                50% {
                    -webkit-transform: translate(-20px, 30px) rotate(-8deg);
                }
            }
            @-moz-keyframes balloon3 {
                0%, 100% {
                    -moz-transform: translate(0, -10px) rotate(6eg);
                }
                50% {
                    -moz-transform: translate(-20px, 30px) rotate(-8deg);
                }
            }
            @-o-keyframes balloon3 {
                0%, 100% {
                    -o-transform: translate(0, -10px) rotate(6eg);
                }
                50% {
                    -o-transform: translate(-20px, 30px) rotate(-8deg);
                }
            }
            @keyframes balloon3 {
                0%, 100% {
                    transform: translate(0, -10px) rotate(6eg);
                }
                50% {
                    transform: translate(-20px, 30px) rotate(-8deg);
                }
            }
            /* BAllOON 3*/
            @-webkit-keyframes balloon4 {
                0%, 100% {
                    -webkit-transform: translate(10px, -10px) rotate(-8eg);
                }
                50% {
                    -webkit-transform: translate(-15px, 20px) rotate(10deg);
                }
            }
            @-moz-keyframes balloon4 {
                0%, 100% {
                    -moz-transform: translate(10px, -10px) rotate(-8eg);
                }
                50% {
                    -moz-transform: translate(-15px, 10px) rotate(10deg);
                }
            }
            @-o-keyframes balloon4 {
                0%, 100% {
                    -o-transform: translate(10px, -10px) rotate(-8eg);
                }
                50% {
                    -o-transform: translate(-15px, 10px) rotate(10deg);
                }
            }
            @keyframes balloon4 {
                0%, 100% {
                    transform: translate(10px, -10px) rotate(-8eg);
                }
                50% {
                    transform: translate(-15px, 10px) rotate(10deg);
                }
            }
  #Biname {
                position: relative;
                top: 200px;
                text-align: center;
                color: white;
                font-size: 3.5em;
    padding-top: 100px;
    font-family: Comfortaa;
            }
#wishhead{
  padding-top: 100px;
  color: 	#8B4513;
  text-align: center;
  font-family: Lora;
}
#wishletter{
  color: 	#8B4513;
  padding-top: 60px;
  font-size: 20px;
  text-indent: 20px;
  font-family: Lobster;
}
#ps {
  font-size: 20px;
  color: 	#8B4513;
  font-family: Lobster;
}
.arrow {
  text-align: center;
  font-size: 50px;
}
#fortune{
  font-family: Lobster;
}
#Quanhname{
  position: relative;
                top: 200px;
                text-align: center;
                color: white;
                font-size: 1em;
    padding-top: 100px;
  font-family: Lobster;
}
#born {
  color: white;
}
            
          
!
            
              (function() {

  'use strict';

  // define variables
  var items = document.querySelectorAll(".timeline li");

  // check if an element is in viewport
  // http://stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport
  function isElementInViewport(el) {
    var rect = el.getBoundingClientRect();
    return (
      rect.top >= 0 &&
      rect.left >= 0 &&
      rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
      rect.right <= (window.innerWidth || document.documentElement.clientWidth)
    );
  }

  function callbackFunc() {
    for (var i = 0; i < items.length; i++) {
      if (isElementInViewport(items[i])) {
        items[i].classList.add("in-view");
      }
    }
  }

  // listen for events
  window.addEventListener("load", callbackFunc);
  window.addEventListener("resize", callbackFunc);
  window.addEventListener("scroll", callbackFunc);

})();

const TwoPI = Math.PI * 2;
var w = window.innerWidth;
var h = window.innerHeight;
var center_x = w / 2;
var center_y = h / 2;

var colors = ['#FF0000', '#E8D45B', '#8CFF00']

// I know the abs is not needed... but oh well
var max_distance = Math.abs(Math.max(center_x, center_y));
var min_distance = Math.abs(Math.min(center_x, center_y));
function Firefly(){
  this.velocity = 0;
  var random_angle = Math.random() * TwoPI;
  this.x = center_x +  Math.sin(random_angle) * ((Math.random() * (max_distance - min_distance) + min_distance));
  this.y = center_y + Math.cos(random_angle) * ((Math.random() * (max_distance - min_distance) + min_distance));

  
  
  this.angle_of_attack = Math.atan2(  this.y - center_y ,  this.x - center_x);
  this.vel =  ( Math.random() * 5 ) + 5 ;
  
  this.color = colors[ ~~(colors.length * Math.random()) ]
  
  
  this.xvel = this.vel * Math.cos( this.angle_of_attack );
  this.yvel = this.vel * Math.sin( this.angle_of_attack );
  this.size = 2 + Math.random() * 2;
  
  this.phase_diff = Math.random() * TwoPI;
    
}



Firefly.prototype.move = function(dt){
  if( isOnHeart(this.x, this.y)){
    this.size -= 0.001;
    return;
  }
  this.x += this.xvel * dt;
  this.y += this.yvel * dt;
}

Firefly.prototype.render = function(ctx, now){
  if( this.size < 1) {
    return;
  }
  ctx.globalAlpha = Math.max(Math.abs(Math.sin( (now + this.phase_diff) / (~~(this.size * 100)) )), 0.4);
  ctx.fillStyle = this.color;
  ctx.shadowColor = this.color;
  ctx.shadowBlur = 20 / this.size; 
  ctx.beginPath();
  ctx.arc( this.x, this.y, this.size, 0, TwoPI, false);
  ctx.closePath();
  ctx.fill();
}

var max_fireflies = 500;
var canvas = document.getElementById('can');
var ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

var fireflies = [];


var last = Date.now();
var dt = 0, now = 0;
var alive_fireflies = 0;
var last_emit = 0;

function render(){
  now = Date.now();
  dt = (last - now) / 1000; 
  last = now;
  ctx.clearRect(0,0,w,h);
  fireflies.forEach(function(f){
    f.move(dt);
    f.render(ctx, now);    
  });
  
  fireflies = fireflies.filter(function(f){
    return (f.size > 1);
  });

  alive_fireflies = fireflies.length;  
  
  if( alive_fireflies < max_fireflies && last_emit - now < - 100){
    fireflies.push( new Firefly());
    last_emit = now;
  }
  
  requestAnimationFrame(render);
}


render();

// 
function isOnHeart(x,y){
	  x = ((x - center_x) / (min_distance * 1.2)) * 1.8;
	  y = ((y - center_y) / (min_distance)) * - 1.8;

    var x2 = x * x;
  	var y2 = y * y;
    // Simplest Equation of lurve
    return (Math.pow((x2 + y2 - 1), 3) - (x2 * (y2 * y)) <= 0);
}



            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console