181 lines
No EOL
9.5 KiB
HTML
181 lines
No EOL
9.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" class="dark">
|
|
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>KH3 - Building Inspiring Spaces</title>
|
|
<!-- Standardized CSS Link -->
|
|
<link rel="stylesheet" href="styles/main.css" />
|
|
<meta name="description"
|
|
content="KH3 - Construction Project Management and Fit-out Services in Accra, Ghana. Building inspiring spaces since 2014." />
|
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&display=swap"
|
|
rel="stylesheet" />
|
|
</head>
|
|
|
|
<body class="bg-kh3-black text-white font-montserrat overflow-x-hidden">
|
|
<!-- Navigation Menu (Standardized) -->
|
|
<div 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">
|
|
<div class="flex items-center gap-3 mb-12">
|
|
<a href="index.html" class="flex items-center gap-3 hover:opacity-80 transition-opacity">
|
|
<img src="assets/images/kh3_logo.webp" alt="KH3" class="w-12 h-12" />
|
|
</a>
|
|
</div>
|
|
<nav class="flex-1 relative">
|
|
<div class="absolute inset-0 flex items-center">
|
|
<div class="relative ml-8">
|
|
<!-- Links are now vertically aligned and have no underline -->
|
|
<div class="space-y-6">
|
|
<a href="index.html" class="nav-link ml-0" data-anim="fade-in-left" data-anim-delay="50">
|
|
<span class="md:hidden">HOME</span><span class="nav-link-span">H</span><span
|
|
class="nav-link-span">O</span><span class="nav-link-span">M</span><span class="nav-link-span">E</span>
|
|
</a>
|
|
<a href="about.html" class="nav-link ml-0" data-trans="crossfade" data-anim="fade-in-left"
|
|
data-anim-delay="200">
|
|
<span class="md:hidden">WHY</span><span class="nav-link-span">W</span><span
|
|
class="nav-link-span">H</span><span class="nav-link-span">Y</span>
|
|
</a>
|
|
<a href="services.html" class="nav-link ml-0" data-trans="crossfade" data-anim="fade-in-left"
|
|
data-anim-delay="350">
|
|
<span class="md:hidden">HOW</span><span class="nav-link-span">H</span><span
|
|
class="nav-link-span">O</span><span class="nav-link-span">W</span>
|
|
</a>
|
|
<a href="projects.html" class="nav-link ml-0" data-trans="crossfade" data-anim="fade-in-left"
|
|
data-anim-delay="550">
|
|
<span class="md:hidden">WHAT</span><span class="nav-link-span">W</span><span
|
|
class="nav-link-span">H</span><span class="nav-link-span">A</span><span class="nav-link-span">T</span>
|
|
</a>
|
|
<a href="who.html" class="nav-link ml-0" data-trans="crossfade" data-anim="fade-in-left"
|
|
data-anim-delay="650">
|
|
<span class="md:hidden">WHO</span><span class="nav-link-span">W</span><span
|
|
class="nav-link-span">H</span><span class="nav-link-span">O</span>
|
|
</a>
|
|
<a href="contact.html" class="nav-link ml-0" data-trans="crossfade" data-anim="fade-in-left"
|
|
data-anim-delay="750">
|
|
<span class="md:hidden">CONTACTS</span><span class="nav-link-span">C</span><span
|
|
class="nav-link-span">O</span><span class="nav-link-span">N</span><span
|
|
class="nav-link-span">T</span><span class="nav-link-span">A</span><span
|
|
class="nav-link-span">C</span><span class="nav-link-span">T</span><span class="nav-link-span">S</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Main Layout -->
|
|
<div class="min-h-screen relative">
|
|
<section class="relative h-[100svh] md:min-h-screen flex flex-col md:flex-row hero-section">
|
|
|
|
<!-- KH3 Logo -->
|
|
<div class="absolute top-6 md:top-8 left-8 z-20 opacity-0" data-anim="fade-in-left" data-anim-delay="200">
|
|
<a href="index.html"
|
|
class="flex flex-col items-start gap-2 animate-logo-float hover:opacity-80 transition-opacity">
|
|
<img src="assets/images/kh3_logo.webp" alt="KH3" class="w-16 h-16" />
|
|
<h1 class="text-lg md:text-xl font-semibold text-white">KH3 Group</h1>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Menu Toggle -->
|
|
<div class="fixed top-6 right-8 md:bottom-12 md:left-12 md:top-auto md:right-auto z-50">
|
|
<div class="cursor-pointer" id="menuToggle" role="button" aria-label="Toggle Navigation Menu" tabindex="0">
|
|
<div class="relative inline-block hidden md:block" id="menuWrap">
|
|
<div class="menu-waves" aria-hidden="true"><span class="wave"></span><span class="wave"></span><span
|
|
class="wave"></span></div>
|
|
<div class="menu-outline" aria-hidden="true"></div>
|
|
<div class="relative" id="menuGrid"><img src="assets/icons/closed_petal.webp" alt="closed petal"
|
|
class="w-6 h-6" /></div>
|
|
<div id="menuPetal"
|
|
class="absolute inset-0 flex items-center justify-center pointer-events-none opacity-0 transition-opacity">
|
|
<img src="assets/icons/open_petal.webp" alt="petal" class="w-8 h-8" />
|
|
</div>
|
|
</div>
|
|
<div class="md:hidden">
|
|
<div class="cursor-pointer bg-black/30 backdrop-blur-sm rounded-lg p-3">
|
|
<div class="grid grid-cols-3 gap-1 w-6 h-6" id="menuGridMobile">
|
|
<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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- LEFT COLUMN -->
|
|
<div class="w-full md:w-1/3 bg-kh3-black flex h-[20vh] md:h-auto shrink-0 opacity-0" data-anim="fade-in-left"
|
|
data-anim-delay="800">
|
|
</div>
|
|
|
|
<!-- RIGHT COLUMN -->
|
|
<div class="w-full md:w-2/3 relative overflow-hidden flex-1 min-h-0 md:flex-none" data-anim="fade-in-right"
|
|
data-anim-delay="300">
|
|
<div class="relative h-full md:h-full">
|
|
<div class="absolute inset-0 bg-black bg-opacity-20 z-10"></div>
|
|
<img id="currentImg" src="assets/images/room.webp" alt="Sample interior fit-out by KH3"
|
|
class="absolute inset-0 w-full h-full object-cover" />
|
|
<img id="nextImg" src="assets/images/chair.webp" alt="Sample interior fit-out by KH3"
|
|
class="absolute inset-0 w-full h-full object-cover opacity-0" />
|
|
|
|
<!-- Mobile CTA bar on image -->
|
|
<div class="absolute left-1/2 transform -translate-x-1/2 z-20 md:hidden opacity-0" data-anim="fade-in-up"
|
|
data-anim-delay="1200" style="bottom: calc(env(safe-area-inset-bottom, 0px) + 1.25rem);">
|
|
<div class="flex items-center gap-4">
|
|
<a href="about.html" data-trans=""
|
|
class="px-4 py-2 text-sm uppercase tracking-wider border border-white text-white hover:bg-kh3-red hover:border-kh3-red transition-all duration-300 rounded-none">Why</a>
|
|
<a href="contact.html" data-trans=""
|
|
class="px-4 py-2 text-sm uppercase tracking-wider border border-white text-white hover:bg-kh3-red hover:border-kh3-red transition-all duration-300 rounded-none">Contacts</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
class="absolute bottom-8 left-1/2 transform -translate-x-1/2 z-20 opacity-0 hidden md:flex items-center gap-4"
|
|
data-anim="fade-in-up" data-anim-delay="1200">
|
|
<a href="about.html" data-trans="crossfade"
|
|
class="inline-block uppercase tracking-wider px-6 py-3 text-base border border-white text-white hover:bg-kh3-red hover:border-kh3-red transition-all duration-300 rounded-md animate-border-glow">
|
|
Why KH3
|
|
</a>
|
|
<a href="who.html" data-trans="crossfade"
|
|
class="inline-block uppercase tracking-wider px-6 py-3 text-base border border-white text-white hover:bg-kh3-red hover:border-kh3-red transition-all duration-300 rounded-md animate-border-glow">
|
|
Who We Are
|
|
</a>
|
|
</div>
|
|
|
|
</section>
|
|
</div>
|
|
|
|
<div data-include="components/footer.html"></div>
|
|
|
|
<!-- Custom Cursor -->
|
|
<div class="fixed w-6 h-6 border-2 border-kh3-red rounded-full pointer-events-none z-50 hidden md:block"
|
|
id="customCursor"></div>
|
|
|
|
<!-- Loading Screen -->
|
|
<div class="fixed inset-0 bg-kh3-black z-50 flex items-center justify-center" id="loadingScreen">
|
|
<div class="text-center">
|
|
<a href="index.html" class="flex items-center gap-3 mb-8 hover:opacity-80 transition-opacity justify-center">
|
|
<img src="assets/images/kh3_logo.webp" alt="KH3" class="w-16 h-16" />
|
|
</a>
|
|
<div class="w-64 h-1 bg-neutral-800 rounded-full overflow-hidden">
|
|
<div class="h-full bg-kh3-red rounded-full animate-pulse"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Script Files -->
|
|
<script src="js/include.js"></script>
|
|
<script src="js/main.js"></script>
|
|
<script src="js/carousel.js"></script>
|
|
|
|
</body>
|
|
|
|
</html> |