-
-
Save JustMrMendez/f30ff7a9e8b9a199a289876735138038 to your computer and use it in GitHub Desktop.
Fancy Hero Horizontal Accordion, no JS and no anchor tags
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script lang="ts"> | |
let sections = [ | |
{ | |
title: 'WEBSITES', | |
content: 'Content for section 1', | |
color: 'bg-[#85aa74]' | |
}, | |
{ | |
title: 'WEB HOSTING', | |
color: 'bg-[#fee6a6]', | |
content: 'Content for section 2' | |
}, | |
{ | |
title: 'TELEPHONE', | |
color: 'bg-[#81bac5]', | |
content: 'Content for section 3' | |
}, | |
{ | |
title: 'SOFTWARE', | |
color: 'bg-[#eb6c29]', | |
content: 'Content for section 4' | |
} | |
]; | |
</script> | |
<div | |
class="relative mt-4 flex h-[90vh] flex-col flex-wrap items-center justify-center overflow-hidden px-4 md:px-10 lg:h-[80vh] lg:flex-row" | |
> | |
<div | |
class="relative mb-12 w-full text-black dark:text-white lg:absolute lg:left-10 lg:mb-0 lg:w-1/2" | |
> | |
<div | |
class="mx-auto flex w-full flex-col justify-center px-2 md:px-4 lg:mx-0 lg:w-[550px] lg:px-0 xl:w-[650px]" | |
> | |
<div class="mx-auto w-full space-y-6 lg:w-fit"> | |
<h1 class="text-center font-mono text-3xl md:text-4xl lg:text-left"> | |
Premium Web & Internet Solutions | |
</h1> | |
<p class="text-center font-mono text-xl opacity-80 lg:text-left"> | |
We've got the basics stuff for any small business or indie developer. | |
</p> | |
</div> | |
<div | |
class="mt-10 flex w-full items-center justify-center space-x-10 font-light lg:w-3/4 lg:justify-start" | |
> | |
<button class="rounded-xl bg-[#fee6a6] px-10 py-4 text-2xl text-[#092f42] hover:opacity-90"> | |
Get Started | |
</button> | |
<a class="cursor-pointer text-2xl hover:underline" href="/"> Find out more </a> | |
</div> | |
</div> | |
</div> | |
<div | |
class="group/accord relative flex w-full flex-grow flex-col gap-2 overflow-hidden lg:absolute lg:left-[98%] lg:h-[80vh] lg:w-1/2 lg:-translate-x-full lg:flex-row lg:hover:w-[96.5vw]" | |
> | |
{#each sections as section, index} | |
<!-- Section 1 --> | |
<div | |
class="group/section relative flex h-1/4 w-full items-end rounded-lg border border-white hover:!h-[100%] lg:h-full lg:w-1/4 {section.color} bg-cover bg-center text-[#092f42] transition-[height] duration-300 ease-in-out lg:transition-[width] lg:hover:!w-[100%] lg:group-hover/accord:w-[13.33%]" | |
> | |
<button | |
class="absolute inset-0 flex h-full w-full cursor-pointer items-center lg:flex-col lg:items-start lg:justify-start {index % | |
2 === | |
0 | |
? 'justify-end px-12' | |
: 'justify-start px-12'} gap-4 bg-cover bg-center text-[#092f42] group-hover/section:hidden" | |
> | |
<span | |
class="block whitespace-nowrap text-3xl {index % 2 === 0 | |
? 'order-1' | |
: 'order-2'} uppercase transition-all duration-300 lg:absolute lg:bottom-[5rem] lg:left-1/2 lg:origin-left lg:-rotate-90" | |
>{section.title}</span | |
> | |
<div | |
class="lg:absolute lg:bottom-8 lg:left-1/2 lg:-translate-x-1/2 {index % 2 === 0 | |
? 'order-2' | |
: 'order-1'}" | |
> | |
<span class="text-3xl font-black text-[#092f42]">X</span> | |
</div> | |
</button> | |
<div | |
class="absolute inset-0 z-10 box-border hidden items-center justify-center bg-cover bg-center group-hover/section:flex" | |
> | |
{section.content} | |
</div> | |
</div> | |
{/each} | |
</div> | |
</div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment