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

fix: change menu nav names

Browse source
This commit is contained in:
George Birikorang 2025-08-29 18:42:22 -04:00
parent 1c9a335d26
commit 1d80addd7a
8 changed files with 2452 additions and 700 deletions
Download patch file Download diff file Expand all files Collapse all files

752
about.html
View file

@ -24,10 +24,12 @@
id="navMenu" id="navMenu"
> >
<div class="p-8 flex flex-col h-full"> <div class="p-8 flex flex-col h-full">
<!-- Logo --> <!-- Logo -->
<div class="flex items-center gap-3 mb-12"> <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.png" alt="KH3" class="w-12 h-12" /> <img src="assets/images/kh3_logo.png" alt="KH3" class="w-12 h-12" />
<span class="text-white text-2xl font-bold tracking-wider">KH3</span> <span class="text-white text-2xl font-bold tracking-wider">KH3</span>
</a>
</div> </div>
<!-- Navigation Links - Inverted C Layout --> <!-- Navigation Links - Inverted C Layout -->
@ -127,8 +129,8 @@
</a> </a>
<!-- HOW - More right --> <!-- HOW - More right -->
<a <a
href="services.html" 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" 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=" style="
animation-delay: 0.35s; animation-delay: 0.35s;
@ -217,6 +219,47 @@
> >
</a> </a>
<!-- WHO - New position -->
<a
href="who.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.65s;
animation-fill-mode: forwards;
animation-duration: 0.3s;
"
data-trans="crossfade"
>
<span class="md:hidden">WHO</span>
<span
class="hidden md:inline"
style="
animation-delay: 0.65s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>W</span
>
<span
class="hidden md:inline"
style="
animation-delay: 0.675s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>H</span
>
<span
class="hidden md:inline"
style="
animation-delay: 0.7s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>O</span
>
</a>
<!-- CONTACTS - More right --> <!-- CONTACTS - More right -->
<a <a
href="contact.html" href="contact.html"
@ -415,11 +458,11 @@
</button> </button>
</div> </div>
</div> </div>
</section> </section>
<!-- Dream Design Deliver Section --> <!-- Dream Design Deliver Section -->
<section class="py-20 bg-kh3-black text-white relative dream-design-deliver"> <section class="py-20 bg-kh3-black text-white relative dream-design-deliver">
<div class="container mx-auto px-8 max-w-6xl"> <div class="container mx-auto px-8 max-w-6xl">
<div class="text-center"> <div class="text-center">
<!-- Elegant horizontal layout --> <!-- Elegant horizontal layout -->
<div <div
@ -434,7 +477,7 @@
DREAM DREAM
</h2> </h2>
<div class="w-2 h-2 bg-kh3-red rounded-full"></div> <div class="w-2 h-2 bg-kh3-red rounded-full"></div>
</div> </div>
<!-- DESIGN --> <!-- DESIGN -->
<div class="flex items-center space-x-3"> <div class="flex items-center space-x-3">
@ -444,7 +487,7 @@
DESIGN DESIGN
</h2> </h2>
<div class="w-2 h-2 bg-kh3-red rounded-full"></div> <div class="w-2 h-2 bg-kh3-red rounded-full"></div>
</div> </div>
<!-- DELIVER --> <!-- DELIVER -->
<div class="flex items-center space-x-3"> <div class="flex items-center space-x-3">
@ -453,15 +496,15 @@
> >
DELIVER DELIVER
</h2> </h2>
</div> </div>
</div> </div>
<!-- Subtle underline --> <!-- Subtle underline -->
<div <div
class="w-24 h-px bg-kh3-grey mx-auto mt-8 opacity-0" class="w-24 h-px bg-kh3-grey mx-auto mt-8 opacity-0"
style="animation: fadeInUp 1s ease-out 1.2s forwards" style="animation: fadeInUp 1s ease-out 1.2s forwards"
></div> ></div>
</div> </div>
</div> </div>
</section> </section>
@ -512,10 +555,10 @@
>Enterprise Group Limited</span >Enterprise Group Limited</span
>. >.
</p> </p>
</div>
</div> </div>
</div> </div>
</section> </div>
</section>
<!-- Mission & Vision Section --> <!-- Mission & Vision Section -->
<section class="py-32 bg-kh3-grey text-kh3-black mission-vision"> <section class="py-32 bg-kh3-grey text-kh3-black mission-vision">
@ -560,7 +603,7 @@
<span class="text-white text-2xl font-bold drop-shadow-lg" <span class="text-white text-2xl font-bold drop-shadow-lg"
>01</span >01</span
> >
</div> </div>
<!-- Title with text glow --> <!-- Title with text glow -->
<h2 <h2
@ -580,8 +623,8 @@
> >
Out of the ordinary the Extraordinary that inspires the Out of the ordinary the Extraordinary that inspires the
world. world.
</p> </p>
</div> </div>
</div> </div>
</div> </div>
@ -624,7 +667,7 @@
<span class="text-white text-2xl font-bold drop-shadow-lg" <span class="text-white text-2xl font-bold drop-shadow-lg"
>02</span >02</span
> >
</div> </div>
<!-- Title with text glow --> <!-- Title with text glow -->
<h2 <h2
@ -669,8 +712,8 @@
<div <div
class="text-center opacity-0 group cursor-pointer transform transition-all duration-500 hover:scale-105 hover:-translate-y-2" class="text-center opacity-0 group cursor-pointer transform transition-all duration-500 hover:scale-105 hover:-translate-y-2"
style="animation: fadeInUp 1s ease-out 2.6s forwards" style="animation: fadeInUp 1s ease-out 2.6s forwards"
> >
<div <div
class="w-20 h-20 bg-kh3-red mx-auto mb-8 transform rotate-45 transition-all duration-500 group-hover:rotate-90 group-hover:scale-110 group-hover:shadow-lg group-hover:shadow-red-500/50 diamond-pulse" class="w-20 h-20 bg-kh3-red mx-auto mb-8 transform rotate-45 transition-all duration-500 group-hover:rotate-90 group-hover:scale-110 group-hover:shadow-lg group-hover:shadow-red-500/50 diamond-pulse"
></div> ></div>
<h3 <h3
@ -690,11 +733,11 @@
<!-- Empty middle column for H layout --> <!-- Empty middle column for H layout -->
<div class="hidden md:block"></div> <div class="hidden md:block"></div>
<div <div
class="text-center opacity-0 group cursor-pointer transform transition-all duration-500 hover:scale-105 hover:-translate-y-2" class="text-center opacity-0 group cursor-pointer transform transition-all duration-500 hover:scale-105 hover:-translate-y-2"
style="animation: fadeInUp 1s ease-out 3s forwards" style="animation: fadeInUp 1s ease-out 3s forwards"
> >
<div <div
class="w-20 h-20 bg-kh3-red mx-auto mb-8 transform rotate-45 transition-all duration-500 group-hover:rotate-90 group-hover:scale-110 group-hover:shadow-lg group-hover:shadow-red-500/50 diamond-pulse" class="w-20 h-20 bg-kh3-red mx-auto mb-8 transform rotate-45 transition-all duration-500 group-hover:rotate-90 group-hover:scale-110 group-hover:shadow-lg group-hover:shadow-red-500/50 diamond-pulse"
></div> ></div>
<h3 <h3
@ -710,7 +753,7 @@
human control; we will communicate this transparently and in human control; we will communicate this transparently and in
good time. good time.
</p> </p>
</div> </div>
</div> </div>
<!-- Row 2: All three columns --> <!-- Row 2: All three columns -->
@ -735,11 +778,11 @@
</p> </p>
</div> </div>
<div <div
class="text-center opacity-0 group cursor-pointer transform transition-all duration-500 hover:scale-105 hover:-translate-y-2" class="text-center opacity-0 group cursor-pointer transform transition-all duration-500 hover:scale-105 hover:-translate-y-2"
style="animation: fadeInUp 1s ease-out 3.4s forwards" style="animation: fadeInUp 1s ease-out 3.4s forwards"
> >
<div <div
class="w-20 h-20 bg-kh3-red mx-auto mb-8 transform rotate-45 transition-all duration-500 group-hover:rotate-90 group-hover:scale-110 group-hover:shadow-lg group-hover:shadow-red-500/50 diamond-pulse" class="w-20 h-20 bg-kh3-red mx-auto mb-8 transform rotate-45 transition-all duration-500 group-hover:rotate-90 group-hover:scale-110 group-hover:shadow-lg group-hover:shadow-red-500/50 diamond-pulse"
></div> ></div>
<h3 <h3
@ -772,9 +815,9 @@
> >
We are committed to delivering exceptional results in every area We are committed to delivering exceptional results in every area
of our operations. of our operations.
</p> </p>
</div>
</div> </div>
</div>
<!-- Row 3: First and Third columns only --> <!-- Row 3: First and Third columns only -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-16"> <div class="grid grid-cols-1 md:grid-cols-3 gap-16">
@ -827,568 +870,7 @@
</div> </div>
</section> </section>
<!-- Team Section -->
<section class="py-32 bg-kh3-black text-white team-section">
<div class="container mx-auto px-8 max-w-7xl">
<div class="text-center mb-20">
<!-- Main Title -->
<h2 class="text-6xl md:text-8xl font-bold mb-8">
<span class="text-white">KH3</span>
<span class="text-kh3-red">TEAM</span>
</h2>
<!-- Subtitle with line -->
<div class="flex items-center justify-center mb-8">
<div class="w-16 h-px bg-white"></div>
<span class="text-white text-xl font-medium mx-4 tracking-wider"
>MEET THE KH3 TEAM</span
>
<div class="w-16 h-px bg-white"></div>
</div>
<!-- Description -->
<p
class="text-xl md:text-2xl text-white/80 max-w-4xl mx-auto leading-relaxed tracking-wide"
>
WE'RE AN EVER-EXPANDING FAMILY OF DESIGN AND CONSTRUCTION
CRAFTSMEN AND PROJECT MANAGEMENT EXPERTS WHO BELIEVE IN DELIVERING
HIGH QUALITY SOLUTIONS.
</p>
</div>
<!-- Team Members Grid -->
<div class="mt-20" style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem;">
<!-- Team Member 1 -->
<div class="group relative team-card" data-card-index="0">
<div
class="bg-kh3-grey/20 p-8 rounded-lg hover:bg-kh3-grey/30 transition-all duration-500 transform hover:scale-105 hover:-translate-y-2"
>
<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 overflow-hidden group-hover:shadow-lg group-hover:shadow-red-500/20 transition-all duration-500"
>
<img
src="assets/images/team/kweku_hayford.png"
alt="Kweku HAYFORD"
class="w-full h-full object-cover rounded-lg transition-all duration-500 group-hover:scale-110"
onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';"
/>
<span class="text-4xl text-white/60" style="display: none"
>👤</span
>
</div>
<div class="text-center">
<h3
class="text-2xl font-bold text-white mb-2 transition-all duration-300 group-hover:text-kh3-red group-hover:scale-105"
>
Kweku HAYFORD
</h3>
<p
class="text-kh3-red font-medium transition-all duration-300 group-hover:text-red-400"
>
Director
</p>
</div>
</div>
</div>
<!-- Team Member 2 -->
<div class="group relative team-card" data-card-index="1">
<div
class="bg-kh3-grey/20 p-8 rounded-lg hover:bg-kh3-grey/30 transition-all duration-500 transform hover:scale-105 hover:-translate-y-2"
>
<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 overflow-hidden group-hover:shadow-lg group-hover:shadow-red-500/20 transition-all duration-500"
>
<img
src="assets/images/team/hanetta.png"
alt="Hanetta HAYFORD"
class="w-full h-full object-cover rounded-lg transition-all duration-500 group-hover:scale-110"
onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';"
/>
<span class="text-4xl text-white/60" style="display: none"
>👤</span
>
</div>
<div class="text-center">
<h3
class="text-2xl font-bold text-white mb-2 transition-all duration-300 group-hover:text-kh3-red group-hover:scale-105"
>
Hanetta HAYFORD
</h3>
<p
class="text-kh3-red font-medium transition-all duration-300 group-hover:text-red-400"
>
Head, Projects
</p>
</div>
</div>
</div>
<!-- Team Member 3 -->
<div class="group relative team-card" data-card-index="2">
<div
class="bg-kh3-grey/20 p-8 rounded-lg hover:bg-kh3-grey/30 transition-all duration-500 transform hover:scale-105 hover:-translate-y-2"
>
<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 overflow-hidden group-hover:shadow-lg group-hover:shadow-red-500/20 transition-all duration-500"
>
<img
src="assets/images/team/yayra.png"
alt="D. Yayra NUMETU"
class="w-full h-full object-cover rounded-lg transition-all duration-500 group-hover:scale-110"
onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';"
/>
<span class="text-4xl text-white/60" style="display: none"
>👤</span
>
</div>
<div class="text-center">
<h3
class="text-2xl font-bold text-white mb-2 transition-all duration-300 group-hover:text-kh3-red group-hover:scale-105"
>
D. Yayra NUMETU
</h3>
<p
class="text-kh3-red font-medium transition-all duration-300 group-hover:text-red-400"
>
Head, Finance & Administration
</p>
</div>
</div>
</div>
<!-- Team Member 4 -->
<div class="group relative team-card" data-card-index="3">
<div
class="bg-kh3-grey/20 p-8 rounded-lg hover:bg-kh3-grey/30 transition-all duration-500 transform hover:scale-105 hover:-translate-y-2"
>
<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 overflow-hidden group-hover:shadow-lg group-hover:shadow-red-500/20 transition-all duration-500"
>
<img
src="assets/images/team/fauzia.png"
alt="Fauzia ABDEL-MAJEED, PMP"
class="w-full h-full object-cover rounded-lg transition-all duration-500 group-hover:scale-110"
onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';"
/>
<span class="text-4xl text-white/60" style="display: none"
>👤</span
>
</div>
<div class="text-center">
<h3
class="text-2xl font-bold text-white mb-2 transition-all duration-300 group-hover:text-kh3-red group-hover:scale-105"
>
Fauzia ABDEL-MAJEED, PMP
</h3>
<p
class="text-kh3-red font-medium transition-all duration-300 group-hover:text-red-400"
>
Head, Strategy
</p>
</div>
</div>
</div>
<!-- Team Member 5 -->
<div class="group relative team-card" data-card-index="4">
<div
class="bg-kh3-grey/20 p-8 rounded-lg hover:bg-kh3-grey/30 transition-all duration-500 transform hover:scale-105 hover:-translate-y-2"
>
<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 overflow-hidden group-hover:shadow-lg group-hover:shadow-red-500/20 transition-all duration-500"
>
<img
src="assets/images/team/miranda.png"
alt="Miranda LARYEA"
class="w-full h-full object-cover rounded-lg transition-all duration-500 group-hover:scale-110"
onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';"
/>
<span class="text-4xl text-white/60" style="display: none"
>👤</span
>
</div>
<div class="text-center">
<h3
class="text-2xl font-bold text-white mb-2 transition-all duration-300 group-hover:text-kh3-red group-hover:scale-105"
>
Miranda LARYEA
</h3>
<p
class="text-kh3-red font-medium transition-all duration-300 group-hover:text-red-400"
>
Lead Administration
</p>
</div>
</div>
</div>
<!-- Team Member 6 -->
<div class="group relative team-card" data-card-index="5">
<div
class="bg-kh3-grey/20 p-8 rounded-lg hover:bg-kh3-grey/30 transition-all duration-500 transform hover:scale-105 hover:-translate-y-2"
>
<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 overflow-hidden group-hover:shadow-lg group-hover:shadow-red-500/20 transition-all duration-500"
>
<img
src="assets/images/team/helena.png"
alt="Helena NTIRI AMANKWAH"
class="w-full h-full object-cover rounded-lg transition-all duration-500 group-hover:scale-110"
onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';"
/>
<span class="text-4xl text-white/60" style="display: none"
>👤</span
>
</div>
<div class="text-center">
<h3
class="text-2xl font-bold text-white mb-2 transition-all duration-300 group-hover:text-kh3-red group-hover:scale-105"
>
Helena NTIRI AMANKWAH
</h3>
<p
class="text-kh3-red font-medium transition-all duration-300 group-hover:text-red-400"
>
Lead Procurement
</p>
</div>
</div>
</div>
<!-- Team Member 7 -->
<div class="group relative team-card" data-card-index="6">
<div
class="bg-kh3-grey/20 p-8 rounded-lg hover:bg-kh3-grey/30 transition-all duration-500 transform hover:scale-105 hover:-translate-y-2"
>
<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 overflow-hidden group-hover:shadow-lg group-hover:shadow-red-500/20 transition-all duration-500"
>
<img
src="assets/images/team/michael.png"
alt="Michael LARTEY"
class="w-full h-full object-cover rounded-lg transition-all duration-500 group-hover:scale-110"
onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';"
/>
<span class="text-4xl text-white/60" style="display: none"
>👤</span
>
</div>
<div class="text-center">
<h3
class="text-2xl font-bold text-white mb-2 transition-all duration-300 group-hover:text-kh3-red group-hover:scale-105"
>
Michael LARTEY
</h3>
<p
class="text-kh3-red font-medium transition-all duration-300 group-hover:text-red-400"
>
Lead Projects
</p>
</div>
</div>
</div>
<!-- Team Member 8 -->
<div class="group relative team-card" data-card-index="7">
<div
class="bg-kh3-grey/20 p-8 rounded-lg hover:bg-kh3-grey/30 transition-all duration-500 transform hover:scale-105 hover:-translate-y-2"
>
<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 overflow-hidden group-hover:shadow-lg group-hover:shadow-red-500/20 transition-all duration-500"
>
<img
src="assets/images/team/francis.png"
alt="Francis OPARE"
class="w-full h-full object-cover rounded-lg transition-all duration-500 group-hover:scale-110"
onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';"
/>
<span class="text-4xl text-white/60" style="display: none"
>👤</span
>
</div>
<div class="text-center">
<h3
class="text-2xl font-bold text-white mb-2 transition-all duration-300 group-hover:text-kh3-red group-hover:scale-105"
>
Francis OPARE
</h3>
<p
class="text-kh3-red font-medium transition-all duration-300 group-hover:text-red-400"
>
Lead Finance
</p>
</div>
</div>
</div>
<!-- Team Member 9 -->
<div class="group relative team-card" data-card-index="8">
<div
class="bg-kh3-grey/20 p-8 rounded-lg hover:bg-kh3-grey/30 transition-all duration-500 transform hover:scale-105 hover:-translate-y-2"
>
<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 overflow-hidden group-hover:shadow-lg group-hover:shadow-red-500/20 transition-all duration-500"
>
<img
src="assets/images/team/andrews.png"
alt="Andrews Amon KOTEY"
class="w-full h-full object-cover rounded-lg transition-all duration-500 group-hover:scale-110"
onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';"
/>
<span class="text-4xl text-white/60" style="display: none"
>👤</span
>
</div>
<div class="text-center">
<h3
class="text-2xl font-bold text-white mb-2 transition-all duration-300 group-hover:text-kh3-red group-hover:scale-105"
>
Andrews Amon KOTEY
</h3>
<p
class="text-kh3-red font-medium transition-all duration-300 group-hover:text-red-400"
>
Lead Design
</p>
</div>
</div>
</div>
<!-- Team Member 10 -->
<div class="group relative team-card" data-card-index="9">
<div
class="bg-kh3-grey/20 p-8 rounded-lg hover:bg-kh3-grey/30 transition-all duration-500 transform hover:scale-105 hover:-translate-y-2"
>
<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 overflow-hidden group-hover:shadow-lg group-hover:shadow-red-500/20 transition-all duration-500"
>
<img
src="assets/images/team/moses.png"
alt="Moses ARMAH"
class="w-full h-full object-cover rounded-lg transition-all duration-500 group-hover:scale-110"
onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';"
/>
<span class="text-4xl text-white/60" style="display: none"
>👤</span
>
</div>
<div class="text-center">
<h3
class="text-2xl font-bold text-white mb-2 transition-all duration-300 group-hover:text-kh3-red group-hover:scale-105"
>
Moses ARMAH
</h3>
<p
class="text-kh3-red font-medium transition-all duration-300 group-hover:text-red-400"
>
Lead Project Assistant
</p>
</div>
</div>
</div>
<!-- Team Member 11 -->
<div class="group relative team-card" data-card-index="10">
<div
class="bg-kh3-grey/20 p-8 rounded-lg hover:bg-kh3-grey/30 transition-all duration-500 transform hover:scale-105 hover:-translate-y-2"
>
<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 overflow-hidden group-hover:shadow-lg group-hover:shadow-red-500/20 transition-all duration-500"
>
<img
src="assets/images/team/dorothea.png"
alt="Dorothea ADJETEY"
class="w-full h-full object-cover rounded-lg transition-all duration-500 group-hover:scale-110"
onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';"
/>
<span class="text-4xl text-white/60" style="display: none"
>👤</span
>
</div>
<div class="text-center">
<h3
class="text-2xl font-bold text-white mb-2 transition-all duration-300 group-hover:text-kh3-red group-hover:scale-105"
>
Dorothea ADJETEY
</h3>
<p
class="text-kh3-red font-medium transition-all duration-300 group-hover:text-red-400"
>
Project Assistant
</p>
</div>
</div>
</div>
<!-- Team Member 12 -->
<div class="group relative team-card" data-card-index="11">
<div
class="bg-kh3-grey/20 p-8 rounded-lg hover:bg-kh3-grey/30 transition-all duration-500 transform hover:scale-105 hover:-translate-y-2"
>
<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 overflow-hidden group-hover:shadow-lg group-hover:shadow-red-500/20 transition-all duration-500"
>
<img
src="assets/images/team/claribel.png"
alt="Claribel ARMAH"
class="w-full h-full object-cover rounded-lg transition-all duration-500 group-hover:scale-110"
onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';"
/>
<span class="text-4xl text-white/60" style="display: none"
>👤</span
>
</div>
<div class="text-center">
<h3
class="text-2xl font-bold text-white mb-2 transition-all duration-300 group-hover:text-kh3-red group-hover:scale-105"
>
Claribel ARMAH
</h3>
<p
class="text-kh3-red font-medium transition-all duration-300 group-hover:text-red-400"
>
Project Assistant
</p>
</div>
</div>
</div>
<!-- Team Member 13 -->
<div class="group relative team-card" data-card-index="12">
<div
class="bg-kh3-grey/20 p-8 rounded-lg hover:bg-kh3-grey/30 transition-all duration-500 transform hover:scale-105 hover:-translate-y-2"
>
<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 overflow-hidden group-hover:shadow-lg group-hover:shadow-red-500/20 transition-all duration-500"
>
<img
src="assets/images/team/daniel.png"
alt="Daniel THOMPSON"
class="w-full h-full object-cover rounded-lg transition-all duration-500 group-hover:scale-110"
onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';"
/>
<span class="text-4xl text-white/60" style="display: none"
>👤</span
>
</div>
<div class="text-center">
<h3
class="text-2xl font-bold text-white mb-2 transition-all duration-300 group-hover:text-kh3-red group-hover:scale-105"
>
Daniel THOMPSON
</h3>
<p
class="text-kh3-red font-medium transition-all duration-300 group-hover:text-red-400"
>
Project Assistant
</p>
</div>
</div>
</div>
<!-- Team Member 14 -->
<div class="group relative team-card" data-card-index="13">
<div
class="bg-kh3-grey/20 p-8 rounded-lg hover:bg-kh3-grey/30 transition-all duration-500 transform hover:scale-105 hover:-translate-y-2"
>
<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 overflow-hidden group-hover:shadow-lg group-hover:shadow-red-500/20 transition-all duration-500"
>
<img
src="assets/images/team/joyleen.png"
alt="Joyleen Therson-COFFIE"
class="w-full h-full object-cover rounded-lg transition-all duration-500 group-hover:scale-110"
onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';"
/>
<span class="text-4xl text-white/60" style="display: none"
>👤</span
>
</div>
<div class="text-center">
<h3
class="text-2xl font-bold text-white mb-2 transition-all duration-300 group-hover:text-kh3-red group-hover:scale-105"
>
Joyleen Therson-COFFIE
</h3>
<p
class="text-kh3-red font-medium transition-all duration-300 group-hover:text-red-400"
>
Project Assistant
</p>
</div>
</div>
</div>
<!-- Team Member 15 -->
<div class="group relative team-card" data-card-index="14">
<div
class="bg-kh3-grey/20 p-8 rounded-lg hover:bg-kh3-grey/30 transition-all duration-500 transform hover:scale-105 hover:-translate-y-2"
>
<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 overflow-hidden group-hover:shadow-lg group-hover:shadow-red-500/20 transition-all duration-500"
>
<img
src="assets/images/team/rebecca.png"
alt="Rebecca SAM"
class="w-full h-full object-cover rounded-lg transition-all duration-500 group-hover:scale-110"
onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';"
/>
<span class="text-4xl text-white/60" style="display: none"
>👤</span
>
</div>
<div class="text-center">
<h3
class="text-2xl font-bold text-white mb-2 transition-all duration-300 group-hover:text-kh3-red group-hover:scale-105"
>
Rebecca SAM
</h3>
<p
class="text-kh3-red font-medium transition-all duration-300 group-hover:text-red-400"
>
Project Assistant
</p>
</div>
</div>
</div>
<!-- Team Member 16 -->
<div class="group relative team-card" data-card-index="15">
<div
class="bg-kh3-grey/20 p-8 rounded-lg hover:bg-kh3-grey/30 transition-all duration-500 transform hover:scale-105 hover:-translate-y-2"
>
<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 overflow-hidden group-hover:shadow-lg group-hover:shadow-red-500/20 transition-all duration-500"
>
<img
src="assets/images/team/siisi.png"
alt="Siisi NKETSIAH"
class="w-full h-full object-cover rounded-lg transition-all duration-500 group-hover:scale-110"
onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';"
/>
<span class="text-4xl text-white/60" style="display: none"
>👤</span
>
</div>
<div class="text-center">
<h3
class="text-2xl font-bold text-white mb-2 transition-all duration-300 group-hover:text-kh3-red group-hover:scale-105"
>
Siisi NKETSIAH
</h3>
<p
class="text-kh3-red font-medium transition-all duration-300 group-hover:text-red-400"
>
Tech Support
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</main> </main>
<!-- Footer --> <!-- Footer -->
@ -1396,14 +878,14 @@
<div class="container mx-auto px-8 max-w-6xl"> <div class="container mx-auto px-8 max-w-6xl">
<div class="grid grid-cols-1 md:grid-cols-3 gap-12 mb-12"> <div class="grid grid-cols-1 md:grid-cols-3 gap-12 mb-12">
<div> <div>
<div class="flex items-center gap-3 mb-6"> <a href="index.html" class="flex items-center gap-3 mb-6 hover:opacity-80 transition-opacity">
<img <img
src="assets/images/kh3_logo.png" src="assets/images/kh3_logo.png"
alt="KH3" alt="KH3"
class="w-12 h-12" class="w-12 h-12"
/> />
<span class="text-2xl font-bold tracking-wider">KH3</span> <span class="text-2xl font-bold tracking-wider">KH3</span>
</div> </a>
<p class="text-neutral-300 leading-relaxed"> <p class="text-neutral-300 leading-relaxed">
Building inspiring spaces through innovative construction and Building inspiring spaces through innovative construction and
design solutions. design solutions.
@ -1413,7 +895,7 @@
<h3 class="text-xl font-semibold mb-6">Quick Links</h3> <h3 class="text-xl font-semibold mb-6">Quick Links</h3>
<ul class="space-y-3"> <ul class="space-y-3">
<li> <li>
<a <a
href="index.html" href="index.html"
class="text-neutral-300 hover:text-white transition-colors" class="text-neutral-300 hover:text-white transition-colors"
>Home</a >Home</a
@ -1470,15 +952,15 @@
class="fixed inset-0 bg-kh3-black z-50 flex items-center justify-center" class="fixed inset-0 bg-kh3-black z-50 flex items-center justify-center"
id="loadingScreen" id="loadingScreen"
> >
<div class="text-center"> <div class="text-center">
<div class="flex items-center gap-3 mb-8"> <a href="index.html" class="flex items-center gap-3 mb-8 hover:opacity-80 transition-opacity justify-center">
<img <img
src="assets/images/kh3_logo_dark.png" src="assets/images/kh3_logo_dark.png"
alt="KH3" alt="KH3"
class="w-16 h-16" class="w-16 h-16"
/> />
<span class="text-4xl font-bold tracking-wider">KH3</span> <span class="text-4xl font-bold tracking-wider">KH3</span>
</div> </a>
<div class="w-64 h-1 bg-neutral-800 rounded-full overflow-hidden"> <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 class="h-full bg-kh3-red rounded-full animate-pulse"></div>
</div> </div>
@ -2146,31 +1628,7 @@
} }
}); });
// Team section scroll animations
const teamSection = document.querySelector('.py-32.bg-kh3-black');
const teamCards = document.querySelectorAll('.team-card');
if (teamSection) {
const teamObserver = new IntersectionObserver(
(entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
// Add floating animation to all team cards
teamCards.forEach((card, index) => {
setTimeout(() => {
card.classList.add('floating');
}, index * 150); // Stagger the start for all 16 cards
});
teamObserver.unobserve(entry.target);
}
});
},
{ threshold: 0.3 }
);
teamObserver.observe(teamSection);
}
// Page transition functionality // Page transition functionality
function handlePageTransition(e) { function handlePageTransition(e) {
@ -2184,7 +1642,6 @@
document.querySelector('.dream-design-deliver'), document.querySelector('.dream-design-deliver'),
document.querySelector('.mission-vision'), document.querySelector('.mission-vision'),
document.querySelector('.values-section'), document.querySelector('.values-section'),
document.querySelector('.team-section'),
document.querySelector('main') document.querySelector('main')
].filter(el => el); ].filter(el => el);
@ -2218,6 +1675,35 @@
window.location.reload(); window.location.reload();
} }
}); });
// Auto-scroll to content after 3 seconds
setTimeout(() => {
// Scroll just slightly to hint at content below (1.1 viewport heights)
const targetScroll = window.innerHeight * 1.1;
// Create a smooth, gradual scroll animation
const startScroll = window.pageYOffset;
const distance = targetScroll - startScroll;
const duration = 4000; // 4 seconds for slower, smoother animation
let start = null;
function animateScroll(currentTime) {
if (start === null) start = currentTime;
const timeElapsed = currentTime - start;
const progress = Math.min(timeElapsed / duration, 1);
// Easing function for smooth deceleration
const easeOutQuart = 1 - Math.pow(1 - progress, 4);
window.scrollTo(0, startScroll + distance * easeOutQuart);
if (progress < 1) {
requestAnimationFrame(animateScroll);
}
}
requestAnimationFrame(animateScroll);
}, 3000);
</script> </script>
</body> </body>
</html> </html>

