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

fix: enhance layout and responsiveness in index.html and update CSS for new height utilities
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse source
This commit is contained in:
George Birikorang 2025-09-02 03:57:36 -04:00
parent 49d1ef8825
commit db0c4f6ae4
2 changed files with 103 additions and 43 deletions
Download patch file Download diff file Expand all files Collapse all files

78
index.html
View file

@ -360,11 +360,11 @@
<!-- Main Layout -->
<div class="min-h-screen relative">
<section
class="relative min-h-screen flex flex-col md:flex-row hero-section"
class="relative h-[100svh] md:min-h-screen flex flex-col md:flex-row hero-section"
>
<!-- KH3 Logo -->
<div
class="absolute top-8 left-8 z-20 opacity-0 animate-fade-in-left"
class="absolute top-6 md:top-8 left-8 z-20 opacity-0 animate-fade-in-left"
style="animation-delay: 0.2s; animation-fill-mode: forwards"
>
<a
@ -380,14 +380,11 @@
<!-- Menu Grid -->
<div
class="fixed bottom-12 left-12 z-50 opacity-0 animate-fade-in-left"
class="fixed top-6 right-8 md:bottom-12 md:left-12 md:top-auto md:right-auto z-50 opacity-0 animate-fade-in-left"
style="animation-delay: 0.4s; animation-fill-mode: forwards"
>
<div class="cursor-pointer" id="menuToggle">
<div
class="grid grid-cols-3 gap-1 w-6 h-6 animate-logo-float"
id="menuGrid"
>
<div class="grid grid-cols-3 gap-1 w-6 h-6" 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>
@ -417,10 +414,10 @@
<!-- LEFT COLUMN -->
<div
class="w-full md:w-1/3 bg-kh3-black flex items-start md:items-center p-8 pt-24 md:pt-8 opacity-0 animate-fade-in-left dream-design-deliver"
class="w-full md:w-1/3 bg-kh3-black flex items-start md:items-center p-4 pt-8 md:p-8 md:pt-8 h-[20vh] md:h-auto shrink-0 opacity-0 animate-fade-in-left dream-design-deliver"
style="animation-delay: 0.8s; animation-fill-mode: forwards"
>
<div class="max-w-xl space-y-2">
<div class="max-w-xl space-y-2 hidden md:block">
<div class="flex flex-col space-y-8">
<!-- DREAM -->
<div class="flex items-center gap-6">
@ -478,10 +475,10 @@
<!-- RIGHT COLUMN -->
<div
class="w-full md:w-2/3 relative opacity-0 animate-fade-in-right overflow-hidden"
class="w-full md:w-2/3 relative opacity-0 animate-fade-in-right overflow-hidden flex-1 min-h-0 md:flex-none"
style="animation-delay: 0.3s; animation-fill-mode: forwards"
>
<div class="relative h-[60vh] md:h-full">
<div class="relative h-full md:h-full">
<!-- Current Image -->
<img
id="currentImg"
@ -497,6 +494,30 @@
class="absolute inset-0 w-full h-full object-cover opacity-0"
/>
<div class="absolute inset-0 bg-black bg-opacity-20 z-10"></div>
<!-- Mobile CTA bar on image -->
<div
class="absolute left-1/2 transform -translate-x-1/2 z-20 md:hidden opacity-0"
style="
animation: fadeInUp 0.8s ease-out 1.2s forwards;
bottom: calc(env(safe-area-inset-bottom, 0px) + 1.25rem);
"
>
<div class="flex items-center gap-4">
<a
href="about.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"
>Why</a
>
<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>
@ -529,33 +550,12 @@
</a>
<div class="w-6 md:w-8 h-px bg-kh3-red"></div>
</div>
<!-- Mobile CTA bar: About & Contacts (centered) -->
<div
class="absolute bottom-8 left-1/2 transform -translate-x-1/2 z-20 md:hidden opacity-0"
style="animation: fadeInUp 0.8s ease-out 1.2s forwards"
>
<div class="flex items-center gap-4">
<a
href="about.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"
>Why</a
>
<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>
</section>
</div>
<!-- Custom Cursor -->
<div
class="fixed w-6 h-6 border-2 border-kh3-red rounded-full pointer-events-none z-50"
class="fixed w-6 h-6 border-2 border-kh3-red rounded-full pointer-events-none z-50 hidden md:block"
id="customCursor"
></div>
@ -867,15 +867,8 @@
`;
isMenuOpen = false;
} else {
// Open menu
// Open menu (keep button static)
navMenu.classList.remove("hidden");
menuGrid.innerHTML = `
<div class="absolute inset-0 flex items-center justify-center">
<svg class="w-5 h-5 text-kh3-red" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</div>
`;
isMenuOpen = true;
}
});
@ -1067,8 +1060,7 @@
startCycle();
}
// Start the animation
startMenuGridAnimation();
// Menu button animations disabled on homepage per request
// Custom cursor functionality
const customCursor = document.getElementById("customCursor");