162 lines
15 KiB
HTML
162 lines
15 KiB
HTML
|
<!-- Navigation -->
|
||
|
|
<nav style="display:flex;align-items:center;justify-content:space-between;padding:20px 60px;background:#1a1a2e;">
|
||
|
|
<div style="font-size:22px;font-weight:700;color:#d4a574;font-family:'Playfair Display',serif;letter-spacing:2px;">S <span style="font-size:16px;color:#d4a574;">&</span> J</div>
|
||
|
|
<div style="display:flex;gap:32px;align-items:center;">
|
||
|
|
<a href="#story" style="color:#e8d5c4;text-decoration:none;font-size:13px;font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:2px;">Our Story</a>
|
||
|
|
<a href="#details" style="color:#e8d5c4;text-decoration:none;font-size:13px;font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:2px;">Details</a>
|
||
|
|
<a href="#rsvp" style="display:inline-block;padding:10px 24px;background:#d4a574;color:#1a1a2e;font-size:13px;font-weight:600;text-decoration:none;border-radius:4px;font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:1px;">RSVP</a>
|
||
|
|
</div>
|
||
|
|
</nav>
|
||
|
|
|
||
|
|
<!-- Hero -->
|
||
|
|
<section style="min-height:100vh;display:flex;align-items:center;justify-content:center;background-image:url('https://images.unsplash.com/photo-1519741497674-611481863552?w=1920');background-size:cover;background-position:center;position:relative;text-align:center;">
|
||
|
|
<div style="position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(26,26,46,0.82);"></div>
|
||
|
|
<div style="position:relative;z-index:1;max-width:700px;padding:40px 20px;">
|
||
|
|
<p style="color:#d4a574;font-size:14px;font-weight:500;margin-bottom:20px;font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:6px;">Together with their families</p>
|
||
|
|
<h1 style="color:#fef3e2;font-size:72px;font-weight:700;margin-bottom:8px;font-family:'Playfair Display',serif;line-height:1.1;">Sarah <span style="font-size:48px;color:#d4a574;font-style:italic;">&</span> James</h1>
|
||
|
|
<div style="width:80px;height:1px;background:#d4a574;margin:28px auto;"></div>
|
||
|
|
<p style="color:#d4a574;font-size:20px;font-weight:600;margin-bottom:12px;font-family:'Playfair Display',serif;letter-spacing:3px;">June 15, 2026</p>
|
||
|
|
<p style="color:#e8d5c4;font-size:16px;font-family:Inter,sans-serif;letter-spacing:2px;">Rosewood Estate · Napa Valley, California</p>
|
||
|
|
<a href="#rsvp" style="display:inline-block;margin-top:48px;padding:16px 48px;background:#d4a574;color:#1a1a2e;font-size:14px;font-weight:600;text-decoration:none;border-radius:4px;font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:2px;">RSVP Now</a>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- Our Story -->
|
||
|
|
<section id="story" style="padding:100px 20px;background:#fef3e2;">
|
||
|
|
<div style="max-width:1000px;margin:0 auto;">
|
||
|
|
<div style="text-align:center;margin-bottom:60px;">
|
||
|
|
<p style="color:#d4a574;font-size:13px;font-weight:600;margin-bottom:12px;font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:4px;">How It All Began</p>
|
||
|
|
<h2 style="font-size:42px;font-weight:700;color:#1a1a2e;font-family:'Playfair Display',serif;">Our Story</h2>
|
||
|
|
</div>
|
||
|
|
<div style="display:flex;flex-wrap:wrap;gap:60px;align-items:flex-start;">
|
||
|
|
<div style="flex:1;min-width:280px;">
|
||
|
|
<img src="https://images.unsplash.com/photo-1522673607200-164d1b6ce486?w=500&h=600&fit=crop" style="width:100%;border-radius:12px;display:block;" alt="Couple together">
|
||
|
|
</div>
|
||
|
|
<div style="flex:1;min-width:280px;padding-top:20px;">
|
||
|
|
<div style="position:relative;padding-left:28px;margin-bottom:36px;border-left:2px solid #d4a574;">
|
||
|
|
<p style="color:#d4a574;font-size:13px;font-weight:700;margin-bottom:6px;font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:2px;">September 2021</p>
|
||
|
|
<h3 style="font-size:20px;font-weight:700;color:#1a1a2e;margin-bottom:8px;font-family:'Playfair Display',serif;">We Met</h3>
|
||
|
|
<p style="color:#5c5470;font-size:15px;line-height:1.7;font-family:Inter,sans-serif;">A chance encounter at a friend's dinner party turned into a conversation that lasted until sunrise. We knew something special had begun.</p>
|
||
|
|
</div>
|
||
|
|
<div style="position:relative;padding-left:28px;margin-bottom:36px;border-left:2px solid #d4a574;">
|
||
|
|
<p style="color:#d4a574;font-size:13px;font-weight:700;margin-bottom:6px;font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:2px;">December 2021</p>
|
||
|
|
<h3 style="font-size:20px;font-weight:700;color:#1a1a2e;margin-bottom:8px;font-family:'Playfair Display',serif;">First Date</h3>
|
||
|
|
<p style="color:#5c5470;font-size:15px;line-height:1.7;font-family:Inter,sans-serif;">Coffee turned into lunch, lunch turned into dinner. Three restaurants and eight hours later, we were already planning date number two.</p>
|
||
|
|
</div>
|
||
|
|
<div style="position:relative;padding-left:28px;border-left:2px solid #d4a574;">
|
||
|
|
<p style="color:#d4a574;font-size:13px;font-weight:700;margin-bottom:6px;font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:2px;">March 2025</p>
|
||
|
|
<h3 style="font-size:20px;font-weight:700;color:#1a1a2e;margin-bottom:8px;font-family:'Playfair Display',serif;">The Proposal</h3>
|
||
|
|
<p style="color:#5c5470;font-size:15px;line-height:1.7;font-family:Inter,sans-serif;">Under the cherry blossoms in Kyoto, James got down on one knee. Through happy tears, Sarah said yes before he even finished asking.</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- Venue & Details -->
|
||
|
|
<section id="details" style="padding:100px 20px;background:#1a1a2e;">
|
||
|
|
<div style="max-width:1100px;margin:0 auto;">
|
||
|
|
<div style="text-align:center;margin-bottom:60px;">
|
||
|
|
<p style="color:#d4a574;font-size:13px;font-weight:600;margin-bottom:12px;font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:4px;">Join Us On Our Special Day</p>
|
||
|
|
<h2 style="font-size:42px;font-weight:700;color:#fef3e2;font-family:'Playfair Display',serif;">Wedding Details</h2>
|
||
|
|
</div>
|
||
|
|
<div style="display:flex;flex-wrap:wrap;gap:28px;justify-content:center;">
|
||
|
|
<div style="flex:1;min-width:260px;max-width:340px;text-align:center;padding:44px 32px;background:rgba(254,243,226,0.06);border:1px solid rgba(212,165,116,0.2);border-radius:12px;">
|
||
|
|
<div style="font-size:36px;margin-bottom:16px;">♥</div>
|
||
|
|
<h3 style="font-size:22px;font-weight:700;color:#d4a574;margin-bottom:16px;font-family:'Playfair Display',serif;">Ceremony</h3>
|
||
|
|
<p style="color:#fef3e2;font-size:16px;font-weight:600;margin-bottom:8px;font-family:Inter,sans-serif;">3:00 PM</p>
|
||
|
|
<p style="color:#b8b0c8;font-size:15px;line-height:1.7;font-family:Inter,sans-serif;">Rosewood Estate Gardens</p>
|
||
|
|
<p style="color:#b8b0c8;font-size:15px;line-height:1.7;font-family:Inter,sans-serif;">1240 Vineyard Road</p>
|
||
|
|
<p style="color:#b8b0c8;font-size:15px;line-height:1.7;font-family:Inter,sans-serif;">Napa Valley, CA 94558</p>
|
||
|
|
</div>
|
||
|
|
<div style="flex:1;min-width:260px;max-width:340px;text-align:center;padding:44px 32px;background:rgba(254,243,226,0.06);border:1px solid rgba(212,165,116,0.2);border-radius:12px;">
|
||
|
|
<div style="font-size:36px;margin-bottom:16px;">★</div>
|
||
|
|
<h3 style="font-size:22px;font-weight:700;color:#d4a574;margin-bottom:16px;font-family:'Playfair Display',serif;">Reception</h3>
|
||
|
|
<p style="color:#fef3e2;font-size:16px;font-weight:600;margin-bottom:8px;font-family:Inter,sans-serif;">5:30 PM</p>
|
||
|
|
<p style="color:#b8b0c8;font-size:15px;line-height:1.7;font-family:Inter,sans-serif;">Rosewood Estate Grand Hall</p>
|
||
|
|
<p style="color:#b8b0c8;font-size:15px;line-height:1.7;font-family:Inter,sans-serif;">Cocktails, Dinner & Dancing</p>
|
||
|
|
<p style="color:#b8b0c8;font-size:15px;line-height:1.7;font-family:Inter,sans-serif;">Open Bar Until Midnight</p>
|
||
|
|
</div>
|
||
|
|
<div style="flex:1;min-width:260px;max-width:340px;text-align:center;padding:44px 32px;background:rgba(254,243,226,0.06);border:1px solid rgba(212,165,116,0.2);border-radius:12px;">
|
||
|
|
<div style="font-size:36px;margin-bottom:16px;">☎</div>
|
||
|
|
<h3 style="font-size:22px;font-weight:700;color:#d4a574;margin-bottom:16px;font-family:'Playfair Display',serif;">Dress Code</h3>
|
||
|
|
<p style="color:#fef3e2;font-size:16px;font-weight:600;margin-bottom:8px;font-family:Inter,sans-serif;">Black Tie Optional</p>
|
||
|
|
<p style="color:#b8b0c8;font-size:15px;line-height:1.7;font-family:Inter,sans-serif;">Formal evening attire</p>
|
||
|
|
<p style="color:#b8b0c8;font-size:15px;line-height:1.7;font-family:Inter,sans-serif;">The ceremony is outdoors,</p>
|
||
|
|
<p style="color:#b8b0c8;font-size:15px;line-height:1.7;font-family:Inter,sans-serif;">please plan accordingly</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- Gallery -->
|
||
|
|
<section style="padding:80px 20px;background:#fef3e2;">
|
||
|
|
<div style="max-width:1100px;margin:0 auto;">
|
||
|
|
<div style="text-align:center;margin-bottom:48px;">
|
||
|
|
<p style="color:#d4a574;font-size:13px;font-weight:600;margin-bottom:12px;font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:4px;">Moments We Cherish</p>
|
||
|
|
<h2 style="font-size:42px;font-weight:700;color:#1a1a2e;font-family:'Playfair Display',serif;">Our Gallery</h2>
|
||
|
|
</div>
|
||
|
|
<div style="display:flex;flex-wrap:wrap;gap:16px;justify-content:center;">
|
||
|
|
<img src="https://images.unsplash.com/photo-1529636798458-92182e662485?w=350&h=350&fit=crop" style="width:260px;height:260px;object-fit:cover;border-radius:10px;display:block;" alt="Couple photo">
|
||
|
|
<img src="https://images.unsplash.com/photo-1511285560929-80b456fea0bc?w=350&h=350&fit=crop" style="width:260px;height:260px;object-fit:cover;border-radius:10px;display:block;" alt="Engagement photo">
|
||
|
|
<img src="https://images.unsplash.com/photo-1519225421980-715cb0215aed?w=350&h=350&fit=crop" style="width:260px;height:260px;object-fit:cover;border-radius:10px;display:block;" alt="Together">
|
||
|
|
<img src="https://images.unsplash.com/photo-1465495976277-4387d4b0b4c6?w=350&h=350&fit=crop" style="width:260px;height:260px;object-fit:cover;border-radius:10px;display:block;" alt="Romance">
|
||
|
|
</div>
|
||
|
|
<div style="text-align:center;margin-top:48px;padding:0 20px;">
|
||
|
|
<p style="color:#5c5470;font-size:20px;font-style:italic;line-height:1.8;font-family:'Playfair Display',serif;max-width:600px;margin:0 auto;">"Whatever our souls are made of, his and mine are the same."</p>
|
||
|
|
<p style="color:#d4a574;font-size:14px;margin-top:12px;font-family:Inter,sans-serif;">— Emily Brontë</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- RSVP -->
|
||
|
|
<section id="rsvp" style="padding:100px 20px;background-image:url('https://images.unsplash.com/photo-1478146059778-26028b07395a?w=1920');background-size:cover;background-position:center;position:relative;">
|
||
|
|
<div style="position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(254,243,226,0.94);"></div>
|
||
|
|
<div style="max-width:600px;margin:0 auto;position:relative;z-index:1;">
|
||
|
|
<div style="text-align:center;margin-bottom:48px;">
|
||
|
|
<p style="color:#d4a574;font-size:13px;font-weight:600;margin-bottom:12px;font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:4px;">Please Respond By May 1, 2026</p>
|
||
|
|
<h2 style="font-size:42px;font-weight:700;color:#1a1a2e;font-family:'Playfair Display',serif;">RSVP</h2>
|
||
|
|
</div>
|
||
|
|
<form style="display:flex;flex-direction:column;gap:20px;">
|
||
|
|
<div>
|
||
|
|
<label style="display:block;color:#1a1a2e;font-size:13px;font-weight:600;margin-bottom:8px;font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:1px;">Full Name</label>
|
||
|
|
<input type="text" placeholder="Your full name" style="width:100%;padding:14px 18px;border:1px solid #d4a574;border-radius:6px;font-size:15px;font-family:Inter,sans-serif;background:#fff;color:#1a1a2e;box-sizing:border-box;">
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<label style="display:block;color:#1a1a2e;font-size:13px;font-weight:600;margin-bottom:8px;font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:1px;">Number of Guests</label>
|
||
|
|
<select style="width:100%;padding:14px 18px;border:1px solid #d4a574;border-radius:6px;font-size:15px;font-family:Inter,sans-serif;background:#fff;color:#1a1a2e;box-sizing:border-box;">
|
||
|
|
<option value="1">1 Guest</option>
|
||
|
|
<option value="2">2 Guests</option>
|
||
|
|
<option value="3">3 Guests</option>
|
||
|
|
<option value="4">4 Guests</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<label style="display:block;color:#1a1a2e;font-size:13px;font-weight:600;margin-bottom:12px;font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:1px;">Will You Attend?</label>
|
||
|
|
<div style="display:flex;gap:24px;">
|
||
|
|
<label style="display:flex;align-items:center;gap:8px;color:#1a1a2e;font-size:15px;font-family:Inter,sans-serif;cursor:pointer;">
|
||
|
|
<input type="radio" name="attendance" value="yes" style="accent-color:#d4a574;width:18px;height:18px;"> Joyfully Accept
|
||
|
|
</label>
|
||
|
|
<label style="display:flex;align-items:center;gap:8px;color:#1a1a2e;font-size:15px;font-family:Inter,sans-serif;cursor:pointer;">
|
||
|
|
<input type="radio" name="attendance" value="no" style="accent-color:#d4a574;width:18px;height:18px;"> Regretfully Decline
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<label style="display:block;color:#1a1a2e;font-size:13px;font-weight:600;margin-bottom:8px;font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:1px;">Dietary Restrictions</label>
|
||
|
|
<textarea placeholder="Please list any allergies or dietary needs" rows="3" style="width:100%;padding:14px 18px;border:1px solid #d4a574;border-radius:6px;font-size:15px;font-family:Inter,sans-serif;background:#fff;color:#1a1a2e;box-sizing:border-box;resize:vertical;"></textarea>
|
||
|
|
</div>
|
||
|
|
<button type="submit" style="padding:16px 40px;background:#d4a574;color:#1a1a2e;font-size:15px;font-weight:700;border:none;border-radius:6px;font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:2px;cursor:pointer;margin-top:8px;">Send RSVP</button>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- Footer -->
|
||
|
|
<footer style="padding:60px 20px;background:#1a1a2e;text-align:center;">
|
||
|
|
<h3 style="font-size:36px;font-weight:700;color:#fef3e2;margin-bottom:12px;font-family:'Playfair Display',serif;">Sarah <span style="color:#d4a574;font-style:italic;">&</span> James</h3>
|
||
|
|
<p style="color:#d4a574;font-size:16px;font-weight:500;margin-bottom:8px;font-family:'Playfair Display',serif;letter-spacing:2px;">June 15, 2026</p>
|
||
|
|
<div style="width:60px;height:1px;background:#d4a574;margin:20px auto;"></div>
|
||
|
|
<p style="color:#b8b0c8;font-size:15px;margin-bottom:8px;font-family:Inter,sans-serif;">#SarahAndJamesForever</p>
|
||
|
|
<p style="color:#e8d5c4;font-size:16px;font-family:'Playfair Display',serif;font-style:italic;">We can't wait to celebrate with you</p>
|
||
|
|
</footer>
|