63
contact.html
View file

@ -26,10 +26,12 @@
id="navMenu" id="navMenu"
> >
<div class="p-8 flex flex-col h-full"> <div class="p-8 flex flex-col h-full">
<!-- Logo --> <!-- Logo -->
<div class="flex items-center gap-3 mb-12"> <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.png" alt="KH3" class="w-12 h-12" /> <img src="assets/images/kh3_logo.png" alt="KH3" class="w-12 h-12" />
<span class="text-white text-2xl font-bold tracking-wider">KH3</span> <span class="text-white text-2xl font-bold tracking-wider">KH3</span>
</a>
</div> </div>
<!-- Navigation Links - Inverted C Layout --> <!-- Navigation Links - Inverted C Layout -->
@ -89,8 +91,8 @@
</a> </a>
<!-- WHY - Slightly right --> <!-- WHY - Slightly right -->
<a <a
href="about.html" 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" 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=" style="
animation-delay: 0.2s; animation-delay: 0.2s;
@ -130,8 +132,8 @@
</a> </a>
<!-- HOW - More right --> <!-- HOW - More right -->
<a <a
href="services.html" 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" 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=" style="
animation-delay: 0.35s; animation-delay: 0.35s;
@ -220,6 +222,47 @@
> >
</a> </a>
<!-- WHO - New position -->
<a
href="who.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.65s;
animation-fill-mode: forwards;
animation-duration: 0.3s;
"
data-trans="crossfade"
>
<span class="md:hidden">WHO</span>
<span
class="hidden md:inline"
style="
animation-delay: 0.65s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>W</span
>
<span
class="hidden md:inline"
style="
animation-delay: 0.675s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>H</span
>
<span
class="hidden md:inline"
style="
animation-delay: 0.7s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>O</span
>
</a>
<!-- CONTACTS - More right --> <!-- CONTACTS - More right -->
<a <a
href="contact.html" href="contact.html"
@ -314,7 +357,7 @@
<!-- Static Logo and Menu --> <!-- Static Logo and Menu -->
<div class="fixed top-6 left-8 z-40"> <div class="fixed top-6 left-8 z-40">
<div class="flex items-center gap-3"> <a href="index.html" class="flex items-center gap-3 hover:opacity-80 transition-opacity">
<img <img
src="assets/images/kh3_logo_dark.png" src="assets/images/kh3_logo_dark.png"
alt="KH3" alt="KH3"
@ -323,8 +366,8 @@
<span class="text-white text-2xl font-bold tracking-wider drop-shadow-lg" <span class="text-white text-2xl font-bold tracking-wider drop-shadow-lg"
>KH3</span >KH3</span
> >
</a>
</div> </div>
</div>
<!-- Menu Toggle --> <!-- Menu Toggle -->
<div class="fixed top-6 right-8 z-40"> <div class="fixed top-6 right-8 z-40">
@ -650,14 +693,14 @@
<div <div
class="flex flex-col md:flex-row justify-between items-center space-y-6 md:space-y-0" class="flex flex-col md:flex-row justify-between items-center space-y-6 md:space-y-0"
> >
<div class="flex items-center gap-3"> <a href="index.html" class="flex items-center gap-3 hover:opacity-80 transition-opacity">
<img <img
src="assets/images/kh3_logo_dark.png" src="assets/images/kh3_logo_dark.png"
alt="KH3" alt="KH3"
class="w-12 h-12" class="w-12 h-12"
/> />
<span class="text-2xl font-bold tracking-wider">KH3</span> <span class="text-2xl font-bold tracking-wider">KH3</span>
</div> </a>
<div class="flex space-x-8"> <div class="flex space-x-8">
<a <a
href="contact.html" href="contact.html"

