Skip to content

Commit fc7915e

Browse files
author
Jignesh Patel
committed
update site
1 parent 6759f2c commit fc7915e

1 file changed

Lines changed: 251 additions & 8 deletions

File tree

‎index.html‎

Lines changed: 251 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,251 @@
1-
<html>
2-
<head>
3-
<link rel="stylesheet" type="text/css" href="./stylesheet.css">
4-
</head>
5-
<body>
6-
<h1>Well Come</h1>
7-
</body>
8-
</html>
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>Be My Valentine 💘</title>
7+
8+
<!-- Fonts -->
9+
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600;700&family=Poppins:wght@300;400;500&display=swap" rel="stylesheet">
10+
11+
<!-- Confetti -->
12+
<script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.6.0/dist/confetti.browser.min.js"></script>
13+
14+
<style>
15+
* {
16+
box-sizing: border-box;
17+
margin: 0;
18+
padding: 0;
19+
}
20+
21+
body {
22+
min-height: 100vh;
23+
display: flex;
24+
align-items: center;
25+
justify-content: center;
26+
background: linear-gradient(-45deg, #ff9a9e, #fad0c4, #fbc2eb, #a18cd1);
27+
background-size: 400% 400%;
28+
animation: bgMove 12s ease infinite;
29+
font-family: "Poppins", sans-serif;
30+
overflow: hidden;
31+
}
32+
33+
@keyframes bgMove {
34+
0% { background-position: 0% 50%; }
35+
50% { background-position: 100% 50%; }
36+
100% { background-position: 0% 50%; }
37+
}
38+
39+
/* Card */
40+
.card {
41+
width: min(92%, 420px);
42+
padding: 40px 30px 45px;
43+
background: rgba(255, 255, 255, 0.75);
44+
backdrop-filter: blur(18px);
45+
border-radius: 28px;
46+
text-align: center;
47+
box-shadow:
48+
0 30px 80px rgba(0,0,0,0.25),
49+
inset 0 0 0 1px rgba(255,255,255,0.4);
50+
position: relative;
51+
animation: cardIn 1.1s ease;
52+
}
53+
54+
@keyframes cardIn {
55+
from { opacity: 0; transform: translateY(30px) scale(0.95); }
56+
to { opacity: 1; transform: translateY(0) scale(1); }
57+
}
58+
59+
/* Glow ring */
60+
.card::before {
61+
content: "";
62+
position: absolute;
63+
inset: -2px;
64+
border-radius: 30px;
65+
background: linear-gradient(120deg, #ff4d6d, #ff9a9e, #fbc2eb);
66+
z-index: -1;
67+
filter: blur(20px);
68+
opacity: 0.7;
69+
}
70+
71+
.emoji {
72+
font-size: 68px;
73+
margin-bottom: 12px;
74+
animation: heartbeat 1.8s infinite;
75+
}
76+
77+
@keyframes heartbeat {
78+
0%,100% { transform: scale(1); }
79+
25% { transform: scale(1.08); }
80+
50% { transform: scale(1); }
81+
75% { transform: scale(1.12); }
82+
}
83+
84+
h2 {
85+
font-family: "Playfair Display", serif;
86+
font-size: 28px;
87+
color: #4a1c2f;
88+
margin-bottom: 30px;
89+
line-height: 1.35;
90+
}
91+
92+
.buttons {
93+
position: relative;
94+
height: 78px;
95+
}
96+
97+
button {
98+
position: absolute;
99+
padding: 14px 36px;
100+
border-radius: 40px;
101+
border: none;
102+
font-size: 16px;
103+
font-weight: 500;
104+
cursor: pointer;
105+
transition: all 0.25s ease;
106+
box-shadow: 0 10px 25px rgba(0,0,0,0.15);
107+
}
108+
109+
button:active {
110+
transform: scale(0.94);
111+
}
112+
113+
#yes {
114+
left: 12%;
115+
background: linear-gradient(135deg, #ff4d6d, #ff758f);
116+
color: #fff;
117+
box-shadow: 0 15px 35px rgba(255,77,109,0.55);
118+
}
119+
120+
#yes:hover {
121+
transform: translateY(-3px);
122+
box-shadow: 0 20px 40px rgba(255,77,109,0.7);
123+
}
124+
125+
#no {
126+
left: 55%;
127+
background: rgba(255,255,255,0.9);
128+
color: #777;
129+
}
130+
131+
.hint {
132+
margin-top: 28px;
133+
font-size: 13px;
134+
color: #6b6b6b;
135+
font-style: italic;
136+
}
137+
138+
/* Floating depth hearts */
139+
.heart {
140+
position: absolute;
141+
bottom: -20px;
142+
animation: floatUp linear forwards;
143+
pointer-events: none;
144+
filter: blur(0.3px);
145+
}
146+
147+
@keyframes floatUp {
148+
from {
149+
transform: translateY(0) scale(1);
150+
opacity: 1;
151+
}
152+
to {
153+
transform: translateY(-120vh) scale(1.8);
154+
opacity: 0;
155+
}
156+
}
157+
158+
/* Responsive */
159+
@media (max-width: 480px) {
160+
h2 { font-size: 23px; }
161+
.emoji { font-size: 58px; }
162+
button { padding: 12px 28px; font-size: 15px; }
163+
#yes { left: 8%; }
164+
#no { left: 55%; }
165+
}
166+
</style>
167+
</head>
168+
169+
<body>
170+
171+
<div class="card">
172+
<div class="emoji">🐱❤️</div>
173+
<h2 id="valentine-question"><br>will you be my Valentine?</h2>
174+
175+
<div class="buttons">
176+
<button id="yes">Yes 💖</button>
177+
<button id="no">No 🙈</button>
178+
</div>
179+
180+
<div class="hint">Some love stories don’t allow “no” ✨</div>
181+
</div>
182+
183+
<!-- Sounds -->
184+
<audio id="hoverSound" src="https://assets.mixkit.co/sfx/preview/mixkit-cartoon-voice-laugh-343.mp3"></audio>
185+
<audio id="yesSound" src="https://assets.mixkit.co/sfx/preview/mixkit-achievement-bell-600.mp3"></audio>
186+
187+
<script>
188+
const noBtn = document.getElementById("no");
189+
const yesBtn = document.getElementById("yes");
190+
const card = document.querySelector(".card");
191+
const hoverSound = document.getElementById("hoverSound");
192+
const yesSound = document.getElementById("yesSound");
193+
194+
// Get name from ?love= query parameter
195+
function getLoveName() {
196+
const params = new URLSearchParams(window.location.search);
197+
const name = params.get('love');
198+
return name ? name : 'My Love';
199+
}
200+
201+
// Update the heading with the name
202+
const questionHeading = document.getElementById('valentine-question');
203+
const loveName = getLoveName();
204+
questionHeading.innerHTML = `${loveName},<br>will you be my Valentine?`;
205+
206+
noBtn.addEventListener("mouseenter", () => {
207+
hoverSound.currentTime = 0;
208+
hoverSound.play();
209+
210+
const cardRect = card.getBoundingClientRect();
211+
const btnRect = noBtn.getBoundingClientRect();
212+
213+
const maxX = cardRect.width - btnRect.width - 10;
214+
const maxY = cardRect.height - btnRect.height - 10;
215+
216+
noBtn.style.left = Math.random() * maxX + "px";
217+
noBtn.style.top = Math.random() * maxY + "px";
218+
});
219+
220+
yesBtn.addEventListener("click", () => {
221+
yesSound.play();
222+
223+
confetti({
224+
particleCount: 260,
225+
spread: 120,
226+
origin: { y: 0.65 }
227+
});
228+
229+
setTimeout(() => {
230+
alert("YAY 💕 I can’t wait for Valentine’s Day with you!");
231+
}, 500);
232+
});
233+
234+
function createHeart() {
235+
const heart = document.createElement("div");
236+
heart.className = "heart";
237+
heart.innerHTML = Math.random() > 0.5 ? "❤️" : "💗";
238+
heart.style.left = Math.random() * 100 + "vw";
239+
heart.style.fontSize = Math.random() * 22 + 14 + "px";
240+
heart.style.animationDuration = Math.random() * 3 + 4 + "s";
241+
heart.style.opacity = Math.random() * 0.5 + 0.4;
242+
243+
document.body.appendChild(heart);
244+
setTimeout(() => heart.remove(), 8000);
245+
}
246+
247+
setInterval(createHeart, 380);
248+
</script>
249+
250+
</body>
251+
</html>

0 commit comments

Comments
 (0)