Skip to content

Commit cf3de91

Browse files
nikitayadav19nikitayadav19
committed
Initial commit 🎂 Happy Birthday Website
0 parents  commit cf3de91

13 files changed

Lines changed: 1029 additions & 0 deletions

File tree

‎README.md‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
# 🎂 Happy Birthday Mini Website 🎉
2+
3+
A beautiful, interactive mini website I built to celebrate my girlfriend’s special day ❤️.
4+
This project is made with **HTML, CSS, and JavaScript** and includes animations, surprises, and heartfelt wishes.
5+
6+
✨ Anyone can use this project to create a unique online birthday greeting for their loved one!
7+
8+
---
9+
10+
## 🚀 Live Demo
11+
👉 [Click here to view the site](https://nikitayadav19.github.io/HappyBirthdayGF)
12+
13+
---
14+
15+
16+
## 🎁 Features
17+
- 💌 Heartfelt birthday message with typewriter effect
18+
- 🌟 Responsive design (works on phone & desktop)
19+
- ✨ Easy to customize for anyone
20+
21+
---
22+
23+
## 🛠️ Tech Stack
24+
- **HTML5**
25+
- **CSS3** (with animations)
26+
- **JavaScript**
27+
28+
---
29+
30+
## 🎉 How to Use
31+
1. Clone the repo:
32+
```bash
33+
git clone https://github.com/nikitayadav19/HappyBirthdayGF.git

‎cause.css‎

Lines changed: 194 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,194 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Bubblegum+Sans&family=Comic+Neue:wght@700&family=Quicksand:wght@500&display=swap');
2+
3+
* {
4+
margin: 0;
5+
padding: 0;
6+
box-sizing: border-box;
7+
cursor: none;
8+
}
9+
10+
body {
11+
min-height: 100vh;
12+
background: linear-gradient(-45deg, #ffe6e6, #e6e6ff, #ffebf5);
13+
background-size: 400% 400%;
14+
animation: gradientBG 15s ease infinite;
15+
font-family: 'Quicksand', sans-serif;
16+
overflow-x: hidden;
17+
padding: 2rem;
18+
}
19+
20+
.custom-cursor {
21+
width: 30px;
22+
height: 30px;
23+
position: fixed;
24+
pointer-events: none;
25+
z-index: 9999;
26+
mix-blend-mode: difference;
27+
transition: transform 0.1s;
28+
}
29+
30+
.custom-cursor svg {
31+
width: 100%;
32+
height: 100%;
33+
filter: drop-shadow(0 0 5px rgba(255, 182, 193, 0.5));
34+
}
35+
36+
.container {
37+
max-width: 1200px;
38+
margin: 0 auto;
39+
text-align: center;
40+
position: relative;
41+
z-index: 1;
42+
}
43+
44+
h1 {
45+
font-family: 'Bubblegum Sans', cursive;
46+
font-size: 3rem;
47+
color: #ff69b4;
48+
text-shadow: 2px 2px 4px rgba(255, 105, 180, 0.3);
49+
margin-bottom: 2rem;
50+
animation: bounce 1s ease infinite;
51+
}
52+
53+
.reason-card {
54+
background: rgba(255, 255, 255, 0.9);
55+
border-radius: 20px;
56+
padding: 2rem;
57+
margin: 1.5rem;
58+
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
59+
transition: transform 0.3s, box-shadow 0.3s;
60+
cursor: pointer;
61+
position: relative;
62+
overflow: hidden;
63+
}
64+
65+
.reason-card:hover {
66+
transform: translateY(-5px);
67+
box-shadow: 0 8px 25px rgba(255, 105, 180, 0.2);
68+
}
69+
70+
.reason-text {
71+
font-size: 1.2rem;
72+
margin-bottom: 1rem;
73+
position: relative;
74+
z-index: 2;
75+
}
76+
77+
.gif-overlay {
78+
position: absolute;
79+
top: 0;
80+
left: 0;
81+
width: 100%;
82+
height: 100%;
83+
background: rgba(255, 255, 255, 0.95);
84+
display: flex;
85+
align-items: center;
86+
justify-content: center;
87+
opacity: 0;
88+
transition: opacity 0.3s;
89+
z-index: 1;
90+
}
91+
92+
.reason-card:hover .gif-overlay {
93+
opacity: 1;
94+
}
95+
96+
.shuffle-button {
97+
background: linear-gradient(45deg, #ff69b4, #ff99cc);
98+
border: none;
99+
border-radius: 50px;
100+
padding: 1rem 2rem;
101+
font-size: 1.2rem;
102+
color: white;
103+
margin: 2rem 0;
104+
cursor: pointer;
105+
transition: transform 0.3s;
106+
font-family: 'Comic Neue', cursive;
107+
box-shadow: 0 5px 15px rgba(255, 105, 180, 0.3);
108+
}
109+
110+
.shuffle-button:hover {
111+
transform: scale(1.1);
112+
}
113+
114+
.floating {
115+
position: fixed;
116+
pointer-events: none;
117+
animation: float 3s ease-in-out infinite;
118+
}
119+
120+
.ending-section {
121+
margin-top: 4rem;
122+
padding: 2rem;
123+
text-align: center;
124+
}
125+
126+
.ending-text {
127+
font-family: 'Bubblegum Sans', cursive;
128+
font-size: 2rem;
129+
color: #ff69b4;
130+
margin-bottom: 2rem;
131+
opacity: 0;
132+
transform: translateY(20px);
133+
}
134+
135+
.teddy-hug {
136+
width: 200px;
137+
margin: 0 auto;
138+
transform: scale(0);
139+
}
140+
141+
@keyframes gradientBG {
142+
0% { background-position: 0% 50%; }
143+
50% { background-position: 100% 50%; }
144+
100% { background-position: 0% 50%; }
145+
}
146+
147+
@keyframes float {
148+
0%, 100% { transform: translateY(0); }
149+
50% { transform: translateY(-20px); }
150+
}
151+
152+
@keyframes bounce {
153+
0%, 100% { transform: translateY(0); }
154+
50% { transform: translateY(-10px); }
155+
}
156+
157+
@media (max-width: 768px) {
158+
h1 { font-size: 2rem; }
159+
.reason-card { margin: 1rem; }
160+
.reason-text { font-size: 1rem; }
161+
}
162+
.shuffle-button {
163+
background: linear-gradient(45deg, #ff69b4, #ff99cc);
164+
border: none;
165+
border-radius: 50px;
166+
padding: 1rem 2rem;
167+
font-size: 1.2rem;
168+
color: white;
169+
margin: 2rem 0;
170+
cursor: pointer;
171+
transition: all 0.3s;
172+
font-family: 'Comic Neue', cursive;
173+
box-shadow: 0 5px 15px rgba(255, 105, 180, 0.3);
174+
}
175+
176+
.shuffle-button.story-mode {
177+
background: linear-gradient(45deg, #9b6dff, #ff6dc7);
178+
transform: scale(1.1);
179+
}
180+
181+
.shuffle-button:hover {
182+
transform: scale(1.1);
183+
}
184+
185+
.shuffle-button.story-mode:hover {
186+
transform: scale(1.2);
187+
}
188+
189+
.reason-counter {
190+
font-size: 0.9rem;
191+
color: #ff69b4;
192+
margin-top: 1rem;
193+
opacity: 0.7;
194+
}

‎cause.html‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Why You're My Best Friend! 💖</title>
7+
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
8+
<link rel="stylesheet" href="./cause.css">
9+
<style>
10+
11+
</style>
12+
</head>
13+
<body>
14+
<div class="custom-cursor">
15+
<svg viewBox="0 0 24 24">
16+
<path fill="#ff69b4" d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
17+
</svg>
18+
</div>
19+
20+
<div class="container">
21+
<h1>Happy Birthday Priyaa 💖</h1>
22+
23+
<div id="reasons-container"></div>
24+
25+
<button class="shuffle-button">Click Here... 💕</button>
26+
<div class="reason-counter"></div>
27+
28+
<div class="ending-section">
29+
<div class="teddy-hug">
30+
<img src="./d1.jpg" alt="Teddy Hug">
31+
</div>
32+
<div class="ending-text">You're the BESTEST ! 💖</div>
33+
</div>
34+
</div>
35+
36+
<script src="cause.js">
37+
38+
</script>
39+
</body>
40+
</html>

0 commit comments

Comments
 (0)