georgebiri/kh3_website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

fix: correct mobile layout

Browse source
This commit is contained in:
George Birikorang 2025-08-27 05:59:09 -04:00
parent bc95267aa4
commit 2fc620570b
6 changed files with 576 additions and 1811 deletions
Download patch file Download diff file Expand all files Collapse all files

572
about.html
View file

@ -20,7 +20,7 @@
<body class="bg-kh3-black text-white font-montserrat overflow-x-hidden">
<!-- Navigation Menu -->
<div
class="fixed left-0 top-0 h-full w-1/3 bg-kh3-black z-50 hidden shadow-2xl"
class="fixed left-0 top-0 h-full w-5/6 md:w-1/3 bg-kh3-black z-50 hidden shadow-2xl"
id="navMenu"
>
<div class="p-8 flex flex-col h-full">
@ -28,7 +28,7 @@
<div class="flex items-center gap-3 mb-12">
<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>
</div>
</div>
<!-- Navigation Links - Inverted C Layout -->
<nav class="flex-1 relative">
@ -37,11 +37,18 @@
<!-- Navigation items in inverted C shape -->
<div class="space-y-6">
<!-- HOME - Top -->
<a
href="index.html"
class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-0 font-montserrat"
>
<span
<a
href="index.html"
class="block text-white text-xl md:text-lg font-medium hover:text-kh3-red transition-colors ml-0 font-montserrat opacity-0 animate-fade-in-left"
style="
animation-delay: 0.05s;
animation-fill-mode: forwards;
animation-duration: 0.3s;
"
>
<span class="md:hidden">HOME</span>
<span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.05s;
@ -50,7 +57,8 @@
"
>H</span
>
<span
<span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.075s;
@ -60,6 +68,7 @@
>O</span
>
<span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.1s;
@ -69,6 +78,7 @@
>M</span
>
<span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.125s;
@ -82,88 +92,28 @@
<!-- ABOUT US - Slightly right -->
<a
href="about.html"
class="block text-white text-lg font-medium border-b border-white pb-1 ml-6 font-montserrat"
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.15s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>A</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.175s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>B</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.2s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>O</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.225s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>U</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.25s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>T</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.275s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>&nbsp;</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.3s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>U</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.325s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>S</span
>
</a>
class="block text-white text-xl md:text-lg font-medium border-b border-white pb-1 ml-0 md:ml-6 font-montserrat opacity-0 animate-fade-in-left"
style="
animation-delay: 0.2s;
animation-fill-mode: forwards;
animation-duration: 0.3s;
"
>ABOUT US</a
>
<!-- SERVICES - More right -->
<a
href="services.html"
class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-12 font-montserrat"
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;
animation-fill-mode: forwards;
animation-duration: 0.3s;
"
>
<span class="md:hidden">SERVICES</span>
<span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.35s;
@ -173,6 +123,7 @@
>S</span
>
<span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.375s;
@ -182,6 +133,7 @@
>E</span
>
<span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.4s;
@ -191,6 +143,7 @@
>R</span
>
<span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.425s;
@ -200,6 +153,7 @@
>V</span
>
<span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.45s;
@ -209,6 +163,7 @@
>I</span
>
<span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.475s;
@ -218,6 +173,7 @@
>C</span
>
<span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.5s;
@ -227,6 +183,7 @@
>E</span
>
<span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.525s;
@ -240,243 +197,42 @@
<!-- PROJECTS - Most right -->
<a
href="projects.html"
class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-20 font-montserrat"
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.55s;
animation-fill-mode: forwards;
animation-duration: 0.3s;
"
>PROJECTS</a
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.55s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>P</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.575s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>R</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.6s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>O</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.625s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>J</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.65s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>E</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.675s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>C</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.7s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>T</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.725s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>S</span
>
</a>
<!-- CONTACTS - More right -->
<a
href="contact.html"
class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-12 font-montserrat"
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;
animation-fill-mode: forwards;
animation-duration: 0.3s;
"
>CONTACTS</a
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.75s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>C</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.775s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>O</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.8s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>N</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.825s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>T</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.85s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>A</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.875s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>C</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.9s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>T</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.925s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>S</span
>
</a>
<!-- PARTNERS - Back to left -->
<a
href="partners.html"
class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-0 font-montserrat"
class="block text-white text-xl md:text-lg font-medium hover:text-kh3-red transition-colors ml-0 font-montserrat opacity-0 animate-fade-in-left"
style="
animation-delay: 0.95s;
animation-fill-mode: forwards;
animation-duration: 0.3s;
"
>PARTNERS</a
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.95s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>P</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.975s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>A</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 1s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>R</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 1.025s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>T</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 1.05s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>N</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 1.075s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>E</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 1.1s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>R</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 1.125s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>S</span
>
</a>
</div>
</div>
</div>
</nav>
</div>
</nav>
</div>
</div>
@ -549,8 +305,8 @@
ABOUT US
</h1>
<div class="flex-1 h-px bg-white"></div>
</div>
</div>
</div>
</div>
</div>
<!-- Right image panel -->
@ -624,11 +380,11 @@
>
DELIVER
</h2>
</div>
</div>
</div>
</div>
<!-- Subtle underline -->
<div
<div
class="w-24 h-px bg-kh3-grey mx-auto mt-8 opacity-0"
style="animation: fadeInUp 1s ease-out 1.2s forwards"
></div>
@ -685,7 +441,7 @@
</p>
</div>
</div>
</div>
</div>
</section>
<!-- Mission & Vision Section -->
@ -731,7 +487,7 @@
<span class="text-white text-2xl font-bold drop-shadow-lg"
>01</span
>
</div>
</div>
<!-- Title with text glow -->
<h2
@ -849,8 +605,8 @@
We treat all stake holders with politeness, dignity and civility
that equals the outward beauty of our environment and the
environments we create.
</p>
</div>
</p>
</div>
<div
class="text-center opacity-0"
@ -865,8 +621,8 @@
deliver on our promises. If forfeiting on our word is beyond our
human control; we will communicate this transparently and in
good time.
</p>
</div>
</p>
</div>
<div
class="text-center opacity-0"
@ -879,8 +635,8 @@
<p class="text-lg text-neutral-600 leading-relaxed">
We our faithful to our mission and vision and that of our
stakeholders and the organizations they represent.
</p>
</div>
</p>
</div>
</div>
<!-- Row 2: 1 column (middle) -->
@ -896,9 +652,9 @@
<p class="text-lg text-neutral-600 leading-relaxed">
We are committed to learning and advancing our services,
products, and tools to best serve our stakeholders.
</p>
</p>
</div>
</div>
</div>
<!-- Row 3: 3 columns -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-16">
@ -914,21 +670,21 @@
We give our utmost attention to all our projects. We do this in
earnest and with precision.
</p>
</div>
</div>
<div
<div
class="text-center opacity-0"
style="animation: fadeInUp 1s ease-out 3.6s forwards"
>
<div
>
<div
class="w-20 h-20 bg-kh3-red mx-auto mb-8 transform rotate-45"
></div>
<h3 class="text-2xl font-semibold mb-6">Excellence</h3>
<p class="text-lg text-neutral-600 leading-relaxed">
We are committed to delivering exceptional results in every area
of our operations.
</p>
</div>
</p>
</div>
<div
class="text-center opacity-0"
@ -943,13 +699,13 @@
learn and document lessons, bounce back and persist in the
pursuit of goals, targets, objectives and deadlines. We do this
with focused optimism.
</p>
</div>
</p>
</div>
</div>
</section>
</div>
</section>
<!-- Team Section -->
<!-- Team Section -->
<section class="py-32 bg-kh3-black text-white">
<div class="container mx-auto px-8 max-w-7xl">
<div class="text-center mb-20">
@ -984,43 +740,24 @@
>
<!-- Team Member 1 -->
<div class="group relative">
<div
<div
class="bg-kh3-grey/20 p-8 rounded-lg hover:bg-kh3-grey/30 transition-all duration-300"
>
<div
>
<div
class="w-48 h-64 bg-gradient-to-br from-kh3-red/20 to-kh3-grey/40 rounded-lg mx-auto mb-6 flex items-center justify-center"
>
<span class="text-4xl text-white/60">👤</span>
</div>
</div>
<div class="text-center">
<h3 class="text-2xl font-bold text-white mb-2">
Team Member
</h3>
<p class="text-kh3-red font-medium">Project Manager</p>
</div>
</div>
</div>
</div>
<!-- Team Member 2 -->
<div class="group relative">
<div
class="bg-kh3-grey/20 p-8 rounded-lg hover:bg-kh3-grey/30 transition-all duration-300"
>
<div
class="w-48 h-64 bg-gradient-to-br from-kh3-red/20 to-kh3-grey/40 rounded-lg mx-auto mb-6 flex items-center justify-center"
>
<span class="text-4xl text-white/60">👤</span>
</div>
<div class="text-center">
<h3 class="text-2xl font-bold text-white mb-2">
Team Member
</h3>
<p class="text-kh3-red font-medium">Design Specialist</p>
</div>
</div>
</div>
<!-- Team Member 3 -->
<div class="group relative">
<div
class="bg-kh3-grey/20 p-8 rounded-lg hover:bg-kh3-grey/30 transition-all duration-300"
@ -1030,6 +767,25 @@
>
<span class="text-4xl text-white/60">👤</span>
</div>
<div class="text-center">
<h3 class="text-2xl font-bold text-white mb-2">
Team Member
</h3>
<p class="text-kh3-red font-medium">Design Specialist</p>
</div>
</div>
</div>
<!-- Team Member 3 -->
<div class="group relative">
<div
class="bg-kh3-grey/20 p-8 rounded-lg hover:bg-kh3-grey/30 transition-all duration-300"
>
<div
class="w-48 h-64 bg-gradient-to-br from-kh3-red/20 to-kh3-grey/40 rounded-lg mx-auto mb-6 flex items-center justify-center"
>
<span class="text-4xl text-white/60">👤</span>
</div>
<div class="text-center">
<h3 class="text-2xl font-bold text-white mb-2">
Team Member
@ -1037,8 +793,8 @@
<p class="text-kh3-red font-medium">Construction Lead</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
@ -1055,7 +811,7 @@
class="w-12 h-12"
/>
<span class="text-2xl font-bold tracking-wider">KH3</span>
</div>
</div>
<p class="text-neutral-300 leading-relaxed">
Building inspiring spaces through innovative construction and
design solutions.
@ -1067,31 +823,31 @@
<li>
<a
href="index.html"
class="text-neutral-300 hover:text-white transition-colors"
class="text-neutral-300 hover:text-white transition-colors"
>Home</a
>
</li>
<li>
<a
href="about.html"
class="text-neutral-300 hover:text-white transition-colors"
>About Us</a
>
</li>
<li>
<a
href="projects.html"
class="text-neutral-300 hover:text-white transition-colors"
>Projects</a
>
</li>
<li>
<a
href="contact.html"
href="about.html"
class="text-neutral-300 hover:text-white transition-colors"
>Contact</a
>About Us</a
>
</li>
<li>
<a
href="projects.html"
class="text-neutral-300 hover:text-white transition-colors"
>Projects</a
>
</li>
<li>
<a
href="contact.html"
class="text-neutral-300 hover:text-white transition-colors"
>Contact</a
>
</li>
</ul>
</div>
<div>
@ -1268,15 +1024,15 @@
// Close menu
navMenu.classList.add("hidden");
menuGrid.innerHTML = `
<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>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
`;
if (closeBtnEl) {
closeBtnEl.remove();
@ -1405,6 +1161,52 @@
}, 100);
}
});
// Cleanup before bfcache snapshot
window.addEventListener("pagehide", () => {
if (cover) {
cover.style.transform = "translateX(100%)";
cover.style.opacity = "0";
}
const nav = document.getElementById("navMenu");
const grid = document.getElementById("menuGrid");
if (nav) nav.classList.add("hidden");
if (grid) {
grid.innerHTML = `
<span class=\"w-1 h-1 bg-white rounded-full\"></span>
<span class=\"w-1 h-1 bg-white rounded-full\"></span>
<span class=\"w-1 h-1 bg-white rounded-full\"></span>
<span class=\"w-1 h-1 bg-white rounded-full\"></span>
<span class=\"w-1 h-1 bg-white rounded-full\"></span>
<span class=\"w-1 h-1 bg-white rounded-full\"></span>
<span class=\"w-1 h-1 bg-white rounded-full\"></span>
<span class=\"w-1 h-1 bg-white rounded-full\"></span>
<span class=\"w-1 h-1 bg-white rounded-full\"></span>`;
}
});
// Also ensure clean state on bfcache restore / pageshow
window.addEventListener("pageshow", () => {
if (cover) {
cover.style.transform = "translateX(100%)";
cover.style.opacity = "0";
}
const nav = document.getElementById("navMenu");
const grid = document.getElementById("menuGrid");
if (nav) nav.classList.add("hidden");
if (grid) {
grid.innerHTML = `
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>`;
}
});
</script>
</body>
</html>

