fernando/card-jong-fe
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add animation to cards in homepage

Browse Source
This commit is contained in:
Araozu 2024-05-07 18:31:50 -05:00
parent 094fc38cec
commit 0e3926c740
2 changed files with 6 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/Card.tsx
View File

@ -35,14 +35,14 @@ export function Card(props: {value: number}) {
} }
return ( return (
<div class={"inline-block w-16 h-24 border-2 border-c-border-1 relative"} <button class={"inline-block w-16 h-24 border-2 border-c-border-1 relative select-none"}
style={{"color": textColor, "background-color": bgColor}} style={{"color": textColor, "background-color": bgColor}}
> >
<span class="absolute top-1 left-1 font-bold text-4xl font-sans-serif"> <span class="absolute top-1 left-1 font-bold text-4xl font-sans-serif">
{cardValue} {cardValue}
</span> </span>
{icon} {icon}
</div> </button>
); );
} }

18
src/pages/Index.tsx
View File

@ -92,27 +92,17 @@ export function Index() {
Go to game rules Go to game rules
</A> </A>
</div> </div>
<div class="h-16" /> <div class="text-center py-8">
<div class="text-center"> <div class="inline-block -rotate-6 translate-x-2 translate-y-1 hover:-translate-y-2 transition-transform">
<div class="inline-block -rotate-6 translate-x-2 translate-y-1">
<Card value={38} /> <Card value={38} />
</div> </div>
<div class="inline-block"> <div class="inline-block hover:-translate-y-2 transition-transform">
<Card value={4} /> <Card value={4} />
</div> </div>
<div class="inline-block rotate-6 -translate-x-2 translate-y-1"> <div class="inline-block rotate-6 -translate-x-2 translate-y-1 hover:-translate-y-2 transition-transform">
<Card value={36} /> <Card value={36} />
</div> </div>
</div> </div>
<div class="text-center">
<Card value={64} />
<Card value={96} />
<Card value={128} />
<Card value={160} />
<Card value={192} />
<Card value={224} />
<Card value={256} />
</div>
</div> </div>
); );
} }