fix: change menu nav names

This commit is contained in:
George Birikorang 2025-08-29 18:42:22 -04:00
parent 1c9a335d26
commit 1d80addd7a
8 changed files with 2452 additions and 700 deletions

View file

@ -26,10 +26,12 @@
id="navMenu"
>
<div class="p-8 flex flex-col h-full">
<!-- Logo -->
<!-- Logo -->
<div class="flex items-center gap-3 mb-12">
<a href="index.html" class="flex items-center gap-3 hover:opacity-80 transition-opacity">
<img src="assets/images/kh3_logo.png" alt="KH3" class="w-12 h-12" />
<span class="text-white text-2xl font-bold tracking-wider">KH3</span>
<span class="text-white text-2xl font-bold tracking-wider">KH3</span>
</a>
</div>
<!-- Navigation Links - Inverted C Layout -->
@ -89,8 +91,8 @@
</a>
<!-- WHY - Slightly right -->
<a
href="about.html"
<a
href="about.html"
class="block text-white text-xl md:text-lg font-medium hover:text-kh3-red transition-colors ml-0 md:ml-6 font-montserrat opacity-0 animate-fade-in-left"
style="
animation-delay: 0.2s;
@ -130,8 +132,8 @@
</a>
<!-- HOW - More right -->
<a
href="services.html"
<a
href="services.html"
class="block text-white text-xl md:text-lg font-medium hover:text-kh3-red transition-colors ml-0 md:ml-12 font-montserrat opacity-0 animate-fade-in-left"
style="
animation-delay: 0.35s;
@ -220,6 +222,47 @@
>
</a>
<!-- WHO - New position -->
<a
href="who.html"
class="block text-white text-xl md:text-lg font-medium hover:text-kh3-red transition-colors ml-0 md:ml-20 font-montserrat opacity-0 animate-fade-in-left"
style="
animation-delay: 0.65s;
animation-fill-mode: forwards;
animation-duration: 0.3s;
"
data-trans="crossfade"
>
<span class="md:hidden">WHO</span>
<span
class="hidden md:inline"
style="
animation-delay: 0.65s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>W</span
>
<span
class="hidden md:inline"
style="
animation-delay: 0.675s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>H</span
>
<span
class="hidden md:inline"
style="
animation-delay: 0.7s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>O</span
>
</a>
<!-- CONTACTS - More right -->
<a
href="contact.html"
@ -314,7 +357,7 @@
<!-- Static Logo and Menu -->
<div class="fixed top-6 left-8 z-40">
<div class="flex items-center gap-3">
<a href="index.html" class="flex items-center gap-3 hover:opacity-80 transition-opacity">
<img
src="assets/images/kh3_logo_dark.png"
alt="KH3"
@ -323,8 +366,8 @@
<span class="text-white text-2xl font-bold tracking-wider drop-shadow-lg"
>KH3</span
>
</a>
</div>
</div>
<!-- Menu Toggle -->
<div class="fixed top-6 right-8 z-40">
@ -650,14 +693,14 @@
<div
class="flex flex-col md:flex-row justify-between items-center space-y-6 md:space-y-0"
>
<div class="flex items-center gap-3">
<a href="index.html" class="flex items-center gap-3 hover:opacity-80 transition-opacity">
<img
src="assets/images/kh3_logo_dark.png"
alt="KH3"
class="w-12 h-12"
/>
<span class="text-2xl font-bold tracking-wider">KH3</span>
</div>
</a>
<div class="flex space-x-8">
<a
href="contact.html"