made the cards on right redirect to the correct page and the bagde and the card saying more tools down, scrool automaticly to those tools!
This commit is contained in:
parent
f7841ab9b5
commit
8584aa665a
3 changed files with 37 additions and 19 deletions
|
@ -2,7 +2,7 @@
|
|||
import tools from "./tools.json"
|
||||
</script>
|
||||
|
||||
<div class="flex items-center justify-center p-3">
|
||||
<div id="galarry" class="flex items-center justify-center p-3">
|
||||
<div
|
||||
class="flex flex-wrap justify-center gap-5"
|
||||
>
|
||||
|
|
|
@ -43,9 +43,17 @@
|
|||
</div>
|
||||
<RightCards />
|
||||
</div>
|
||||
<a
|
||||
href="#galarry"
|
||||
on:click|preventDefault={() => {
|
||||
const el = document.getElementById("galarry");
|
||||
if (el) el.scrollIntoView({ behavior: "smooth" });
|
||||
}}
|
||||
>
|
||||
<div class="m-3 w-fit rounded-full bg-gray-900 px-3 py-1 text-xl text-gray-500">
|
||||
<i class="nf-fa-angles_down nf"></i>
|
||||
Scroll to see more tools!
|
||||
<i class="nf-fa-angles_down nf"></i>
|
||||
</div>
|
||||
</div></a
|
||||
>
|
||||
</div>
|
||||
|
|
|
@ -5,6 +5,7 @@
|
|||
<div class="hidden flex-col gap-3 lg:flex">
|
||||
{#each tools as tool, i}
|
||||
{#if i < 3}
|
||||
<a href={tool.link}>
|
||||
<div class="card max-w-[320px]">
|
||||
<div class="flex gap-2 text-4xl">
|
||||
<i class="nf {tool.icon}"></i>
|
||||
|
@ -13,12 +14,21 @@
|
|||
|
||||
<p>{@html tool.description}</p>
|
||||
</div>
|
||||
</a>
|
||||
{/if}
|
||||
{/each}
|
||||
<a
|
||||
href="#galarry"
|
||||
on:click|preventDefault={() => {
|
||||
const el = document.getElementById("galarry");
|
||||
if (el) el.scrollIntoView({ behavior: "smooth" });
|
||||
}}
|
||||
>
|
||||
<div class="card max-w-[320px]">
|
||||
<div class="flex gap-2 text-4xl">
|
||||
<i class="nf nf-fa-angles_down"></i>
|
||||
<h1>and more!</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div></a
|
||||
>
|
||||
</div>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue