Files
weddingplan/app/views/home/index.html.erb
2025-05-15 22:23:12 -04:00

59 lines
2.6 KiB
Plaintext

<!-- options: #a99dab #dfebde -->
<div class="bg-[#a99dab] w-screen">
<!--- HERO START --->
<div class="hero-bg h-3/4">
<!-- Nav START -->
<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 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>
<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-lg:hidden flex flex-col pl-4 lg:flex-row lg:mr-4 mb-4">
<% @sections.each do |s| %>
<a href="#<%= s.id %>" class="block mt-4 lg:inline-block lg:mt-0 hover:text-white mr-24"><%= s.title %></a>
<% end %>
</div>
</div>
</nav>
</div>
<div class="container mx-auto">
<div class="flex flex-row justify-center">
<img src="<%= image_path 'lavender-wisp.png' %>" class="basis-1/2 max-w-40 lg:max-w-80"/>
<img src="<%= image_path 'lavender-wisp.png' %>" class="basis-1/2 max-w-40 lg:max-w-80" style="transform: scaleX(-1)"/>
</div>
</div>
<!-- Nav END -->
<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 class="container mx-auto flex flex-col items-center pt-4 pb-8">
<div class="text-2xl px-4 lg:text-2xl">June 7, 2025 </div>
<div class="text-xl px-4 lg:text-xl">Penn Oaks Golf Club, West Chester, PA</div>
</div>
<div class="w-full block flex-grow max-lg: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">
<% @sections.each do |s| %>
<a href="#<%= s.id %>" class="block mt-4 lg:inline-block lg:mt-0 hover:text-slate-500 px-12"><%= s.title %></a>
<% end %>
</div>
</div>
</div>
</div>
<% @sections.each do |section| %>
<%= render section.id, color: cycle("#ddd3be", "#b2c0b2") %>
<% end %>
<div class="hidden object-left-top object-top object-center object-bottom object-left-bottom object-[0%_0%] object[100%_100%] object-[50%_0%] object-[0%-50%] object-[0%_100%] object-[100%_0%]"></div>
</div>