523
contact.html
View file

@ -22,7 +22,7 @@
>
<!-- Navigation Menu -->
<div
class="fixed left-0 top-0 h-full w-1/3 bg-kh3-black z-50 hidden shadow-2xl"
class="fixed left-0 top-0 h-full w-5/6 md:w-1/3 bg-kh3-black z-50 hidden shadow-2xl"
id="navMenu"
>
<div class="p-8 flex flex-col h-full">
@ -39,442 +39,22 @@
<!-- Navigation items in inverted C shape -->
<div class="space-y-6">
<!-- HOME - Top -->
<a
href="index.html"
class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-0 font-montserrat"
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.05s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>H</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.075s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>O</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.1s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>M</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.125s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>E</span
>
</a>
<a href="index.html" class="block text-white text-xl md:text-lg font-medium hover:text-kh3-red transition-colors ml-0 font-montserrat opacity-0 animate-fade-in-left" style="animation-delay: 0.05s; animation-fill-mode: forwards; animation-duration: 0.3s;">HOME</a>
<!-- ABOUT US - Slightly right -->
<a
href="about.html"
class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-6 font-montserrat"
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.15s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>A</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.175s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>B</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.2s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>O</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.225s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>U</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.25s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>T</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.275s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>&nbsp;</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.3s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>U</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.325s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>S</span
>
</a>
<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; animation-fill-mode: forwards; animation-duration: 0.3s;">ABOUT US</a>
<!-- SERVICES - More right -->
<a
href="services.html"
class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-12 font-montserrat"
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.35s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>S</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.375s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>E</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.4s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>R</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.425s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>V</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.45s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>I</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.475s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>C</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.5s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>E</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.525s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>S</span
>
</a>
<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; animation-fill-mode: forwards; animation-duration: 0.3s;">SERVICES</a>
<!-- PROJECTS - Most right -->
<a
href="projects.html"
class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-20 font-montserrat"
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.55s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>P</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.575s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>R</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.6s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>O</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.625s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>J</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.65s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>E</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.675s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>C</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.7s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>T</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.725s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>S</span
>
</a>
<a href="projects.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.55s; animation-fill-mode: forwards; animation-duration: 0.3s;">PROJECTS</a>
<!-- CONTACTS - More right -->
<a
href="contact.html"
class="block text-white text-lg font-medium border-b border-white pb-1 ml-12 font-montserrat"
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.75s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>C</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.775s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>O</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.8s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>N</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.825s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>T</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.85s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>A</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.875s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>C</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.9s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>T</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.925s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>S</span
>
</a>
<a href="contact.html" class="block text-white text-xl md:text-lg font-medium border-b border-white pb-1 ml-0 md:ml-12 font-montserrat opacity-0 animate-fade-in-left" style="animation-delay: 0.75s; animation-fill-mode: forwards; animation-duration: 0.3s;">CONTACTS</a>
<!-- PARTNERS - Back to left -->
<a
href="partners.html"
class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-0 font-montserrat"
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.95s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>P</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.975s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>A</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 1s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>R</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 1.025s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>T</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 1.05s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>N</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 1.075s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>E</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 1.1s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>R</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 1.125s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>S</span
>
</a>
<a href="partners.html" class="block text-white text-xl md:text-lg font-medium hover:text-kh3-red transition-colors ml-0 font-montserrat opacity-0 animate-fade-in-left" style="animation-delay: 0.95s; animation-fill-mode: forwards; animation-duration: 0.3s;">PARTNERS</a>
</div>
</div>
</div>
@ -483,7 +63,7 @@
</div>
<!-- Static Logo and Menu -->
<div class="fixed top-8 left-8 z-40">
<div class="fixed top-6 left-8 z-40">
<div class="flex items-center gap-3">
<img
src="assets/images/kh3_logo_dark.png"
@ -497,7 +77,7 @@
</div>
<!-- Menu Toggle -->
<div class="fixed top-8 right-8 z-40">
<div class="fixed top-6 right-8 z-40">
<div class="cursor-pointer" id="menuToggle">
<div class="grid grid-cols-3 gap-1 w-6 h-6" id="menuGrid">
<span class="w-1 h-1 bg-white rounded-full"></span>
@ -527,27 +107,15 @@
<!-- Main Content -->
<div class="relative z-10 text-center w-full">
<div class="flex items-center gap-8 mb-6 max-w-6xl mx-auto">
<div
class="flex-1 h-1 bg-white opacity-0"
style="
min-width: 100px;
animation: fadeInLeft 1s ease-out 0.3s forwards;
"
></div>
<div class="flex items-center gap-4 sm:gap-8 mb-6 max-w-6xl mx-auto px-4 sm:px-6 min-w-0">
<div class="flex-1 h-1 bg-white opacity-0 min-w-[60px] sm:min-w-[100px]" style="animation: fadeInLeft 1s ease-out 0.3s forwards;"></div>
<h1
class="text-6xl md:text-8xl font-bold whitespace-nowrap px-8 opacity-0"
class="text-4xl md:text-8xl font-bold whitespace-normal md:whitespace-nowrap tracking-normal md:tracking-[0.2em] px-2 sm:px-8 opacity-0"
style="animation: maskRevealCenter 1.2s ease-out 0.6s forwards"
>
CONTACT US
</h1>
<div
class="flex-1 h-1 bg-white opacity-0"
style="
min-width: 100px;
animation: fadeInRight 1s ease-out 0.3s forwards;
"
></div>
<div class="flex-1 h-1 bg-white opacity-0 min-w-[60px] sm:min-w-[100px]" style="animation: fadeInRight 1s ease-out 0.3s forwards;"></div>
</div>
<div
class="text-xl md:text-2xl text-white tracking-widest opacity-0"
@ -767,31 +335,7 @@
</div>
</div>
<!-- Scroll Down Prompt -->
<div class="absolute bottom-0 left-1/2 transform -translate-x-1/2">
<button
id="contactScrollArrow"
class="flex items-center flex-col text-white/80 hover:text-white transition-colors opacity-0"
style="animation: fadeInUp 800ms ease-out 4.5s forwards"
>
<span class="text-xs tracking-widest mb-2">SCROLL</span>
<svg
class="w-5 h-5 animate-arrowPulse"
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="M19 9l-7 7-7-7"
/>
</svg>
<div class="w-px h-8 bg-white/70"></div>
</button>
</div>
</section>
<!-- Map Section -->
@ -1146,5 +690,44 @@
}
}, 2500);
</script>
<script>
// Ensure clean state on back/forward cache restores
window.addEventListener('pageshow', () => {
const nav = document.getElementById('navMenu');
const grid = document.getElementById('menuGrid');
if (nav) nav.classList.add('hidden');
if (grid) {
grid.innerHTML = `
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>`;
}
});
// Cleanup before bfcache snapshot
window.addEventListener('pagehide', () => {
const nav = document.getElementById('navMenu');
const grid = document.getElementById('menuGrid');
if (nav) nav.classList.add('hidden');
if (grid) {
grid.innerHTML = `
<span class=\"w-1 h-1 bg-white rounded-full\"></span>
<span class=\"w-1 h-1 bg-white rounded-full\"></span>
<span class=\"w-1 h-1 bg-white rounded-full\"></span>
<span class=\"w-1 h-1 bg-white rounded-full\"></span>
<span class=\"w-1 h-1 bg-white rounded-full\"></span>
<span class=\"w-1 h-1 bg-white rounded-full\"></span>
<span class=\"w-1 h-1 bg-white rounded-full\"></span>
<span class=\"w-1 h-1 bg-white rounded-full\"></span>
<span class=\"w-1 h-1 bg-white rounded-full\"></span>`;
}
});
</script>
</body>
</html>

