support/kh3_website
1
0
Fork 0
mirror of https://git.kh3group.com/georgebiri/kh3_website.git synced 2026-07-02 07:03:46 +00:00
Code Issues Projects Releases Packages Wiki Activity

refactor: update menu toggle structure and icons across multiple HTML files for improved consistency and user experience

Browse source
This commit is contained in:
George Birikorang 2025-09-03 04:02:08 -04:00
parent 03b6cc138b
commit 584ba42eab
10 changed files with 210 additions and 343 deletions
Download patch file Download diff file Expand all files Collapse all files

67
index.html
View file

@ -51,7 +51,7 @@
"
>
<span class="md:hidden">HOME</span>
<span
<span
class="hidden md:inline"
style="
animation-delay: 0.05s;
@ -68,8 +68,8 @@
animation-duration: 0.15s;
"
>O</span
>
<span
>
<span
class="hidden md:inline"
style="
animation-delay: 0.1s;
@ -78,7 +78,7 @@
"
>M</span
>
<span
<span
class="hidden md:inline"
style="
animation-delay: 0.125s;
@ -90,8 +90,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;
@ -131,8 +131,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;
@ -263,8 +263,8 @@
</a>
<!-- CONTACTS - More right -->
<a
href="contact.html"
<a
href="contact.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.75s;
@ -385,25 +385,22 @@
<span class="wave"></span>
</div>
<div class="menu-outline" aria-hidden="true"></div>
<div
class="grid grid-cols-3 gap-1 w-6 h-6 relative"
id="menuGrid"
>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<div class="relative" id="menuGrid">
<img
src="assets/icons/closed_petal.png"
alt="closed petal"
class="w-6 h-6"
/>
</div>
<div
id="menuPetal"
class="absolute inset-0 flex items-center justify-center pointer-events-none opacity-0 transition-opacity"
>
<img src="assets/icons/petal.png" alt="petal" class="w-8 h-8" />
<img
src="assets/icons/open_petal.png"
alt="petal"
class="w-8 h-8"
/>
</div>
</div>
@ -457,7 +454,7 @@
class="w-3 h-3 bg-kh3-red transform rotate-45 -mt-1.5"
></div>
<div class="w-px h-8 bg-kh3-red"></div>
</div>
</div>
<div class="flex items-center h-16">
<span
class="text-xs md:text-sm tracking-widest text-neutral-400"
@ -536,18 +533,18 @@
<div class="flex items-center gap-4">
<a
href="about.html"
data-trans
data-trans
class="px-4 py-2 text-sm uppercase tracking-wider border border-white text-white hover:bg-kh3-red hover:border-kh3-red transition-all duration-300 rounded-none"
>Why</a
>
<a
href="contact.html"
data-trans
<a
href="contact.html"
data-trans
class="px-4 py-2 text-sm uppercase tracking-wider border border-white text-white hover:bg-kh3-red hover:border-kh3-red transition-all duration-300 rounded-none"
>Contacts</a
>
</div>
</div>
>
</div>
</div>
</div>
</div>
@ -558,7 +555,7 @@
>
<a
class="inline-block uppercase tracking-wider px-5 py-2 md:px-6 md:py-3 text-sm md:text-base border border-white text-white hover:bg-kh3-red hover:border-kh3-red transition-all duration-300 rounded-none animate-border-glow"
href="about.html"
href="about.html"
data-trans
>
Why
@ -579,9 +576,9 @@
WHO
</a>
<div class="w-6 md:w-8 h-px bg-kh3-red"></div>
</div>
</div>
</section>
</div>
</div>
<!-- Custom Cursor -->
<div