Couple's Guide

Congratulations! This guide provides everything you need to manage your wedding website, from setting the countdown timer to updating your romantic timeline.

Wedding Photography Tip: Use high-resolution photos for the Hero and Gallery sections. We recommend WebP format to ensure fast loading for your guests.

Getting Started

  1. Extract the TwoHearts archive.
  2. Open the primary folder in your preferred editor.
  3. Navigate to index.html to view the romantic experience.

File Structure

/wedding-template/
├── index.html           # Your Love Story
├── css/style.css        # Visual Tokens
├── js/main.js           # Countdown Target
└── images/              # Personal Assets

Section Editing

Couple Names

Update your names in the header and hero sections of index.html.

<header class="header">
    <div class="container">
        <a href="index.html" class="logo">OLIVER & SOPHIA</a>
    </div>
</header>

The Love Story

Milestones are modular. Duplicate the .timeline-item block to add new memories.

<div class="timeline-item">
    <h3>First Meet</h3>
    <p>Where it all began...</p>
</div>

Theme & Styling

Romantic Palette

Update the core CSS variables in style.css to match your wedding color scheme.

:root {
    --primary-romantic: #f8c291; /* Soft Gold */
}

JavaScript Logic

To set your countdown target, open main.js and update the targetDate variable with your specific ceremony moment.

SEO & Optimization

Ensure your wedding site is discoverable by updating the <title> tag with your names and wedding date.

Deployment

TwoHearts is a static one-page suite. Deploy the files to any reliable web host or couples platform like GitHub Pages or Netlify.