Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>EverAfter Elegance | Wedding Website</title> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="components/navbar.js"></script> | |
| <script src="components/footer.js"></script> | |
| </head> | |
| <body class="bg-white text-gray-800 font-sans"> | |
| <custom-navbar></custom-navbar> | |
| <main> | |
| <!-- Hero Section --> | |
| <section class="hero-section relative h-screen flex items-center justify-center overflow-hidden"> | |
| <div class="absolute inset-0 bg-black bg-opacity-50"></div> | |
| <div class="relative z-10 text-center px-4"> | |
| <h1 class="text-5xl md:text-7xl font-serif text-white mb-6">Sarah & James</h1> | |
| <p class="text-xl md:text-2xl text-white mb-8">June 15, 2024 • The Grand Ballroom</p> | |
| <div class="flex justify-center space-x-4"> | |
| <a href="#rsvp" class="px-8 py-3 bg-white text-gray-800 rounded-full font-medium hover:bg-opacity-90 transition">RSVP</a> | |
| <a href="#details" class="px-8 py-3 border-2 border-white text-white rounded-full font-medium hover:bg-white hover:bg-opacity-10 transition">Details</a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Our Story --> | |
| <section id="story" class="py-20 px-4 max-w-6xl mx-auto"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-serif mb-4">Our Story</h2> | |
| <div class="w-24 h-1 bg-gray-300 mx-auto"></div> | |
| </div> | |
| <div class="grid md:grid-cols-2 gap-12 items-center"> | |
| <div class="space-y-6"> | |
| <h3 class="text-2xl font-serif">How We Met</h3> | |
| <p class="text-gray-600">It was a rainy Tuesday afternoon in the local coffee shop. Sarah was struggling to open the door with her arms full of books when James stepped in to help. The conversation started over spilled coffee and hasn't stopped since.</p> | |
| <p class="text-gray-600">After that fateful day, we spent countless hours in that same coffee shop, getting to know each other's dreams, fears, and favorite books.</p> | |
| </div> | |
| <div class="rounded-lg overflow-hidden shadow-xl"> | |
| <img src="https://static.photos/people/1024x576/42" alt="Couple in coffee shop" class="w-full h-auto"> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Wedding Details --> | |
| <section id="details" class="py-20 bg-gray-50"> | |
| <div class="max-w-6xl mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-serif mb-4">Wedding Details</h2> | |
| <div class="w-24 h-1 bg-gray-300 mx-auto"></div> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <!-- Ceremony --> | |
| <div class="bg-white p-8 rounded-lg shadow-md text-center"> | |
| <div class="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-6"> | |
| <i data-feather="heart" class="text-gray-700"></i> | |
| </div> | |
| <h3 class="text-xl font-serif mb-4">Ceremony</h3> | |
| <p class="text-gray-600 mb-2">June 15, 2024 at 4:00 PM</p> | |
| <p class="text-gray-600 mb-4">St. Margaret's Chapel</p> | |
| <p class="text-gray-500">123 Chapel Lane, New York</p> | |
| </div> | |
| <!-- Reception --> | |
| <div class="bg-white p-8 rounded-lg shadow-md text-center"> | |
| <div class="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-6"> | |
| <i data-feather="clock" class="text-gray-700"></i> | |
| </div> | |
| <h3 class="text-xl font-serif mb-4">Reception</h3> | |
| <p class="text-gray-600 mb-2">June 15, 2024 at 6:00 PM</p> | |
| <p class="text-gray-600 mb-4">The Grand Ballroom</p> | |
| <p class="text-gray-500">456 Celebration Ave, New York</p> | |
| </div> | |
| <!-- Accommodations --> | |
| <div class="bg-white p-8 rounded-lg shadow-md text-center"> | |
| <div class="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-6"> | |
| <i data-feather="home" class="text-gray-700"></i> | |
| </div> | |
| <h3 class="text-xl font-serif mb-4">Accommodations</h3> | |
| <p class="text-gray-600 mb-2">Special rates available</p> | |
| <p class="text-gray-600 mb-4">The Plaza Hotel</p> | |
| <p class="text-gray-500">789 Luxury Blvd, New York</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Gallery --> | |
| <section id="gallery" class="py-20 px-4 max-w-6xl mx-auto"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-serif mb-4">Gallery</h2> | |
| <div class="w-24 h-1 bg-gray-300 mx-auto"></div> | |
| </div> | |
| <div class="grid grid-cols-2 md:grid-cols-3 gap-4"> | |
| <div class="aspect-square overflow-hidden rounded-lg"> | |
| <img src="https://static.photos/people/640x360/1" alt="Engagement photo" class="w-full h-full object-cover hover:scale-105 transition duration-500"> | |
| </div> | |
| <div class="aspect-square overflow-hidden rounded-lg"> | |
| <img src="https://static.photos/people/640x360/2" alt="Engagement photo" class="w-full h-full object-cover hover:scale-105 transition duration-500"> | |
| </div> | |
| <div class="aspect-square overflow-hidden rounded-lg"> | |
| <img src="https://static.photos/people/640x360/3" alt="Engagement photo" class="w-full h-full object-cover hover:scale-105 transition duration-500"> | |
| </div> | |
| <div class="aspect-square overflow-hidden rounded-lg"> | |
| <img src="https://static.photos/people/640x360/4" alt="Engagement photo" class="w-full h-full object-cover hover:scale-105 transition duration-500"> | |
| </div> | |
| <div class="aspect-square overflow-hidden rounded-lg"> | |
| <img src="https://static.photos/people/640x360/5" alt="Engagement photo" class="w-full h-full object-cover hover:scale-105 transition duration-500"> | |
| </div> | |
| <div class="aspect-square overflow-hidden rounded-lg"> | |
| <img src="https://static.photos/people/640x360/6" alt="Engagement photo" class="w-full h-full object-cover hover:scale-105 transition duration-500"> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Wedding Party --> | |
| <section id="wedding-party" class="py-20 bg-white"> | |
| <div class="max-w-6xl mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-serif mb-4">Wedding Party</h2> | |
| <div class="w-24 h-1 bg-gray-300 mx-auto"></div> | |
| </div> | |
| <div class="grid md:grid-cols-2 gap-12"> | |
| <!-- Bride's Side --> | |
| <div> | |
| <h3 class="text-2xl font-serif text-center mb-8">Bride's Side</h3> | |
| <div class="grid grid-cols-2 gap-6"> | |
| <div class="text-center"> | |
| <div class="w-32 h-32 mx-auto mb-4 rounded-full overflow-hidden shadow-lg"> | |
| <img src="https://static.photos/people/320x240/10" alt="Maid of Honor" class="w-full h-full object-cover"> | |
| </div> | |
| <h4 class="font-serif text-xl">Emily Wilson</h4> | |
| <p class="text-gray-600">Maid of Honor</p> | |
| </div> | |
| <div class="text-center"> | |
| <div class="w-32 h-32 mx-auto mb-4 rounded-full overflow-hidden shadow-lg"> | |
| <img src="https://static.photos/people/320x240/11" alt="Bridesmaid" class="w-full h-full object-cover"> | |
| </div> | |
| <h4 class="font-serif text-xl">Sophia Chen</h4> | |
| <p class="text-gray-600">Bridesmaid</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Groom's Side --> | |
| <div> | |
| <h3 class="text-2xl font-serif text-center mb-8">Groom's Side</h3> | |
| <div class="grid grid-cols-2 gap-6"> | |
| <div class="text-center"> | |
| <div class="w-32 h-32 mx-auto mb-4 rounded-full overflow-hidden shadow-lg"> | |
| <img src="https://static.photos/people/320x240/12" alt="Best Man" class="w-full h-full object-cover"> | |
| </div> | |
| <h4 class="font-serif text-xl">Michael Brown</h4> | |
| <p class="text-gray-600">Best Man</p> | |
| </div> | |
| <div class="text-center"> | |
| <div class="w-32 h-32 mx-auto mb-4 rounded-full overflow-hidden shadow-lg"> | |
| <img src="https://static.photos/people/320x240/13" alt="Groomsman" class="w-full h-full object-cover"> | |
| </div> | |
| <h4 class="font-serif text-xl">David Lee</h4> | |
| <p class="text-gray-600">Groomsman</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Gift QR --> | |
| <section id="gift" class="py-20"> | |
| <div class="max-w-2xl mx-auto px-4 text-center"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl md:text-4xl font-serif mb-4">Wedding Gift</h2> | |
| <div class="w-24 h-1 bg-gray-300 mx-auto"></div> | |
| <p class="text-gray-600 mt-4">Scan QR code to send your gift</p> | |
| </div> | |
| <div class="bg-white p-8 rounded-lg shadow-md inline-block"> | |
| <img src="https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=https://paypal.me/example" | |
| alt="Wedding Gift QR Code" class="mx-auto"> | |
| <p class="mt-4 text-gray-600">Or use this link: <a href="https://paypal.me/example" class="text-blue-500">paypal.me/example</a></p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- RSVP --> | |
| <section id="rsvp" class="py-20 bg-gray-50"> | |
| <div class="max-w-2xl mx-auto px-4"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl md:text-4xl font-serif mb-4">RSVP</h2> | |
| <div class="w-24 h-1 bg-gray-300 mx-auto"></div> | |
| <p class="text-gray-600 mt-4">Kindly respond by May 1, 2024</p> | |
| </div> | |
| <form class="bg-white p-8 rounded-lg shadow-md"> | |
| <div class="mb-6"> | |
| <label for="name" class="block text-gray-700 mb-2">Full Name</label> | |
| <input type="text" id="name" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-1 focus:ring-gray-400"> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="email" class="block text-gray-700 mb-2">Email</label> | |
| <input type="email" id="email" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-1 focus:ring-gray-400"> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="guests" class="block text-gray-700 mb-2">Number of Guests</label> | |
| <select id="guests" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-1 focus:ring-gray-400"> | |
| <option value="1">1</option> | |
| <option value="2">2</option> | |
| <option value="3">3</option> | |
| <option value="4">4</option> | |
| </select> | |
| </div> | |
| <div class="mb-6"> | |
| <p class="block text-gray-700 mb-2">Will you be attending?</p> | |
| <div class="flex space-x-4"> | |
| <label class="inline-flex items-center"> | |
| <input type="radio" name="attendance" value="yes" checked class="h-4 w-4 text-gray-600 focus:ring-gray-500"> | |
| <span class="ml-2 text-gray-700">Accept with pleasure</span> | |
| </label> | |
| <label class="inline-flex items-center"> | |
| <input type="radio" name="attendance" value="no" class="h-4 w-4 text-gray-600 focus:ring-gray-500"> | |
| <span class="ml-2 text-gray-700">Decline with regret</span> | |
| </label> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="message" class="block text-gray-700 mb-2">Message (optional)</label> | |
| <textarea id="message" rows="3" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-1 focus:ring-gray-400"></textarea> | |
| </div> | |
| <button type="submit" class="w-full bg-gray-800 text-white py-3 rounded-lg hover:bg-gray-700 transition">Submit</button> | |
| </form> | |
| </div> | |
| </section> | |
| </main> | |
| <custom-footer></custom-footer> | |
| <script> | |
| feather.replace(); | |
| </script> | |
| <script src="script.js"></script> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| <style> | |
| /* Add subtle heartbeat to hero section */ | |
| section.hero-section h1 { | |
| animation: heartbeat 1.5s ease-in-out infinite; | |
| transform-style: preserve-3d; | |
| } | |
| @keyframes heartbeat { | |
| 0% { transform: scale(1); } | |
| 25% { transform: scale(1.05) translateZ(10px); } | |
| 50% { transform: scale(1); } | |
| 75% { transform: scale(1.03) translateZ(5px); } | |
| 100% { transform: scale(1); } | |
| } | |
| /* 3D Depth for main content */ | |
| main { | |
| transform-style: preserve-3d; | |
| transition: transform 0.5s ease; | |
| } | |
| </style> | |
| </body> | |
| </html> |