178
index.html
View file

@ -20,13 +20,13 @@
<body class="bg-kh3-black text-white font-montserrat overflow-x-hidden">
<!-- Navigation Menu -->
<div
class="fixed left-0 top-0 h-full w-1/3 bg-kh3-black z-50 hidden shadow-2xl"
class="fixed left-0 top-0 h-full w-5/6 md:w-1/3 bg-kh3-black z-50 hidden shadow-2xl"
id="navMenu"
>
<div class="p-8 flex flex-col h-full">
<!-- Logo -->
<div class="flex items-center gap-3 mb-12">
<img src="assets/images/kh3_logo.png" alt="KH3" class="w-12 h-12" />
<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>
</div>
@ -37,11 +37,13 @@
<!-- Navigation items in inverted C shape -->
<div class="space-y-6">
<!-- HOME - Top -->
<a
href="index.html"
class="block text-white text-lg font-medium border-b border-white pb-1 ml-0 font-montserrat"
<a
href="index.html"
class="block text-white text-xl md:text-lg font-medium border-b border-white pb-1 ml-0 font-montserrat"
>
<span class="md:hidden">HOME</span>
<span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.05s;
@ -51,6 +53,7 @@
>H</span
>
<span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.075s;
@ -60,6 +63,7 @@
>O</span
>
<span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.1s;
@ -69,6 +73,7 @@
>M</span
>
<span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.125s;
@ -80,11 +85,13 @@
</a>
<!-- ABOUT US - Slightly right -->
<a
href="about.html"
class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-6 font-montserrat"
<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"
>
<span class="md:hidden">ABOUT&nbsp;US</span>
<span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.15s;
@ -94,6 +101,7 @@
>A</span
>
<span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.175s;
@ -103,6 +111,7 @@
>B</span
>
<span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.2s;
@ -112,6 +121,7 @@
>O</span
>
<span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.225s;
@ -121,6 +131,7 @@
>U</span
>
<span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.25s;
@ -130,6 +141,7 @@
>T</span
>
<span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.275s;
@ -139,6 +151,7 @@
>&nbsp;</span
>
<span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.3s;
@ -148,6 +161,7 @@
>U</span
>
<span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.325s;
@ -159,11 +173,13 @@
</a>
<!-- SERVICES - More right -->
<a
href="services.html"
class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-12 font-montserrat"
<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"
>
<span class="md:hidden">SERVICES</span>
<span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.35s;
@ -173,6 +189,7 @@
>S</span
>
<span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.375s;
@ -182,6 +199,7 @@
>E</span
>
<span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.4s;
@ -191,6 +209,7 @@
>R</span
>
<span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.425s;
@ -200,6 +219,7 @@
>V</span
>
<span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.45s;
@ -209,6 +229,7 @@
>I</span
>
<span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.475s;
@ -218,6 +239,7 @@
>C</span
>
<span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.5s;
@ -227,6 +249,7 @@
>E</span
>
<span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.525s;
@ -240,9 +263,11 @@
<!-- PROJECTS - Most right -->
<a
href="projects.html"
class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-20 font-montserrat"
class="block text-white text-xl md:text-lg font-medium hover:text-kh3-red transition-colors ml-0 md:ml-20 font-montserrat"
>
<span class="md:hidden">PROJECTS</span>
<span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.55s;
@ -252,6 +277,7 @@
>P</span
>
<span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.575s;
@ -261,6 +287,7 @@
>R</span
>
<span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.6s;
@ -270,6 +297,7 @@
>O</span
>
<span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.625s;
@ -279,6 +307,7 @@
>J</span
>
<span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.65s;
@ -288,6 +317,7 @@
>E</span
>
<span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.675s;
@ -297,6 +327,7 @@
>C</span
>
<span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.7s;
@ -306,6 +337,7 @@
>T</span
>
<span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.725s;
@ -317,11 +349,13 @@
</a>
<!-- CONTACTS - More right -->
<a
href="contact.html"
class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-12 font-montserrat"
<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"
>
<span class="md:hidden">CONTACTS</span>
<span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.75s;
@ -331,6 +365,7 @@
>C</span
>
<span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.775s;
@ -340,6 +375,7 @@
>O</span
>
<span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.8s;
@ -349,6 +385,7 @@
>N</span
>
<span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.825s;
@ -358,6 +395,7 @@
>T</span
>
<span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.85s;
@ -367,6 +405,7 @@
>A</span
>
<span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.875s;
@ -376,6 +415,7 @@
>C</span
>
<span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.9s;
@ -385,6 +425,7 @@
>T</span
>
<span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.925s;
@ -398,9 +439,11 @@
<!-- PARTNERS - Back to left -->
<a
href="partners.html"
class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-0 font-montserrat"
class="block text-white text-xl md:text-lg font-medium hover:text-kh3-red transition-colors ml-0 font-montserrat"
>
<span class="md:hidden">PARTNERS</span>
<span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.95s;
@ -410,6 +453,7 @@
>P</span
>
<span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.975s;
@ -419,6 +463,7 @@
>A</span
>
<span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 1s;
@ -428,6 +473,7 @@
>R</span
>
<span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 1.025s;
@ -437,6 +483,7 @@
>T</span
>
<span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 1.05s;
@ -446,6 +493,7 @@
>N</span
>
<span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 1.075s;
@ -455,6 +503,7 @@
>E</span
>
<span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 1.1s;
@ -464,6 +513,7 @@
>R</span
>
<span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 1.125s;
@ -482,7 +532,7 @@
<!-- Main Layout -->
<div class="min-h-screen relative">
<section class="relative h-screen flex">
<section class="relative min-h-screen flex flex-col md:flex-row">
<!-- KH3 Logo -->
<div
class="absolute top-8 left-8 z-20 opacity-0 animate-fade-in-left"
@ -495,7 +545,7 @@
class="w-16 h-16"
/>
<span
class="text-white text-2xl font-bold tracking-wider animate-logo-glow"
class="hidden sm:inline text-white text-2xl font-bold tracking-wider animate-logo-glow"
>KH3</span
>
</div>
@ -540,7 +590,7 @@
<!-- LEFT COLUMN -->
<div
class="w-1/3 bg-kh3-black flex items-center p-8 opacity-0 animate-fade-in-left"
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"
style="animation-delay: 0.8s; animation-fill-mode: forwards"
>
<div class="max-w-xl space-y-2">
@ -577,7 +627,7 @@
>DESIGN</span
>
</div>
</div>
</div>
<!-- DELIVER -->
<div class="flex items-center gap-6">
@ -601,10 +651,10 @@
<!-- RIGHT COLUMN -->
<div
class="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"
style="animation-delay: 0.3s; animation-fill-mode: forwards"
>
<div class="relative h-full">
<div class="relative h-[60vh] md:h-full">
<!-- Current Image -->
<img
id="currentImg"
@ -625,11 +675,11 @@
<!-- About Us Button - Bottom Center -->
<div
class="absolute bottom-8 left-1/2 transform -translate-x-1/2 z-20 opacity-0"
class="absolute bottom-8 left-1/2 transform -translate-x-1/2 z-20 opacity-0 hidden md:block"
style="animation: fadeInUp 0.8s ease-out 1.2s forwards"
>
<a
class="inline-block uppercase tracking-wider px-6 py-3 border border-white text-white hover:bg-kh3-red hover:border-kh3-red transition-all duration-300 rounded-none animate-border-glow"
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"
data-trans
>
@ -639,18 +689,39 @@
<!-- Contact Link - Bottom Right -->
<div
class="absolute bottom-8 right-8 flex items-center space-x-4 z-20 opacity-0 animate-fade-in-right"
class="absolute bottom-8 right-8 hidden md:flex items-center space-x-3 md:space-x-4 z-20 opacity-0 animate-fade-in-right"
style="animation-delay: 1.4s; animation-fill-mode: forwards"
>
<div class="w-8 h-px bg-kh3-red"></div>
<div class="w-6 md:w-8 h-px bg-kh3-red"></div>
<a
href="contact.html"
data-trans
class="text-white hover:text-kh3-red transition-colors uppercase tracking-wider"
class="text-white hover:text-kh3-red transition-colors uppercase tracking-wider text-sm md:text-base"
>
CONTACTS
</a>
<div class="w-8 h-px bg-kh3-red"></div>
<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"
>About us</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>
@ -848,6 +919,27 @@
});
});
// Hide curtains and close nav just before page is cached (prevents blank back step)
window.addEventListener("pagehide", () => {
if (curtainTop) curtainTop.style.transform = "translateY(-100%)";
if (curtainBottom) curtainBottom.style.transform = "translateY(100%)";
const navEl = document.getElementById("navMenu");
const gridEl = document.getElementById("menuGrid");
if (navEl) navEl.classList.add("hidden");
if (gridEl) {
gridEl.innerHTML = `
<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>`;
}
});
// Enhanced slide + zoom hero image transitions
const imgs = [
"assets/images/room.png",
@ -987,6 +1079,36 @@
}
});
// Ensure back/forward navigation (bfcache) shows a clean page
window.addEventListener("pageshow", () => {
const loadingScreen = document.getElementById("loadingScreen");
if (loadingScreen) {
loadingScreen.style.display = "none";
loadingScreen.style.opacity = "0";
}
const ct = document.getElementById("pageCurtainTop");
const cb = document.getElementById("pageCurtainBottom");
if (ct) ct.style.transform = "translateY(-100%)";
if (cb) cb.style.transform = "translateY(100%)";
// Close nav if it was left open and reset grid icon
const navMenuEl = document.getElementById("navMenu");
const menuGridEl = document.getElementById("menuGrid");
if (navMenuEl) navMenuEl.classList.add("hidden");
if (menuGridEl) {
menuGridEl.innerHTML = `
<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>`;
}
});
// Menu grid animation sequence
function startMenuGridAnimation() {
const menuGrid = document.getElementById("menuGrid");

547
partners.html
View file

@ -16,7 +16,7 @@
<!-- Navigation Menu -->
<div
id="navMenu"
class="fixed left-0 top-0 h-full w-1/3 bg-kh3-black z-50 hidden shadow-2xl"
class="fixed left-0 top-0 h-full w-5/6 md:w-1/3 bg-kh3-black z-50 hidden shadow-2xl"
>
<div class="p-8 flex flex-col h-full">
<!-- Logo -->
@ -31,468 +31,95 @@
<div class="relative ml-8">
<!-- Navigation items in inverted C shape -->
<div class="space-y-6">
<!-- HOME -->
<a
href="index.html"
class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-0 font-montserrat"
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.05s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>H</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.075s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>O</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.1s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>M</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.125s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>E</span
>
</a>
<!-- ABOUT US -->
<a
href="about.html"
class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-6 font-montserrat"
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.15s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>A</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.175s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>B</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.2s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>O</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.225s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>U</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.25s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>T</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.275s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>&nbsp;</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.3s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>U</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.325s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>S</span
>
</a>
<!-- SERVICES -->
<a
href="services.html"
class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-12 font-montserrat"
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.35s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>S</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.375s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>E</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.4s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>R</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.425s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>V</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.45s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>I</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.475s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>C</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.5s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>E</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.525s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>S</span
>
</a>
<!-- PROJECTS -->
<a
href="projects.html"
class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-20 font-montserrat"
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.55s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>P</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.575s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>R</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.6s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>O</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.625s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>J</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.65s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>E</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.675s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>C</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.7s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>T</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.725s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>S</span
>
</a>
<!-- CONTACTS -->
<a
href="contact.html"
class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-20 font-montserrat"
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.75s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>C</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.775s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>O</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.8s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>N</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.825s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>T</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.85s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>A</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.875s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>C</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.9s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>T</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.925s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>S</span
>
</a>
<!-- PARTNERS - Active -->
<a
href="partners.html"
class="block text-white text-lg font-medium border-b border-white pb-1 ml-20 font-montserrat"
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.95s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>P</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.975s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>A</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 1s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>R</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 1.025s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>T</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 1.05s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>N</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 1.075s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>E</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 1.1s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>R</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 1.125s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>S</span
>
</a>
</div>
</nav>
<!-- Menu Grid -->
<div
class="fixed bottom-12 left-12 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"
>
<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>
<a
href="index.html"
class="block text-white text-xl md:text-lg font-medium hover:text-kh3-red transition-colors ml-0 font-montserrat opacity-0 animate-fade-in-left"
style="
animation-delay: 0.05s;
animation-fill-mode: forwards;
animation-duration: 0.3s;
"
>HOME</a
>
<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;
animation-fill-mode: forwards;
animation-duration: 0.3s;
"
>ABOUT US</a
>
<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;
animation-fill-mode: forwards;
animation-duration: 0.3s;
"
>SERVICES</a
>
<a
href="projects.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.55s;
animation-fill-mode: forwards;
animation-duration: 0.3s;
"
>PROJECTS</a
>
<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;
animation-fill-mode: forwards;
animation-duration: 0.3s;
"
>CONTACTS</a
>
<a
href="partners.html"
class="block text-white text-xl md:text-lg font-medium border-b border-white pb-1 ml-0 font-montserrat opacity-0 animate-fade-in-left"
style="
animation-delay: 0.95s;
animation-fill-mode: forwards;
animation-duration: 0.3s;
"
>PARTNERS</a
>
</div>
</div>
</div>
</nav>
</div>
</div>
<!-- Menu Grid -->
<div
class="fixed bottom-12 left-12 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"
>
<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>
</div>
</div>
<!-- Main Content -->
<main class="pt-20">

547
projects.html
View file

@ -16,7 +16,7 @@
<!-- Navigation Menu -->
<div
id="navMenu"
class="fixed left-0 top-0 h-full w-1/3 bg-kh3-black z-50 hidden shadow-2xl"
class="fixed left-0 top-0 h-full w-5/6 md:w-1/3 bg-kh3-black z-50 hidden shadow-2xl"
>
<div class="p-8 flex flex-col h-full">
<!-- Logo -->
@ -31,468 +31,105 @@
<div class="relative ml-8">
<!-- Navigation items in inverted C shape -->
<div class="space-y-6">
<!-- HOME -->
<a
href="index.html"
class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-0 font-montserrat"
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.05s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>H</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.075s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>O</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.1s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>M</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.125s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>E</span
>
</a>
<a
href="index.html"
class="block text-white text-xl md:text-lg font-medium hover:text-kh3-red transition-colors ml-0 font-montserrat opacity-0 animate-fade-in-left"
style="
animation-delay: 0.05s;
animation-fill-mode: forwards;
animation-duration: 0.3s;
"
>HOME</a
>
<!-- ABOUT US -->
<a
href="about.html"
class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-6 font-montserrat"
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.15s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>A</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.175s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>B</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.2s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>O</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.225s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>U</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.25s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>T</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.275s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>&nbsp;</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.3s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>U</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.325s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>S</span
>
</a>
<!-- ABOUT US -->
<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;
animation-fill-mode: forwards;
animation-duration: 0.3s;
"
>ABOUT US</a
>
<!-- SERVICES -->
<a
href="services.html"
class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-12 font-montserrat"
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.35s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>S</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.375s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>E</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.4s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>R</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.425s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>V</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.45s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>I</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.475s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>C</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.5s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>E</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.525s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>S</span
>
</a>
<!-- SERVICES -->
<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;
animation-fill-mode: forwards;
animation-duration: 0.3s;
"
>SERVICES</a
>
<!-- PROJECTS - Active -->
<a
href="projects.html"
class="block text-white text-lg font-medium border-b border-white pb-1 ml-20 font-montserrat"
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.55s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>P</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.575s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>R</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.6s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>O</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.625s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>J</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.65s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>E</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.675s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>C</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.7s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>T</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.725s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>S</span
>
</a>
<!-- PROJECTS - Active -->
<a
href="projects.html"
class="block text-white text-xl md:text-lg font-medium border-b border-white pb-1 ml-0 md:ml-20 font-montserrat opacity-0 animate-fade-in-left"
style="
animation-delay: 0.55s;
animation-fill-mode: forwards;
animation-duration: 0.3s;
"
>PROJECTS</a
>
<!-- CONTACTS -->
<a
href="contact.html"
class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-20 font-montserrat"
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.75s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>C</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.775s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>O</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.8s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>N</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.825s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>T</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.85s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>A</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.875s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>C</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.9s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>T</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.925s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>S</span
>
</a>
<!-- CONTACTS -->
<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-20 font-montserrat opacity-0 animate-fade-in-left"
style="
animation-delay: 0.75s;
animation-fill-mode: forwards;
animation-duration: 0.3s;
"
>CONTACTS</a
>
<!-- PARTNERS -->
<a
href="partners.html"
class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-20 font-montserrat"
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.95s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>P</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.975s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>A</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 1s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>R</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 1.025s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>T</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 1.05s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>N</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 1.075s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>E</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 1.1s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>R</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 1.125s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>S</span
>
</a>
</div>
</nav>
<!-- Menu Grid -->
<div
class="fixed bottom-12 left-12 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"
>
<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>
<!-- PARTNERS -->
<a
href="partners.html"
class="block text-white text-xl md:text-lg font-medium hover:text-kh3-red transition-colors ml-0 font-montserrat opacity-0 animate-fade-in-left"
style="
animation-delay: 0.95s;
animation-fill-mode: forwards;
animation-duration: 0.3s;
"
>PARTNERS</a
>
</div>
</div>
</div>
</nav>
</div>
</div>
<!-- Menu Grid -->
<div
class="fixed bottom-12 left-12 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"
>
<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>
</div>
</div>
<!-- Main Content -->
<main class="pt-20">

20
services.html
View file

@ -69,7 +69,7 @@
<body class="bg-kh3-black text-white font-montserrat">
<!-- Navigation Menu (copied from about.html) -->
<div
class="fixed left-0 top-0 h-full w-1/3 bg-kh3-black z-50 hidden shadow-2xl"
class="fixed left-0 top-0 h-full w-5/6 md:w-1/3 bg-kh3-black z-50 hidden shadow-2xl"
id="navMenu"
>
<div class="p-8 flex flex-col h-full">
@ -88,38 +88,32 @@
<!-- HOME - Top -->
<a
href="index.html"
class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-0 font-montserrat"
>HOME</a>
class="block text-white text-xl md:text-lg font-medium hover:text-kh3-red transition-colors ml-0 font-montserrat opacity-0 animate-fade-in-left" style="animation-delay: 0.05s; animation-fill-mode: forwards; animation-duration: 0.3s;">HOME</a>
<!-- ABOUT US - Slightly right -->
<a
href="about.html"
class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-6 font-montserrat"
>ABOUT US</a>
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; animation-fill-mode: forwards; animation-duration: 0.3s;">ABOUT US</a>
<!-- SERVICES - More right -->
<a
href="services.html"
class="block text-white text-lg font-medium border-b border-white pb-1 ml-12 font-montserrat"
>SERVICES</a>
class="block text-white text-xl md:text-lg font-medium border-b border-white pb-1 ml-0 md:ml-12 font-montserrat opacity-0 animate-fade-in-left" style="animation-delay: 0.35s; animation-fill-mode: forwards; animation-duration: 0.3s;">SERVICES</a>
<!-- PROJECTS - Most right -->
<a
href="projects.html"
class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-20 font-montserrat"
>PROJECTS</a>
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.55s; animation-fill-mode: forwards; animation-duration: 0.3s;">PROJECTS</a>
<!-- CONTACTS - More right -->
<a
href="contact.html"
class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-12 font-montserrat"
>CONTACTS</a>
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; animation-fill-mode: forwards; animation-duration: 0.3s;">CONTACTS</a>
<!-- PARTNERS - Back to left -->
<a
href="partners.html"
class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-0 font-montserrat"
>PARTNERS</a>
class="block text-white text-xl md:text-lg font-medium hover:text-kh3-red transition-colors ml-0 font-montserrat opacity-0 animate-fade-in-left" style="animation-delay: 0.95s; animation-fill-mode: forwards; animation-duration: 0.3s;">PARTNERS</a>
</div>
</div>
</div>