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

starting to get things in order

Browse Source
This commit is contained in:
Adam Mohammed
2024-11-17 15:25:20 -05:00
parent 967460a720
commit 4934c26c9a
3 changed files with 128 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
app/assets/stylesheets/application.css
View File

@@ -13,7 +13,8 @@
*= require_tree . *= require_tree .
*= require_self *= require_self
*/ */
@import url('https://fonts.googleapis.com/css2?family=Fleur+De+Leah&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Euphoria+Script&family=Fleur+De+Leah&family=Rouge+Script&display=swap');
html, body { html, body {
margin: 0; margin: 0;
padding: 0; padding: 0;
@@ -21,8 +22,14 @@ html, body {
.hero-bg { .hero-bg {
background-image: url("assets/hero.jpg"); background-size: contain;
background-color: #FDFEFE;
}
.lavender-wisp {
background-image: url("assets/lavender-wisp.png");
background-size: cover; background-size: cover;
height: 4rem;
} }
/* #container { */ /* #container { */
@@ -66,3 +73,9 @@ html, body {
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
} }
.rogue-script {
font-family: "Rouge Script", cursive;
font-weight: 400;
font-style: normal;
}

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

@@ -1,103 +1,131 @@
<!-- options: #a99dab #dfebde --> <!-- options: #a99dab #dfebde -->
<div class="bg-[#a99dab] w-screen"> <div class="bg-[#a99dab] w-screen">
<!--- HERO START ---> <!--- HERO START --->
<div class="hero-bg h-3/4"> <div class="hero-bg h-3/4">
<!-- Nav START --> <!-- Nav START -->
<div class="relative h-12 z-30"> <div class="relative h-12 z-30">
<div id="burger-menu" class="absolute right-0 pr-4 pt-4 block lg:hidden"> <div id="burger-menu" class="absolute right-0 pr-4 pt-4 block lg:hidden">
<button class="flex items-center px-3 py-2 border rounded hover:text-white hover:border-white"> <button class="flex items-center px-3 py-2 border rounded hover:text-white hover:border-white">
<svg class="fill-current text-slate-300 h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Menu</title><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/></svg> <svg class="fill-current text-slate-300 h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Menu</title><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/></svg>
</button> </button>
</div> </div>
<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="#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="#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> </div>
</nav>
</div>
<!-- Nav END -->
<div class="container mx-auto">
<div class="pt-24 pb-8 flex flex-col items-center">
<div class="fleur-de-leah-regular text-8xl basis-1/3">Jillian</div>
<div class="fleur-de-leah-regular text-6xl basis-1/3">and</div>
<div class="fleur-de-leah-regular text-8xl basis-1/3">Adam</div>
</div> </div>
</nav>
</div>
<div class="container mx-auto">
<div class="flex flex-row justify-center">
<img src="assets/lavender-wisp.png" class="basis-1/2 max-w-40 lg:max-w-80"/>
<img src="assets/lavender-wisp.png" class="basis-1/2 max-w-40 lg:max-w-80" style="transform: scaleX(-1)"/>
</div> </div>
</div>
<div class="container mx-auto flex flex-col items-center py-4"> <!-- Nav END -->
<button class="text-3xl rounded-lg bg-emerald-700 px-4 py-4 text-slate-300 hover:bg-emerald-600">RSVP</button> <div class="container mx-auto">
<div class="pt-12 pb-8 flex flex-col items-center">
<span class="fleur-de-leah-regular text-8xl basis-1/3">Jillian</span>
<span class="fleur-de-leah-regular text-6xl basis-1/3">and</span>
<span class="fleur-de-leah-regular text-8xl basis-1/3">Adam</span>
</div> </div>
</div>
<div class="container mx-auto flex flex-col items-center py-4"> <div class="container mx-auto flex flex-col items-center py-4 hidden">
<div class="text-2xl">June 7, 2025 • West Chester, PA</div> <button class="text-3xl rounded-lg bg-emerald-700 px-4 py-4 text-slate-300 hover:bg-emerald-600">RSVP</button>
</div> </div>
<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>
<!-- <div class="mx-auto items-center w-fit"> --> <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="text-3xl py-4">June 7, 2025</div> --> <div id="nav-links-lg" class="text-xl flex flex-col lg:flex-row lg:mr-4">
<!-- </div> --> <a href="#ceremony" class="block mt-4 lg:inline-block lg:mt-0 hover:text-slate-500 mr-24">Ceremony & Reception</a>
<!-- <div class="mx-auto items-center w-fit"> --> <a href="#accommodations" class="block mt-4 lg:inline-block lg:mt-0 hover:text-slate-500 mr-24">Accommodations</a>
<!-- <div class="text-3xl py-4">207 DAYS TO GO!</div> --> <a href="#dress" class="block mt-4 lg:inline-block lg:mt-0 hover:text-slate-500 mr-24">Dress</a>
<!-- </div> --> <!-- <a href="#registry" class="block mt-4 lg:inline-block lg:mt-0 hover:text-white mr-24">Registry</a> -->
<div class="w-full block flex-grow max-md:hidden lg:flex lg:w-auto lg:justify-center"> <!-- <a href="#rsvp" class="block mt-4 lg:inline-block lg:mt-0 hover:text-white">RSVP</a> -->
<div id="nav-links-lg" class="text-xl flex flex-col lg:flex-row lg:mr-4">
<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="#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="#rsvp" class="block mt-4 lg:inline-block lg:mt-0 hover:text-white">RSVP</a>
</div>
</div>
</div>
</div>
<div id="ceremony" class="w-screen bg-[#a99dab]">
<div class="container mx-auto ">
<div class="bg-[#ddd3be] text-slate-900">
<div class="flex flex-col">
<div class="basis-1/3">
<h1 class="text-3xl px-4 py-8">Ceremony & Reception</h1>
<p class="text-xl px-4 py-8">We will be celebrating our wedding at Penn Oaks Golf Club in West Chester, Pennsylvania
</div>
<div class="basis-2/3 h-[400px] overflow-hidden 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="370" height="300" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div id="accommodations" class="w-screen bg-[#9d8ca4] text-slate-200"> <div id="ceremony" class="w-screen bg-[#ddd3be]">
<div class="container mx-auto lg:h-fit text-slate-900">
<div class="flex flex-col lg:flex-row lg:space-x-4 lg:items-center">
<div class="basis-1/3 max-md:hidden">
<img src="assets/love-park-small.png" class="lg:scale(0.7)" />
</div>
<div class="basis-2/3">
<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.
</div>
<div class="basis-1/3 overflow-hidden mx-auto lg:items-center">
<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>
<div class="container mx-auto flex flex-row justify-center md:hidden lg:hidden">
<img src="assets/love-park-small.png">
</div>
<div id="accommodations" class="w-screen bg-[#9d8ca4] text-slate-900">
<div class="container mx-auto"> <div class="container mx-auto">
<div class="h-36"> <div class="lg:flex lg:flex-row lg:justify-center lg:items-center">
<h1 class="text-3xl py-8">Accommodations</h1> <span class="text-7xl pl-4">🛏️</span>
</div> <span class="text-5xl pl-4 lg:pt-4 rogue-script lg:text-7xl">Accommodations</span>
</div> </div>
</div> <div class="flex flex-col my-4 lg:flex-row lg:w-fit lg:mx-auto lg:my-12">
<div id="dress" class="w-screen bg-[#92a084] text-slate-200"> <div class="flex flex-row bg-[#fdfefe] rounded-lg mx-4 mt-4 px-4 py-4 items-center lg:p-12">
<div class="container mx-auto "> <img src="assets/home2.svg" class="w-16 h-16" />
<div class="h-36"> <div class="flex flex-col pl-2">
<h1 class="text-3xl">Dress</h1> <a href="" class="text-3xl">Home2 Suites</a>
</div> <span>484-354-2985</span>
</div> <span class="text-xl">7 minutes away</span>
</div> </div>
<div id="Registry" class="w-screen bg-[#9d8ca4] text-slate-200"> </div>
<div class="container mx-auto "> <div class="flex flex-row bg-[#fdfefe] rounded-lg mx-4 mt-4 px-4 py-4 items-center lg:p-12">
<div class="h-36"> <img src="assets/residence-inn.svg" class="w-16 h-16" />
<h1 class="text-3xl">Registry</h1> <div class="flex flex-col pl-2">
</div> <a href="#" class="text-3xl">Residence Inn</a>
</div> <span class="text-xl">12 minutes away</span>
</div> <span>610-459-1190</span>
<div id="rsvp" class="w-screen bg-[#92a084] text-slate-200"> </div>
<div class="container mx-auto "> </div>
<div class="h-36"> <div class="flex flex-row bg-[#fdfefe] rounded-lg mx-4 mt-4 px-4 py-4 items-center lg:p-12">
<h1 class="text-3xl">RSVP</h1> <img src="assets/hotel-warner.png" class="w-16 h-16 scale-y-50" />
<div class="flex flex-col pl-2">
<span class="text-3xl">Hotel Warner</span>
<span class="text-xl">15 minutes away</span>
<span>610-6922-6920</span>
</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-col pl-2">
<span class="text-3xl">Wedding Block</span>
<span class="text-xl">Details coming soon</span>
</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>
</div> </div>

1
config/routes.rb
View File

@@ -1,4 +1,5 @@
Rails.application.routes.draw do Rails.application.routes.draw do
resources :invitations
# Define your application routes per the DSL in https://guides.rubyonrails.org/routing.html # Define your application routes per the DSL in https://guides.rubyonrails.org/routing.html
root "home#index" root "home#index"