File size: 6,367 Bytes
ddc8ba8 a50861d ddc8ba8 521c099 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 | <!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>
<!-- Google Font -->
<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">
<!-- My Style -->
<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>
<!-- Greensock -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
<!-- Sweetalert -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script type="application/javascript" src="./script/main.js"></script>
</html>
|