2 Commits

Author SHA1 Message Date
Adam Mohammed
77f271c7aa Better layout 2024-11-16 20:35:46 -05:00
Adam Mohammed
49efe4cf12 More dots 2024-11-16 19:56:51 -05:00
3 changed files with 86 additions and 30 deletions

View File

@@ -1,2 +1,2 @@
web: bin/rails server
web: bin/rails server --binding 0.0.0.0
css: bin/rails tailwindcss:watch

View File

@@ -17,7 +17,6 @@
html, body {
margin: 0;
padding: 0;
height: 100%;
}

View File

@@ -1,36 +1,51 @@
<!-- options: #a99dab #dfebde -->
<div class="bg-[#a99dab] w-screen h-screen">
<div class="bg-[#a99dab] w-screen">
<!--- HERO START --->
<div class="hero-bg h-3/4">
<!-- Nav START -->
<nav class="flex items-center justify-between flex-wrap">
<div id="burger-menu" class="block lg:hidden">
<div class="relative h-12 z-30">
<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">
<svg class="fill-current 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>
</div>
<div class="w-full block flex-grow lg:hidden">
<div id="nav-links" class="text-xl max-md:hidden flex flex-col lg:flex-row lg:mr-4">
<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 id="nav-links" class="text-xl max-md:hidden flex flex-col pl-4 lg:flex-row lg:mr-4">
<a href="#" class="block mt-4 lg:inline-block lg:mt-0 hover:text-white mr-24">Ceremony & Reception</a>
<a href="#" class="block mt-4 lg:inline-block lg:mt-0 hover:text-white mr-24">Accommodations</a>
<a href="#" class="block mt-4 lg:inline-block lg:mt-0 hover:text-white mr-24">Dress</a>
<a href="#" class="block mt-4 lg:inline-block lg:mt-0 hover:text-white mr-24">Registry</a>
<a href="#" class="block mt-4 lg:inline-block lg:mt-0 hover:text-white">RSVP</a>
<a href="#" class="block mt-4 lg:inline-block lg:mt-0 hover:text-white pb-4">RSVP</a>
</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>
<div class="w-fit mx-auto py-56 sm:py-24">
<h1 class="fleur-de-leah-regular text-darkgreen-600 text-7xl">Jillian & Adam</h1>
<div class="mx-auto items-center w-fit">
<div class="text-3xl py-4">June 7, 2025</div>
</div>
<div class="mx-auto items-center w-fit">
<div class="text-3xl py-4">207 DAYS TO GO!</div>
<div class="container mx-auto flex flex-col items-center py-4">
<button class="text-3xl rounded-lg bg-emerald-700 px-4 py-4 text-slate-300 hover:bg-emerald-600">RSVP</button>
</div>
<div class="container mx-auto flex flex-col items-center py-4">
<div class="text-2xl">June 7, 2025 • West Chester, PA</div>
</div>
<!-- <div class="mx-auto items-center w-fit"> -->
<!-- <div class="text-3xl py-4">June 7, 2025</div> -->
<!-- </div> -->
<!-- <div class="mx-auto items-center w-fit"> -->
<!-- <div class="text-3xl py-4">207 DAYS TO GO!</div> -->
<!-- </div> -->
<div class="w-full block flex-grow max-md:hidden lg:flex lg:w-auto lg:justify-center">
<div id="nav-links-lg" class="text-xl flex flex-col lg:flex-row lg:mr-4">
<a href="#" class="block mt-4 lg:inline-block lg:mt-0 hover:text-white mr-24">Ceremony & Reception</a>
@@ -41,5 +56,47 @@
</div>
</div>
</div>
<!--- Hero END -->
</div>
<div id="ceremony" class="w-screen bg-[#a99dab]">
<div class="container mx-auto ">
<div class="bg-amber-100 h-36">
<div class="flex flex-row">
<div class="basis-1/3">Insert Picture here</div>
<div class="basis-2/3">
<h1 class="text-3xl">Ceremony & Reception</h1>
</div>
</div>
</div>
</div>
</div>
<div id="accommodations" class="w-screen bg-[#a99dab]">
<div class="container mx-auto ">
<div class="bg-amber-300 h-36">
<h1 class="text-3xl">Accommodations</h1>
</div>
</div>
</div>
<div id="dress" class="w-screen bg-[#a99dab]">
<div class="container mx-auto ">
<div class="bg-amber-100 h-36">
<h1 class="text-3xl">Dress</h1>
</div>
</div>
</div>
<div id="Registry" class="w-screen bg-[#a99dab]">
<div class="container mx-auto ">
<div class="bg-amber-300 h-36">
<h1 class="text-3xl">Registry</h1>
</div>
</div>
</div>
<div id="rsvp" class="w-screen bg-[#a99dab]">
<div class="container mx-auto ">
<div class="bg-amber-100 h-36">
<h1 class="text-3xl">RSVP</h1>
</div>
</div>
</div>
<!--- Hero END -->