mirror of
https://git.kh3group.com/georgebiri/kh3_website.git
synced 2026-07-02 07:03:46 +00:00
fix: correct mobile layout
All checks were successful
continuous-integration/drone/push Build is passing
All checks were successful
continuous-integration/drone/push Build is passing
This commit is contained in:
parent
bc95267aa4
commit
2fc620570b
6 changed files with 576 additions and 1811 deletions
572
about.html
572
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">
|
||||
|
|
@ -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;
|
||||
"
|
||||
> </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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue