| <!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/hbd.mpeg"> |
| </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">lol bro thinks im kidding</span> |
| </h1> |
| <p class="two" id="greetingText">I really like your name btw!</p> |
| </div> |
|
|
| <div class="three"> |
| <p>It's your birthday!! :D</p> |
| </div> |
|
|
| <div class="four"> |
| <div class="text-box"> |
| <p class="hbd-chatbox"> |
| Happy Birthday to youu!! 🎂🎉🥳 |
| Wishing you endless joy, laughter, and success today and always. |
| May your new age bring more blessings, great memories, and beautiful moments worth celebrating. 💫✨ |
| </p> |
| <p class="fake-btn">Okayyy? 💝</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/pelumi.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!</h3> |
| <h5 id="wishText">May <b style="color:purple;">Akorede Ogunsola</b> (@certified_coder) 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>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> |
|
|
