adam/weddingplan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added our story

Browse Source
This commit is contained in:
Adam Mohammed
2024-11-18 21:44:54 -05:00
parent eab3494b40
commit 40693165eb
1 changed files with 52 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
app/views/home/index.html.erb
View File

@@ -12,9 +12,9 @@
<nav class="flex items-center justify-between flex-wrap pt-12 z-30"> <nav class="flex items-center justify-between flex-wrap pt-12 z-30">
<div class="bg-[#a99dab] w-full block flex-grow lg:hidden"> <div class="bg-[#a99dab] w-full block flex-grow lg:hidden">
<div id="nav-links" class="text-xl max-md:hidden flex flex-col pl-4 lg:flex-row lg:mr-4"> <div id="nav-links" class="text-xl max-md:hidden flex flex-col pl-4 lg:flex-row lg:mr-4">
<a href="#our-story" class="block mt-4 lg:inline-block lg:mt-0 hover:text-white mr-24">Our Story</a>
<a href="#ceremony" class="block mt-4 lg:inline-block lg:mt-0 hover:text-white mr-24">Ceremony & Reception</a> <a href="#ceremony" class="block mt-4 lg:inline-block lg:mt-0 hover:text-white mr-24">Ceremony & Reception</a>
<a href="#accommodations" class="block mt-4 lg:inline-block lg:mt-0 hover:text-white mr-24">Accommodations</a> <a href="#accommodations" class="block mt-4 lg:inline-block lg:mt-0 hover:text-white mr-24">Accommodations</a>
<a href="#dress" class="block mt-4 lg:inline-block lg:mt-0 hover:text-white mr-24">Dress</a>
<!-- <a href="#registry" class="block mt-4 lg:inline-block lg:mt-0 hover:text-white mr-24">Registry</a> --> <!-- <a href="#registry" class="block mt-4 lg:inline-block lg:mt-0 hover:text-white mr-24">Registry</a> -->
<!-- <a href="#rsvp" class="block mt-4 lg:inline-block lg:mt-0 hover:text-white pb-4">RSVP</a> --> <!-- <a href="#rsvp" class="block mt-4 lg:inline-block lg:mt-0 hover:text-white pb-4">RSVP</a> -->
</div> </div>
@@ -41,32 +41,68 @@
</div> </div>
<div class="container mx-auto flex flex-col items-center pt-4 pb-8"> <div class="container mx-auto flex flex-col items-center pt-4 pb-8">
<div class="text-2xl">June 7, 2025 • West Chester, PA</div> <div class="text-xl px-4 lg:text-2xl">June 7, 2025 • West Chester, PA</div>
</div> </div>
<div class="w-full block flex-grow max-md:hidden lg:flex lg:w-auto lg:justify-center lg:pb-4 lg:pt-4 lg:border-t lg:border-b"> <div class="w-full block flex-grow max-md:hidden lg:flex lg:w-auto lg:justify-center lg:pb-4 lg:pt-4 lg:border-t lg:border-b">
<div id="nav-links-lg" class="text-xl flex flex-col lg:flex-row lg:mr-4"> <div id="nav-links-lg" class="text-xl flex flex-col lg:flex-row lg:mr-4">
<a href="#our-story" class="block mt-4 lg:inline-block lg:mt-0 hover:text-slate-500 mr-24">Our Story</a>
<a href="#ceremony" class="block mt-4 lg:inline-block lg:mt-0 hover:text-slate-500 mr-24">Ceremony & Reception</a> <a href="#ceremony" class="block mt-4 lg:inline-block lg:mt-0 hover:text-slate-500 mr-24">Ceremony & Reception</a>
<a href="#accommodations" class="block mt-4 lg:inline-block lg:mt-0 hover:text-slate-500 mr-24">Accommodations</a> <a href="#accommodations" class="block mt-4 lg:inline-block lg:mt-0 hover:text-slate-500 mr-24">Accommodations</a>
<a href="#dress" class="block mt-4 lg:inline-block lg:mt-0 hover:text-slate-500 mr-24">Dress</a>
<!-- <a href="#registry" class="block mt-4 lg:inline-block lg:mt-0 hover:text-white mr-24">Registry</a> --> <!-- <a href="#registry" class="block mt-4 lg:inline-block lg:mt-0 hover:text-white mr-24">Registry</a> -->
<!-- <a href="#rsvp" class="block mt-4 lg:inline-block lg:mt-0 hover:text-white">RSVP</a> --> <!-- <a href="#rsvp" class="block mt-4 lg:inline-block lg:mt-0 hover:text-white">RSVP</a> -->
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div id="ceremony" class="w-screen bg-[#ddd3be]"> <div id="our-story" class="w-screen bg-[#ddd3be] lg:bg-[#fdfefe] lg:my-8">
<div class="container mx-auto lg:h-fit text-slate-900"> <div class="container mx-auto lg:h-fit text-slate-900 lg:rounded-2xl lg:bg-[#ddd3be] lg:shadow-2xl px-8 py-8">
<div class="flex flex-col lg:flex-row lg:space-x-4 lg:items-center"> <div class="w-fit mx-auto">
<h1 class="text-5xl rogue-script lg:text-7xl">How we met</h1>
</div>
<ol class="relative border-l border-slate-900">
<li class="mb-10 ms-4">
<div class="absolute w-3 h-3 bg-slate-600 rounded-full mt-1.5 -start-1.5 border border-slate-900"></div>
<time class="mb-1 text-sm font-normal leading-none text-gray-600">June 2019</time>
<h3 class="text-lg font-semibold text-slate-900">Met at Doylestown Rock Gym</h3>
</li>
<li class="mb-10 ms-4">
<div class="absolute w-3 h-3 bg-slate-600 rounded-full mt-1.5 -start-1.5 border border-slate-900"></div>
<time class="mb-1 text-sm font-normal leading-none text-gray-600">October 2019</time>
<h3 class="text-lg font-semibold text-slate-900">Started Dating</h3>
</li>
<li class="mb-10 ms-4">
<div class="absolute w-3 h-3 bg-slate-600 rounded-full mt-1.5 -start-1.5 border border-slate-900"></div>
<time class="mb-1 text-sm font-normal leading-none text-gray-600">August 2020</time>
<h3 class="text-lg font-semibold text-slate-900">Moved to Manayunk Apartment</h3>
</li>
<li class="mb-10 ms-4">
<div class="absolute w-3 h-3 bg-slate-600 rounded-full mt-1.5 -start-1.5 border border-slate-900"></div>
<time class="mb-1 text-sm font-normal leading-none text-gray-600">September 2021</time>
<h3 class="text-lg font-semibold text-slate-900">Bought a house in Chalfont</h3>
</li>
<li class="mb-10 ms-4">
<div class="absolute w-3 h-3 bg-slate-600 rounded-full mt-1.5 -start-1.5 border border-slate-900"></div>
<time class="mb-1 text-sm font-normal leading-none text-gray-600">October 2024</time>
<h3 class="text-lg font-semibold text-slate-900">5 year anniversary turned into Proposal</h3>
</li>
</ol>
</div>
</div>
<div id="ceremony" class="w-screen bg-[#ddd3be] lg:bg-[#fdfefe] lg:my-8">
<div class="container mx-auto lg:h-fit text-slate-900 lg:rounded-2xl bg-[#d2b4de] lg:shadow-2xl">
<div class="flex flex-col lg:flex-row lg:space-x-4">
<div class="basis-1/3 max-md:hidden"> <div class="basis-1/3 max-md:hidden">
<img src="assets/love-park-small.png" class="lg:scale(0.7)" /> <img src="assets/love-park-small.png" class="lg:scale(0.7) lg:rounded-l-2xl" />
</div> </div>
<div class="basis-2/3"> <div class="basis-2/3">
<h1 class="text-5xl px-4 py-8 rogue-script lg:text-7xl">Ceremony & Reception</h1> <h1 class="text-5xl px-4 py-8 rogue-script lg:text-7xl">Ceremony & Reception</h1>
<p class="text-xl px-4 py-8">You're invited to come join us to celebrate our wedding at Penn Oaks Golf Club in West Chester, Pennsylvania.</p>
<p class="text-xl px-4 py-8">You're invited to come join us to celebrate our wedding at Penn Oaks Golf Club in West Chester, Pennsylvania. <div class="max-md:hidden lg:w-fit lg:mx-auto">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d6120.924192987885!2d-75.56311592187585!3d39.908673971526014!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c6f042ac27b4e9%3A0xc4a8ba245e1ee29d!2sPenn%20Oaks%20Golf%20Club!5e0!3m2!1sen!2sus!4v1731812607168!5m2!1sen!2sus" width="570" height="500" style="border:0;" allowfullscreen="" loading="lazy" class="lg:rounded-xl" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
</div> </div>
<div class="basis-1/3 overflow-hidden mx-auto lg:items-center"> <div class="basis-1/3 overflow-hidden mx-auto md:hidden lg:hidden">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d6120.924192987885!2d-75.56311592187585!3d39.908673971526014!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c6f042ac27b4e9%3A0xc4a8ba245e1ee29d!2sPenn%20Oaks%20Golf%20Club!5e0!3m2!1sen!2sus!4v1731812607168!5m2!1sen!2sus" width="370" height="300" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe> <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d6120.924192987885!2d-75.56311592187585!3d39.908673971526014!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c6f042ac27b4e9%3A0xc4a8ba245e1ee29d!2sPenn%20Oaks%20Golf%20Club!5e0!3m2!1sen!2sus!4v1731812607168!5m2!1sen!2sus" width="370" height="300" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div> </div>
</div> </div>
@@ -75,11 +111,11 @@
<div class="container mx-auto flex flex-row justify-center md:hidden lg:hidden"> <div class="container mx-auto flex flex-row justify-center md:hidden lg:hidden">
<img src="assets/love-park-small.png"> <img src="assets/love-park-small.png">
</div> </div>
<div id="accommodations" class="w-screen bg-[#9d8ca4] text-slate-900"> <div id="accommodations" class="w-screen text-slate-900 lg:my-8">
<div class="container mx-auto"> <div class="container mx-auto bg-[#92a084] lg:rounded-2xl pt-4 lg:mt-4 lg:pb-2 lg:shadow-2xl lg:mb-4">
<div class="lg:flex lg:flex-row lg:justify-center lg:items-center"> <div class="lg:flex lg:flex-row lg:justify-center lg:items-center">
<span class="text-7xl pl-4">🛏️</span> <!-- <span class="text-7xl pl-4">🛏️</span> -->
<span class="text-5xl pl-4 lg:pt-4 rogue-script lg:text-7xl">Accommodations</span> <span class="text-5xl pl-4 lg:pt-4 rogue-script lg:text-7xl">Accommodations</span>
</div> </div>
<div class="flex flex-col my-4 lg:flex-row lg:w-fit lg:mx-auto lg:my-12"> <div class="flex flex-col my-4 lg:flex-row lg:w-fit lg:mx-auto lg:my-12">
<div class="flex flex-row bg-[#fdfefe] rounded-lg mx-4 mt-4 px-4 py-4 items-center lg:p-12"> <div class="flex flex-row bg-[#fdfefe] rounded-lg mx-4 mt-4 px-4 py-4 items-center lg:p-12">
@@ -106,7 +142,7 @@
<span>610-6922-6920</span> <span>610-6922-6920</span>
</div> </div>
</div> </div>
<div class="flex flex-row bg-[#fdfefe] rounded-lg mx-4 mt-4 px-4 py-4 items-center lg:p-12"> <div class="flex flex-row bg-[#fdfefe] rounded-lg mx-4 mt-4 mb-4 px-4 py-4 items-center lg:p-12">
<div class="flex flex-col pl-2"> <div class="flex flex-col pl-2">
<span class="text-3xl">Wedding Block</span> <span class="text-3xl">Wedding Block</span>
<span class="text-xl">Details coming soon</span> <span class="text-xl">Details coming soon</span>
@@ -114,18 +150,4 @@
</div> </div>
</div> </div>
</div> </div>
<div id="dress" class="w-screen bg-[#92a084] text-slate-900">
<div class="container mx-auto">
<div class="h-36">
<h1 class="text-3xl">Dress</h1>
</div>
</div>
</div>
<div id="Registry" class="w-screen hidden bg-[#9d8ca4] text-slate-200">
<div class="container mx-auto ">
<div class="h-36">
<h1 class="text-3xl">Registry</h1>
</div>
</div>
</div>
</div> </div>