Modern Valentine Digital Proposal Ideas for Tech Lovers with Source Code
In the digital era, love has found new ways to express itself. From virtual dates and online surprises to personalized websites and creative coding, romance has evolved with technology. Today’s generation believes in expressing emotions through innovation, and this transformation is clearly visible during Valentine Week. This professional blog article presents a modern way of approaching their beloved ones with the complete source code which you can used to expressed your feelings.
It reflects how modern students are redefining romance in the digital age.
Valentine Week in the Modern Digital Age
Valentine Week is no longer limited to exchanging flowers, greeting cards, or chocolates. In today’s connected world, couples celebrate love through social media posts, customized videos, digital letters, and personal websites. Technology has become an emotional bridge that connects hearts beyond physical boundaries.
For tech-savvy people, programming and web design have become new languages of love. Writing code to express feelings reflects dedication, intelligence, and creativity. This digital approach has transformed Valentine Week into a more personalized and meaningful celebration.
The Idea Behind a Digital Proposal
Anyone wanted that, his/her proposal is to be unique, memorable, and emotionally powerful. He/She planned to design a Valentine Week website that would narrate their journey, display heartfelt messages, and end with a proposal.
The website included animated hearts, soft background colors, emotional text, and interactive buttons. Every line of code carried his/her feelings. For them, programming was not just a skill, but a medium to communicate love.
This idea represents the essence of modern romance where creativity meets emotion.
Sample Source Code for a Valentine Website
Below is a professional and simple example of an animated Valentine website that you can customize for your own proposals this valentine’s.
Template 1: Classic Envelope Love Letter without photo and music
mylove.html
Copy to clipboard
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Happy Valentine's Day</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap" rel="stylesheet">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--background: hsl(350, 30%, 6%);
--foreground: hsl(30, 50%, 96%);
--primary: hsl(350, 80%, 60%);
--primary-foreground: hsl(30, 50%, 98%);
--secondary: hsl(350, 20%, 15%);
--muted-foreground: hsl(30, 20%, 60%);
--accent: hsl(20, 70%, 70%);
--rose-dark: hsl(350, 70%, 40%);
--rose-light: hsl(350, 70%, 75%);
--gold: hsl(40, 80%, 55%);
--cream: hsl(40, 50%, 95%);
}
body {
font-family: 'Cormorant Garamond', serif;
background: var(--background);
color: var(--foreground);
min-height: 100vh;
overflow-x: hidden;
}
.bg-gradient {
position: fixed;
inset: 0;
background: linear-gradient(135deg, var(--background) 0%, var(--secondary) 50%, var(--background) 100%);
z-index: 0;
}
.bg-radial-top {
position: fixed;
inset: 0;
background: radial-gradient(ellipse at top, hsla(350, 80%, 60%, 0.1) 0%, transparent 50%);
z-index: 0;
}
.bg-radial-bottom {
position: fixed;
inset: 0;
background: radial-gradient(ellipse at bottom right, hsla(20, 70%, 70%, 0.1) 0%, transparent 50%);
z-index: 0;
}
.hearts-container {
position: fixed;
inset: 0;
pointer-events: none;
overflow: hidden;
z-index: 1;
}
.floating-heart {
position: absolute;
animation: floatUp 15s linear infinite;
opacity: 0;
}
.floating-heart svg {
fill: var(--primary);
filter: drop-shadow(0 0 10px hsla(350, 80%, 60%, 0.3));
}
@keyframes floatUp {
0% { transform: translateY(100vh) rotate(0deg); opacity: 0; }
10% { opacity: 0.7; }
90% { opacity: 0.7; }
100% { transform: translateY(-100vh) rotate(360deg); opacity: 0; }
}
.sparkles-container {
position: fixed;
inset: 0;
pointer-events: none;
overflow: hidden;
z-index: 1;
}
.sparkle {
position: absolute;
width: 4px;
height: 4px;
background: var(--gold);
border-radius: 50%;
animation: sparkle 2s ease-in-out infinite;
}
@keyframes sparkle {
0%, 100% { opacity: 0; transform: scale(0); }
50% { opacity: 1; transform: scale(1); }
}
.main-content {
position: relative;
z-index: 10;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 3rem 1rem;
}
.title-section {
text-align: center;
margin-bottom: 2rem;
animation: fadeInUp 0.8s ease-out forwards;
}
@keyframes fadeInUp {
0% { opacity: 0; transform: translateY(30px); }
100% { opacity: 1; transform: translateY(0); }
}
.subtitle {
display: inline-flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 1rem;
color: var(--muted-foreground);
font-size: 1.125rem;
letter-spacing: 0.2em;
text-transform: uppercase;
}
.subtitle svg {
width: 20px;
height: 20px;
fill: var(--gold);
animation: sparkle 2s ease-in-out infinite;
}
.subtitle svg:last-child { animation-delay: 1s; }
h1 {
font-family: 'Playfair Display', serif;
font-size: clamp(3rem, 10vw, 5rem);
font-weight: 400;
margin-bottom: 1rem;
letter-spacing: -0.02em;
}
.title-divider {
display: flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
}
.divider-line {
height: 1px;
width: 64px;
background: linear-gradient(to right, transparent, var(--primary));
}
.divider-line:last-child {
background: linear-gradient(to left, transparent, var(--primary));
}
.title-heart {
width: 32px;
height: 32px;
fill: var(--primary);
animation: heartbeat 1.5s ease-in-out infinite;
}
@keyframes heartbeat {
0%, 100% { transform: scale(1); }
14% { transform: scale(1.3); }
28% { transform: scale(1); }
42% { transform: scale(1.3); }
70% { transform: scale(1); }
}
.heart-banner {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
padding: 1rem;
margin-bottom: 2rem;
animation: fadeInUp 0.8s ease-out 0.2s forwards;
opacity: 0;
}
.heart-banner span {
font-family: 'Playfair Display', serif;
font-size: clamp(1.5rem, 5vw, 2.5rem);
letter-spacing: 0.05em;
}
.banner-heart {
width: 24px;
height: 24px;
fill: var(--primary);
animation: heartbeat 1.5s ease-in-out infinite;
}
.banner-heart:last-child { animation-delay: 0.5s; }
.countdown {
text-align: center;
padding: 2rem;
margin-bottom: 3rem;
animation: fadeInUp 0.8s ease-out 0.4s forwards;
opacity: 0;
}
.countdown-box {
display: inline-flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
background: hsla(350, 20%, 15%, 0.5);
backdrop-filter: blur(10px);
border-radius: 1rem;
padding: 1.5rem 2rem;
border: 1px solid hsla(350, 80%, 60%, 0.2);
}
.countdown-label { color: var(--muted-foreground); font-size: 1.125rem; }
.countdown-value { display: flex; align-items: baseline; gap: 0.5rem; }
.countdown-number {
font-family: 'Playfair Display', serif;
font-size: 4rem;
color: var(--primary);
animation: pulseGlow 2s ease-in-out infinite;
}
@keyframes pulseGlow {
0%, 100% { text-shadow: 0 0 20px hsla(350, 80%, 60%, 0.3), 0 0 40px hsla(350, 80%, 60%, 0.2); }
50% { text-shadow: 0 0 40px hsla(350, 80%, 60%, 0.5), 0 0 80px hsla(350, 80%, 60%, 0.3); }
}
.countdown-text { font-size: 1.5rem; }
.countdown-hearts { display: flex; gap: 0.25rem; margin-top: 0.5rem; }
.countdown-hearts svg { width: 16px; height: 16px; fill: var(--primary); }
.happy-valentine {
display: inline-flex;
align-items: center;
gap: 0.75rem;
background: hsla(350, 80%, 60%, 0.2);
backdrop-filter: blur(10px);
border-radius: 9999px;
padding: 1rem 2rem;
border: 1px solid hsla(350, 80%, 60%, 0.3);
}
.happy-valentine span { font-family: 'Playfair Display', serif; font-size: 1.5rem; }
.happy-valentine svg { width: 24px; height: 24px; fill: var(--gold); animation: sparkle 2s ease-in-out infinite; }
.happy-valentine svg:last-child { animation-delay: 1s; }
.open-letter-btn { animation: fadeInUp 0.8s ease-out 0.6s forwards; opacity: 0; }
.letter-button {
display: inline-flex;
align-items: center;
gap: 0.75rem;
background: linear-gradient(135deg, var(--primary) 0%, var(--rose-dark) 100%);
color: var(--primary-foreground);
font-family: 'Playfair Display', serif;
font-size: 1.125rem;
padding: 1rem 2rem;
border: none;
border-radius: 9999px;
cursor: pointer;
transition: all 0.5s ease;
animation: pulseGlow 2s ease-in-out infinite;
}
.letter-button:hover {
background: linear-gradient(135deg, var(--rose-dark) 0%, var(--primary) 100%);
transform: scale(1.05);
}
.letter-button svg { width: 20px; height: 20px; fill: currentColor; }
.letter-container {
width: 100%;
max-width: 400px;
animation: fadeInUp 0.8s ease-out forwards;
display: none;
}
.letter-container.visible { display: block; }
.envelope {
position: relative;
cursor: pointer;
transition: all 0.7s ease;
}
.envelope:hover { transform: scale(1.02); }
.envelope.open { transform: translateY(16px); }
.envelope.open:hover { transform: translateY(16px) scale(1); }
.envelope-flap {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 96px;
background: linear-gradient(180deg, var(--primary) 0%, var(--rose-dark) 100%);
clip-path: polygon(0 0, 50% 100%, 100% 0);
transform-origin: top;
transition: transform 0.7s ease;
z-index: 10;
}
.envelope.open .envelope-flap { transform: rotateX(-180deg); }
.envelope-body {
position: relative;
background: linear-gradient(135deg, hsla(350, 80%, 60%, 0.9) 0%, var(--rose-dark) 100%);
border-radius: 0.5rem;
padding: 3rem 1.5rem 2rem;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}
.seal {
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 64px;
height: 64px;
background: var(--gold);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
transition: all 0.5s ease;
top: 16px;
z-index: 20;
animation: pulseGlow 2s ease-in-out infinite;
}
.envelope.open .seal { opacity: 0; transform: translateX(-50%) scale(0); top: -16px; }
.seal svg { width: 32px; height: 32px; fill: var(--primary); }
.letter-content {
background: var(--cream);
border-radius: 0.5rem;
padding: 1.5rem;
max-height: 0;
opacity: 0;
overflow: hidden;
transition: all 0.7s ease 0.3s;
}
.envelope.open .letter-content { max-height: 500px; opacity: 1; }
.letter-text {
color: var(--rose-dark);
font-size: 1.125rem;
line-height: 1.8;
white-space: pre-line;
}
.letter-signature {
margin-top: 1.5rem;
text-align: right;
font-family: 'Playfair Display', serif;
font-style: italic;
color: hsla(350, 70%, 40%, 0.8);
}
.letter-heart {
position: absolute;
bottom: 16px;
right: 16px;
width: 24px;
height: 24px;
fill: hsla(350, 80%, 60%, 0.3);
animation: heartbeat 1.5s ease-in-out infinite;
}
.tap-hint {
text-align: center;
margin-top: 1rem;
color: hsla(40, 50%, 95%, 0.8);
font-size: 0.875rem;
transition: opacity 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
}
.envelope.open .tap-hint { opacity: 0; }
.tap-hint svg { width: 20px; height: 20px; fill: currentColor; }
.footer {
position: absolute;
bottom: 2rem;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
gap: 0.5rem;
color: var(--muted-foreground);
font-size: 0.875rem;
letter-spacing: 0.05em;
}
.footer svg { width: 16px; height: 16px; fill: hsla(350, 80%, 60%, 0.5); }
</style>
</head>
<body>
<div class="bg-gradient"></div>
<div class="bg-radial-top"></div>
<div class="bg-radial-bottom"></div>
<div class="hearts-container" id="hearts"></div>
<div class="sparkles-container" id="sparkles"></div>
<div class="main-content">
<div class="title-section">
<div class="subtitle">
<svg viewBox="0 0 24 24"><path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z"/></svg>
<span>A Special Message</span>
<svg viewBox="0 0 24 24"><path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z"/></svg>
</div>
<h1>Happy Valentine's Day</h1>
<div class="title-divider">
<div class="divider-line"></div>
<svg class="title-heart" viewBox="0 0 24 24"><path 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"/></svg>
<div class="divider-line"></div>
</div>
</div>
<div class="heart-banner">
<svg class="banner-heart" viewBox="0 0 24 24"><path 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"/></svg>
<span>To My Beloved</span>
<svg class="banner-heart" viewBox="0 0 24 24"><path 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"/></svg>
</div>
<div class="countdown" id="countdown"></div>
<div class="open-letter-btn" id="openLetterBtn">
<button class="letter-button" onclick="showLetter()">
<svg viewBox="0 0 24 24"><path 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"/></svg>
Open Your Love Letter
<svg viewBox="0 0 24 24"><path 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"/></svg>
</button>
</div>
<div class="letter-container" id="letterContainer">
<div class="envelope" id="envelope" onclick="toggleEnvelope()">
<div class="envelope-flap"></div>
<div class="envelope-body">
<div class="seal">
<svg viewBox="0 0 24 24"><path 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"/></svg>
</div>
<div class="letter-content">
<div class="letter-text">My Dearest Love,
Every moment with you feels like magic. Your smile lights up my world, your laughter is my favorite melody, and your love is the greatest gift I've ever received.
This Valentine's Day, I want you to know that you are my everything — my best friend, my soulmate, and the love of my life.
Thank you for being you, and for loving me the way you do.
Forever and always yours</div>
<div class="letter-signature">Forever Yours</div>
<svg class="letter-heart" viewBox="0 0 24 24"><path 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"/></svg>
</div>
<div class="tap-hint">
<svg viewBox="0 0 24 24"><path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/></svg>
Tap to open
</div>
</div>
</div>
</div>
<div class="footer">
<svg viewBox="0 0 24 24"><path 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"/></svg>
<span>Made with love from PUNote Blog by Bichar Blast</span>
<svg viewBox="0 0 24 24"><path 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"/></svg>
</div>
</div>
<script>
function createHearts() {
const container = document.getElementById('hearts');
const heartSVG = '<svg viewBox="0 0 24 24"><path 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"/></svg>';
for (let i = 0; i < 20; i++) {
const heart = document.createElement('div');
heart.className = 'floating-heart';
heart.innerHTML = heartSVG;
heart.style.left = Math.random() * 100 + '%';
heart.style.animationDelay = Math.random() * 10 + 's';
heart.style.animationDuration = (10 + Math.random() * 10) + 's';
const size = 12 + Math.random() * 24;
heart.querySelector('svg').style.width = size + 'px';
heart.querySelector('svg').style.height = size + 'px';
heart.querySelector('svg').style.opacity = 0.3 + Math.random() * 0.5;
container.appendChild(heart);
}
}
function createSparkles() {
const container = document.getElementById('sparkles');
for (let i = 0; i < 40; i++) {
const sparkle = document.createElement('div');
sparkle.className = 'sparkle';
sparkle.style.left = Math.random() * 100 + '%';
sparkle.style.top = Math.random() * 100 + '%';
sparkle.style.animationDelay = Math.random() * 4 + 's';
const size = 2 + Math.random() * 4;
sparkle.style.width = size + 'px';
sparkle.style.height = size + 'px';
container.appendChild(sparkle);
}
}
function updateCountdown() {
const container = document.getElementById('countdown');
const today = new Date();
let valentinesDay = new Date(today.getFullYear(), 1, 14);
if (today > valentinesDay) valentinesDay.setFullYear(valentinesDay.getFullYear() + 1);
const daysLeft = Math.ceil((valentinesDay - today) / (1000 * 60 * 60 * 24));
if (daysLeft === 0) {
container.innerHTML = '<div class="happy-valentine"><svg viewBox="0 0 24 24"><path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z"/></svg><span>Happy Valentine\'s Day!</span><svg viewBox="0 0 24 24"><path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z"/></svg></div>';
} else {
const hearts = Array(Math.min(daysLeft, 5)).fill(0).map((_, i) => '<svg viewBox="0 0 24 24" style="animation-delay:' + (i * 0.2) + 's"><path 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"/></svg>').join('');
container.innerHTML = '<div class="countdown-box"><span class="countdown-label">Days until Valentine\'s Day</span><div class="countdown-value"><span class="countdown-number">' + daysLeft + '</span><span class="countdown-text">' + (daysLeft === 1 ? 'day' : 'days') + '</span></div><div class="countdown-hearts">' + hearts + '</div></div>';
}
}
function showLetter() {
document.getElementById('openLetterBtn').style.display = 'none';
document.getElementById('letterContainer').classList.add('visible');
}
function toggleEnvelope() {
document.getElementById('envelope').classList.toggle('open');
}
document.addEventListener('DOMContentLoaded', function() {
createHearts();
createSparkles();
updateCountdown();
});
</script>
</body>
</html>
Template 2: Classic Envelope Love Letter and Background Music and photo in letter.
mylove.html
Copy to clipboard
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Valentine Envelope Love Letter</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;600&family=Playfair+Display:wght@400;600&display=swap" rel="stylesheet">
<style>
*{margin:0;padding:0;box-sizing:border-box;}
:root {
--bg: hsl(350,30%,6%);
--fg: hsl(30,50%,96%);
--primary: hsl(350,80%,60%);
--secondary: hsl(350,20%,15%);
--gold: hsl(40,80%,55%);
--cream: hsl(40,50%,95%);
}
body{
font-family:'Cormorant Garamond', serif;
background:var(--bg);
color:var(--fg);
min-height:100vh;
overflow-x:hidden;
}
.bg-gradient{
position:fixed; inset:0;
background:linear-gradient(135deg,var(--bg) 0%, var(--secondary) 50%, var(--bg) 100%);
z-index:0;
}
.hearts-container{
position:fixed; inset:0; pointer-events:none; overflow:hidden; z-index:1;
}
.floating-heart{
position:absolute;
animation:floatUp 15s linear infinite;
opacity:0;
}
.floating-heart svg{fill:var(--primary); filter: drop-shadow(0 0 10px hsla(350,80%,60%,0.3));}
@keyframes floatUp{
0%{transform:translateY(100vh) rotate(0deg); opacity:0;}
10%{opacity:0.7;}
90%{opacity:0.7;}
100%{transform:translateY(-100vh) rotate(360deg); opacity:0;}
}
.main-content{
position:relative; z-index:10;
min-height:100vh;
display:flex; flex-direction:column; align-items:center; justify-content:center;
padding:3rem 1rem;
text-align:center;
}
h1{font-family:'Playfair Display', serif; font-size:3rem; margin-bottom:1rem; color:var(--primary);}
.envelope{
position:relative; cursor:pointer; width:350px; max-width:90%; margin-top:2rem;
}
.envelope-flap{
position:absolute; top:0; left:0; right:0; height:96px;
background:linear-gradient(180deg,var(--primary) 0%, hsl(350,70%,40%) 100%);
clip-path: polygon(0 0,50% 100%,100% 0);
transform-origin:top;
transition:transform 0.7s ease;
z-index:10;
}
.envelope.open .envelope-flap{transform: rotateX(-180deg);}
.envelope-body{
position:relative;
background: linear-gradient(135deg, hsla(350,80%,60%,0.9) 0%, hsl(350,70%,40%) 100%);
border-radius:0.5rem; padding:3rem 1.5rem 2rem;
box-shadow:0 25px 50px -12px rgba(0,0,0,0.5);
}
.letter-content{
background:var(--cream); border-radius:0.5rem;
padding:1.5rem;
max-height:0; opacity:0; overflow:hidden; transition: all 0.7s ease 0.3s;
}
.envelope.open .letter-content{max-height:500px; opacity:1;}
.letter-text{color:hsl(350,70%,40%); font-size:1.125rem; line-height:1.8; white-space:pre-line;}
.letter-signature{margin-top:1rem; text-align:right; font-style:italic; font-family:'Playfair Display', serif; color:hsl(350,70%,40%);}
button{
margin-top:1rem; padding:1rem 2rem; font-family:'Playfair Display', serif;
font-size:1.125rem; border:none; border-radius:9999px; cursor:pointer;
background:linear-gradient(135deg,var(--primary),hsl(350,70%,40%)); color:var(--fg);
}
img.photo-placeholder{width:100%; border-radius:0.5rem; margin-top:1rem;}
</style>
</head>
<body>
<div class="bg-gradient"></div>
<div class="hearts-container" id="hearts"></div>
<div class="main-content">
<h1>Happy Valentine's Day</h1>
<div class="envelope" id="envelope" onclick="toggleEnvelope()">
<div class="envelope-flap"></div>
<div class="envelope-body">
<div class="letter-content">
<div class="letter-text">
My Dearest Love,
Every moment with you is magical. Your smile brightens my day, and your love is my greatest gift.
Will you be mine this Valentine’s Day?
</div>
<div class="letter-signature">Forever Yours</div>
<img class="photo-placeholder" src="your-photo.jpg" alt="Couple Photo">
</div>
</div>
</div>
<button onclick="toggleEnvelope()">Open Love Letter</button>
</div>
<audio autoplay loop>
<source src="background-music.mp3" type="audio/mpeg">
</audio>
<script>
function createHearts(){
const container = document.getElementById('hearts');
const heartSVG = '<svg viewBox="0 0 24 24"><path 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"/></svg>';
for(let i=0;i<20;i++){
const heart=document.createElement('div');
heart.className='floating-heart';
heart.innerHTML=heartSVG;
heart.style.left=Math.random()*100+'%';
heart.style.animationDelay=Math.random()*10+'s';
heart.style.animationDuration=(10+Math.random()*10)+'s';
const size=12+Math.random()*24;
heart.querySelector('svg').style.width=size+'px';
heart.querySelector('svg').style.height=size+'px';
heart.querySelector('svg').style.opacity=0.3+Math.random()*0.5;
container.appendChild(heart);
}
}
function toggleEnvelope(){
document.getElementById('envelope').classList.toggle('open');
}
document.addEventListener('DOMContentLoaded',function(){
createHearts();
});
</script>
</body>
</html>
Template 3: Floating Hearts with Slide-in Message
mylove.html
Copy to clipboard
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Valentine Floating Hearts</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600&family=Cormorant+Garamond:wght@400;600&display=swap" rel="stylesheet">
<style>
*{margin:0;padding:0;box-sizing:border-box;}
:root{
--bg:hsl(350,30%,6%);
--fg:hsl(30,50%,96%);
--primary:hsl(350,80%,60%);
--secondary:hsl(350,20%,15%);
--gold:hsl(40,80%,55%);
--cream:hsl(40,50%,95%);
}
body{
font-family:'Cormorant Garamond', serif;
background:var(--bg);
color:var(--fg);
overflow-x:hidden;
min-height:100vh;
}
.hearts-container{
position:fixed; inset:0; pointer-events:none; z-index:0; overflow:hidden;
}
.floating-heart{
position:absolute; animation:floatUp 12s linear infinite; opacity:0;
}
.floating-heart svg{
fill:var(--primary);
filter: drop-shadow(0 0 10px hsla(350,80%,60%,0.3));
}
@keyframes floatUp{
0%{transform:translateY(100vh) rotate(0deg); opacity:0;}
10%{opacity:0.7;}
90%{opacity:0.7;}
100%{transform:translateY(-100vh) rotate(360deg); opacity:0;}
}
.main-content{
position:relative; z-index:1;
min-height:100vh;
display:flex; flex-direction:column; align-items:center; justify-content:center;
padding:2rem;
text-align:center;
}
h1{
font-family:'Playfair Display', serif; font-size:3rem; color:var(--primary);
margin-bottom:2rem;
}
.message-box{
background:var(--cream); color:hsl(350,70%,40%);
padding:2rem; border-radius:1rem;
max-width:400px; width:90%;
transform:translateY(50px); opacity:0;
transition:all 0.8s ease;
}
.message-box.visible{
transform:translateY(0); opacity:1;
}
.message-text{font-size:1.2rem; line-height:1.8;}
.photo-placeholder{width:100%; border-radius:0.5rem; margin-top:1rem;}
button{
margin-top:1.5rem; padding:1rem 2rem;
border:none; border-radius:9999px;
font-family:'Playfair Display', serif; font-size:1.125rem;
cursor:pointer; background:linear-gradient(135deg,var(--primary),hsl(350,70%,40%)); color:var(--fg);
}
</style>
</head>
<body>
<div class="hearts-container" id="hearts"></div>
<div class="main-content">
<h1>Happy Valentine’s Day</h1>
<div class="message-box" id="messageBox">
<div class="message-text">
My Love, every heartbeat is for you. May our love grow stronger every day and this Valentine’s Day brings us even closer.
</div>
<img class="photo-placeholder" src="your-photo.jpg" alt="Couple Photo">
</div>
<button onclick="showMessage()">Reveal Message</button>
</div>
<audio autoplay loop>
<source src="background-music.mp3" type="audio/mpeg">
</audio>
<script>
function createHearts(){
const container=document.getElementById('hearts');
const heartSVG='<svg viewBox="0 0 24 24"><path 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"/></svg>';
for(let i=0;i<20;i++){
const heart=document.createElement('div');
heart.className='floating-heart';
heart.innerHTML=heartSVG;
heart.style.left=Math.random()*100+'%';
heart.style.animationDelay=Math.random()*10+'s';
heart.style.animationDuration=(10+Math.random()*10)+'s';
const size=12+Math.random()*24;
heart.querySelector('svg').style.width=size+'px';
heart.querySelector('svg').style.height=size+'px';
heart.querySelector('svg').style.opacity=0.3+Math.random()*0.5;
container.appendChild(heart);
}
}
function showMessage(){
document.getElementById('messageBox').classList.add('visible');
}
document.addEventListener('DOMContentLoaded',function(){
createHearts();
});
</script>
</body>
</html>
Template 4: Coding Proposal
mylove.html
Copy to clipboard
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Digital Code Proposal</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;700&display=swap" rel="stylesheet">
<style>
*{margin:0;padding:0;box-sizing:border-box;}
body{
font-family:'Fira Code', monospace;
background:#1a1a2e;
color:#f0f0f0;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
min-height:100vh;
overflow:hidden;
}
.heart {
position:relative;
width:200px;
height:200px;
transform:rotate(-45deg);
margin-bottom:2rem;
animation:pulse 1.5s infinite;
}
.heart::before,
.heart::after{
content:'';
position:absolute;
width:100px;
height:160px;
background:#ff4d6d;
border-radius:50%;
}
.heart::before{top:-80px; left:0;}
.heart::after{left:100px; top:0;}
@keyframes pulse{
0%,100%{transform:rotate(-45deg) scale(1);}
50%{transform:rotate(-45deg) scale(1.2);}
}
.code-box{
background:#162447;
padding:1.5rem 2rem;
border-radius:1rem;
width:90%;
max-width:500px;
box-shadow:0 10px 30px rgba(0,0,0,0.5);
font-size:1rem;
line-height:1.5;
overflow:hidden;
}
.code-line{
opacity:0;
white-space:pre-wrap;
}
.footer{
margin-top:2rem;
font-size:0.875rem;
color:#aaa;
}
</style>
</head>
<body>
<audio autoplay loop>
<source src="background-music.mp3" type="audio/mpeg">
</audio>
<div class="heart"></div>
<div class="code-box" id="codeBox">
<div class="code-line">let love = "❤️";</div>
<div class="code-line">let myHeart = { beatsFor: "You" };</div>
<div class="code-line">function propose(){</div>
<div class="code-line"> console.log("Will you be my Valentine?");</div>
<div class="code-line">}</div>
<div class="code-line">propose();</div>
</div>
<div class="footer">Digital Proposal by Bichar Blast | Happy Valentine’s Day</div>
<script>
const lines = document.querySelectorAll('.code-line');
lines.forEach((line, index)=>{
setTimeout(()=>{
line.style.opacity = 1;
}, index*800);
});
</script>
</body>
</html>
You Might also read,
Template 5 : Valentine’s Countdown with Animated Hearts & Code Reveal
mylove.html
Copy to clipboard
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Valentine Countdown Proposal</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;700&family=Playfair+Display:wght@400;700&display=swap" rel="stylesheet">
<style>
*{margin:0;padding:0;box-sizing:border-box;}
body{
font-family:'Fira Code', monospace;
background:#1a1a2e;
color:#f0f0f0;
overflow-x:hidden;
min-height:100vh;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
}
.hearts-container{
position:fixed; inset:0; pointer-events:none; z-index:0; overflow:hidden;
}
.floating-heart{
position:absolute; animation:floatUp 12s linear infinite; opacity:0;
}
.floating-heart svg{
fill:#ff4d6d;
filter: drop-shadow(0 0 10px rgba(255,77,109,0.4));
}
@keyframes floatUp{
0%{transform:translateY(100vh) rotate(0deg); opacity:0;}
10%{opacity:0.7;}
90%{opacity:0.7;}
100%{transform:translateY(-100vh) rotate(360deg); opacity:0;}
}
.countdown{
font-family:'Playfair Display', serif;
font-size:2rem;
margin-bottom:2rem;
text-align:center;
color:#ff4d6d;
}
.code-box{
background:#162447;
padding:1.5rem 2rem;
border-radius:1rem;
width:90%;
max-width:500px;
box-shadow:0 10px 30px rgba(0,0,0,0.5);
font-size:1rem;
line-height:1.5;
overflow:hidden;
}
.code-line{opacity:0; white-space:pre-wrap;}
.footer{
margin-top:2rem;
font-size:0.875rem;
color:#aaa;
}
</style>
</head>
<body>
<audio autoplay loop>
<source src="background-music.mp3" type="audio/mpeg">
</audio>
<div class="hearts-container" id="hearts"></div>
<div class="countdown" id="countdown">Loading...</div>
<div class="code-box" id="codeBox">
<div class="code-line">let love = "❤️";</div>
<div class="code-line">let myHeart = { beatsFor: "You" };</div>
<div class="code-line">function propose(){</div>
<div class="code-line"> console.log("Will you be my Valentine?");</div>
<div class="code-line">}</div>
<div class="code-line">propose();</div>
</div>
<div class="footer">Digital Proposal by Bichar Blast | Happy Valentine’s Day</div>
<script>
// Floating Hearts
function createHearts(){
const container=document.getElementById('hearts');
const heartSVG='<svg viewBox="0 0 24 24"><path 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"/></svg>';
for(let i=0;i<25;i++){
const heart=document.createElement('div');
heart.className='floating-heart';
heart.innerHTML=heartSVG;
heart.style.left=Math.random()*100+'%';
heart.style.animationDelay=Math.random()*10+'s';
heart.style.animationDuration=(10+Math.random()*10)+'s';
const size=12+Math.random()*24;
heart.querySelector('svg').style.width=size+'px';
heart.querySelector('svg').style.height=size+'px';
heart.querySelector('svg').style.opacity=0.3+Math.random()*0.5;
container.appendChild(heart);
}
}
// Countdown
function updateCountdown(){
const countdownEl=document.getElementById('countdown');
const now=new Date();
let valentines=new Date(now.getFullYear(),1,14); // Feb 14
if(now>valentines) valentines.setFullYear(valentines.getFullYear()+1);
const diff=valentines-now;
const days=Math.floor(diff/(1000*60*60*24));
const hours=Math.floor((diff/(1000*60*60))%24);
const minutes=Math.floor((diff/(1000*60))%60);
const seconds=Math.floor((diff/1000)%60);
countdownEl.innerHTML=`${days}d ${hours}h ${minutes}m ${seconds}s until Valentine’s Day`;
}
setInterval(updateCountdown,1000);
// Code line reveal
const lines=document.querySelectorAll('.code-line');
lines.forEach((line,index)=>{
setTimeout(()=>{line.style.opacity=1;},index*800);
});
document.addEventListener('DOMContentLoaded',function(){
createHearts();
updateCountdown();
});
</script>
</body>
</html>
Template 6: Interactive Heart Generator with Your Message
mylove.html
Copy to clipboard
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Interactive Heart Generator</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Fira+Code:wght@400;700&display=swap" rel="stylesheet">
<style>
*{margin:0;padding:0;box-sizing:border-box;}
body{
font-family:'Fira Code', monospace;
background:#1a1a2e;
color:#fff;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
min-height:100vh;
overflow:hidden;
}
.hearts-container{
position:fixed; inset:0; pointer-events:none; z-index:0; overflow:hidden;
}
.floating-heart{
position:absolute; animation:floatUp 12s linear infinite; opacity:0;
}
.floating-heart svg{
fill:#ff4d6d;
filter: drop-shadow(0 0 10px rgba(255,77,109,0.4));
}
@keyframes floatUp{
0%{transform:translateY(100vh) rotate(0deg); opacity:0;}
10%{opacity:0.7;}
90%{opacity:0.7;}
100%{transform:translateY(-100vh) rotate(360deg); opacity:0;}
}
.input-section{
display:flex;
flex-direction:column;
align-items:center;
gap:1rem;
z-index:1;
margin-bottom:2rem;
}
input{
padding:0.75rem 1rem;
font-size:1rem;
border-radius:0.5rem;
border:none;
outline:none;
width:250px;
text-align:center;
}
button{
padding:0.75rem 1.5rem;
font-size:1rem;
border-radius:0.5rem;
border:none;
cursor:pointer;
background:#ff4d6d;
color:#fff;
font-weight:bold;
transition:transform 0.3s;
}
button:hover{transform:scale(1.05);}
.heart-display{
position:relative;
width:200px;
height:200px;
transform:rotate(-45deg);
margin-top:2rem;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
animation:pulse 1.5s infinite;
flex-shrink:0;
}
.heart-display::before,
.heart-display::after{
content:'';
position:absolute;
width:100px;
height:160px;
background:#ff4d6d;
border-radius:50%;
}
.heart-display::before{top:-80px; left:0;}
.heart-display::after{left:100px; top:0;}
@keyframes pulse{
0%,100%{transform:rotate(-45deg) scale(1);}
50%{transform:rotate(-45deg) scale(1.2);}
}
.heart-text{
position:absolute;
transform:rotate(45deg);
color:#fff;
font-family:'Playfair Display', serif;
font-weight:bold;
font-size:1.25rem;
line-height:1.2;
}
.footer{
margin-top:2rem;
font-size:0.875rem;
color:#aaa;
}
</style>
</head>
<body>
<audio autoplay loop>
<source src="background-music.mp3" type="audio/mpeg">
</audio>
<div class="hearts-container" id="hearts"></div>
<div class="input-section">
<input type="text" id="nameInput" placeholder="Enter your beloved's name">
<button onclick="generateHeart()">Generate Heart ❤️</button>
</div>
<div class="heart-display" id="heartDisplay">
<div class="heart-text" id="heartText"></div>
</div>
<div class="footer">Interactive Valentine by Bichar Blast | PUNote Blog</div>
<script>
// Floating Hearts
function createHearts(){
const container=document.getElementById('hearts');
const heartSVG='<svg viewBox="0 0 24 24"><path 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"/></svg>';
for(let i=0;i<30;i++){
const heart=document.createElement('div');
heart.className='floating-heart';
heart.innerHTML=heartSVG;
heart.style.left=Math.random()*100+'%';
heart.style.animationDelay=Math.random()*10+'s';
heart.style.animationDuration=(10+Math.random()*10)+'s';
const size=12+Math.random()*24;
heart.querySelector('svg').style.width=size+'px';
heart.querySelector('svg').style.height=size+'px';
heart.querySelector('svg').style.opacity=0.3+Math.random()*0.5;
container.appendChild(heart);
}
}
// Generate Heart Text
function generateHeart(){
const name=document.getElementById('nameInput').value.trim();
if(name){
document.getElementById('heartText').innerText=`${name}, will you be my Valentine? ❤️`;
} else {
alert("Please enter a name!");
}
}
document.addEventListener('DOMContentLoaded',function(){
createHearts();
});
</script>
</body>
</html>
Template 7: Full-Screen Valentine Animation with Fireworks & Proposal Text
mylove.html
Copy to clipboard
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Valentine Fireworks Proposal</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&display=swap" rel="stylesheet">
<style>
*{margin:0;padding:0;box-sizing:border-box;}
body, html{
width:100%;
height:100%;
overflow:hidden;
font-family:'Playfair Display', serif;
background:#0d0d1a;
color:#fff;
display:flex;
justify-content:center;
align-items:center;
flex-direction:column;
}
canvas{position:absolute; top:0; left:0; width:100%; height:100%; z-index:0;}
.hearts-container{
position:absolute; inset:0; pointer-events:none; z-index:1; overflow:hidden;
}
.floating-heart{
position:absolute; animation:floatUp 12s linear infinite; opacity:0;
}
.floating-heart svg{
fill:#ff4d6d;
filter: drop-shadow(0 0 10px rgba(255,77,109,0.4));
}
@keyframes floatUp{
0%{transform:translateY(100vh) rotate(0deg); opacity:0;}
10%{opacity:0.7;}
90%{opacity:0.7;}
100%{transform:translateY(-100vh) rotate(360deg); opacity:0;}
}
.proposal-message{
position:relative;
z-index:2;
font-size:2.5rem;
text-align:center;
background:rgba(0,0,0,0.5);
padding:1rem 2rem;
border-radius:1rem;
color:#ff4d6d;
animation:pulse 1.5s infinite;
}
@keyframes pulse{
0%,100%{transform:scale(1);}
50%{transform:scale(1.1);}
}
.footer{
position:relative;
z-index:2;
margin-top:2rem;
font-size:0.875rem;
color:#aaa;
}
</style>
</head>
<body>
<audio autoplay loop>
<source src="background-music.mp3" type="audio/mpeg">
</audio>
<canvas id="fireworks"></canvas>
<div class="hearts-container" id="hearts"></div>
<div class="proposal-message" id="message">Will you be my Valentine? ❤️</div>
<div class="footer">Digital Valentine by Bichar Blast | PUNote Blog</div>
<script>
// Floating Hearts
function createHearts(){
const container=document.getElementById('hearts');
const heartSVG='<svg viewBox="0 0 24 24"><path 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"/></svg>';
for(let i=0;i<35;i++){
const heart=document.createElement('div');
heart.className='floating-heart';
heart.innerHTML=heartSVG;
heart.style.left=Math.random()*100+'%';
heart.style.animationDelay=Math.random()*10+'s';
heart.style.animationDuration=(10+Math.random()*10)+'s';
const size=10+Math.random()*30;
heart.querySelector('svg').style.width=size+'px';
heart.querySelector('svg').style.height=size+'px';
heart.querySelector('svg').style.opacity=0.3+Math.random()*0.5;
container.appendChild(heart);
}
}
// Fireworks Animation
const canvas=document.getElementById('fireworks');
const ctx=canvas.getContext('2d');
canvas.width=window.innerWidth;
canvas.height=window.innerHeight;
class Particle{
constructor(x,y,color){
this.x=x;
this.y=y;
this.color=color;
this.radius=Math.random()*3+2;
this.velocity={x:(Math.random()-0.5)*4,y:(Math.random()-0.5)*4};
this.alpha=1;
}
draw(){
ctx.save();
ctx.globalAlpha=this.alpha;
ctx.beginPath();
ctx.arc(this.x,this.y,this.radius,0,Math.PI*2);
ctx.fillStyle=this.color;
ctx.fill();
ctx.restore();
}
update(){
this.x+=this.velocity.x;
this.y+=this.velocity.y;
this.alpha-=0.01;
if(this.alpha<0) this.alpha=0;
}
}
let particles=[];
function launchFirework(){
const x=Math.random()*canvas.width;
const y=Math.random()*canvas.height/2;
const colors=['#ff4d6d','#ff9a76','#ffd56b','#ff6f91','#ff3d7f'];
for(let i=0;i<50;i++){
particles.push(new Particle(x,y,colors[Math.floor(Math.random()*colors.length)]));
}
}
function animate(){
requestAnimationFrame(animate);
ctx.fillStyle='rgba(0,0,0,0.2)';
ctx.fillRect(0,0,canvas.width,canvas.height);
particles.forEach((p,index)=>{
p.update();
p.draw();
if(p.alpha<=0) particles.splice(index,1);
});
}
setInterval(launchFirework,1000);
animate();
createHearts();
</script>
</body>
</html>
Template 8: Digital Love Letter Reveal with Typing Animation.
mylove.html
Copy to clipboard
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Digital Love Letter</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&display=swap" rel="stylesheet">
<style>
*{margin:0;padding:0;box-sizing:border-box;}
body{
font-family:'Playfair Display', serif;
background:#1a1a2e;
color:#fff;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
min-height:100vh;
overflow:hidden;
}
.hearts-container{
position:fixed; inset:0; pointer-events:none; z-index:0; overflow:hidden;
}
.floating-heart{
position:absolute; animation:floatUp 12s linear infinite; opacity:0;
}
.floating-heart svg{
fill:#ff4d6d;
filter: drop-shadow(0 0 10px rgba(255,77,109,0.4));
}
@keyframes floatUp{
0%{transform:translateY(100vh) rotate(0deg); opacity:0;}
10%{opacity:0.7;}
90%{opacity:0.7;}
100%{transform:translateY(-100vh) rotate(360deg); opacity:0;}
}
.letter-container{
position:relative;
z-index:1;
max-width:600px;
background:rgba(0,0,0,0.5);
padding:2rem;
border-radius:1rem;
font-size:1.25rem;
line-height:1.8;
color:#ffd6d6;
box-shadow:0 0 20px rgba(255,77,109,0.4);
}
.cursor{
display:inline-block;
width:2px;
background:#ff4d6d;
margin-left:2px;
animation:blink 0.8s infinite;
vertical-align:bottom;
}
@keyframes blink{
0%,50%,100%{opacity:1;}
25%,75%{opacity:0;}
}
.footer{
position:relative;
z-index:1;
margin-top:2rem;
font-size:0.875rem;
color:#aaa;
}
</style>
</head>
<body>
<audio autoplay loop>
<source src="background-music.mp3" type="audio/mpeg">
</audio>
<div class="hearts-container" id="hearts"></div>
<div class="letter-container" id="letter"></div>
<div class="footer">Digital Love Letter by Bichar Blast | PUNote Blog</div>
<script>
// Floating Hearts
function createHearts(){
const container=document.getElementById('hearts');
const heartSVG='<svg viewBox="0 0 24 24"><path 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"/></svg>';
for(let i=0;i<30;i++){
const heart=document.createElement('div');
heart.className='floating-heart';
heart.innerHTML=heartSVG;
heart.style.left=Math.random()*100+'%';
heart.style.animationDelay=Math.random()*10+'s';
heart.style.animationDuration=(10+Math.random()*10)+'s';
const size=12+Math.random()*24;
heart.querySelector('svg').style.width=size+'px';
heart.querySelector('svg').style.height=size+'px';
heart.querySelector('svg').style.opacity=0.3+Math.random()*0.5;
container.appendChild(heart);
}
}
// Typing Animation
const message=`My Dearest Love,
Every time I think of you, my heart fills with joy. You are my sunshine, my happiness, and my forever Valentine.
On this special day, I want to remind you that you are the most beautiful part of my life.
Forever yours, ❤️
Bichar Blast`;
function typeLetter(text, elementId, delay=50){
let i=0;
const el=document.getElementById(elementId);
const cursor=document.createElement('span');
cursor.className='cursor';
el.appendChild(cursor);
function type(){
if(i<text.length){
cursor.insertAdjacentText('beforebegin', text[i]);
i++;
setTimeout(type, delay);
}
}
type();
}
document.addEventListener('DOMContentLoaded',function(){
createHearts();
typeLetter(message,'letter',50);
});
</script>
</body>
</html>
Template 8: Heart Rain with Message Reveal & Confet
mylove.html
Copy to clipboard
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Heart Rain Valentine</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&display=swap" rel="stylesheet">
<style>
*{margin:0;padding:0;box-sizing:border-box;}
body{
font-family:'Playfair Display', serif;
background:#0d0d1a;
overflow:hidden;
display:flex;
align-items:center;
justify-content:center;
min-height:100vh;
color:#fff;
}
canvas{
position:absolute;
top:0; left:0;
width:100%; height:100%;
z-index:0;
}
.message{
position:relative;
z-index:2;
font-size:2rem;
text-align:center;
padding:2rem 3rem;
background:rgba(0,0,0,0.5);
border-radius:1rem;
color:#ff6b81;
opacity:0;
animation:fadeIn 2s forwards 1s;
}
@keyframes fadeIn{
to{opacity:1;}
}
.footer{
position:relative;
z-index:2;
margin-top:2rem;
font-size:0.875rem;
color:#aaa;
}
</style>
</head>
<body>
<audio autoplay loop>
<source src="background-music.mp3" type="audio/mpeg">
</audio>
<canvas id="heartsCanvas"></canvas>
<canvas id="confettiCanvas"></canvas>
<div class="message">Will you be my Valentine? ❤️<br>Forever Yours, Bichar Blast</div>
<div class="footer">Digital Valentine by Bichar Blast | PUNote Blog</div>
<script>
// Heart Rain
const heartCanvas=document.getElementById('heartsCanvas');
const hctx=heartCanvas.getContext('2d');
heartCanvas.width=window.innerWidth;
heartCanvas.height=window.innerHeight;
class Heart{
constructor(){
this.x=Math.random()*heartCanvas.width;
this.y=Math.random()*heartCanvas.height-100;
this.size=10+Math.random()*20;
this.speed=1+Math.random()*2;
this.angle=Math.random()*2*Math.PI;
}
draw(){
hctx.save();
hctx.fillStyle='#ff4d6d';
hctx.beginPath();
const top=this.size*0.5;
hctx.moveTo(this.x,this.y+top);
hctx.bezierCurveTo(this.x,this.y,this.x-this.size,this.y,this.x-this.size,this.y+top);
hctx.bezierCurveTo(this.x-this.size,this.y+this.size,this.x,this.y+this.size,this.x,this.y+this.size*1.5);
hctx.bezierCurveTo(this.x,this.y+this.size,this.x+this.size,this.y+this.size,this.x+this.size,this.y+top);
hctx.bezierCurveTo(this.x+this.size,this.y,this.x,this.y,this.x,this.y+top);
hctx.fill();
hctx.restore();
}
update(){
this.y+=this.speed;
if(this.y>heartCanvas.height+this.size) this.y=-this.size;
}
}
let hearts=[];
for(let i=0;i<30;i++) hearts.push(new Heart());
// Confetti
const confCanvas=document.getElementById('confettiCanvas');
const cctx=confCanvas.getContext('2d');
confCanvas.width=window.innerWidth;
confCanvas.height=window.innerHeight;
class Confetti{
constructor(){
this.x=Math.random()*confCanvas.width;
this.y=Math.random()*confCanvas.height;
this.size=5+Math.random()*5;
this.speed=1+Math.random()*3;
this.color=['#ff4d6d','#ff9a76','#ffd56b','#ff6f91','#ff3d7f'][Math.floor(Math.random()*5)];
}
draw(){
cctx.fillStyle=this.color;
cctx.fillRect(this.x,this.y,this.size,this.size);
}
update(){
this.y+=this.speed;
if(this.y>confCanvas.height)this.y=-this.size;
}
}
let confettis=[];
for(let i=0;i<50;i++) confettis.push(new Confetti());
// Animate
function animate(){
requestAnimationFrame(animate);
hctx.clearRect(0,0,heartCanvas.width,heartCanvas.height);
hearts.forEach(h=>{h.update(); h.draw();});
cctx.clearRect(0,0,confCanvas.width,confCanvas.height);
confettis.forEach(c=>{c.update(); c.draw();});
}
animate();
window.addEventListener('resize',()=>{
heartCanvas.width=window.innerWidth;
heartCanvas.height=window.innerHeight;
confCanvas.width=window.innerWidth;
confCanvas.height=window.innerHeight;
});
</script>
</body>
</html>
Template 10: Floating Balloon Hearts with Interactive Click Reveal.
mylove.html
Copy to clipboard
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Interactive Balloon Hearts</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&display=swap" rel="stylesheet">
<style>
*{margin:0;padding:0;box-sizing:border-box;}
body{
font-family:'Playfair Display', serif;
background:#1a1a2e;
color:#fff;
min-height:100vh;
overflow:hidden;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
}
.balloon-container{
position:absolute;
inset:0;
z-index:0;
pointer-events:none;
}
.balloon{
position:absolute;
width:50px;
height:70px;
cursor:pointer;
pointer-events:auto;
transition: transform 0.3s ease;
}
.balloon svg{
width:100%;
height:100%;
fill:#ff4d6d;
}
.balloon:hover{transform:scale(1.2);}
/* Tooltip */
.tooltip {
position: absolute;
bottom: 80px;
left: 50%;
transform: translateX(-50%);
background: rgba(255,77,109,0.9);
color: #fff;
padding: 0.5rem 1rem;
border-radius: 0.5rem;
font-size: 0.875rem;
white-space: nowrap;
pointer-events: none;
opacity: 0;
transition: opacity 0.3s ease;
z-index: 2;
}
.balloon:hover .tooltip { opacity: 1; }
.message-box{
position:relative;
z-index:2;
background:rgba(0,0,0,0.6);
padding:2rem;
border-radius:1rem;
font-size:1.25rem;
text-align:center;
max-width:500px;
display:flex;
flex-direction:column;
align-items:center;
color:#ffd6d6;
box-shadow:0 0 20px rgba(255,77,109,0.5);
opacity:0;
pointer-events:none;
transition: opacity 0.8s ease;
}
.message-box.visible{
opacity:1;
pointer-events:auto;
}
.footer{
position:relative;
z-index:2;
margin-top:2rem;
font-size:0.875rem;
color:#aaa;
}
</style>
</head>
<body>
<audio autoplay loop>
<source src="background-music.mp3" type="audio/mpeg">
</audio>
<div class="balloon-container" id="balloons"></div>
<div class="message-box" id="messageBox">
<span id="messageText">You are my forever Valentine! ❤️<br>Love, Bichar Blast</span>
</div>
<div class="footer">Interactive Valentine by Bichar Blast | PUNote Blog</div>
<script>
// Floating Balloon Hearts
const balloonContainer=document.getElementById('balloons');
const messageBox=document.getElementById('messageBox');
const messageText=document.getElementById('messageText');
class Balloon{
constructor(){
this.x=Math.random()*window.innerWidth;
this.y=window.innerHeight + Math.random()*200;
this.speed=1+Math.random()*2;
this.element=document.createElement('div');
this.element.className='balloon';
this.element.style.left=this.x+'px';
this.element.style.top=this.y+'px';
// SVG Heart + Tooltip
this.element.innerHTML=`
<svg viewBox="0 0 24 24"><path 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"/></svg>
<div class="tooltip">Click 💖 to reveal message</div>
`;
balloonContainer.appendChild(this.element);
// Click event to reveal message
this.element.addEventListener('click',()=>{
messageText.innerHTML = "You are my forever Valentine! ❤️<br>Love, Bichar Blast";
messageBox.classList.add('visible');
});
}
update(){
this.y-=this.speed;
if(this.y<-100) this.y=window.innerHeight+50;
this.element.style.top=this.y+'px';
}
}
let balloons=[];
for(let i=0;i<15;i++) balloons.push(new Balloon());
function animate(){
requestAnimationFrame(animate);
balloons.forEach(b=>b.update());
}
animate();
window.addEventListener('resize',()=>{
balloons.forEach(b=>{
b.x=Math.random()*window.innerWidth;
b.element.style.left=b.x+'px';
});
});
</script>
</body>
</html>
This code creates a visually attractive webpage with animation and interactive features, making it suitable for a digital proposal.
How to Create and Use Your Valentine Website
To create your own Valentine website, first open Notepad or any code editor and create a new file named love.html. Copy your selected source code and paste it into this file. After that, customize the names by replacing with your Names ( examples such as Bichar 
Bichari with your own names. If your website uses background music or images, place those files in the same folder and rename them according to the code.
Once everything is prepared, double-click the file to open it in your browser. After testing, you may upload the file to GitHub Pages, Netlify, or any hosting service and share the link with your loved one.
Why Digital Proposals Are Becoming Popular
Digital proposals are gaining popularity among modern people because they are creative, affordable, and deeply personal. They reflect technical skills and emotional investment at the same time. A customized website shows effort, dedication, and sincerity, which are more valuable than expensive gifts.
Such proposals also create long-lasting memories that can be revisited anytime in the future.
Role of Technology in Modern Love
Technology has transformed relationships in many ways. Messaging apps, video calls, social media, and collaborative online projects help couples stay connected. Digital tools make it easier to express emotions, share experiences, and support each other.
When used wisely, technology strengthens emotional bonds and builds trust in modern relationships.
This Valentine Week modern love story highlights how technology and emotions can come together beautifully. Bichar’s coded proposal proves that love has no boundaries when expressed sincerely.
For tech-savvy person, this story serves as inspiration to use creativity, knowledge, and passion to express feelings. Whether through coding, design, or digital storytelling, every honest effort can become a priceless memory.
Celebrate Valentine Week with innovation, confidence, and true love.