72
index.html
View file

@ -26,8 +26,15 @@
<div class="p-8 flex flex-col h-full"> <div class="p-8 flex flex-col h-full">
<!-- Logo --> <!-- Logo -->
<div class="flex items-center gap-3 mb-12"> <div class="flex items-center gap-3 mb-12">
<img src="assets/images/kh3_logo.png" alt="KH3" class="w-12 h-12" /> <a
<span class="text-white text-2xl font-bold tracking-wider">KH3</span> href="index.html"
class="flex items-center gap-3 hover:opacity-80 transition-opacity"
>
<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
>
</a>
</div> </div>
<!-- Navigation Links - Inverted C Layout --> <!-- Navigation Links - Inverted C Layout -->
@ -39,7 +46,7 @@
<!-- HOME - Top --> <!-- HOME - Top -->
<a <a
href="index.html" 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" 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=" style="
animation-delay: 0.05s; animation-delay: 0.05s;
animation-fill-mode: forwards; animation-fill-mode: forwards;
@ -217,6 +224,47 @@
> >
</a> </a>
<!-- WHO - New position -->
<a
href="who.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.65s;
animation-fill-mode: forwards;
animation-duration: 0.3s;
"
data-trans="crossfade"
>
<span class="md:hidden">WHO</span>
<span
class="hidden md:inline"
style="
animation-delay: 0.65s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>W</span
>
<span
class="hidden md:inline"
style="
animation-delay: 0.675s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>H</span
>
<span
class="hidden md:inline"
style="
animation-delay: 0.7s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>O</span
>
</a>
<!-- CONTACTS - More right --> <!-- CONTACTS - More right -->
<a <a
href="contact.html" href="contact.html"
@ -319,7 +367,10 @@
class="absolute top-8 left-8 z-20 opacity-0 animate-fade-in-left" class="absolute top-8 left-8 z-20 opacity-0 animate-fade-in-left"
style="animation-delay: 0.2s; animation-fill-mode: forwards" style="animation-delay: 0.2s; animation-fill-mode: forwards"
> >
<div class="flex items-center gap-3 animate-logo-float"> <a
href="index.html"
class="flex items-center gap-3 animate-logo-float hover:opacity-80 transition-opacity"
>
<img <img
src="assets/images/kh3_logo_dark.png" src="assets/images/kh3_logo_dark.png"
alt="KH3" alt="KH3"
@ -329,7 +380,7 @@
class="hidden sm:inline 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 >KH3</span
> >
</div> </a>
</div> </div>
<!-- Menu Grid --> <!-- Menu Grid -->
@ -475,11 +526,11 @@
> >
<div class="w-6 md:w-8 h-px bg-kh3-red"></div> <div class="w-6 md:w-8 h-px bg-kh3-red"></div>
<a <a
href="contact.html" href="who.html"
data-trans data-trans
class="text-white hover:text-kh3-red transition-colors uppercase tracking-wider text-sm md:text-base" class="text-white hover:text-kh3-red transition-colors uppercase tracking-wider text-sm md:text-base"
> >
CONTACTS WHO
</a> </a>
<div class="w-6 md:w-8 h-px bg-kh3-red"></div> <div class="w-6 md:w-8 h-px bg-kh3-red"></div>
</div> </div>
@ -519,14 +570,17 @@
id="loadingScreen" id="loadingScreen"
> >
<div class="text-center"> <div class="text-center">
<div class="flex items-center gap-3 mb-8"> <a
href="index.html"
class="flex items-center gap-3 mb-8 hover:opacity-80 transition-opacity justify-center"
>
<img <img
src="assets/images/kh3_logo_dark.png" src="assets/images/kh3_logo_dark.png"
alt="KH3" alt="KH3"
class="w-16 h-16" class="w-16 h-16"
/> />
<span class="text-4xl font-bold tracking-wider">KH3</span> <span class="text-4xl font-bold tracking-wider">KH3</span>
</div> </a>
<div class="w-64 h-1 bg-neutral-800 rounded-full overflow-hidden"> <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 class="h-full bg-kh3-red rounded-full animate-pulse"></div>
</div> </div>

