fix: correct mobile layout
This commit is contained in:
parent
bc95267aa4
commit
2fc620570b
6 changed files with 576 additions and 1811 deletions
386
about.html
386
about.html
|
|
@ -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">
|
||||
|
|
@ -39,9 +39,16 @@
|
|||
<!-- HOME - Top -->
|
||||
<a
|
||||
href="index.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.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;
|
||||
|
|
@ -51,6 +58,7 @@
|
|||
>H</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"
|
||||
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.15s;
|
||||
animation-duration: 0.3s;
|
||||
"
|
||||
>O</span
|
||||
>ABOUT US</a
|
||||
>
|
||||
<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;
|
||||
"
|
||||
> </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 - 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,239 +197,38 @@
|
|||
<!-- 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"
|
||||
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.15s;
|
||||
animation-duration: 0.3s;
|
||||
"
|
||||
>P</span
|
||||
>PROJECTS</a
|
||||
>
|
||||
<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"
|
||||
>
|
||||
<span
|
||||
class="inline-block opacity-0 animate-fade-in-left"
|
||||
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.15s;
|
||||
animation-duration: 0.3s;
|
||||
"
|
||||
>C</span
|
||||
>CONTACTS</a
|
||||
>
|
||||
<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"
|
||||
>
|
||||
<span
|
||||
class="inline-block opacity-0 animate-fade-in-left"
|
||||
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.15s;
|
||||
animation-duration: 0.3s;
|
||||
"
|
||||
>P</span
|
||||
>PARTNERS</a
|
||||
>
|
||||
<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>
|
||||
|
|
@ -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
523
contact.html
|
|
@ -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;
|
||||
"
|
||||
> </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>
|
||||
|
|
|
|||
158
index.html
158
index.html
|
|
@ -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">
|
||||
|
|
@ -39,9 +39,11 @@
|
|||
<!-- HOME - Top -->
|
||||
<a
|
||||
href="index.html"
|
||||
class="block text-white text-lg font-medium border-b border-white pb-1 ml-0 font-montserrat"
|
||||
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;
|
||||
|
|
@ -82,9 +87,11 @@
|
|||
<!-- 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"
|
||||
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 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 @@
|
|||
> </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;
|
||||
|
|
@ -161,9 +175,11 @@
|
|||
<!-- 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"
|
||||
>
|
||||
<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;
|
||||
|
|
@ -319,9 +351,11 @@
|
|||
<!-- 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"
|
||||
>
|
||||
<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">
|
||||
|
|
@ -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");
|
||||
|
|
|
|||
419
partners.html
419
partners.html
|
|
@ -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,445 +31,72 @@
|
|||
<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"
|
||||
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.15s;
|
||||
animation-duration: 0.3s;
|
||||
"
|
||||
>H</span
|
||||
>HOME</a
|
||||
>
|
||||
<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"
|
||||
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.15s;
|
||||
animation-duration: 0.3s;
|
||||
"
|
||||
>O</span
|
||||
>ABOUT US</a
|
||||
>
|
||||
<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;
|
||||
"
|
||||
> </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"
|
||||
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.15s;
|
||||
animation-duration: 0.3s;
|
||||
"
|
||||
>S</span
|
||||
>SERVICES</a
|
||||
>
|
||||
<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"
|
||||
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.15s;
|
||||
animation-duration: 0.3s;
|
||||
"
|
||||
>P</span
|
||||
>PROJECTS</a
|
||||
>
|
||||
<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"
|
||||
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.15s;
|
||||
animation-duration: 0.3s;
|
||||
"
|
||||
>C</span
|
||||
>CONTACTS</a
|
||||
>
|
||||
<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"
|
||||
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.15s;
|
||||
animation-duration: 0.3s;
|
||||
"
|
||||
>P</span
|
||||
>PARTNERS</a
|
||||
>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<!-- Menu Grid -->
|
||||
<div
|
||||
|
|
|
|||
409
projects.html
409
projects.html
|
|
@ -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,445 +31,82 @@
|
|||
<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"
|
||||
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.15s;
|
||||
animation-duration: 0.3s;
|
||||
"
|
||||
>H</span
|
||||
>HOME</a
|
||||
>
|
||||
<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"
|
||||
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.15s;
|
||||
animation-duration: 0.3s;
|
||||
"
|
||||
>O</span
|
||||
>ABOUT US</a
|
||||
>
|
||||
<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;
|
||||
"
|
||||
> </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"
|
||||
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.15s;
|
||||
animation-duration: 0.3s;
|
||||
"
|
||||
>S</span
|
||||
>SERVICES</a
|
||||
>
|
||||
<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 - 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"
|
||||
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.15s;
|
||||
animation-duration: 0.3s;
|
||||
"
|
||||
>P</span
|
||||
>PROJECTS</a
|
||||
>
|
||||
<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"
|
||||
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.15s;
|
||||
animation-duration: 0.3s;
|
||||
"
|
||||
>C</span
|
||||
>CONTACTS</a
|
||||
>
|
||||
<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 -->
|
||||
<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"
|
||||
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.15s;
|
||||
animation-duration: 0.3s;
|
||||
"
|
||||
>P</span
|
||||
>PARTNERS</a
|
||||
>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<!-- Menu Grid -->
|
||||
<div
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue