Personalized Birthday Website with Photo Gallery & Love Letter

🎯 What You'll Build #

A premium multi-section birthday website with: Hero banner → Photo gallery → Love letter → Wishes section → Music player. The ultimate personalized birthday gift!

---

📦 Premium Template #

> ☕ Download Premium Multi-Page Template → > > Includes: 5 sections • Photo gallery with lightbox • Love letter envelope animation • Background music • Fully responsive

---

🛠️ Photo Gallery with CSS Grid #

.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 15px;
    padding: 20px;
}

.gallery-item {
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 1;
    cursor: pointer;
    transition: transform 0.3s;
}

.gallery-item:hover {
    transform: scale(1.05);
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

Lightbox Modal #

function openLightbox(src) {
    const modal = document.getElementById('lightbox');
    modal.querySelector('img').src = src;
    modal.classList.add('active');
}

// Close on background click
document.getElementById('lightbox').addEventListener('click', (e) => {
    if (e.target === e.currentTarget) {
        e.currentTarget.classList.remove('active');
    }
});

---

🔗 Related #

• Happy Birthday My Love — Animated Website

• Animated Love Letter — Envelope Opening Effect