-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
62 lines (53 loc) · 2.67 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>
<link rel="stylesheet" href="./style.css">
<link rel="shortcut icon" href="./assets/confetti.ico" type="image/x-icon">
<title>Happy Birthday</title>
</head>
<body class="box-border text-neutral-50 bg-neutral-900 p-2 select-none">
<div class="s1 p-2 hidden flex flex-col justify-center items-center text-3xl md:text-5xl text-slate-800">
<h1 class="s1_1 " style="color: aliceblue;">Hey!</h1>
<h1 class="s1_2" style="color: coral;">Jhanker Mahbub , it's your Birthday</h1>
</div>
<div class="s2 p-2 hidden flex flex-col justify-center items-center text-3xl md:text-5xl text-slate-800">
<p class="text-center " style="color: greenyellow;">Click on the Gift</p>
<div class="flex mt-80 justify-center items-center">
<button id="giftBtn">
<img
src="./assets/gift.png" alt="gift image"
class="h-auto w-16 md:w-32 "
>
</button>
</div>
</div>
<div class="s3 hidden m-4 flex sm:flex-col md:flex-row">
<div class="msg flex flex-col justify-center items-center gap-4">
<h3 class="glow p-1 text-4xl md:text-6xl">Happy Birthday Jhanker Mahbub</h4>
<div class="imgDiv box-border p-5 relative">
<img
src="./assets/birthdayPerson.jpg"
class="h-auto w-full object-cover "
style="max-height: 500px;"
/>
<!-- <img
src="assets/cap.png"
id="cap" alt="Birthday cap"
class="absolute left-1/2 transform -translate-x-1/2 bottom-0 mx-auto w-full max-w-full h-auto"
style="z-index: 999;"
> -->
</div>
</div>
</div>
<!-- Music by <a href="https://pixabay.com/users/nesrality-22721863/?utm_source=link-attribution&utm_medium=referral&utm_campaign=music&utm_content=117436">Nesrality</a> from <a href="https://pixabay.com//?utm_source=link-attribution&utm_medium=referral&utm_campaign=music&utm_content=117436">Pixabay</a> -->
<audio id="myAudio" class="hidden" controls muted>
<source src="assets/birthday.mp3" type="audio/mpeg" >
</audio>
</body>
<script src="index.js" defer></script>
</html>