Skip to main content
Creative Coding Projects

Apology Message Website for Best Friend — HTML, CSS & JavaScript

Build a heartfelt apology message website for your best friend. Interactive envelope reveal, animated sorry message, and friendship timeline.

G

gs_admin

Author & Reviewer

Published

Jul 16, 2026

Read Time

11 min read

love.html
💝
Creative Coding Projects

🎯 What You'll Build

A heartfelt digital apology for your best friend. Features: Rain animation → Tap-to-open envelope → Sorry message reveal → "Forgive Me" button → Rainbow celebration!

---

🔗 Live Demo

👉 Try the Live Demo →

---

📦 Get the Source Code

> ☕ Download on Buy Me a Coffee →

---

🛠️ The Rain Effect

Sets the emotional tone — gentle rain drops falling in the background:

javascript
1234567891011 
function createRain() {
    for (let i = 0; i < 50; i++) {
        const drop = document.createElement(&#039;div&#039;);
        drop.className = &#039;raindrop&#039;;
        drop.style.left = Math.random() * 100 + &#039;%&#039;;
        drop.style.height = (15 + Math.random() * 25) + &#039;px&#039;;
        drop.style.animationDuration = (0.5 + Math.random()) + &#039;s&#039;;
        drop.style.animationDelay = Math.random() * 2 + &#039;s&#039;;
        document.body.appendChild(drop);
    }
}
css
12345678910111213 
.raindrop {
    position: fixed;
    width: 2px;
    background: linear-gradient(transparent, rgba(107,181,255,0.3));
    animation: rain linear infinite;
    pointer-events: none;
}

@keyframes rain {
    0%   { transform: translateY(-100px); opacity: 0; }
    10%  { opacity: 1; }
    100% { transform: translateY(110vh); opacity: 0; }
}

The Forgiveness Transition

When they click "I Forgive You," the rain stops, the background warms up, and a rainbow appears:

javascript
1234567891011121314151617 
function forgive() {
    // Stop rain
    document.querySelectorAll(&#039;.raindrop&#039;).forEach(d => {
        d.style.opacity = &#039;0&#039;;
        d.style.transition = &#039;opacity 2s&#039;;
    });
    
    // Show rainbow
    document.getElementById(&#039;rainbow&#039;).classList.add(&#039;visible&#039;);
    
    // Warm background
    document.body.style.transition = &#039;background 3s&#039;;
    document.body.style.background = &#039;linear-gradient(135deg, #0a1a2e, #0a2e1a, #0a1a2e)&#039;;
    
    // Show celebration
    document.getElementById(&#039;forgivenStage&#039;).classList.add(&#039;active&#039;);
}

---

🎨 Customization

ElementHow to Change
Recipient labelEdit "To: My Best Friend" text
Sorry messageEdit the letter text paragraphs
ColorsChange from blue to any palette
Rain intensityAdjust the loop count (50 drops)

---

🔗 Related

G

About the Author: gs_admin

A senior technical contributor specializing in architectural designs, software optimization, database structures, and developer education. Passionate about writing clean code and sharing engineering knowledge.

PREVIOUS ARTICLE Beginner's Guide to Machine Learning in 2026