index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Happy Birthday!!! :)</title>
  <link href="https://fonts.googleapis.com/css?family=Work+Sans:300,400" rel="stylesheet">
  <link rel="shortcut icon" type="image/png" href="img/favicon.png" />
  <link rel="stylesheet" href="style/style.css">
</head>

<body>
  <div class="container">
    <div class="one">
      <h1 class="one">
        <span data-node-name="greeting">Hey</span>
        <span data-node-name="name">Lydia</span>
      </h1>
      <p class="two" data-node-name="greetingText">I really like your name btw!</p>
    </div>
    <div class="three">
      <p data-node-name="text1">It's your birthday!!! :D</p>
    </div>
    <div class="four">
      <div class="text-box">
        <p class="hbd-chatbox" data-node-name="textInChatBox">Happy birthday to you!! Yeee! Many many happy blah...</p>
        <p class="fake-btn" data-node-name="sendButtonLabel">Send</p>
      </div>
    </div>
    <div class="five">
      <p class="idea-1" data-node-name="text2">That's what I was going to do.</p>
      <p class="idea-2" data-node-name="text3">But then I stopped.</p>
      <p class="idea-3">
        <span data-node-name="text4">I realised, I wanted to do something</span>
        <strong data-node-name="text4Adjective">special</strong>.</p>
      <p class="idea-4" data-node-name="text5Entry">Because,</p>
      <p class="idea-5">
        <span data-node-name="text5Content">You are Special</span>
        <span class="smiley" data-node-name="smiley">:)</span>
      </p>
      <p class="idea-6">
        <span data-node-name="bigTextPart1">S</span>
        <span data-node-name="bigTextPart2">O</span>
      </p>
    </div>
    <div class="six">
      <img src="img/lydia2.png" alt="" class="lydia-dp" data-node-name="imagePath">
      <img src="img/hat.svg" alt="" class="hat">
      <div class="wish">
        <h3 class="wish-hbd" data-node-name="wishHeading">Happy Birthday!</h3>
        <h5 data-node-name="wishText">May the js.prototypes always be with you! ;)</h5>
      </div>
    </div>
    <div class="seven">
      <div class="baloons">
        <img src="img/ballon2.svg" alt="">
        <img src="img/ballon1.svg" alt="">
        <img src="img/ballon3.svg" alt="">
        <img src="img/ballon1.svg" alt="">
        <img src="img/ballon2.svg" alt="">
        <img src="img/ballon3.svg" alt="">
        <img src="img/ballon2.svg" alt="">
        <img src="img/ballon3.svg" alt="">
        <img src="img/ballon1.svg" alt="">
        <img src="img/ballon2.svg" alt="">
        <img src="img/ballon3.svg" alt="">
        <img src="img/ballon2.svg" alt="">
        <img src="img/ballon1.svg" alt="">
        <img src="img/ballon3.svg" alt="">
        <img src="img/ballon2.svg" alt="">
        <img src="img/ballon3.svg" alt="">
        <img src="img/ballon1.svg" alt="">
        <img src="img/ballon2.svg" alt="">
        <img src="img/ballon1.svg" alt="">
        <img src="img/ballon3.svg" alt="">
        <img src="img/ballon3.svg" alt="">
        <img src="img/ballon1.svg" alt="">
        <img src="img/ballon2.svg" alt="">
        <img src="img/ballon3.svg" alt="">
        <img src="img/ballon2.svg" alt="">
        <img src="img/ballon1.svg" alt="">
        <img src="img/ballon3.svg" alt="">
        <img src="img/ballon2.svg" alt="">
        <img src="img/ballon3.svg" alt="">
        <img src="img/ballon1.svg" alt="">
        <img src="img/ballon2.svg" alt="">
        <img src="img/ballon1.svg" alt="">
        <img src="img/ballon3.svg" alt="">
      </div>
    </div>
    <div class="eight">
      <svg viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
        <circle cx="20" cy="20" r="20" />
      </svg>
      <svg viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
        <circle cx="20" cy="20" r="20" />
      </svg>
      <svg viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
        <circle cx="20" cy="20" r="20" />
      </svg>
      <svg viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
        <circle cx="20" cy="20" r="20" />
      </svg>
      <svg viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
        <circle cx="20" cy="20" r="20" />
      </svg>
      <svg viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
        <circle cx="20" cy="20" r="20" />
      </svg>
      <svg viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
        <circle cx="20" cy="20" r="20" />
      </svg>
      <svg viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
        <circle cx="20" cy="20" r="20" />
      </svg>
      <svg viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
        <circle cx="20" cy="20" r="20" />
      </svg>
    </div>
    <div class="nine">
      <p data-node-name="outroText">Okay, now come back and tell me if you liked it.</p>
      <p id="replay" data-node-name="replayText">Or click, if you want to watch it again.</p>
      <p class="last-smile" data-node-name="outroSmiley">:)</p>
    </div>
  </div>
</body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
<script type="application/javascript" src="script/main.js"></script>

</html>