html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rain of Hearts ❤️</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<canvas id="canvas"></canvas>
<div id="text-container"></div>
<div id="competition-announcement">
📌 <strong>Valentine’s Day Code Competition ❤️</strong><br>
Love is in the code! 💻✨ Join our competition and showcase your creativity!<br><br>
📅 <strong>Post your code:</strong> Feb 10-17 <br>
🎁 <strong>Special rewards</strong> for the best codes!<br><br>
Start coding, spread the love, and celebrate with creativity and skill! 💡💖
</div>
<button id="play-music">🎵 Play Romantic Music</button>
<audio id="background-music" loop>
<source src="https://www.dropbox.com/scl/fi/6chigtccho7u5ua80pbed/Ellie-Goulding-Love-Me-Like-You-Do-Lyrics-MP3_160K-_1.mp3?rlkey=vodwa0g1419s4hqp6e47yj1w1&st=kvax31bu&raw=1" type="audio/mp3">
</audio>
<script src="script.js"></script>
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 {
margin: 0;
overflow: hidden;
font-family: 'Arial', sans-serif;
background-color: #ff4d6d;
transition: background-image 3s ease-in-out;
}
canvas {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#text-container {
position: absolute;
top: 50%;
width: 100%;
text-align: center;
font-size: 24px;
font-weight: bold;
color: pink;
opacity: 0;
transition: opacity 1s ease-in-out;
}
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
document.addEventListener("DOMContentLoaded", () => {
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
const textContainer = document.getElementById("text-container");
const music = document.getElementById("background-music");
const playMusicBtn = document.getElementById("play-music");
function resizeCanvas() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
resizeCanvas();
window.addEventListener("resize", resizeCanvas);
const romanticTexts = [
"You are my today and all of my tomorrows. ❤️",
"Love is not about how many days, months, or years, but how much you love each other every day. 💖",
"You are the reason my heart beats faster. 💘",
"With you, love is more than just a word. It's my whole world. 🌎❤️",
"My love for you is a journey, starting at forever and ending at never. 💞",
"Every time I look at you, I fall in love all over again. 💓",
"Your love is the melody of my heart. 🎶💖",
"No matter what happens, you will always be my favorite hello and hardest goodbye. 💕",
"You are my happy place. 🏡💖",
"When I'm with you, time stops, and love begins. ⏳❤️"
];
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run