83
js/main.js
View file

@ -22,21 +22,12 @@ function initNavigation() {
// Only initialize if elements exist // Only initialize if elements exist
if (menuToggle && navMenu && menuGrid) { if (menuToggle && navMenu && menuGrid) {
let isMenuOpen = false; let isMenuOpen = false;
let closeBtnEl = null;
menuToggle.addEventListener("click", () => { menuToggle.addEventListener("click", () => {
if (isMenuOpen) { if (isMenuOpen) {
// Close menu // Close menu
navMenu.classList.add("hidden"); navMenu.classList.add("hidden");
if (closeBtnEl) { // Transform back to grid
closeBtnEl.remove();
closeBtnEl = null;
}
isMenuOpen = false;
} else {
// Open menu
navMenu.classList.remove("hidden");
// Keep the grid icon as is, don't transform to X
menuGrid.innerHTML = ` menuGrid.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>
@ -48,26 +39,16 @@ function initNavigation() {
<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>
`; `;
isMenuOpen = false;
// Place red X close button at the bottom of the menu panel } else {
closeBtnEl = document.createElement("button"); // Open menu
closeBtnEl.setAttribute("aria-label", "Close navigation"); navMenu.classList.remove("hidden");
closeBtnEl.className = // Transform to red X
"absolute bottom-12 left-6 text-kh3-red hover:text-white transition-colors"; menuGrid.innerHTML = `
closeBtnEl.innerHTML = ` <svg class="w-6 h-6 text-kh3-red hover:text-white transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg> </svg>
`; `;
navMenu.appendChild(closeBtnEl);
closeBtnEl.addEventListener("click", () => {
navMenu.classList.add("hidden");
if (closeBtnEl) {
closeBtnEl.remove();
closeBtnEl = null;
}
isMenuOpen = false;
});
isMenuOpen = true; isMenuOpen = true;
} }
}); });
@ -76,10 +57,18 @@ function initNavigation() {
document.addEventListener("click", (e) => { document.addEventListener("click", (e) => {
if (!menuToggle.contains(e.target) && !navMenu.contains(e.target)) { if (!menuToggle.contains(e.target) && !navMenu.contains(e.target)) {
navMenu.classList.add("hidden"); navMenu.classList.add("hidden");
if (closeBtnEl) { // Transform back to grid
closeBtnEl.remove(); menuGrid.innerHTML = `
closeBtnEl = null; <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>
`;
isMenuOpen = false; isMenuOpen = false;
} }
}); });
@ -88,10 +77,18 @@ function initNavigation() {
navLinks.forEach((link) => { navLinks.forEach((link) => {
link.addEventListener("click", function () { link.addEventListener("click", function () {
navMenu.classList.add("hidden"); navMenu.classList.add("hidden");
if (closeBtnEl) { // Transform back to grid
closeBtnEl.remove(); menuGrid.innerHTML = `
closeBtnEl = null; <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>
`;
isMenuOpen = false; isMenuOpen = false;
}); });
}); });
@ -100,10 +97,18 @@ function initNavigation() {
document.addEventListener("keydown", function (e) { document.addEventListener("keydown", function (e) {
if (e.key === "Escape" && !navMenu.classList.contains("hidden")) { if (e.key === "Escape" && !navMenu.classList.contains("hidden")) {
navMenu.classList.add("hidden"); navMenu.classList.add("hidden");
if (closeBtnEl) { // Transform back to grid
closeBtnEl.remove(); menuGrid.innerHTML = `
closeBtnEl = null; <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>
`;
isMenuOpen = false; isMenuOpen = false;
} }
}); });

59
projects.html
View file

@ -25,8 +25,15 @@
<div class="p-8 flex flex-col h-full"> <div class="p-8 flex flex-col h-full">
<!-- Logo --> <!-- Logo -->
<div class="flex items-center gap-3 mb-12"> <div class="flex items-center gap-3 mb-12">
<img src="assets/images/kh3_logo.png" alt="KH3" class="w-12 h-12" /> <a
<span class="text-white text-2xl font-bold tracking-wider">KH3</span> href="index.html"
class="flex items-center gap-3 hover:opacity-80 transition-opacity"
>
<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
>
</a>
</div> </div>
<!-- Navigation Links - Inverted C Layout --> <!-- Navigation Links - Inverted C Layout -->
@ -216,6 +223,47 @@
> >
</a> </a>
<!-- WHO - New position -->
<a
href="who.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.65s;
animation-fill-mode: forwards;
animation-duration: 0.3s;
"
data-trans="crossfade"
>
<span class="md:hidden">WHO</span>
<span
class="hidden md:inline"
style="
animation-delay: 0.65s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>W</span
>
<span
class="hidden md:inline"
style="
animation-delay: 0.675s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>H</span
>
<span
class="hidden md:inline"
style="
animation-delay: 0.7s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>O</span
>
</a>
<!-- CONTACTS - More right --> <!-- CONTACTS - More right -->
<a <a
href="contact.html" href="contact.html"
@ -310,7 +358,10 @@
<!-- Static Logo and Menu --> <!-- Static Logo and Menu -->
<div class="fixed top-6 left-8 z-40"> <div class="fixed top-6 left-8 z-40">
<div class="flex items-center gap-3"> <a
href="index.html"
class="flex items-center gap-3 hover:opacity-80 transition-opacity"
>
<img <img
src="assets/images/kh3_logo_dark.png" src="assets/images/kh3_logo_dark.png"
alt="KH3" alt="KH3"
@ -320,7 +371,7 @@
class="text-white text-2xl font-bold tracking-wider drop-shadow-lg" class="text-white text-2xl font-bold tracking-wider drop-shadow-lg"
>KH3</span >KH3</span
> >
</div> </a>
</div> </div>
<!-- Menu Toggle with Transparent Background --> <!-- Menu Toggle with Transparent Background -->

82
services.html
View file

@ -175,11 +175,13 @@
id="navMenu" id="navMenu"
> >
<div class="p-8 flex flex-col h-full"> <div class="p-8 flex flex-col h-full">
<!-- Logo --> <!-- Logo -->
<div class="flex items-center gap-3 mb-12"> <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.png" alt="KH3" class="w-12 h-12" /> <img src="assets/images/kh3_logo.png" alt="KH3" class="w-12 h-12" />
<span class="text-white text-2xl font-bold tracking-wider">KH3</span> <span class="text-white text-2xl font-bold tracking-wider">KH3</span>
</div> </a>
</div>
<!-- Navigation Links - Inverted C Layout --> <!-- Navigation Links - Inverted C Layout -->
<nav class="flex-1 relative"> <nav class="flex-1 relative">
@ -368,6 +370,47 @@
> >
</a> </a>
<!-- WHO - New position -->
<a
href="who.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.65s;
animation-fill-mode: forwards;
animation-duration: 0.3s;
"
data-trans="crossfade"
>
<span class="md:hidden">WHO</span>
<span
class="hidden md:inline"
style="
animation-delay: 0.65s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>W</span
>
<span
class="hidden md:inline"
style="
animation-delay: 0.675s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>H</span
>
<span
class="hidden md:inline"
style="
animation-delay: 0.7s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>O</span
>
</a>
<!-- CONTACTS - More right --> <!-- CONTACTS - More right -->
<a <a
href="contact.html" href="contact.html"
@ -462,7 +505,7 @@
<!-- Static Logo and Menu (copied from about.html) --> <!-- Static Logo and Menu (copied from about.html) -->
<div class="fixed top-6 left-8 z-40"> <div class="fixed top-6 left-8 z-40">
<div class="flex items-center gap-3"> <a href="index.html" class="flex items-center gap-3 hover:opacity-80 transition-opacity">
<img <img
src="assets/images/kh3_logo_dark.png" src="assets/images/kh3_logo_dark.png"
alt="KH3" alt="KH3"
@ -472,7 +515,7 @@
class="text-white text-2xl font-bold tracking-wider drop-shadow-lg" class="text-white text-2xl font-bold tracking-wider drop-shadow-lg"
>KH3</span >KH3</span
> >
</div> </a>
</div> </div>
<!-- Menu Toggle with Transparent Background --> <!-- Menu Toggle with Transparent Background -->
@ -1153,6 +1196,35 @@
window.location.reload(); window.location.reload();
} }
}); });
// Auto-scroll to content after 3 seconds
setTimeout(() => {
// Scroll just slightly to hint at content below (1.1 viewport heights)
const targetScroll = window.innerHeight * 1.1;
// Create a smooth, gradual scroll animation
const startScroll = window.pageYOffset;
const distance = targetScroll - startScroll;
const duration = 4000; // 4 seconds for slower, smoother animation
let start = null;
function animateScroll(currentTime) {
if (start === null) start = currentTime;
const timeElapsed = currentTime - start;
const progress = Math.min(timeElapsed / duration, 1);
// Easing function for smooth deceleration
const easeOutQuart = 1 - Math.pow(1 - progress, 4);
window.scrollTo(0, startScroll + distance * easeOutQuart);
if (progress < 1) {
requestAnimationFrame(animateScroll);
}
}
requestAnimationFrame(animateScroll);
}, 3000);
</script> </script>
<script src="js/main.js"></script> <script src="js/main.js"></script>
<script> <script>

208
styles/output.css
View file

@ -733,6 +733,22 @@ video {
top: 7rem; top: 7rem;
} }
.-bottom-2 {
bottom: -0.5rem;
}
.-left-2 {
left: -0.5rem;
}
.-right-2 {
right: -0.5rem;
}
.-top-2 {
top: -0.5rem;
}
.-z-10 { .-z-10 {
z-index: -10; z-index: -10;
} }
@ -843,6 +859,14 @@ video {
margin-bottom: 0.75rem; margin-bottom: 0.75rem;
} }
.mb-1 {
margin-bottom: 0.25rem;
}
.ml-3 {
margin-left: 0.75rem;
}
.line-clamp-2 { .line-clamp-2 {
overflow: hidden; overflow: hidden;
display: -webkit-box; display: -webkit-box;
@ -950,6 +974,22 @@ video {
height: 20rem; height: 20rem;
} }
.h-0\.5 {
height: 0.125rem;
}
.h-24 {
height: 6rem;
}
.h-3\/4 {
height: 75%;
}
.h-4 {
height: 1rem;
}
.max-h-\[90vh\] { .max-h-\[90vh\] {
max-height: 90vh; max-height: 90vh;
} }
@ -1050,6 +1090,14 @@ video {
width: 1px; width: 1px;
} }
.w-1\/2 {
width: 50%;
}
.w-4 {
width: 1rem;
}
.min-w-0 { .min-w-0 {
min-width: 0px; min-width: 0px;
} }
@ -1133,11 +1181,41 @@ video {
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
} }
.-translate-x-1 {
--tw-translate-x: -0.25rem;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-x-full {
--tw-translate-x: -100%;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-y-1 {
--tw-translate-y: -0.25rem;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-1 {
--tw-translate-x: 0.25rem;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-y-1 {
--tw-translate-y: 0.25rem;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-45 { .rotate-45 {
--tw-rotate: 45deg; --tw-rotate: 45deg;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
} }
.-rotate-45 {
--tw-rotate: -45deg;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.scale-95 { .scale-95 {
--tw-scale-x: .95; --tw-scale-x: .95;
--tw-scale-y: .95; --tw-scale-y: .95;
@ -1464,6 +1542,14 @@ video {
border-top-width: 1px; border-top-width: 1px;
} }
.border-b-2 {
border-bottom-width: 2px;
}
.border-r-2 {
border-right-width: 2px;
}
.border-gray-300 { .border-gray-300 {
--tw-border-opacity: 1; --tw-border-opacity: 1;
border-color: rgb(209 213 219 / var(--tw-border-opacity, 1)); border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
@ -1599,6 +1685,10 @@ video {
background-color: rgb(0 0 0 / 0.95); background-color: rgb(0 0 0 / 0.95);
} }
.bg-transparent {
background-color: transparent;
}
.bg-opacity-20 { .bg-opacity-20 {
--tw-bg-opacity: 0.2; --tw-bg-opacity: 0.2;
} }
@ -1666,6 +1756,16 @@ video {
--tw-gradient-stops: var(--tw-gradient-from), #1f2937 var(--tw-gradient-via-position), var(--tw-gradient-to); --tw-gradient-stops: var(--tw-gradient-from), #1f2937 var(--tw-gradient-via-position), var(--tw-gradient-to);
} }
.via-kh3-red\/40 {
--tw-gradient-to: rgb(176 48 55 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), rgb(176 48 55 / 0.4) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-white\/10 {
--tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), rgb(255 255 255 / 0.1) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.to-\[\#1b2021\] { .to-\[\#1b2021\] {
--tw-gradient-to: #1b2021 var(--tw-gradient-to-position); --tw-gradient-to: #1b2021 var(--tw-gradient-to-position);
} }
@ -1806,6 +1906,31 @@ video {
padding-bottom: 0.25rem; padding-bottom: 0.25rem;
} }
.px-12 {
padding-left: 3rem;
padding-right: 3rem;
}
.py-6 {
padding-top: 1.5rem;
padding-bottom: 1.5rem;
}
.px-16 {
padding-left: 4rem;
padding-right: 4rem;
}
.py-8 {
padding-top: 2rem;
padding-bottom: 2rem;
}
.px-20 {
padding-left: 5rem;
padding-right: 5rem;
}
.pb-1 { .pb-1 {
padding-bottom: 0.25rem; padding-bottom: 0.25rem;
} }
@ -1850,6 +1975,14 @@ video {
padding-bottom: 0.5rem; padding-bottom: 0.5rem;
} }
.pl-20 {
padding-left: 5rem;
}
.pr-8 {
padding-right: 2rem;
}
.text-center { .text-center {
text-align: center; text-align: center;
} }
@ -2060,6 +2193,11 @@ video {
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
} }
.blur-xl {
--tw-blur: blur(24px);
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.drop-shadow-lg { .drop-shadow-lg {
--tw-drop-shadow: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.1)); --tw-drop-shadow: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.1));
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
@ -2176,6 +2314,15 @@ video {
border-color: rgb(176 48 55 / var(--tw-border-opacity, 1)); border-color: rgb(176 48 55 / var(--tw-border-opacity, 1));
} }
.hover\:border-red-700:hover {
--tw-border-opacity: 1;
border-color: rgb(185 28 28 / var(--tw-border-opacity, 1));
}
.hover\:border-white\/40:hover {
border-color: rgb(255 255 255 / 0.4);
}
.hover\:bg-kh3-grey\/30:hover { .hover\:bg-kh3-grey\/30:hover {
background-color: rgb(142 144 137 / 0.3); background-color: rgb(142 144 137 / 0.3);
} }
@ -2203,6 +2350,10 @@ video {
background-color: rgb(0 0 0 / 0.7); background-color: rgb(0 0 0 / 0.7);
} }
.hover\:tracking-\[0\.3em\]:hover {
letter-spacing: 0.3em;
}
.hover\:text-kh3-red:hover { .hover\:text-kh3-red:hover {
--tw-text-opacity: 1; --tw-text-opacity: 1;
color: rgb(176 48 55 / var(--tw-text-opacity, 1)); color: rgb(176 48 55 / var(--tw-text-opacity, 1));
@ -2218,6 +2369,26 @@ video {
color: rgb(33 40 41 / var(--tw-text-opacity, 1)); color: rgb(33 40 41 / var(--tw-text-opacity, 1));
} }
.hover\:opacity-80:hover {
opacity: 0.8;
}
.hover\:shadow-2xl:hover {
--tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
--tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.hover\:shadow-red-500\/25:hover {
--tw-shadow-color: rgb(239 68 68 / 0.25);
--tw-shadow: var(--tw-shadow-colored);
}
.hover\:shadow-red-500\/50:hover {
--tw-shadow-color: rgb(239 68 68 / 0.5);
--tw-shadow: var(--tw-shadow-colored);
}
.focus\:border-transparent:focus { .focus\:border-transparent:focus {
border-color: transparent; border-color: transparent;
} }
@ -2242,6 +2413,16 @@ video {
width: 8rem; width: 8rem;
} }
.group:hover .group-hover\:translate-x-2 {
--tw-translate-x: 0.5rem;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group:hover .group-hover\:translate-x-full {
--tw-translate-x: 100%;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group:hover .group-hover\:rotate-90 { .group:hover .group-hover\:rotate-90 {
--tw-rotate: 90deg; --tw-rotate: 90deg;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@ -2259,6 +2440,17 @@ video {
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
} }
@keyframes ping {
75%, 100% {
transform: scale(2);
opacity: 0;
}
}
.group:hover .group-hover\:animate-ping {
animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}
.group:hover .group-hover\:text-kh3-red { .group:hover .group-hover\:text-kh3-red {
--tw-text-opacity: 1; --tw-text-opacity: 1;
color: rgb(176 48 55 / var(--tw-text-opacity, 1)); color: rgb(176 48 55 / var(--tw-text-opacity, 1));
@ -2284,6 +2476,12 @@ video {
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
} }
.group:hover .group-hover\:shadow-2xl {
--tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
--tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.group:hover .group-hover\:shadow-red-500\/20 { .group:hover .group-hover\:shadow-red-500\/20 {
--tw-shadow-color: rgb(239 68 68 / 0.2); --tw-shadow-color: rgb(239 68 68 / 0.2);
--tw-shadow: var(--tw-shadow-colored); --tw-shadow: var(--tw-shadow-colored);
@ -2294,6 +2492,16 @@ video {
--tw-shadow: var(--tw-shadow-colored); --tw-shadow: var(--tw-shadow-colored);
} }
.group:hover .group-hover\:shadow-red-500\/30 {
--tw-shadow-color: rgb(239 68 68 / 0.3);
--tw-shadow: var(--tw-shadow-colored);
}
.group:hover .group-hover\:blur-2xl {
--tw-blur: blur(40px);
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
@media (min-width: 640px) { @media (min-width: 640px) {
.sm\:inline { .sm\:inline {
display: inline; display: inline;

1833
who.html Normal file
View file

File diff suppressed because it is too large Load diff