@ivellyno1337/happybirthday

<!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" /> <link rel="shortcut icon" type="image/png" href="img/favicon.png" /> <title>Happy Birthday!!! :)</title>  <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400&display=swap" rel="stylesheet">  <link rel="stylesheet" href="./style/main.css" /> </head> <body> <audio class="song" loop autoplay> <source src="./music/SZA - Nobody Gets Me.mp3"> </source> Your browser isn't invited for super fun audio time. </audio> <div class="container"> <div class="one"> <h1 class="one"> Hi <span id="name">Syalfa Inaya Arachmani</span> </h1> <p class="two" id="greetingText">What day is it today?</p> </div> <div class="three"> <p>Not Sunday or Weekend</p> <br> <p>But Today Is Your Birthday</p> </div> <div class="four"> <div class="text-box"> <p class="hbd-chatbox"> Happy birthday to Syalfa Inaya Arachmani! Wishing you boundless joy and endless blessings on this special day. May each step you take be filled with luck, success, and infinite love. Thank you for being such a special part of my lives. May this year be filled with beautiful moments and unforgettable memories. Happy birthday, may you shine brighter and flourish in this new year! </p> <p class="fake-btn">Click For Next</p> </div> </div> <div class="five"> <p class="idea-1">That's what I was going to do.</p> <p class="idea-2">But then I stopped.</p> <p class="idea-3"> I realised, I wanted to do something<br> <strong>special</strong> . </p> <p class="idea-4">Because,</p> <p class="idea-5"> You are Special <span>:)</span> </p> <p class="idea-6"> <span>S</span> <span>O</span> </p> </div> <div class="six"> <img src="./img/hbd al (3).jpg" alt="profile" class="profile-picture" id="imagePath"/> <img src="img/hat.svg" alt="hat" class="hat" /> <div class="wish"> <h3 class="wish-hbd">Happy Birthday Nanaaay!</h3> <h5 id="wishText">Wish U All The Best Always Bby ;)</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>Okay, now come back and tell me if you liked it.</p> <p id="replay">Or click, if you want to watch it again.</p> <p class="last-smile">:)</p> </div> </div> </body>  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>  <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script> <script type="application/javascript" src="./script/main.js"></script> </html>