| | <!DOCTYPE html> |
| | <html lang="en"> |
| | <head> |
| | <meta charset="UTF-8"> |
| | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| | <title>Bobby & Kayla's Engagement</title> |
| | <script src="https://cdn.tailwindcss.com"></script> |
| | <script src="https://cdn.jsdelivr.net/npm/turn.js@4.2.0/turn.min.js"></script> |
| | <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| | <style> |
| | @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&family=Montserrat:wght@300;400;500&display=swap'); |
| | |
| | body { |
| | font-family: 'Montserrat', sans-serif; |
| | background-color: #f9f4ee; |
| | overflow: hidden; |
| | } |
| | |
| | #flipbook { |
| | width: 100vw; |
| | height: 100vh; |
| | perspective: 1500px; |
| | } |
| | |
| | .page { |
| | background: linear-gradient(to right, #f8e5d6, #f0d9c8); |
| | color: #5a4a42; |
| | padding: 40px; |
| | box-shadow: 0 0 20px rgba(0,0,0,0.1); |
| | border: 1px solid #e8d5c5; |
| | } |
| | |
| | .page h1, .page h2, .page h3 { |
| | font-family: 'Playfair Display', serif; |
| | color: #c76d5a; |
| | } |
| | |
| | .page h1 { |
| | font-size: 2.5rem; |
| | margin-bottom: 1rem; |
| | } |
| | |
| | .page h2 { |
| | font-size: 1.8rem; |
| | margin-bottom: 0.8rem; |
| | } |
| | |
| | .photo-frame { |
| | border: 12px solid white; |
| | box-shadow: 0 5px 15px rgba(0,0,0,0.1); |
| | background: white; |
| | margin: 20px auto; |
| | max-width: 100%; |
| | } |
| | |
| | .polaroid { |
| | background: white; |
| | padding: 15px 15px 40px; |
| | box-shadow: 0 5px 15px rgba(0,0,0,0.1); |
| | transform: rotate(-2deg); |
| | margin: 20px; |
| | } |
| | |
| | .polaroid img { |
| | width: 100%; |
| | height: auto; |
| | border-bottom: 1px solid #eee; |
| | margin-bottom: 10px; |
| | } |
| | |
| | .polaroid p { |
| | text-align: center; |
| | font-style: italic; |
| | color: #888; |
| | } |
| | |
| | .heart-divider { |
| | display: flex; |
| | align-items: center; |
| | justify-content: center; |
| | margin: 20px 0; |
| | } |
| | |
| | .heart-divider:before, .heart-divider:after { |
| | content: ""; |
| | flex: 1; |
| | border-bottom: 1px solid #e8d5c5; |
| | } |
| | |
| | .heart-divider i { |
| | margin: 0 15px; |
| | color: #c76d5a; |
| | } |
| | |
| | .timeline { |
| | position: relative; |
| | max-width: 800px; |
| | margin: 0 auto; |
| | padding-left: 50px; |
| | } |
| | |
| | .timeline:before { |
| | content: ''; |
| | position: absolute; |
| | left: 25px; |
| | top: 0; |
| | bottom: 0; |
| | width: 2px; |
| | background: #e8d5c5; |
| | } |
| | |
| | .timeline-item { |
| | position: relative; |
| | margin-bottom: 30px; |
| | } |
| | |
| | .timeline-date { |
| | position: absolute; |
| | left: -50px; |
| | top: 0; |
| | width: 40px; |
| | height: 40px; |
| | border-radius: 50%; |
| | background: #c76d5a; |
| | color: white; |
| | display: flex; |
| | align-items: center; |
| | justify-content: center; |
| | font-weight: bold; |
| | } |
| | |
| | .timeline-content { |
| | background: white; |
| | padding: 20px; |
| | border-radius: 5px; |
| | box-shadow: 0 3px 10px rgba(0,0,0,0.05); |
| | } |
| | |
| | .quote { |
| | font-style: italic; |
| | position: relative; |
| | padding: 20px; |
| | margin: 20px 0; |
| | } |
| | |
| | .quote:before { |
| | content: '"'; |
| | font-size: 4rem; |
| | position: absolute; |
| | left: -10px; |
| | top: -20px; |
| | color: rgba(199, 109, 90, 0.2); |
| | } |
| | |
| | .page-footer { |
| | position: absolute; |
| | bottom: 20px; |
| | left: 0; |
| | right: 0; |
| | text-align: center; |
| | font-size: 0.8rem; |
| | color: #a89b91; |
| | } |
| | |
| | @media (max-width: 768px) { |
| | .page { |
| | padding: 20px; |
| | } |
| | |
| | .page h1 { |
| | font-size: 2rem; |
| | } |
| | |
| | .page h2 { |
| | font-size: 1.5rem; |
| | } |
| | |
| | .timeline { |
| | padding-left: 30px; |
| | } |
| | |
| | .timeline:before { |
| | left: 15px; |
| | } |
| | |
| | .timeline-date { |
| | left: -30px; |
| | width: 30px; |
| | height: 30px; |
| | font-size: 0.8rem; |
| | } |
| | } |
| | </style> |
| | </head> |
| | <body class="bg-[#f9f4ee]"> |
| | <div id="flipbook"> |
| | |
| | <div class="page flex flex-col items-center justify-center"> |
| | <div class="text-center"> |
| | <h1 class="text-5xl font-bold mb-4">Bobby & Kayla</h1> |
| | <div class="heart-divider"> |
| | <i class="fas fa-heart text-2xl"></i> |
| | </div> |
| | <h2 class="text-3xl mb-8">Our Engagement Story</h2> |
| | <div class="photo-frame w-64 h-64 rounded-full overflow-hidden mx-auto"> |
| | <img src="https://images.unsplash.com/photo-1516589178581-6cd7833ae3b2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=774&q=80" alt="Engagement Photo" class="w-full h-full object-cover"> |
| | </div> |
| | <p class="mt-8 italic">"In all the world, there is no heart for me like yours.<br>In all the world, there is no love for you like mine."</p> |
| | <p class="mt-4">- Maya Angelou</p> |
| | </div> |
| | <div class="page-footer"> |
| | <p>Swipe or use arrow keys to turn pages</p> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="page p-8"> |
| | <h1 class="text-center mb-6">How We Met</h1> |
| | <div class="flex flex-col md:flex-row items-center"> |
| | <div class="md:w-1/2 mb-6 md:mb-0 md:pr-6"> |
| | <div class="polaroid"> |
| | <img src="https://images.unsplash.com/photo-1524504388940-b1c1722653e1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=774&q=80" alt="First Meeting"> |
| | <p>Our first date - June 2018</p> |
| | </div> |
| | </div> |
| | <div class="md:w-1/2"> |
| | <p class="mb-4">It was a warm summer evening in June 2018 when our paths first crossed at a mutual friend's barbecue. Bobby was manning the grill (burning most of the burgers, as he'll admit) while Kayla was mixing drinks for everyone.</p> |
| | <p class="mb-4">We started talking about our shared love for hiking and old movies, and before we knew it, the party had ended and we were still deep in conversation under the stars.</p> |
| | <p class="mb-4">That night, Bobby asked for Kayla's number, and the rest, as they say, is history.</p> |
| | <div class="quote"> |
| | "From the moment we met, I knew there was something special about you. The way you laughed at my terrible jokes and how comfortable I felt being myself around you - it was unlike anything I'd experienced before." |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="page p-8"> |
| | <h1 class="text-center mb-6">Our Journey Together</h1> |
| | <div class="timeline"> |
| | <div class="timeline-item"> |
| | <div class="timeline-date">2018</div> |
| | <div class="timeline-content"> |
| | <h3>First Date</h3> |
| | <p>We went hiking at Blue Ridge Mountains, followed by dinner at that little Italian place that's now our favorite. Bobby spilled wine on his shirt, and Kayla thought it was adorable.</p> |
| | </div> |
| | </div> |
| | |
| | <div class="timeline-item"> |
| | <div class="timeline-date">2019</div> |
| | <div class="timeline-content"> |
| | <h3>First Vacation Together</h3> |
| | <p>We spent a week in Charleston, SC, exploring the historic streets, eating amazing seafood, and getting caught in a sudden rainstorm that had us laughing all the way back to our hotel.</p> |
| | </div> |
| | </div> |
| | |
| | <div class="timeline-item"> |
| | <div class="timeline-date">2020</div> |
| | <div class="timeline-content"> |
| | <h3>Moving In Together</h3> |
| | <p>During the pandemic, we decided to quarantine together. What started as a temporary arrangement turned permanent when we realized how much we loved sharing our daily lives.</p> |
| | </div> |
| | </div> |
| | |
| | <div class="timeline-item"> |
| | <div class="timeline-date">2021</div> |
| | <div class="timeline-content"> |
| | <h3>Adopting Max</h3> |
| | <p>We rescued our golden retriever Max from the local shelter. He's been our furry child ever since, bringing even more love and chaos into our home.</p> |
| | </div> |
| | </div> |
| | |
| | <div class="timeline-item"> |
| | <div class="timeline-date">2022</div> |
| | <div class="timeline-content"> |
| | <h3>First Big Challenge</h3> |
| | <p>When Kayla's father passed away, Bobby was her rock. Through that difficult time, we learned how to support each other through life's toughest moments.</p> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | <div class="flex justify-center mt-8"> |
| | <div class="photo-frame w-64 h-64"> |
| | <img src="https://images.unsplash.com/photo-1529333166437-7750a6dd5a70?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=776&q=80" alt="Couple Photo" class="w-full h-full object-cover"> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="page p-8"> |
| | <h1 class="text-center mb-6">The Proposal</h1> |
| | <div class="flex flex-col md:flex-row items-center"> |
| | <div class="md:w-1/2 mb-6 md:mb-0"> |
| | <p class="mb-4">On a crisp autumn morning, Bobby suggested we revisit the spot where we had our first date - the Blue Ridge Mountains. Kayla thought it was just another one of our hiking adventures.</p> |
| | <p class="mb-4">When we reached the overlook where we'd watched the sunset on that first date, Bobby got down on one knee and asked Kayla to spend forever with him.</p> |
| | <p class="mb-4">Of course, she said yes! (After first asking if he was serious and then crying for a good five minutes.)</p> |
| | <div class="quote"> |
| | "I had planned this elaborate speech, but when the moment came, all I could say was 'I love you more than anything, will you marry me?' And that was enough." |
| | </div> |
| | </div> |
| | <div class="md:w-1/2 md:pl-6"> |
| | <div class="photo-frame"> |
| | <img src="https://images.unsplash.com/photo-1519657337289-077653f724ed?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1770&q=80" alt="Proposal Photo" class="w-full h-full object-cover"> |
| | </div> |
| | <div class="polaroid mt-6"> |
| | <img src="https://images.unsplash.com/photo-1519225421980-715cb0215aed?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1770&q=80" alt="Ring Photo"> |
| | <p>The ring - October 15, 2023</p> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="page p-8"> |
| | <h1 class="text-center mb-6">Our Future Together</h1> |
| | <div class="flex flex-col items-center"> |
| | <div class="w-full md:w-2/3 text-center mb-8"> |
| | <p class="mb-4">We're so excited to begin this new chapter of our lives together. While wedding plans are still in the early stages, we know one thing for certain - our marriage will be built on the same foundation of love, laughter, and mutual respect that has brought us this far.</p> |
| | <p class="mb-4">We dream of buying a home with a big backyard for Max (and maybe a sibling for him someday), traveling the world together, and growing old as each other's favorite person.</p> |
| | </div> |
| | |
| | <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8"> |
| | <div class="photo-frame"> |
| | <img src="https://images.unsplash.com/photo-1523438885200-e635ba2c371e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=774&q=80" alt="Couple Photo 1" class="w-full h-full object-cover"> |
| | </div> |
| | <div class="photo-frame"> |
| | <img src="https://images.unsplash.com/photo-1529626455594-4ff0802cfb7e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=774&q=80" alt="Couple Photo 2" class="w-full h-full object-cover"> |
| | </div> |
| | </div> |
| | |
| | <div class="heart-divider"> |
| | <i class="fas fa-heart text-2xl"></i> |
| | </div> |
| | |
| | <h2 class="text-2xl mt-6 mb-4">Thank you for being part of our story</h2> |
| | <p class="mb-6">We're so grateful to have such wonderful family and friends to share this special time with. Stay tuned for more updates as we plan our wedding!</p> |
| | |
| | <div class="flex space-x-4"> |
| | <a href="#" class="bg-[#c76d5a] text-white px-4 py-2 rounded-full hover:bg-[#b56251] transition"> |
| | <i class="fas fa-envelope mr-2"></i> Contact Us |
| | </a> |
| | <a href="#" class="border border-[#c76d5a] text-[#c76d5a] px-4 py-2 rounded-full hover:bg-[#f8e5d6] transition"> |
| | <i class="fas fa-images mr-2"></i> More Photos |
| | </a> |
| | </div> |
| | </div> |
| | |
| | <div class="page-footer"> |
| | <p>Bobby Stephens & Kayla Harrell - Engaged October 2023</p> |
| | </div> |
| | </div> |
| | </div> |
| |
|
| | <script> |
| | document.addEventListener('DOMContentLoaded', function() { |
| | |
| | $('#flipbook').turn({ |
| | width: window.innerWidth, |
| | height: window.innerHeight, |
| | autoCenter: true, |
| | acceleration: true, |
| | gradients: true, |
| | elevation: 50 |
| | }); |
| | |
| | |
| | window.addEventListener('resize', function() { |
| | $('#flipbook').turn('size', window.innerWidth, window.innerHeight); |
| | }); |
| | |
| | |
| | document.addEventListener('keydown', function(e) { |
| | if (e.keyCode == 37) { |
| | $('#flipbook').turn('previous'); |
| | } else if (e.keyCode == 39) { |
| | $('#flipbook').turn('next'); |
| | } |
| | }); |
| | |
| | |
| | let startX, startY; |
| | |
| | document.addEventListener('touchstart', function(e) { |
| | startX = e.touches[0].clientX; |
| | startY = e.touches[0].clientY; |
| | }, false); |
| | |
| | document.addEventListener('touchmove', function(e) { |
| | if (!startX || !startY) return; |
| | |
| | let diffX = startX - e.touches[0].clientX; |
| | let diffY = startY - e.touches[0].clientY; |
| | |
| | |
| | if (Math.abs(diffX) > Math.abs(diffY)) { |
| | if (diffX > 0) { |
| | |
| | $('#flipbook').turn('next'); |
| | } else { |
| | |
| | $('#flipbook').turn('previous'); |
| | } |
| | } |
| | |
| | |
| | startX = null; |
| | startY = null; |
| | e.preventDefault(); |
| | }, false); |
| | }); |
| | </script> |
| | <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Sochill/love" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| | </html> |
