TwoHearts - Elegant Wedding Invitation HTML

💍 TwoHearts is a modern and elegant one-page wedding invitation & RSVP HTML template designed for couples who want their big day to feel just as beautiful online as it does in person.

No WordPress. No page builders. No frameworks. Just clean, fast, pure HTML5/CSS3/Vanilla JavaScript — ready to customize in minutes.

━━━━━━━━━━━━━━━━━━━━━ ✨ KEY FEATURES ━━━━━━━━━━━━━━━━━━━━━

⏳ Interactive Countdown Timer to the wedding day 📖 Vertical Love Story Timeline with dates & milestones 👰 Groom & Bride Profile Cards with custom bios & photos 🎩 Groomsmen & Bridesmaids grid section 📍 When & Where section with Google Maps embed 🖼️ Responsive Photo Gallery (CSS Grid layout) 📬 Functional RSVP Form (Name, Email, Guests, Attendance) ✨ Smooth scroll & fade-in animations (Intersection Observer API) 🔤 Premium Google Fonts: Great Vibes + Playfair Display + Poppins 📱 Mobile-first, fully responsive on all screen sizes ⚡ Zero dependencies — pure HTML5, CSS3, Vanilla JavaScript 🔍 SEO-friendly semantic HTML5 structure

━━━━━━━━━━━━━━━━━━━━━ 🛠️ TECH STACK ━━━━━━━━━━━━━━━━━━━━━

• HTML5 (Single Page) • CSS3 (Flexbox, Grid, Animations) • Vanilla JavaScript (no jQuery, no React) • Google Fonts (Great Vibes, Playfair Display, Poppins) • Intersection Observer API • Google Maps Embed

━━━━━━━━━━━━━━━━━━━━━ 📦 FILES INCLUDED ━━━━━━━━━━━━━━━━━━━━━

• index.html — main template file • style.css — all styles • script.js — countdown, animations & RSVP logic • /images — placeholder assets • Documentation — setup & customization guide

━━━━━━━━━━━━━━━━━━━━━ 💡 PERFECT FOR ━━━━━━━━━━━━━━━━━━━━━

• Couples sharing their wedding announcement online • Wedding planners building pages for clients • Freelancers needing a white-label wedding template • Developers wanting a fast, zero-dependency wedding page

Features

⏳ Interactive Countdown Timer — live countdown to your wedding day 📖 Love Story Timeline — vertical scroll timeline with dates & milestones 👰 Bride & Groom Cards — personalized profile sections with bios & photos 🎩 Wedding Party Section — groomsmen & bridesmaids showcased in clean grid 📍 Venue Details + Google Maps — embedded map for ceremony & reception location 🖼️ Photo Gallery — responsive CSS grid layout for wedding photos 📬 RSVP Form — collects Name, Email, Guest Count & Attendance (Yes/No) ✨ Scroll Animations — smooth fade-in effects via Intersection Observer API 🔤 Premium Typography — Great Vibes + Playfair Display + Poppins (Google Fonts) 📱 Fully Responsive — mobile-first design, works on all devices & screen sizes ⚡ Zero Dependencies — no jQuery, no React, no Bootstrap — pure HTML/CSS/JS 🔍 SEO Optimized — clean semantic HTML5 structure

Requirements

• Any modern web browser — Chrome, Firefox, Safari, Edge, Opera • Basic knowledge of HTML to customize text, names & images • Any static web host to deploy — Netlify, GitHub Pages, cPanel, or shared hosting • No server-side language required (PHP, Node, etc.) • No npm, no build tools, no command line — open index.html and edit directly • Internet connection required for Google Fonts & Google Maps embed (online use)

Instructions

1️⃣ Download & Unzip — Extract the downloaded ZIP file to your local machine

2️⃣ Open index.html — Open the file in any text editor (VS Code, Notepad++, Sublime)

3️⃣ Customize Names & Dates — Find and replace bride/groom names, wedding date & venue details inside index.html

4️⃣ Update the Countdown Timer — In script.js, set your wedding date in the countdown variable

5️⃣ Replace Photos — Drop your images into the /images folder and update the src paths in index.html

6️⃣ Update Google Maps — Replace the embed URL in the When & Where section with your venue's map link

7️⃣ Customize Colors & Fonts — Open style.css and update CSS variables at the top (:root section) to match your color scheme

8️⃣ Upload to Host — Upload all files to your web host via File Manager or FTP. No server setup needed.

9️⃣ Go Live — Your personalized wedding invitation page is ready to share!

💬 Need help? Refer to the included Documentation file for full step-by-step guidance.