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 (
<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}}
>
<span class="absolute top-1 left-1 font-bold text-4xl font-sans-serif">
{cardValue}
</span>
{icon}
</div>
</button>
);
}

18
src/pages/Index.tsx
View File

@ -92,27 +92,17 @@ export function Index() {
Go to game rules
</A>
</div>
<div class="h-16" />
<div class="text-center">
<div class="inline-block -rotate-6 translate-x-2 translate-y-1">
<div class="text-center py-8">
<div class="inline-block -rotate-6 translate-x-2 translate-y-1 hover:-translate-y-2 transition-transform">
<Card value={38} />
</div>
<div class="inline-block">
<div class="inline-block hover:-translate-y-2 transition-transform">
<Card value={4} />
</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} />
</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>
);
}