html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Floating Hearts & Secret Message</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>❤️ Happy Valentine's Day ❤️</h1>
<p>Love is in the air! Watch the hearts float. 💕</p>
<button onclick="revealMessage()">Reveal Secret Message</button>
<p id="secret-message">💌 You are loved more than you know! 💌</p>
</div>
<script src="script.js"></script>
</body>
</html>
Enter to Rename, Shift+Enter to Preview
css
css
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
body {
font-family: Arial, sans-serif;
background: linear-gradient(45deg, #ff758c, #ff7eb3);
text-align: center;
overflow: hidden;
height: 100vh;
position: relative;
color: white;
margin: 0;
}
.container {
position: relative;
z-index: 2;
margin-top: 100px;
}
h1 {
font-size: 36px;
}
p {
font-size: 18px;
}
button {
background: #ff4d6d;
color: white;
Enter to Rename, Shift+Enter to Preview
js
js
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
function createHeart() {
const heart = document.createElement("div");
heart.classList.add("heart");
heart.innerHTML = "❤️";
// Set random position along the screen width
heart.style.left = Math.random() * window.innerWidth + "px";
// Set random size for variation
let size = Math.random() * 20 + 10; // Between 10px and 30px
heart.style.fontSize = size + "px";
// Set random animation duration
let duration = Math.random() * 3 + 2; // Between 2s and 5s
heart.style.animationDuration = duration + "s";
document.body.appendChild(heart);
// Remove heart after animation completes
setTimeout(() => {
heart.remove();
}, duration * 1000);
}
// Generate a heart every 500ms
setInterval(createHeart, 500);
// Reveal Secret Message
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run