├── cake.png ├── cloud.png ├── cute.png ├── cute1.png ├── cute2.png ├── flag.png ├── heart.png ├── output.png ├── balloon.png ├── firework.png ├── giftbox.png ├── truongan.jpg ├── truongan.png ├── background.jpg ├── firework1.png ├── texthappy.png ├── paperCannons.png ├── paperCannons1.png ├── README.md ├── index.html └── style.css /cake.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Aoudumber-Bade/Happy-Birthday-Website/HEAD/cake.png -------------------------------------------------------------------------------- /cloud.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Aoudumber-Bade/Happy-Birthday-Website/HEAD/cloud.png -------------------------------------------------------------------------------- /cute.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Aoudumber-Bade/Happy-Birthday-Website/HEAD/cute.png -------------------------------------------------------------------------------- /cute1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Aoudumber-Bade/Happy-Birthday-Website/HEAD/cute1.png -------------------------------------------------------------------------------- /cute2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Aoudumber-Bade/Happy-Birthday-Website/HEAD/cute2.png -------------------------------------------------------------------------------- /flag.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Aoudumber-Bade/Happy-Birthday-Website/HEAD/flag.png -------------------------------------------------------------------------------- /heart.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Aoudumber-Bade/Happy-Birthday-Website/HEAD/heart.png -------------------------------------------------------------------------------- /output.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Aoudumber-Bade/Happy-Birthday-Website/HEAD/output.png -------------------------------------------------------------------------------- /balloon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Aoudumber-Bade/Happy-Birthday-Website/HEAD/balloon.png -------------------------------------------------------------------------------- /firework.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Aoudumber-Bade/Happy-Birthday-Website/HEAD/firework.png -------------------------------------------------------------------------------- /giftbox.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Aoudumber-Bade/Happy-Birthday-Website/HEAD/giftbox.png -------------------------------------------------------------------------------- /truongan.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Aoudumber-Bade/Happy-Birthday-Website/HEAD/truongan.jpg -------------------------------------------------------------------------------- /truongan.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Aoudumber-Bade/Happy-Birthday-Website/HEAD/truongan.png -------------------------------------------------------------------------------- /background.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Aoudumber-Bade/Happy-Birthday-Website/HEAD/background.jpg -------------------------------------------------------------------------------- /firework1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Aoudumber-Bade/Happy-Birthday-Website/HEAD/firework1.png -------------------------------------------------------------------------------- /texthappy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Aoudumber-Bade/Happy-Birthday-Website/HEAD/texthappy.png -------------------------------------------------------------------------------- /paperCannons.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Aoudumber-Bade/Happy-Birthday-Website/HEAD/paperCannons.png -------------------------------------------------------------------------------- /paperCannons1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Aoudumber-Bade/Happy-Birthday-Website/HEAD/paperCannons1.png -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 🎂✨ Happy Birthday Website ✨💻 2 | *A Code-Powered Birthday Gesture for Someone Special* 3 | 4 | ![Preview](./output.png) 5 | *Watch the full magic on [Instagram](https://www.instagram.com/reel/DG_AZoAo7P4/?igsh=bXl0MWFseXg1NG1w)* 6 | 7 | --- 8 | 9 | ## 🌟 **About This Project** 10 | I created this interactive birthday website for my crush to make her day extra special! It features: 11 | - 🎨 A beautifully decorated birthday card in the center of the screen. 12 | - 🎂 A big animated cake with festive GIFs. 13 | - ✨ Calligraphy-style "Happy Birthday" text. 14 | - 💌 A message icon that pops open with a heartfelt greeting when clicked. 15 | 16 | The website is fully responsive and designed to make her smile. 😊 17 | 18 | --- 19 | 20 | ## 🚀 **Why I Built This** 21 | Because why send a boring text when you can code a whole website, right? 😏 22 | This project is my way of combining my coding skills with a heartfelt gesture. Plus, it’s a fun and creative way to celebrate someone special! 23 | 24 | --- 25 | 26 | ## 🛠️ **Tech Stack** 27 | - **HTML5**: For the structure of the website. 28 | - **CSS3**: For styling, animations, and responsiveness. 29 | - **JavaScript**: For the interactive pop-up message. 30 | - **GIFs**: To add that extra festive vibe. 31 | 32 | --- 33 | 34 | ## 🎥 **Instagram Reel** 35 | I turned this project into a reel! Check it out here: [https://www.instagram.com/reel/DG_AZoAo7P4/?igsh=bXl0MWFseXg1NG1w] 36 | 37 | --- 38 | 39 | ## 🧑‍💻 **How to Use This Project** 40 | Want to surprise your crush or someone special? Here’s how you can use this project: 41 | 42 | 1. **Clone the Repository**: 43 | ```bash 44 | git clone https://github.com/your-username/Happy-Birthday-Website.git 45 | 46 | 2. **Customize the Content**: 47 | - Replace the text, images, and GIFs with your own. 48 | - Edit the pop-up message in the `script.js` file. 49 | 50 | 3. **Host It**: 51 | - Deploy it on GitHub Pages, Netlify, or any hosting platform. 52 | - Share the link with your crush! 53 | 54 | --- 55 | 56 | ## 💡 **Inspiration** 57 | If you’re a developer with a crush (or just someone who loves creative gestures), this project is for you! Feel free to fork it, customize it, and make someone’s day. 58 | 59 | --- 60 | 61 | ## 🙌 **Contributions** 62 | Got ideas to make this project even better? Open an issue or submit a pull request! Let’s make this the ultimate birthday surprise. 63 | 64 | --- 65 | 66 | ## 📝 **License** 67 | This project is open-source and available under the [MIT License](LICENSE). 68 | 69 | --- 70 | 71 | ## 💌 **Shoutout** 72 | A special thanks to my crush for inspiring this project. ❤️ 73 | *(And to all the developers out there coding their feelings instead of confessing them. 😂)* 74 | 75 | --- 76 | 77 | Made with ❤️ by [Aoudumber Bade](https://github.com/Aoudumber-Bade) -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | Have a Happy Birthday! 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 |

Happy Birthday

83 |
84 | 85 |
86 |
87 |
88 |
89 |

To You!

90 |

91 | Oh my goodness! Today is a very special day for a very special person. 92 | I wish you a birthday filled with meaning, joy, and happiness alongside your family and friends. 93 | May your new year be full of endless cheer and delight, making you shine brighter than ever. 94 | I hope you excel in your studies while taking good care of your health, and that you soon find the love you desire. 95 | Finally, I wish you the happiest birthday ever. May all the best things come your way! 96 |

97 |
98 | 99 |
100 |
101 |
102 |
103 |
104 |
105 | 106 | 107 |
108 |

OG Creator @aoudumber.dev

110 |
111 | 112 | 147 | 148 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap'); 2 | @import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&display=swap'); 3 | @import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,100..900;1,100..900&family=Inter:opsz,wght@14..32,500&family=Noto+Serif:ital,wght@0,100..900;1,100..900&family=Pacifico&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); 4 | 5 | 6 | *{ 7 | margin: 0; 8 | padding: 0; 9 | box-sizing: border-box; 10 | } 11 | body { 12 | display: flex; 13 | justify-content: center; 14 | align-items: center; 15 | min-height: 100vh; 16 | background: linear-gradient(to bottom, #ffffffc7, #ff0aa2bf), url(./background.jpg); 17 | overflow: hidden; 18 | font-family: "Inter", serif; 19 | } 20 | 21 | .container{ 22 | position: relative; 23 | width: 100%; 24 | height: 100%; 25 | display: flex; 26 | justify-content: center; 27 | flex-direction: column; 28 | align-items: center; 29 | } 30 | 31 | .container .boxcontainer { 32 | width: 700px; 33 | height: 450px; 34 | position: relative; 35 | display: flex; 36 | flex-direction: column; 37 | overflow: hidden; 38 | border-radius: 10px; 39 | box-shadow: -5px -5px 15px rgba(255, 255, 255), 5px 5px 15px rgb(0 0 0 / 65%); 40 | background-image: radial-gradient(circle farthest-corner at center, #ff6cae 0%, #ffffff 100%); 41 | animation: bgr 4s forwards; 42 | transition: 1s; 43 | } 44 | 45 | @keyframes bgr { 46 | 0%{ 47 | opacity: 0; 48 | visibility: hidden; 49 | } 50 | 100%{ 51 | opacity: 1; 52 | visibility: visible; 53 | } 54 | } 55 | .container .image{ 56 | position: relative; 57 | width: 100%; 58 | height: 100%; 59 | display: flex; 60 | justify-content: center; 61 | animation: flag 2s forwards; 62 | opacity: 0; 63 | visibility: hidden; 64 | animation-delay: 2s; 65 | z-index: 1; 66 | transition: all 1s; 67 | } 68 | @keyframes flag{ 69 | 0%{ 70 | opacity: 0; 71 | visibility: hidden; 72 | transform: translateY(-50px); 73 | } 74 | 100%{ 75 | opacity: 1; 76 | visibility: visible; 77 | transform: translateY(0); 78 | } 79 | } 80 | .container .image > img{ 81 | width: 500px; 82 | } 83 | .container .text-happybirthday{ 84 | position: absolute; 85 | width: 100%; 86 | height: 100%; 87 | left: 50%; 88 | transform: translateY(-160px); 89 | animation: texthappy 3s forwards; 90 | animation-delay: 3s; 91 | transition: 1s ease-in-out; 92 | } 93 | @keyframes texthappy{ 94 | 0%{ 95 | transform: translateY(-160px); 96 | } 97 | 40%{ 98 | transform: translateY(90px); 99 | } 100 | 50%{ 101 | transform: translateY(95px); 102 | } 103 | 55%{ 104 | transform: translateY(40px); 105 | } 106 | 60%{ 107 | transform: translateY(80px); 108 | } 109 | 70%{ 110 | transform: translateY(50px); 111 | } 112 | 80%, 90%, 100%{ 113 | transform: translateY(70px); 114 | } 115 | } 116 | .container .text-happybirthday::before{ 117 | position: absolute; 118 | content: ''; 119 | width: 2px; 120 | height: 150px; 121 | background: #333; 122 | top: -25%; 123 | z-index: -1; 124 | } 125 | .container .text-happybirthday img{ 126 | width: 200px; 127 | transform: translateX(-50%); 128 | } 129 | .container .cake{ 130 | position: absolute; 131 | width: 100%; 132 | height: 100%; 133 | display: flex; 134 | justify-content: center; 135 | outline: none; 136 | animation: cake 3s ease forwards; 137 | animation-delay: 4s; 138 | opacity: 0; 139 | visibility: hidden; 140 | z-index: 100000; 141 | } 142 | @keyframes cake{ 143 | 0%{ 144 | opacity: 1; 145 | visibility: visible; 146 | transform: translateY(200px); 147 | } 148 | 100%{ 149 | opacity: 1; 150 | visibility: visible; 151 | transform: translateY(0px); 152 | } 153 | } 154 | .container .cake img{ 155 | width: 300px; 156 | height: 200px; 157 | position: absolute; 158 | top: 50%; 159 | margin-top: 50px; 160 | z-index: 10000; 161 | transition: 1s; 162 | cursor: pointer; 163 | } 164 | .container .cake img:hover{ 165 | animation: cake1 0.5s infinite linear; 166 | } 167 | @keyframes cake1{ 168 | 0%{ 169 | transform: rotate(5deg); 170 | } 171 | 25%{ 172 | transform: rotate(0deg); 173 | } 174 | 50%{ 175 | transform: rotate(-5deg); 176 | } 177 | 75%{ 178 | transform: rotate(0deg); 179 | } 180 | 100%{ 181 | transform: rotate(5deg); 182 | } 183 | } 184 | .box-balloon{ 185 | position: absolute; 186 | width: 100%; 187 | height: 100%; 188 | } 189 | .box-balloon .balloon-item1{ 190 | position: absolute; 191 | } 192 | .box-balloon .balloon-item1 img{ 193 | width: 80px; 194 | } 195 | .box-balloon .balloon-item1:nth-child(1){ 196 | animation: item1 8s forwards, 197 | item2 4s 8s linear infinite; 198 | transition: all 1s; 199 | opacity: 0; 200 | visibility: hidden; 201 | } 202 | @keyframes item2{ 203 | 0%{ 204 | opacity: 1; 205 | visibility: visible; 206 | right: 86%; 207 | transform: translateX(0%) translateY(0px) rotate(0deg); 208 | bottom: 58%; 209 | } 210 | 25%{ 211 | opacity: 1; 212 | visibility: visible; 213 | right: 86%; 214 | transform: translateX(0%) translateY(5px) rotate(0deg); 215 | bottom: 58%; 216 | } 217 | 50%{ 218 | opacity: 1; 219 | visibility: visible; 220 | right: 86%; 221 | transform: translateX(0%) translateY(0px) rotate(0deg); 222 | bottom: 58%; 223 | } 224 | 75%{ 225 | opacity: 1; 226 | visibility: visible; 227 | right: 86%; 228 | transform: translateX(0%) translateY(-5px) rotate(0deg); 229 | bottom: 58%; 230 | } 231 | 100%{ 232 | opacity: 1; 233 | visibility: visible; 234 | right: 86%; 235 | transform: translateX(0%) translateY(0px) rotate(0deg); 236 | bottom: 58%; 237 | } 238 | } 239 | @keyframes item1{ 240 | 0%{ 241 | opacity: 1; 242 | visibility: visible; 243 | right: 0%; 244 | transform: translateX(-50%) rotate(5deg); 245 | bottom: -50%; 246 | } 247 | 10%{ 248 | transform: rotate(-5deg); 249 | } 250 | 20%{ 251 | transform: rotate(5deg); 252 | } 253 | 30%{ 254 | transform: rotate(-5deg); 255 | } 256 | 40%{ 257 | transform: rotate(5deg); 258 | } 259 | 50%{ 260 | transform: rotate(-5deg); 261 | } 262 | 60%{ 263 | transform: rotate(5deg); 264 | } 265 | 70%{ 266 | transform: rotate(-5deg); 267 | } 268 | 80%{ 269 | transform: rotate(5deg); 270 | } 271 | 90%{ 272 | transform: rotate(-5deg); 273 | } 274 | 100%{ 275 | opacity: 1; 276 | visibility: visible; 277 | right: 86%; 278 | transform: translateX(0%) rotate(0deg); 279 | bottom: 58%; 280 | } 281 | } 282 | .box-balloon .balloon-item1:nth-child(2){ 283 | animation: item3 8s forwards, 284 | item4 4s 8s linear infinite; 285 | transition: all 1s; 286 | opacity: 0; 287 | visibility: hidden; 288 | } 289 | @keyframes item4{ 290 | 0%{ 291 | opacity: 1; 292 | visibility: visible; 293 | left: 85%; 294 | transform: translateX(0%) translateY(0px) rotate(0deg); 295 | bottom: 60%; 296 | } 297 | 25%{ 298 | opacity: 1; 299 | visibility: visible; 300 | left: 85%; 301 | transform: translateX(0%) translateY(5px) rotate(0deg); 302 | bottom: 60%; 303 | } 304 | 50%{ 305 | opacity: 1; 306 | visibility: visible; 307 | left: 85%; 308 | transform: translateX(0%) translateY(0px) rotate(0deg); 309 | bottom: 60%; 310 | } 311 | 75%{ 312 | opacity: 1; 313 | visibility: visible; 314 | left: 85%; 315 | transform: translateX(0%) translateY(-5px) rotate(0deg); 316 | bottom: 60%; 317 | } 318 | 100%{ 319 | opacity: 1; 320 | visibility: visible; 321 | left: 85%; 322 | transform: translateX(0%) translateY(0px) rotate(0deg); 323 | bottom: 60%; 324 | } 325 | } 326 | @keyframes item3{ 327 | 0%{ 328 | opacity: 1; 329 | visibility: visible; 330 | left: 0%; 331 | transform: translateX(-50%) rotate(5deg); 332 | bottom: -50%; 333 | } 334 | 10%{ 335 | transform: rotate(-5deg); 336 | } 337 | 20%{ 338 | transform: rotate(5deg); 339 | } 340 | 30%{ 341 | transform: rotate(-5deg); 342 | } 343 | 40%{ 344 | transform: rotate(5deg); 345 | } 346 | 50%{ 347 | transform: rotate(-5deg); 348 | } 349 | 60%{ 350 | transform: rotate(5deg); 351 | } 352 | 70%{ 353 | transform: rotate(-5deg); 354 | } 355 | 80%{ 356 | transform: rotate(5deg); 357 | } 358 | 90%{ 359 | transform: rotate(-5deg); 360 | } 361 | 100%{ 362 | opacity: 1; 363 | visibility: visible; 364 | left: 85%; 365 | transform: translateX(0%) rotate(0deg); 366 | bottom: 60%; 367 | } 368 | } 369 | .container .box-cloud{ 370 | position: absolute; 371 | width: 100%; 372 | height: auto; 373 | } 374 | .container .cloud{ 375 | position: absolute; 376 | z-index: 10000; 377 | opacity: 0; 378 | animation: cloud 10s infinite linear; 379 | animation-delay: 4s; 380 | } 381 | @keyframes cloud{ 382 | 0%{ 383 | opacity: 1; 384 | transform: translateX(-100px); 385 | } 386 | 100%{ 387 | opacity: 1; 388 | transform: translateX(800px); 389 | } 390 | } 391 | .container .cloud:first-child{ 392 | display: flex; 393 | justify-content: center; 394 | align-items: center; 395 | } 396 | .container .cloud:first-child::before{ 397 | position: absolute; 398 | content: 'Please click on my letter'; 399 | text-align: center; 400 | font-family: 'Roboto', sans-serif; 401 | font-weight: 600; 402 | width: 60px; 403 | font-size: 9px; 404 | align-items: center; 405 | z-index: 100000; 406 | } 407 | .container .cloud:last-child::before{ 408 | position: absolute; 409 | content: 'Hello, hello'; 410 | font-family: 'Roboto', sans-serif; 411 | font-weight: 600; 412 | font-size: 9px; 413 | align-items: center; 414 | z-index: 100000; 415 | } 416 | .container .cloud:last-child{ 417 | position: absolute; 418 | z-index: 10000; 419 | opacity: 0; 420 | display: flex; 421 | justify-content: center; 422 | align-items: center; 423 | animation: cloud2 13s infinite linear; 424 | animation-delay: 4.5s; 425 | margin-top: 10px; 426 | } 427 | @keyframes cloud2{ 428 | 0%{ 429 | opacity: 1; 430 | transform: translateX(800px); 431 | } 432 | 100%{ 433 | opacity: 1; 434 | transform: translateX(-100px); 435 | } 436 | } 437 | .container .cloud > img{ 438 | width: 100px; 439 | filter: drop-shadow(1px 4px 0px rgb(188, 188, 188)); 440 | } 441 | .container .box-firework{ 442 | position: absolute; 443 | width: 100%; 444 | height: 100%; 445 | } 446 | .container .box-firework .firework{ 447 | position: absolute; 448 | width: 100%; 449 | height: 100%; 450 | opacity: 0; 451 | visibility: hidden; 452 | animation: firework 2s forwards; 453 | animation-delay: 5s; 454 | transform: translate(30px, 300px); 455 | } 456 | .container .box-firework .firework > img{ 457 | width: 100px; 458 | } 459 | @keyframes firework{ 460 | 0%{ 461 | opacity: 0; 462 | visibility: hidden; 463 | } 464 | 100%{ 465 | opacity: 1; 466 | visibility: visible; 467 | } 468 | } 469 | .container .box-firework .firework #firework1{ 470 | position: absolute; 471 | width: 20px; 472 | z-index: -1; 473 | opacity: 0; 474 | visibility: hidden; 475 | transform: translate(-50px, 35px); 476 | /* transform: translate(-60px, -50px); */ 477 | animation: firework1 2s linear infinite; 478 | animation-delay: 6s; 479 | transition: all 1s ease-in-out; 480 | } 481 | @keyframes firework1{ 482 | 0%{ 483 | opacity: 1; 484 | visibility: visible; 485 | transform: translate(-50px, 35px); 486 | width: 20px; 487 | } 488 | 100%{ 489 | opacity: 1; 490 | visibility: visible; 491 | width: 150px; 492 | transform: translate(-70px, -70px); 493 | } 494 | } 495 | .container .box-firework .firework:last-child{ 496 | transform: scaleX(-1); 497 | top: 300px; 498 | right: 30px; 499 | } 500 | .container .spark{ 501 | position: absolute; 502 | } 503 | span{ 504 | position: absolute; 505 | pointer-events: none; 506 | filter: drop-shadow(0 0 10px rgba(0,0,0,0.2)); 507 | animation: fadeInOut 1s linear infinite; 508 | } 509 | @keyframes fadeInOut{ 510 | 0%,100%{ 511 | opacity: 0; 512 | } 513 | 20%, 80%{ 514 | opacity: 1; 515 | } 516 | } 517 | .container .paperCannons{ 518 | position: absolute; 519 | width: 100%; 520 | height: 100%; 521 | z-index: -2; 522 | display: flex; 523 | justify-content: center; 524 | } 525 | .container .paperCannons > img{ 526 | width: 350px; 527 | transition: all 1s; 528 | animation: paperCannons 2s forwards; 529 | animation-delay: 7s; 530 | opacity: 0; 531 | visibility: hidden; 532 | } 533 | @keyframes paperCannons{ 534 | 0%{ 535 | opacity: 1; 536 | visibility: visible; 537 | transform: scale(0); 538 | } 539 | 100%{ 540 | opacity: 1; 541 | visibility: visible; 542 | transform: scale(1); 543 | } 544 | } 545 | .container .box-giftbox{ 546 | position: absolute; 547 | width: 100%; 548 | height: 100%; 549 | } 550 | .container .box-giftbox > img:nth-child(1){ 551 | width: 50px; 552 | margin-top: 360px; 553 | margin-left: 120px; 554 | transform: rotate(-10deg); 555 | animation: giftbox2 0.5s linear infinite; 556 | animation-delay: 8.5s; 557 | opacity: 0; 558 | visibility: hidden; 559 | transition: all 2s; 560 | } 561 | .container .box-giftbox > img:nth-child(2){ 562 | position: absolute; 563 | width: 30px; 564 | margin-top: 250px; 565 | margin-left: -150px; 566 | transform: rotate(15deg); 567 | filter: blur(1px); 568 | opacity: 0; 569 | visibility: hidden; 570 | animation: giftbox1 4s forwards; 571 | animation-delay: 8s; 572 | } 573 | .container .box-giftbox > img:nth-child(3){ 574 | position: absolute; 575 | width: 25px; 576 | margin-top: 200px; 577 | margin-left: 450px; 578 | transform: rotate(15deg); 579 | filter: blur(2px); 580 | opacity: 0; 581 | visibility: hidden; 582 | animation: giftbox1 4s forwards; 583 | animation-delay: 8s; 584 | } 585 | .container .box-giftbox > img:nth-child(4){ 586 | position: absolute; 587 | width: 55px; 588 | margin-top: 380px; 589 | margin-left: 340px; 590 | transform: rotate(15deg); 591 | animation: giftbox2 0.5s linear infinite; 592 | animation-delay: 8.5s; 593 | opacity: 0; 594 | visibility: hidden; 595 | transition: all 2s; 596 | } 597 | @keyframes giftbox1{ 598 | 0%{ 599 | opacity: 0; 600 | visibility: hidden; 601 | } 602 | 100%{ 603 | opacity: 1; 604 | visibility: visible; 605 | } 606 | } 607 | @keyframes giftbox2{ 608 | 0%{ 609 | visibility: visible; 610 | opacity: 1; 611 | transform: rotate(-10deg); 612 | } 613 | 25%{ 614 | opacity: 1; 615 | visibility: visible; 616 | transform: rotate(0deg); 617 | } 618 | 50%{ 619 | visibility: visible; 620 | opacity: 1; 621 | transform: rotate(10deg); 622 | } 623 | 75%{ 624 | opacity: 1; 625 | visibility: visible; 626 | transform: rotate(0deg); 627 | } 628 | 100%{ 629 | opacity: 1; 630 | visibility: visible; 631 | transform: rotate(-10deg); 632 | } 633 | } 634 | .container .box-giftbox > img:nth-child(5){ 635 | position: absolute; 636 | width: 30px; 637 | bottom: 0; 638 | transform: translate(-90px, 50px); 639 | animation: giftbox3 2s linear infinite; 640 | animation-delay: 10s; 641 | filter: drop-shadow(0 0 15px red); 642 | transition: all 1s; 643 | } 644 | .container .box-giftbox > img:nth-child(6){ 645 | position: absolute; 646 | width: 30px; 647 | bottom: 0; 648 | right: 0; 649 | transform: translate(-60px, 50px); 650 | animation: giftbox4 2s linear infinite; 651 | animation-delay: 11s; 652 | filter: drop-shadow(0 0 15px red); 653 | transition: all 1s; 654 | } 655 | @keyframes giftbox3{ 656 | 0%{ 657 | transform: translate(-100px, 35px); 658 | } 659 | 2%{ 660 | transform: translate(-80px, 5px) rotate(10deg); 661 | } 662 | 4%{ 663 | transform: translate(-70px, -25px) rotate(20deg); 664 | } 665 | 6%{ 666 | transform: translate(-55px, -50px) rotate(30deg); 667 | } 668 | 8%{ 669 | transform: translate(-50px, -60px) rotate(40deg); 670 | } 671 | 10%{ 672 | transform: translate(-45px, -70px) rotate(50deg); 673 | } 674 | 12%{ 675 | transform: translate(-40px, -80px) rotate(60deg); 676 | } 677 | 14%{ 678 | transform: translate(-35px, -90px) rotate(70deg); 679 | } 680 | 16%{ 681 | transform: translate(-30px, -100px) rotate(80deg); 682 | } 683 | 18%{ 684 | transform: translate(-25px, -110px) rotate(90deg); 685 | } 686 | 20%{ 687 | transform: translate(-20px, -115px) rotate(100deg); 688 | } 689 | 22%{ 690 | transform: translate(-15px, -120px) rotate(110deg) scale(1.1); 691 | } 692 | 26%{ 693 | transform: translate(-10px, -125px) rotate(120deg) scale(1.1); 694 | } 695 | 30%{ 696 | transform: translate(-5px, -130px) rotate(130deg) scale(1.2); 697 | } 698 | 40%{ 699 | transform: translate(0px, -135px) rotate(140deg) scale(1.2); 700 | } 701 | 50%{ 702 | transform: translate(5px, -140px) rotate(150deg) scale(1.2); 703 | } 704 | 60%{ 705 | transform: translate(10px, -145px) rotate(160deg) scale(1.3); 706 | } 707 | 70%{ 708 | transform: translate(20px, -150px) rotate(170deg) scale(1.3); 709 | } 710 | 75%{ 711 | transform: translate(30px, -150px) rotate(180deg) scale(1.3); 712 | } 713 | 80%{ 714 | transform: translate(40px, -150px) rotate(185deg) scale(1.2); 715 | } 716 | 82%{ 717 | transform: translate(50px, -145px) rotate(190deg) scale(1.1); 718 | } 719 | 84%{ 720 | transform: translate(55px, -140px) rotate(200deg) scale(1.1); 721 | } 722 | 86%{ 723 | transform: translate(60px, -135px) rotate(210deg) scale(1.1); 724 | } 725 | 88%{ 726 | transform: translate(65px, -130px) rotate(220deg) scale(0.9); 727 | } 728 | 90%{ 729 | transform: translate(70px, -110px) rotate(230deg) scale(0.9); 730 | } 731 | 92%{ 732 | transform: translate(80px, -80px) rotate(240deg) scale(0.8); 733 | } 734 | 94%{ 735 | transform: translate(90px, -55px) rotate(250deg) scale(0.8); 736 | } 737 | 96%{ 738 | transform: translate(100px, -20px) rotate(185deg) scale(0.7); 739 | } 740 | 98%{ 741 | transform: translate(110px, 5px) rotate(195deg) scale(0.6); 742 | } 743 | 100%{ 744 | transform: translate(120px, 35px) rotate(205deg) scale(0.5); 745 | } 746 | } 747 | @keyframes giftbox4{ 748 | 0%{ 749 | transform: translate(0px, 35px); 750 | } 751 | 2%{ 752 | transform: translate(-20px, 5px) rotate(10deg); 753 | } 754 | 4%{ 755 | transform: translate(-30px, -25px) rotate(20deg); 756 | } 757 | 6%{ 758 | transform: translate(-45px, -50px) rotate(30deg); 759 | } 760 | 8%{ 761 | transform: translate(-50px, -60px) rotate(40deg); 762 | } 763 | 10%{ 764 | transform: translate(-55px, -70px) rotate(50deg); 765 | } 766 | 12%{ 767 | transform: translate(-60px, -80px) rotate(60deg); 768 | } 769 | 14%{ 770 | transform: translate(-65px, -90px) rotate(70deg); 771 | } 772 | 16%{ 773 | transform: translate(-70px, -100px) rotate(80deg); 774 | } 775 | 18%{ 776 | transform: translate(-75px, -110px) rotate(90deg); 777 | } 778 | 20%{ 779 | transform: translate(-80px, -115px) rotate(100deg); 780 | } 781 | 22%{ 782 | transform: translate(-85px, -120px) rotate(110deg) scale(1.1); 783 | } 784 | 26%{ 785 | transform: translate(-90px, -125px) rotate(120deg) scale(1.1); 786 | } 787 | 30%{ 788 | transform: translate(-95px, -130px) rotate(130deg) scale(1.2); 789 | } 790 | 40%{ 791 | transform: translate(-100px, -135px) rotate(140deg) scale(1.2); 792 | } 793 | 50%{ 794 | transform: translate(-105px, -140px) rotate(150deg) scale(1.2); 795 | } 796 | 60%{ 797 | transform: translate(-110px, -145px) rotate(160deg) scale(1.3); 798 | } 799 | 70%{ 800 | transform: translate(-120px, -150px) rotate(170deg) scale(1.3); 801 | } 802 | 75%{ 803 | transform: translate(-130px, -150px) rotate(180deg) scale(1.3); 804 | } 805 | 80%{ 806 | transform: translate(-140px, -150px) rotate(185deg) scale(1.2); 807 | } 808 | 82%{ 809 | transform: translate(-150px, -145px) rotate(190deg) scale(1.1); 810 | } 811 | 84%{ 812 | transform: translate(-155px, -140px) rotate(200deg) scale(1.1); 813 | } 814 | 86%{ 815 | transform: translate(-160px, -135px) rotate(210deg) scale(1.1); 816 | } 817 | 88%{ 818 | transform: translate(-165px, -130px) rotate(220deg) scale(0.9); 819 | } 820 | 90%{ 821 | transform: translate(-170px, -110px) rotate(230deg) scale(0.9); 822 | } 823 | 92%{ 824 | transform: translate(-180px, -80px) rotate(240deg) scale(0.8); 825 | } 826 | 94%{ 827 | transform: translate(-190px, -55px) rotate(250deg) scale(0.8); 828 | } 829 | 96%{ 830 | transform: translate(-200px, -20px) rotate(185deg) scale(0.7); 831 | } 832 | 98%{ 833 | transform: translate(-210px, 5px) rotate(195deg) scale(0.6); 834 | } 835 | 100%{ 836 | transform: translate(-220px, 35px) rotate(205deg) scale(0.5); 837 | } 838 | } 839 | .container .mail{ 840 | position: absolute; 841 | width: 100px; 842 | height: 100px; 843 | display: flex; 844 | justify-content: center; 845 | align-items: center; 846 | top: 50%; 847 | left: 50%; 848 | transform: translate(-50%, -50%); 849 | opacity: 0; 850 | visibility: hidden; 851 | animation: envelope 1s forwards; 852 | animation-delay: 11.5s; 853 | z-index: 100000000; 854 | } 855 | .container .mail .fa-envelope{ 856 | position: absolute; 857 | margin-top: 50px; 858 | font-size: 40px; 859 | color: red; 860 | cursor: pointer; 861 | z-index: 1000000; 862 | display: flex; 863 | justify-content: center; 864 | align-items: center; 865 | } 866 | @keyframes envelope{ 867 | 0%{ 868 | opacity: 1; 869 | visibility: visible; 870 | } 871 | 100%{ 872 | opacity: 1; 873 | visibility: visible; 874 | } 875 | 876 | } 877 | .container .mail .fa-envelope:hover{ 878 | filter: drop-shadow(0 0 10px red); 879 | animation: mail1 0.3s infinite ease-in-out; 880 | transition: all 1s ease-in; 881 | } 882 | @keyframes mail1{ 883 | 0%{ 884 | transform: rotate(-10deg); 885 | } 886 | 25%{ 887 | transform: rotate(0deg); 888 | } 889 | 50%{ 890 | transform: rotate(10deg); 891 | } 892 | 75%{ 893 | transform: rotate(0deg); 894 | } 895 | 100%{ 896 | transform: rotate(-10deg); 897 | } 898 | } 899 | .container .mail .fa-envelope::after{ 900 | position: absolute; 901 | content: ''; 902 | width: 55px; 903 | height: 45px; 904 | background: white; 905 | z-index: -1; 906 | border-radius: 10px; 907 | } 908 | .container .boxcute{ 909 | position: absolute; 910 | width: 100%; 911 | height: 100%; 912 | } 913 | .container .cute1{ 914 | position: absolute; 915 | top: 210px; 916 | left: -100px; 917 | animation: cute 3s infinite ease-in-out; 918 | animation-delay: 13s; 919 | } 920 | @keyframes cute{ 921 | 0%{ 922 | transform: translateX(0px) rotateZ(0deg) scale(0.7); 923 | } 924 | 50%,60%, 70%,80%,90%,95%{ 925 | transform: translateX(70px) rotateZ(45deg) scale(1.3); 926 | } 927 | 100%{ 928 | transform: translateX(10px) rotateZ(0deg) scale(0.3); 929 | } 930 | } 931 | .container .cute1::after{ 932 | position: absolute; 933 | content: 'Surprised yet, my special girl?'; 934 | font-family: 'Roboto', sans-serif; 935 | text-align: center; 936 | padding: 10px; 937 | width: 80px; 938 | font-size: 10px; 939 | background: white; 940 | border-radius: 15px; 941 | margin-top: -30px; 942 | margin-left: -40px; 943 | animation: cutemail 3s linear infinite; 944 | animation-delay: 13s; 945 | z-index: -1; 946 | opacity: 0; 947 | font-weight: 600; 948 | } 949 | @keyframes cutemail{ 950 | 0%{ 951 | opacity: 1; 952 | transform: translate(-60px, 40px) scale(0.1); 953 | } 954 | 50%, 60%, 70%, 80%, 90%, 95%, 99%{ 955 | opacity: 1; 956 | transform: translate(0, 0) scale(1); 957 | } 958 | 100%{ 959 | opacity: 1; 960 | transform: translate(-60px, 40px) scale(0.1); 961 | } 962 | } 963 | .container .cute2{ 964 | position: absolute; 965 | top: 210px; 966 | right: -100px; 967 | transform: scaleX(-1); 968 | animation: cute2 3s infinite ease-in-out; 969 | animation-delay: 12s; 970 | } 971 | @keyframes cute2{ 972 | 0%{ 973 | transform: translateX(0px) rotateZ(0deg) scale(0.7); 974 | } 975 | 50%,60%, 70%,80%,90%,95%{ 976 | transform: translateX(-70px) rotateZ(-45deg) scale(1.3); 977 | } 978 | 100%{ 979 | transform: translateX(-10px) rotateZ(0deg) scale(0.3); 980 | } 981 | } 982 | .container .cute2::after{ 983 | position: absolute; 984 | content: 'Wow!'; 985 | font-family: 'Roboto', sans-serif; 986 | text-align: center; 987 | padding: 10px; 988 | width: 80px; 989 | font-size: 10px; 990 | background: white; 991 | border-radius: 15px; 992 | margin-top: -30px; 993 | margin-left: -100px; 994 | animation: cutemail2 3s linear infinite; 995 | animation-delay: 12s; 996 | z-index: -1; 997 | opacity: 0; 998 | font-weight: 600; 999 | } 1000 | @keyframes cutemail2{ 1001 | 0%{ 1002 | opacity: 1; 1003 | transform: translate(-10px, 70px) scale(0.1); 1004 | } 1005 | 50%, 60%, 70%, 80%, 90%, 95%, 99%{ 1006 | opacity: 1; 1007 | transform: translate(0, 0) scale(1); 1008 | } 1009 | 100%{ 1010 | opacity: 1; 1011 | transform: translate(-10px, 70px) scale(0.1); 1012 | } 1013 | } 1014 | .container .cute1 img{ 1015 | width: 100px; 1016 | height: 100px; 1017 | } 1018 | .container .cute2 img{ 1019 | width: 100px; 1020 | height: 100px; 1021 | } 1022 | .boxMail{ 1023 | position: fixed; 1024 | background: rgb(0, 0, 0, 0.8); 1025 | width: 100%; 1026 | height: 100%; 1027 | opacity: 0; 1028 | top: 0; 1029 | display: flex; 1030 | justify-content: center; 1031 | align-items: center; 1032 | transform: scale(0.3); 1033 | visibility: hidden; 1034 | transition: all 0.5s; 1035 | z-index: 100000000; 1036 | } 1037 | .boxMail.active{ 1038 | opacity: 1; 1039 | visibility: visible; 1040 | transform: scale(1); 1041 | } 1042 | .boxMail .boxMail-container{ 1043 | position: absolute; 1044 | width: 750px; 1045 | height: 500px; 1046 | display: flex; 1047 | margin: 0; 1048 | transform: scale(0.9); 1049 | -webkit-perspective: 2000px; 1050 | perspective: 2000px; 1051 | transition: all 0.5s; 1052 | } 1053 | .boxMail .boxMail-container:hover{ 1054 | transform: rotate(-5deg); 1055 | filter: drop-shadow(0 0 10px red); 1056 | } 1057 | .boxMail .boxMail-container:hover .card1{ 1058 | transform: translate(-187px, -250px) rotateY(-140deg); 1059 | } 1060 | .boxMail .boxMail-container .card1, 1061 | .boxMail .boxMail-container .card2{ 1062 | position: absolute; 1063 | width: 100%; 1064 | height: 100%; 1065 | top: 50%; 1066 | left: 50%; 1067 | transform: translate(-50%, -50%); 1068 | border: 1px solid black; 1069 | } 1070 | .boxMail .boxMail-container .card1 { 1071 | position: absolute; 1072 | width: 50%; 1073 | height: 100%; 1074 | background: linear-gradient(to right, rgb(237 32 32), rgb(255 91 91) 63%); 1075 | color: white; 1076 | display: flex; 1077 | justify-content: center; 1078 | align-items: center; 1079 | flex-direction: column; 1080 | } 1081 | .boxMail-container .card1{ 1082 | z-index: 1; 1083 | -webkit-transform-style: preserve-3d; 1084 | transform-style: preserve-3d; 1085 | transform-origin: left; 1086 | transition: all 1s ease-in-out; 1087 | } 1088 | .boxMail .boxMail-container .card1 .userImg{ 1089 | position: relative; 1090 | width: 80px; 1091 | height: 80px; 1092 | background-color: white; 1093 | border-radius: 50%; 1094 | overflow: hidden; 1095 | border: 2px solid white; 1096 | cursor: pointer; 1097 | margin-bottom: 20px; 1098 | } 1099 | .boxMail .boxMail-container .card1 .userImg img{ 1100 | position: absolute; 1101 | object-fit: cover; 1102 | width: calc(100%); 1103 | height: calc(100%); 1104 | } 1105 | .boxMail .boxMail-container .card1 h3{ 1106 | font-family: 'Dancing Script', cursive; 1107 | font-size: 40px; 1108 | text-transform: uppercase; 1109 | width: 80%; 1110 | text-align: center; 1111 | line-height: 1.5; 1112 | letter-spacing: 5px; 1113 | transform: rotate(-5deg); 1114 | text-shadow: 0 0 5px white, 1115 | 0 0 10px white; 1116 | } 1117 | .boxMail .boxMail-container .card2{ 1118 | position: relative; 1119 | width: 50%; 1120 | height: 100%; 1121 | background: linear-gradient(to right, #e0e0e0, #ffffff 30%); 1122 | -webkit-transform-style: preserve-3d; 1123 | transform-style: preserve-3d; 1124 | transform-origin: left; 1125 | transition: all 1s; 1126 | } 1127 | .boxMail .boxMail-container .card2 .card2-content { 1128 | width: 100%; 1129 | height: 100%; 1130 | position: relative; 1131 | background-color: #ff4275; 1132 | transition: all 1s; 1133 | overflow: hidden; 1134 | font-family: "Inter", serif; 1135 | color: #fff; 1136 | } 1137 | .boxMail .boxMail-container:hover .card2-content{ 1138 | transform: translate(20px, 20px); 1139 | box-shadow: -1px -1px 5px rgb(0, 0, 0, 0.4); 1140 | } 1141 | .boxMail .boxMail-container .card2 h3{ 1142 | font-family: 'Dancing Script', cursive; 1143 | padding: 20px 0px 10px 60px; 1144 | opacity: 0; 1145 | visibility: hidden; 1146 | font-size: 25px; 1147 | text-shadow: 0 0 8px red; 1148 | } 1149 | .boxMail .boxMail-container .card2:hover h3{ 1150 | animation: texth3 3s forwards; 1151 | animation-delay: 2s; 1152 | transition: 1s; 1153 | } 1154 | @keyframes texth3{ 1155 | 0%{ 1156 | opacity: 1; 1157 | visibility: visible; 1158 | padding: 20px 0px 10px 60px; 1159 | } 1160 | 100%{ 1161 | opacity: 1; 1162 | visibility: visible; 1163 | padding: 20px 0px 10px 152px; 1164 | } 1165 | } 1166 | .boxMail .boxMail-container .card2 h2{ 1167 | font-family: 'Dancing Script', cursive; 1168 | padding: 0px 20px; 1169 | text-indent: 20px; 1170 | font-size: 17px; 1171 | opacity: 0; 1172 | } 1173 | .boxMail .boxMail-container .card2:hover h2{ 1174 | animation: texth2 2s forwards; 1175 | animation-delay: 4s; 1176 | transition: 1s; 1177 | } 1178 | @keyframes texth2{ 1179 | 0%{ 1180 | opacity: 0; 1181 | } 1182 | 100%{ 1183 | opacity: 1; 1184 | } 1185 | } 1186 | .boxMail .boxMail-container .card2 .card2-content .imageCute2{ 1187 | position: absolute; 1188 | top: 5px; 1189 | left: 20px; 1190 | opacity: 0; 1191 | transition: 1s; 1192 | } 1193 | .boxMail .boxMail-container .card2 .card2-content:hover .imageCute2{ 1194 | animation: cute3 1s linear infinite, 1195 | cute4 3s 2s forwards; 1196 | animation-delay: 2s; 1197 | transition: 1s; 1198 | } 1199 | @keyframes cute3{ 1200 | 0%{ 1201 | opacity: 1; 1202 | transform: rotate(0deg); 1203 | } 1204 | 25%{ 1205 | opacity: 1; 1206 | transform: rotate(5deg); 1207 | } 1208 | 50%{ 1209 | opacity: 1; 1210 | transform: rotate(0deg); 1211 | } 1212 | 75%{ 1213 | opacity: 1; 1214 | transform: rotate(-5deg); 1215 | } 1216 | 100%{ 1217 | opacity: 1; 1218 | transform: rotate(0deg); 1219 | } 1220 | } 1221 | @keyframes cute4{ 1222 | 0%{ 1223 | left: 20px; 1224 | } 1225 | 100%{ 1226 | left: 100px; 1227 | } 1228 | } 1229 | .boxMail .boxMail-container .card2 .card2-content .imageCute2 img{ 1230 | width: 40px; 1231 | } 1232 | .boxMail .fa-xmark{ 1233 | position: fixed; 1234 | top: 0; 1235 | right: 0; 1236 | font-size: 30px; 1237 | padding: 10px 25px; 1238 | cursor: pointer; 1239 | color: white; 1240 | z-index: 10000000000000000; 1241 | } 1242 | 1243 | /* ----- Mouse move effect ----- */ 1244 | span::before{ 1245 | content: ''; 1246 | position: absolute; 1247 | width: 100%; 1248 | height: 100%; 1249 | background: url(heart.png); 1250 | background-size: cover; 1251 | animation: moveheart 1s linear infinite; 1252 | } 1253 | @keyframes moveheart{ 1254 | 0%{ 1255 | transform: translate(0) rotate(0deg); 1256 | } 1257 | 100%{ 1258 | transform: translate(100px) rotate(360deg); 1259 | } 1260 | } 1261 | /* ------ End mouse move effect ----- */ 1262 | 1263 | 1264 | 1265 | #copy { 1266 | position: fixed; 1267 | bottom: 12px; 1268 | left: 50%; 1269 | transform: translateX(-50%); 1270 | font-size: 1rem; 1271 | } 1272 | 1273 | #copy a { 1274 | text-decoration: none; 1275 | color: #191919d7; 1276 | } 1277 | 1278 | #copy p { 1279 | color: #fff6f9; 1280 | text-align: center; 1281 | font-weight: 700; 1282 | cursor: pointer; 1283 | } 1284 | --------------------------------------------------------------------------------