capytal/capytal.cc
1
0
Fork 0
Code Issues Pull Requests Activity

feat(index,anim): hover animation on index page linkks

Browse Source
This commit is contained in:
Guz
2024-10-31 14:12:44 -03:00
parent 120d3dbe65
commit 6b20f94ba8
1 changed files with 54 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
handlers/pages/index.templ
View File

@@ -34,23 +34,68 @@ templ (p *IndexPage) Component() {
>
@p.section("main", "brand/light-asset.svg", "/assets/img/cat-1.png", "bg-white", "", "#code") {
<ul class="p-0 list-none font-sans flex gap-1rem underline underline-offset-3">
<li><a class="text-white" href="/about">About</a></li>
<li><a class="text-white" href="/blog">Blog</a></li>
<li><a class="text-white" href="/contact">Contact</a></li>
<li>
<a
class="text-white opacity-50 hover:opacity-100 transition-all"
href="/about"
>About</a>
</li>
<li>
<a
class="text-white opacity-50 hover:opacity-100 transition-all"
href="/blog"
>Blog</a>
</li>
<li>
<a
class="text-white opacity-50 hover:opacity-100 transition-all"
href="/contact"
>Contact</a>
</li>
</ul>
}
@p.section("code", "brand/code-light-asset.svg", "/assets/img/cat-3.png", "bg-cyan", "#main", "#creators") {
<ul class="p-0 list-none font-sans flex gap-1rem underline underline-offset-3">
<li><a class="text-white" href="/about">About</a></li>
<li><a class="text-white" href="/blog">Projects</a></li>
<li><a class="text-white" href="/contact">Contact</a></li>
<li>
<a
class="text-white opacity-50 hover:opacity-100 transition-all"
href="/about"
>About</a>
</li>
<li>
<a
class="text-white opacity-50 hover:opacity-100 transition-all"
href="/blog"
>Projects</a>
</li>
<li>
<a
class="text-white opacity-50 hover:opacity-100 transition-all"
href="/contact"
>Contact</a>
</li>
</ul>
}
@p.section("creators", "brand/creators-light-asset.svg", "/assets/img/cat-2.png", "bg-purple", "#code", "") {
<ul class="p-0 list-none font-sans flex gap-1rem underline underline-offset-3">
<li><a class="text-white" href="/about">About</a></li>
<li><a class="text-white" href="/creators">Creators</a></li>
<li><a class="text-white" href="/contact">Contact</a></li>
<li>
<a
class="text-white opacity-50 hover:opacity-100 transition-all"
href="/about"
>About</a>
</li>
<li>
<a
class="text-white opacity-50 hover:opacity-100 transition-all"
href="/creators"
>Creators</a>
</li>
<li>
<a
class="text-white opacity-50 hover:opacity-100 transition-all"
href="/contact"
>Contact</a>
</li>
</ul>
}
</main>