RezHackXYZ/classroomstuff
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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!

Browse source
This commit is contained in:
RezHackXYZ 2025-05-29 17:16:39 +05:30
parent f7841ab9b5
commit 8584aa665a
No known key found for this signature in database
3 changed files with 37 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/routes/+HomePage/Galery.svelte
View file

@ -2,7 +2,7 @@
import tools from "./tools.json" import tools from "./tools.json"
</script> </script>
<div class="flex items-center justify-center p-3"> <div id="galarry" class="flex items-center justify-center p-3">
<div <div
class="flex flex-wrap justify-center gap-5" class="flex flex-wrap justify-center gap-5"
> >

18
src/routes/+HomePage/landingPage.svelte
View file

@ -43,9 +43,17 @@
</div> </div>
<RightCards /> <RightCards />
</div> </div>
<div class="m-3 w-fit rounded-full bg-gray-900 px-3 py-1 text-xl text-gray-500"> <a
<i class="nf-fa-angles_down nf"></i> href="#galarry"
Scroll to see more tools! on:click|preventDefault={() => {
<i class="nf-fa-angles_down nf"></i> const el = document.getElementById("galarry");
</div> 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></a
>
</div> </div>

36
src/routes/+HomePage/rightCards.svelte
View file

@ -5,20 +5,30 @@
<div class="hidden flex-col gap-3 lg:flex"> <div class="hidden flex-col gap-3 lg:flex">
{#each tools as tool, i} {#each tools as tool, i}
{#if i < 3} {#if i < 3}
<div class="card max-w-[320px]"> <a href={tool.link}>
<div class="flex gap-2 text-4xl"> <div class="card max-w-[320px]">
<i class="nf {tool.icon}"></i> <div class="flex gap-2 text-4xl">
<h1>{tool.name}</h1> <i class="nf {tool.icon}"></i>
</div> <h1>{tool.name}</h1>
</div>
<p>{@html tool.description}</p> <p>{@html tool.description}</p>
</div> </div>
</a>
{/if} {/if}
{/each} {/each}
<div class="card max-w-[320px]"> <a
<div class="flex gap-2 text-4xl"> href="#galarry"
<i class="nf nf-fa-angles_down"></i> on:click|preventDefault={() => {
<h1>and more!</h1> const el = document.getElementById("galarry");
</div> if (el) el.scrollIntoView({ behavior: "smooth" });
</div> }}
>
<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></a
>
</div> </div>