mirror of
https://git.kh3group.com/georgebiri/kh3_website.git
synced 2026-10-16 19:31:47 +00:00
This commit is contained in:
parent
ffad4eda8a
commit
1c9a335d26
6 changed files with 99 additions and 728 deletions
170
about.html
170
about.html
|
|
@ -3,7 +3,7 @@
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>About Us - KH3</title>
|
<title>Why - KH3</title>
|
||||||
<link rel="stylesheet" href="styles/main.css" />
|
<link rel="stylesheet" href="styles/main.css" />
|
||||||
<meta
|
<meta
|
||||||
name="description"
|
name="description"
|
||||||
|
|
@ -48,7 +48,7 @@
|
||||||
data-trans="crossfade"
|
data-trans="crossfade"
|
||||||
>
|
>
|
||||||
<span class="md:hidden">HOME</span>
|
<span class="md:hidden">HOME</span>
|
||||||
<span
|
<span
|
||||||
class="hidden md:inline"
|
class="hidden md:inline"
|
||||||
style="
|
style="
|
||||||
animation-delay: 0.05s;
|
animation-delay: 0.05s;
|
||||||
|
|
@ -57,7 +57,7 @@
|
||||||
"
|
"
|
||||||
>H</span
|
>H</span
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
class="hidden md:inline"
|
class="hidden md:inline"
|
||||||
style="
|
style="
|
||||||
animation-delay: 0.075s;
|
animation-delay: 0.075s;
|
||||||
|
|
@ -86,9 +86,9 @@
|
||||||
>
|
>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<!-- ABOUT US - Slightly right -->
|
<!-- WHY - Slightly right -->
|
||||||
<a
|
<a
|
||||||
href="about.html"
|
href="about.html"
|
||||||
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"
|
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="
|
style="
|
||||||
animation-delay: 0.2s;
|
animation-delay: 0.2s;
|
||||||
|
|
@ -96,7 +96,7 @@
|
||||||
animation-duration: 0.3s;
|
animation-duration: 0.3s;
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
<span class="md:hidden">ABOUT US</span>
|
<span class="md:hidden">WHY</span>
|
||||||
<span
|
<span
|
||||||
class="hidden md:inline"
|
class="hidden md:inline"
|
||||||
style="
|
style="
|
||||||
|
|
@ -104,7 +104,7 @@
|
||||||
animation-fill-mode: forwards;
|
animation-fill-mode: forwards;
|
||||||
animation-duration: 0.15s;
|
animation-duration: 0.15s;
|
||||||
"
|
"
|
||||||
>A</span
|
>W</span
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
class="hidden md:inline"
|
class="hidden md:inline"
|
||||||
|
|
@ -113,7 +113,7 @@
|
||||||
animation-fill-mode: forwards;
|
animation-fill-mode: forwards;
|
||||||
animation-duration: 0.15s;
|
animation-duration: 0.15s;
|
||||||
"
|
"
|
||||||
>B</span
|
>H</span
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
class="hidden md:inline"
|
class="hidden md:inline"
|
||||||
|
|
@ -122,56 +122,11 @@
|
||||||
animation-fill-mode: forwards;
|
animation-fill-mode: forwards;
|
||||||
animation-duration: 0.15s;
|
animation-duration: 0.15s;
|
||||||
"
|
"
|
||||||
>O</span
|
>Y</span
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="hidden md:inline"
|
|
||||||
style="
|
|
||||||
animation-delay: 0.275s;
|
|
||||||
animation-fill-mode: forwards;
|
|
||||||
animation-duration: 0.15s;
|
|
||||||
"
|
|
||||||
>U</span
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="hidden md:inline"
|
|
||||||
style="
|
|
||||||
animation-delay: 0.3s;
|
|
||||||
animation-fill-mode: forwards;
|
|
||||||
animation-duration: 0.15s;
|
|
||||||
"
|
|
||||||
>T</span
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="hidden md:inline"
|
|
||||||
style="
|
|
||||||
animation-delay: 0.325s;
|
|
||||||
animation-fill-mode: forwards;
|
|
||||||
animation-duration: 0.15s;
|
|
||||||
"
|
|
||||||
> </span
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="hidden md:inline"
|
|
||||||
style="
|
|
||||||
animation-delay: 0.35s;
|
|
||||||
animation-fill-mode: forwards;
|
|
||||||
animation-duration: 0.15s;
|
|
||||||
"
|
|
||||||
>U</span
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="hidden md:inline"
|
|
||||||
style="
|
|
||||||
animation-delay: 0.375s;
|
|
||||||
animation-fill-mode: forwards;
|
|
||||||
animation-duration: 0.15s;
|
|
||||||
"
|
|
||||||
>S</span
|
|
||||||
>
|
>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<!-- SERVICES - 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"
|
||||||
|
|
@ -182,7 +137,7 @@
|
||||||
"
|
"
|
||||||
data-trans="crossfade"
|
data-trans="crossfade"
|
||||||
>
|
>
|
||||||
<span class="md:hidden">SERVICES</span>
|
<span class="md:hidden">HOW</span>
|
||||||
<span
|
<span
|
||||||
class="hidden md:inline"
|
class="hidden md:inline"
|
||||||
style="
|
style="
|
||||||
|
|
@ -190,7 +145,7 @@
|
||||||
animation-fill-mode: forwards;
|
animation-fill-mode: forwards;
|
||||||
animation-duration: 0.15s;
|
animation-duration: 0.15s;
|
||||||
"
|
"
|
||||||
>S</span
|
>H</span
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
class="hidden md:inline"
|
class="hidden md:inline"
|
||||||
|
|
@ -199,7 +154,7 @@
|
||||||
animation-fill-mode: forwards;
|
animation-fill-mode: forwards;
|
||||||
animation-duration: 0.15s;
|
animation-duration: 0.15s;
|
||||||
"
|
"
|
||||||
>E</span
|
>O</span
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
class="hidden md:inline"
|
class="hidden md:inline"
|
||||||
|
|
@ -208,56 +163,11 @@
|
||||||
animation-fill-mode: forwards;
|
animation-fill-mode: forwards;
|
||||||
animation-duration: 0.15s;
|
animation-duration: 0.15s;
|
||||||
"
|
"
|
||||||
>R</span
|
>W</span
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="hidden md:inline"
|
|
||||||
style="
|
|
||||||
animation-delay: 0.425s;
|
|
||||||
animation-fill-mode: forwards;
|
|
||||||
animation-duration: 0.15s;
|
|
||||||
"
|
|
||||||
>V</span
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="hidden md:inline"
|
|
||||||
style="
|
|
||||||
animation-delay: 0.45s;
|
|
||||||
animation-fill-mode: forwards;
|
|
||||||
animation-duration: 0.15s;
|
|
||||||
"
|
|
||||||
>I</span
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="hidden md:inline"
|
|
||||||
style="
|
|
||||||
animation-delay: 0.475s;
|
|
||||||
animation-fill-mode: forwards;
|
|
||||||
animation-duration: 0.15s;
|
|
||||||
"
|
|
||||||
>C</span
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="hidden md:inline"
|
|
||||||
style="
|
|
||||||
animation-delay: 0.5s;
|
|
||||||
animation-fill-mode: forwards;
|
|
||||||
animation-duration: 0.15s;
|
|
||||||
"
|
|
||||||
>E</span
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="hidden md:inline"
|
|
||||||
style="
|
|
||||||
animation-delay: 0.525s;
|
|
||||||
animation-fill-mode: forwards;
|
|
||||||
animation-duration: 0.15s;
|
|
||||||
"
|
|
||||||
>S</span
|
|
||||||
>
|
>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<!-- PROJECTS - Most right -->
|
<!-- WHAT - Most right -->
|
||||||
<a
|
<a
|
||||||
href="projects.html"
|
href="projects.html"
|
||||||
class="block text-white text-xl md:text-lg font-medium hover:text-kh3-red transition-colors ml-0 md:ml-20 font-montserrat opacity-0 animate-fade-in-left"
|
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"
|
||||||
|
|
@ -268,7 +178,7 @@
|
||||||
"
|
"
|
||||||
data-trans="crossfade"
|
data-trans="crossfade"
|
||||||
>
|
>
|
||||||
<span class="md:hidden">PROJECTS</span>
|
<span class="md:hidden">WHAT</span>
|
||||||
<span
|
<span
|
||||||
class="hidden md:inline"
|
class="hidden md:inline"
|
||||||
style="
|
style="
|
||||||
|
|
@ -276,7 +186,7 @@
|
||||||
animation-fill-mode: forwards;
|
animation-fill-mode: forwards;
|
||||||
animation-duration: 0.15s;
|
animation-duration: 0.15s;
|
||||||
"
|
"
|
||||||
>P</span
|
>W</span
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
class="hidden md:inline"
|
class="hidden md:inline"
|
||||||
|
|
@ -285,7 +195,7 @@
|
||||||
animation-fill-mode: forwards;
|
animation-fill-mode: forwards;
|
||||||
animation-duration: 0.15s;
|
animation-duration: 0.15s;
|
||||||
"
|
"
|
||||||
>R</span
|
>H</span
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
class="hidden md:inline"
|
class="hidden md:inline"
|
||||||
|
|
@ -294,7 +204,7 @@
|
||||||
animation-fill-mode: forwards;
|
animation-fill-mode: forwards;
|
||||||
animation-duration: 0.15s;
|
animation-duration: 0.15s;
|
||||||
"
|
"
|
||||||
>O</span
|
>A</span
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
class="hidden md:inline"
|
class="hidden md:inline"
|
||||||
|
|
@ -303,44 +213,8 @@
|
||||||
animation-fill-mode: forwards;
|
animation-fill-mode: forwards;
|
||||||
animation-duration: 0.15s;
|
animation-duration: 0.15s;
|
||||||
"
|
"
|
||||||
>J</span
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="hidden md:inline"
|
|
||||||
style="
|
|
||||||
animation-delay: 0.65s;
|
|
||||||
animation-fill-mode: forwards;
|
|
||||||
animation-duration: 0.15s;
|
|
||||||
"
|
|
||||||
>E</span
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="hidden md:inline"
|
|
||||||
style="
|
|
||||||
animation-delay: 0.675s;
|
|
||||||
animation-fill-mode: forwards;
|
|
||||||
animation-duration: 0.15s;
|
|
||||||
"
|
|
||||||
>C</span
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="hidden md:inline"
|
|
||||||
style="
|
|
||||||
animation-delay: 0.7s;
|
|
||||||
animation-fill-mode: forwards;
|
|
||||||
animation-duration: 0.15s;
|
|
||||||
"
|
|
||||||
>T</span
|
>T</span
|
||||||
>
|
>
|
||||||
<span
|
|
||||||
class="hidden md:inline"
|
|
||||||
style="
|
|
||||||
animation-delay: 0.725s;
|
|
||||||
animation-fill-mode: forwards;
|
|
||||||
animation-duration: 0.15s;
|
|
||||||
"
|
|
||||||
>S</span
|
|
||||||
>
|
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<!-- CONTACTS - More right -->
|
<!-- CONTACTS - More right -->
|
||||||
|
|
@ -501,7 +375,7 @@
|
||||||
<h1
|
<h1
|
||||||
class="whitespace-nowrap text-4xl md:text-6xl tracking-[0.2em] font-bold"
|
class="whitespace-nowrap text-4xl md:text-6xl tracking-[0.2em] font-bold"
|
||||||
>
|
>
|
||||||
ABOUT US
|
WHY
|
||||||
</h1>
|
</h1>
|
||||||
<div class="flex-1 h-px bg-white"></div>
|
<div class="flex-1 h-px bg-white"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -778,7 +652,7 @@
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- Values Section -->
|
<!-- Values Section -->
|
||||||
<section class="py-32 bg-white text-kh3-black values-section">
|
<section class="py-32 bg-white text-kh3-black values-section">
|
||||||
<div class="container mx-auto px-8 max-w-6xl">
|
<div class="container mx-auto px-8 max-w-6xl">
|
||||||
<div class="text-center mb-20">
|
<div class="text-center mb-20">
|
||||||
|
|
|
||||||
160
contact.html
160
contact.html
|
|
@ -39,8 +39,8 @@
|
||||||
<!-- Navigation items in inverted C shape -->
|
<!-- Navigation items in inverted C shape -->
|
||||||
<div class="space-y-6">
|
<div class="space-y-6">
|
||||||
<!-- 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 hover:text-kh3-red transition-colors ml-0 font-montserrat opacity-0 animate-fade-in-left"
|
||||||
style="
|
style="
|
||||||
animation-delay: 0.05s;
|
animation-delay: 0.05s;
|
||||||
|
|
@ -88,7 +88,7 @@
|
||||||
>
|
>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<!-- ABOUT US - 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"
|
||||||
|
|
@ -99,7 +99,7 @@
|
||||||
"
|
"
|
||||||
data-trans="crossfade"
|
data-trans="crossfade"
|
||||||
>
|
>
|
||||||
<span class="md:hidden">ABOUT US</span>
|
<span class="md:hidden">WHY</span>
|
||||||
<span
|
<span
|
||||||
class="hidden md:inline"
|
class="hidden md:inline"
|
||||||
style="
|
style="
|
||||||
|
|
@ -107,7 +107,7 @@
|
||||||
animation-fill-mode: forwards;
|
animation-fill-mode: forwards;
|
||||||
animation-duration: 0.15s;
|
animation-duration: 0.15s;
|
||||||
"
|
"
|
||||||
>A</span
|
>W</span
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
class="hidden md:inline"
|
class="hidden md:inline"
|
||||||
|
|
@ -116,7 +116,7 @@
|
||||||
animation-fill-mode: forwards;
|
animation-fill-mode: forwards;
|
||||||
animation-duration: 0.15s;
|
animation-duration: 0.15s;
|
||||||
"
|
"
|
||||||
>B</span
|
>H</span
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
class="hidden md:inline"
|
class="hidden md:inline"
|
||||||
|
|
@ -125,56 +125,11 @@
|
||||||
animation-fill-mode: forwards;
|
animation-fill-mode: forwards;
|
||||||
animation-duration: 0.15s;
|
animation-duration: 0.15s;
|
||||||
"
|
"
|
||||||
>O</span
|
>Y</span
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="hidden md:inline"
|
|
||||||
style="
|
|
||||||
animation-delay: 0.275s;
|
|
||||||
animation-fill-mode: forwards;
|
|
||||||
animation-duration: 0.15s;
|
|
||||||
"
|
|
||||||
>U</span
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="hidden md:inline"
|
|
||||||
style="
|
|
||||||
animation-delay: 0.3s;
|
|
||||||
animation-fill-mode: forwards;
|
|
||||||
animation-duration: 0.15s;
|
|
||||||
"
|
|
||||||
>T</span
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="hidden md:inline"
|
|
||||||
style="
|
|
||||||
animation-delay: 0.325s;
|
|
||||||
animation-fill-mode: forwards;
|
|
||||||
animation-duration: 0.15s;
|
|
||||||
"
|
|
||||||
> </span
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="hidden md:inline"
|
|
||||||
style="
|
|
||||||
animation-delay: 0.35s;
|
|
||||||
animation-fill-mode: forwards;
|
|
||||||
animation-duration: 0.15s;
|
|
||||||
"
|
|
||||||
>U</span
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="hidden md:inline"
|
|
||||||
style="
|
|
||||||
animation-delay: 0.375s;
|
|
||||||
animation-fill-mode: forwards;
|
|
||||||
animation-duration: 0.15s;
|
|
||||||
"
|
|
||||||
>S</span
|
|
||||||
>
|
>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<!-- SERVICES - 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"
|
||||||
|
|
@ -185,7 +140,7 @@
|
||||||
"
|
"
|
||||||
data-trans="crossfade"
|
data-trans="crossfade"
|
||||||
>
|
>
|
||||||
<span class="md:hidden">SERVICES</span>
|
<span class="md:hidden">HOW</span>
|
||||||
<span
|
<span
|
||||||
class="hidden md:inline"
|
class="hidden md:inline"
|
||||||
style="
|
style="
|
||||||
|
|
@ -193,7 +148,7 @@
|
||||||
animation-fill-mode: forwards;
|
animation-fill-mode: forwards;
|
||||||
animation-duration: 0.15s;
|
animation-duration: 0.15s;
|
||||||
"
|
"
|
||||||
>S</span
|
>H</span
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
class="hidden md:inline"
|
class="hidden md:inline"
|
||||||
|
|
@ -202,7 +157,7 @@
|
||||||
animation-fill-mode: forwards;
|
animation-fill-mode: forwards;
|
||||||
animation-duration: 0.15s;
|
animation-duration: 0.15s;
|
||||||
"
|
"
|
||||||
>E</span
|
>O</span
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
class="hidden md:inline"
|
class="hidden md:inline"
|
||||||
|
|
@ -211,56 +166,11 @@
|
||||||
animation-fill-mode: forwards;
|
animation-fill-mode: forwards;
|
||||||
animation-duration: 0.15s;
|
animation-duration: 0.15s;
|
||||||
"
|
"
|
||||||
>R</span
|
>W</span
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="hidden md:inline"
|
|
||||||
style="
|
|
||||||
animation-delay: 0.425s;
|
|
||||||
animation-fill-mode: forwards;
|
|
||||||
animation-duration: 0.15s;
|
|
||||||
"
|
|
||||||
>V</span
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="hidden md:inline"
|
|
||||||
style="
|
|
||||||
animation-delay: 0.45s;
|
|
||||||
animation-fill-mode: forwards;
|
|
||||||
animation-duration: 0.15s;
|
|
||||||
"
|
|
||||||
>I</span
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="hidden md:inline"
|
|
||||||
style="
|
|
||||||
animation-delay: 0.475s;
|
|
||||||
animation-fill-mode: forwards;
|
|
||||||
animation-duration: 0.15s;
|
|
||||||
"
|
|
||||||
>C</span
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="hidden md:inline"
|
|
||||||
style="
|
|
||||||
animation-delay: 0.5s;
|
|
||||||
animation-fill-mode: forwards;
|
|
||||||
animation-duration: 0.15s;
|
|
||||||
"
|
|
||||||
>E</span
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="hidden md:inline"
|
|
||||||
style="
|
|
||||||
animation-delay: 0.525s;
|
|
||||||
animation-fill-mode: forwards;
|
|
||||||
animation-duration: 0.15s;
|
|
||||||
"
|
|
||||||
>S</span
|
|
||||||
>
|
>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<!-- PROJECTS - Most right -->
|
<!-- WHAT - Most right -->
|
||||||
<a
|
<a
|
||||||
href="projects.html"
|
href="projects.html"
|
||||||
class="block text-white text-xl md:text-lg font-medium hover:text-kh3-red transition-colors ml-0 md:ml-20 font-montserrat opacity-0 animate-fade-in-left"
|
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"
|
||||||
|
|
@ -271,7 +181,7 @@
|
||||||
"
|
"
|
||||||
data-trans="crossfade"
|
data-trans="crossfade"
|
||||||
>
|
>
|
||||||
<span class="md:hidden">PROJECTS</span>
|
<span class="md:hidden">WHAT</span>
|
||||||
<span
|
<span
|
||||||
class="hidden md:inline"
|
class="hidden md:inline"
|
||||||
style="
|
style="
|
||||||
|
|
@ -279,7 +189,7 @@
|
||||||
animation-fill-mode: forwards;
|
animation-fill-mode: forwards;
|
||||||
animation-duration: 0.15s;
|
animation-duration: 0.15s;
|
||||||
"
|
"
|
||||||
>P</span
|
>W</span
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
class="hidden md:inline"
|
class="hidden md:inline"
|
||||||
|
|
@ -288,7 +198,7 @@
|
||||||
animation-fill-mode: forwards;
|
animation-fill-mode: forwards;
|
||||||
animation-duration: 0.15s;
|
animation-duration: 0.15s;
|
||||||
"
|
"
|
||||||
>R</span
|
>H</span
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
class="hidden md:inline"
|
class="hidden md:inline"
|
||||||
|
|
@ -297,7 +207,7 @@
|
||||||
animation-fill-mode: forwards;
|
animation-fill-mode: forwards;
|
||||||
animation-duration: 0.15s;
|
animation-duration: 0.15s;
|
||||||
"
|
"
|
||||||
>O</span
|
>A</span
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
class="hidden md:inline"
|
class="hidden md:inline"
|
||||||
|
|
@ -306,44 +216,8 @@
|
||||||
animation-fill-mode: forwards;
|
animation-fill-mode: forwards;
|
||||||
animation-duration: 0.15s;
|
animation-duration: 0.15s;
|
||||||
"
|
"
|
||||||
>J</span
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="hidden md:inline"
|
|
||||||
style="
|
|
||||||
animation-delay: 0.65s;
|
|
||||||
animation-fill-mode: forwards;
|
|
||||||
animation-duration: 0.15s;
|
|
||||||
"
|
|
||||||
>E</span
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="hidden md:inline"
|
|
||||||
style="
|
|
||||||
animation-delay: 0.675s;
|
|
||||||
animation-fill-mode: forwards;
|
|
||||||
animation-duration: 0.15s;
|
|
||||||
"
|
|
||||||
>C</span
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="hidden md:inline"
|
|
||||||
style="
|
|
||||||
animation-delay: 0.7s;
|
|
||||||
animation-fill-mode: forwards;
|
|
||||||
animation-duration: 0.15s;
|
|
||||||
"
|
|
||||||
>T</span
|
>T</span
|
||||||
>
|
>
|
||||||
<span
|
|
||||||
class="hidden md:inline"
|
|
||||||
style="
|
|
||||||
animation-delay: 0.725s;
|
|
||||||
animation-fill-mode: forwards;
|
|
||||||
animation-duration: 0.15s;
|
|
||||||
"
|
|
||||||
>S</span
|
|
||||||
>
|
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<!-- CONTACTS - More right -->
|
<!-- CONTACTS - More right -->
|
||||||
|
|
|
||||||
162
index.html
162
index.html
|
|
@ -85,7 +85,7 @@
|
||||||
>
|
>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<!-- ABOUT US - 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"
|
||||||
|
|
@ -96,7 +96,7 @@
|
||||||
"
|
"
|
||||||
data-trans="crossfade"
|
data-trans="crossfade"
|
||||||
>
|
>
|
||||||
<span class="md:hidden">ABOUT US</span>
|
<span class="md:hidden">WHY</span>
|
||||||
<span
|
<span
|
||||||
class="hidden md:inline"
|
class="hidden md:inline"
|
||||||
style="
|
style="
|
||||||
|
|
@ -104,7 +104,7 @@
|
||||||
animation-fill-mode: forwards;
|
animation-fill-mode: forwards;
|
||||||
animation-duration: 0.15s;
|
animation-duration: 0.15s;
|
||||||
"
|
"
|
||||||
>A</span
|
>W</span
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
class="hidden md:inline"
|
class="hidden md:inline"
|
||||||
|
|
@ -113,7 +113,7 @@
|
||||||
animation-fill-mode: forwards;
|
animation-fill-mode: forwards;
|
||||||
animation-duration: 0.15s;
|
animation-duration: 0.15s;
|
||||||
"
|
"
|
||||||
>B</span
|
>H</span
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
class="hidden md:inline"
|
class="hidden md:inline"
|
||||||
|
|
@ -122,56 +122,11 @@
|
||||||
animation-fill-mode: forwards;
|
animation-fill-mode: forwards;
|
||||||
animation-duration: 0.15s;
|
animation-duration: 0.15s;
|
||||||
"
|
"
|
||||||
>O</span
|
>Y</span
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="hidden md:inline"
|
|
||||||
style="
|
|
||||||
animation-delay: 0.275s;
|
|
||||||
animation-fill-mode: forwards;
|
|
||||||
animation-duration: 0.15s;
|
|
||||||
"
|
|
||||||
>U</span
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="hidden md:inline"
|
|
||||||
style="
|
|
||||||
animation-delay: 0.3s;
|
|
||||||
animation-fill-mode: forwards;
|
|
||||||
animation-duration: 0.15s;
|
|
||||||
"
|
|
||||||
>T</span
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="hidden md:inline"
|
|
||||||
style="
|
|
||||||
animation-delay: 0.325s;
|
|
||||||
animation-fill-mode: forwards;
|
|
||||||
animation-duration: 0.15s;
|
|
||||||
"
|
|
||||||
> </span
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="hidden md:inline"
|
|
||||||
style="
|
|
||||||
animation-delay: 0.35s;
|
|
||||||
animation-fill-mode: forwards;
|
|
||||||
animation-duration: 0.15s;
|
|
||||||
"
|
|
||||||
>U</span
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="hidden md:inline"
|
|
||||||
style="
|
|
||||||
animation-delay: 0.375s;
|
|
||||||
animation-fill-mode: forwards;
|
|
||||||
animation-duration: 0.15s;
|
|
||||||
"
|
|
||||||
>S</span
|
|
||||||
>
|
>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<!-- SERVICES - 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"
|
||||||
|
|
@ -182,7 +137,7 @@
|
||||||
"
|
"
|
||||||
data-trans="crossfade"
|
data-trans="crossfade"
|
||||||
>
|
>
|
||||||
<span class="md:hidden">SERVICES</span>
|
<span class="md:hidden">HOW</span>
|
||||||
<span
|
<span
|
||||||
class="hidden md:inline"
|
class="hidden md:inline"
|
||||||
style="
|
style="
|
||||||
|
|
@ -190,7 +145,7 @@
|
||||||
animation-fill-mode: forwards;
|
animation-fill-mode: forwards;
|
||||||
animation-duration: 0.15s;
|
animation-duration: 0.15s;
|
||||||
"
|
"
|
||||||
>S</span
|
>H</span
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
class="hidden md:inline"
|
class="hidden md:inline"
|
||||||
|
|
@ -199,7 +154,7 @@
|
||||||
animation-fill-mode: forwards;
|
animation-fill-mode: forwards;
|
||||||
animation-duration: 0.15s;
|
animation-duration: 0.15s;
|
||||||
"
|
"
|
||||||
>E</span
|
>O</span
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
class="hidden md:inline"
|
class="hidden md:inline"
|
||||||
|
|
@ -208,56 +163,11 @@
|
||||||
animation-fill-mode: forwards;
|
animation-fill-mode: forwards;
|
||||||
animation-duration: 0.15s;
|
animation-duration: 0.15s;
|
||||||
"
|
"
|
||||||
>R</span
|
>W</span
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="hidden md:inline"
|
|
||||||
style="
|
|
||||||
animation-delay: 0.425s;
|
|
||||||
animation-fill-mode: forwards;
|
|
||||||
animation-duration: 0.15s;
|
|
||||||
"
|
|
||||||
>V</span
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="hidden md:inline"
|
|
||||||
style="
|
|
||||||
animation-delay: 0.45s;
|
|
||||||
animation-fill-mode: forwards;
|
|
||||||
animation-duration: 0.15s;
|
|
||||||
"
|
|
||||||
>I</span
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="hidden md:inline"
|
|
||||||
style="
|
|
||||||
animation-delay: 0.475s;
|
|
||||||
animation-fill-mode: forwards;
|
|
||||||
animation-duration: 0.15s;
|
|
||||||
"
|
|
||||||
>C</span
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="hidden md:inline"
|
|
||||||
style="
|
|
||||||
animation-delay: 0.5s;
|
|
||||||
animation-fill-mode: forwards;
|
|
||||||
animation-duration: 0.15s;
|
|
||||||
"
|
|
||||||
>E</span
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="hidden md:inline"
|
|
||||||
style="
|
|
||||||
animation-delay: 0.525s;
|
|
||||||
animation-fill-mode: forwards;
|
|
||||||
animation-duration: 0.15s;
|
|
||||||
"
|
|
||||||
>S</span
|
|
||||||
>
|
>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<!-- PROJECTS - Most right -->
|
<!-- WHAT - Most right -->
|
||||||
<a
|
<a
|
||||||
href="projects.html"
|
href="projects.html"
|
||||||
class="block text-white text-xl md:text-lg font-medium hover:text-kh3-red transition-colors ml-0 md:ml-20 font-montserrat opacity-0 animate-fade-in-left"
|
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"
|
||||||
|
|
@ -268,7 +178,7 @@
|
||||||
"
|
"
|
||||||
data-trans="crossfade"
|
data-trans="crossfade"
|
||||||
>
|
>
|
||||||
<span class="md:hidden">PROJECTS</span>
|
<span class="md:hidden">WHAT</span>
|
||||||
<span
|
<span
|
||||||
class="hidden md:inline"
|
class="hidden md:inline"
|
||||||
style="
|
style="
|
||||||
|
|
@ -276,7 +186,7 @@
|
||||||
animation-fill-mode: forwards;
|
animation-fill-mode: forwards;
|
||||||
animation-duration: 0.15s;
|
animation-duration: 0.15s;
|
||||||
"
|
"
|
||||||
>P</span
|
>W</span
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
class="hidden md:inline"
|
class="hidden md:inline"
|
||||||
|
|
@ -285,7 +195,7 @@
|
||||||
animation-fill-mode: forwards;
|
animation-fill-mode: forwards;
|
||||||
animation-duration: 0.15s;
|
animation-duration: 0.15s;
|
||||||
"
|
"
|
||||||
>R</span
|
>H</span
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
class="hidden md:inline"
|
class="hidden md:inline"
|
||||||
|
|
@ -294,7 +204,7 @@
|
||||||
animation-fill-mode: forwards;
|
animation-fill-mode: forwards;
|
||||||
animation-duration: 0.15s;
|
animation-duration: 0.15s;
|
||||||
"
|
"
|
||||||
>O</span
|
>A</span
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
class="hidden md:inline"
|
class="hidden md:inline"
|
||||||
|
|
@ -303,44 +213,8 @@
|
||||||
animation-fill-mode: forwards;
|
animation-fill-mode: forwards;
|
||||||
animation-duration: 0.15s;
|
animation-duration: 0.15s;
|
||||||
"
|
"
|
||||||
>J</span
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="hidden md:inline"
|
|
||||||
style="
|
|
||||||
animation-delay: 0.65s;
|
|
||||||
animation-fill-mode: forwards;
|
|
||||||
animation-duration: 0.15s;
|
|
||||||
"
|
|
||||||
>E</span
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="hidden md:inline"
|
|
||||||
style="
|
|
||||||
animation-delay: 0.675s;
|
|
||||||
animation-fill-mode: forwards;
|
|
||||||
animation-duration: 0.15s;
|
|
||||||
"
|
|
||||||
>C</span
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="hidden md:inline"
|
|
||||||
style="
|
|
||||||
animation-delay: 0.7s;
|
|
||||||
animation-fill-mode: forwards;
|
|
||||||
animation-duration: 0.15s;
|
|
||||||
"
|
|
||||||
>T</span
|
>T</span
|
||||||
>
|
>
|
||||||
<span
|
|
||||||
class="hidden md:inline"
|
|
||||||
style="
|
|
||||||
animation-delay: 0.725s;
|
|
||||||
animation-fill-mode: forwards;
|
|
||||||
animation-duration: 0.15s;
|
|
||||||
"
|
|
||||||
>S</span
|
|
||||||
>
|
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<!-- CONTACTS - More right -->
|
<!-- CONTACTS - More right -->
|
||||||
|
|
@ -580,7 +454,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- About Us Button - Bottom Center -->
|
<!-- Why Button - Bottom Center -->
|
||||||
<div
|
<div
|
||||||
class="absolute bottom-8 left-1/2 transform -translate-x-1/2 z-20 opacity-0 hidden md:block"
|
class="absolute bottom-8 left-1/2 transform -translate-x-1/2 z-20 opacity-0 hidden md:block"
|
||||||
style="animation: fadeInUp 0.8s ease-out 1.2s forwards"
|
style="animation: fadeInUp 0.8s ease-out 1.2s forwards"
|
||||||
|
|
@ -590,7 +464,7 @@
|
||||||
href="about.html"
|
href="about.html"
|
||||||
data-trans
|
data-trans
|
||||||
>
|
>
|
||||||
About us
|
Why
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -620,7 +494,7 @@
|
||||||
href="about.html"
|
href="about.html"
|
||||||
data-trans
|
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"
|
class="px-4 py-2 text-sm uppercase tracking-wider border border-white text-white hover:bg-kh3-red hover:border-kh3-red transition-all duration-300 rounded-none"
|
||||||
>About us</a
|
>Why</a
|
||||||
>
|
>
|
||||||
<a
|
<a
|
||||||
href="contact.html"
|
href="contact.html"
|
||||||
|
|
|
||||||
|
|
@ -375,7 +375,7 @@ function handleFormSubmit(form) {
|
||||||
// Simulate form submission (replace with actual endpoint)
|
// Simulate form submission (replace with actual endpoint)
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
submitButton.textContent = "Sent!";
|
submitButton.textContent = "Sent!";
|
||||||
submitButton.style.backgroundColor = "var(--color-primary)";
|
submitButton.style.backgroundColor = "#B03037"; // kh3-red color
|
||||||
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
submitButton.textContent = originalText;
|
submitButton.textContent = originalText;
|
||||||
|
|
|
||||||
173
projects.html
173
projects.html
|
|
@ -3,7 +3,7 @@
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>Projects - KH3</title>
|
<title>What - KH3</title>
|
||||||
<link rel="stylesheet" href="styles/main.css" />
|
<link rel="stylesheet" href="styles/main.css" />
|
||||||
<meta
|
<meta
|
||||||
name="description"
|
name="description"
|
||||||
|
|
@ -85,7 +85,7 @@
|
||||||
>
|
>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<!-- ABOUT US - 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"
|
||||||
|
|
@ -96,7 +96,7 @@
|
||||||
"
|
"
|
||||||
data-trans="crossfade"
|
data-trans="crossfade"
|
||||||
>
|
>
|
||||||
<span class="md:hidden">ABOUT US</span>
|
<span class="md:hidden">WHY</span>
|
||||||
<span
|
<span
|
||||||
class="hidden md:inline"
|
class="hidden md:inline"
|
||||||
style="
|
style="
|
||||||
|
|
@ -104,7 +104,7 @@
|
||||||
animation-fill-mode: forwards;
|
animation-fill-mode: forwards;
|
||||||
animation-duration: 0.15s;
|
animation-duration: 0.15s;
|
||||||
"
|
"
|
||||||
>A</span
|
>W</span
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
class="hidden md:inline"
|
class="hidden md:inline"
|
||||||
|
|
@ -113,7 +113,7 @@
|
||||||
animation-fill-mode: forwards;
|
animation-fill-mode: forwards;
|
||||||
animation-duration: 0.15s;
|
animation-duration: 0.15s;
|
||||||
"
|
"
|
||||||
>B</span
|
>H</span
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
class="hidden md:inline"
|
class="hidden md:inline"
|
||||||
|
|
@ -122,56 +122,11 @@
|
||||||
animation-fill-mode: forwards;
|
animation-fill-mode: forwards;
|
||||||
animation-duration: 0.15s;
|
animation-duration: 0.15s;
|
||||||
"
|
"
|
||||||
>O</span
|
>Y</span
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="hidden md:inline"
|
|
||||||
style="
|
|
||||||
animation-delay: 0.275s;
|
|
||||||
animation-fill-mode: forwards;
|
|
||||||
animation-duration: 0.15s;
|
|
||||||
"
|
|
||||||
>U</span
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="hidden md:inline"
|
|
||||||
style="
|
|
||||||
animation-delay: 0.3s;
|
|
||||||
animation-fill-mode: forwards;
|
|
||||||
animation-duration: 0.15s;
|
|
||||||
"
|
|
||||||
>T</span
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="hidden md:inline"
|
|
||||||
style="
|
|
||||||
animation-delay: 0.325s;
|
|
||||||
animation-fill-mode: forwards;
|
|
||||||
animation-duration: 0.15s;
|
|
||||||
"
|
|
||||||
> </span
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="hidden md:inline"
|
|
||||||
style="
|
|
||||||
animation-delay: 0.35s;
|
|
||||||
animation-fill-mode: forwards;
|
|
||||||
animation-duration: 0.15s;
|
|
||||||
"
|
|
||||||
>U</span
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="hidden md:inline"
|
|
||||||
style="
|
|
||||||
animation-delay: 0.375s;
|
|
||||||
animation-fill-mode: forwards;
|
|
||||||
animation-duration: 0.15s;
|
|
||||||
"
|
|
||||||
>S</span
|
|
||||||
>
|
>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<!-- SERVICES - 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"
|
||||||
|
|
@ -182,7 +137,7 @@
|
||||||
"
|
"
|
||||||
data-trans="crossfade"
|
data-trans="crossfade"
|
||||||
>
|
>
|
||||||
<span class="md:hidden">SERVICES</span>
|
<span class="md:hidden">HOW</span>
|
||||||
<span
|
<span
|
||||||
class="hidden md:inline"
|
class="hidden md:inline"
|
||||||
style="
|
style="
|
||||||
|
|
@ -190,7 +145,7 @@
|
||||||
animation-fill-mode: forwards;
|
animation-fill-mode: forwards;
|
||||||
animation-duration: 0.15s;
|
animation-duration: 0.15s;
|
||||||
"
|
"
|
||||||
>S</span
|
>H</span
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
class="hidden md:inline"
|
class="hidden md:inline"
|
||||||
|
|
@ -199,7 +154,7 @@
|
||||||
animation-fill-mode: forwards;
|
animation-fill-mode: forwards;
|
||||||
animation-duration: 0.15s;
|
animation-duration: 0.15s;
|
||||||
"
|
"
|
||||||
>E</span
|
>O</span
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
class="hidden md:inline"
|
class="hidden md:inline"
|
||||||
|
|
@ -208,56 +163,11 @@
|
||||||
animation-fill-mode: forwards;
|
animation-fill-mode: forwards;
|
||||||
animation-duration: 0.15s;
|
animation-duration: 0.15s;
|
||||||
"
|
"
|
||||||
>R</span
|
>W</span
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="hidden md:inline"
|
|
||||||
style="
|
|
||||||
animation-delay: 0.425s;
|
|
||||||
animation-fill-mode: forwards;
|
|
||||||
animation-duration: 0.15s;
|
|
||||||
"
|
|
||||||
>V</span
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="hidden md:inline"
|
|
||||||
style="
|
|
||||||
animation-delay: 0.45s;
|
|
||||||
animation-fill-mode: forwards;
|
|
||||||
animation-duration: 0.15s;
|
|
||||||
"
|
|
||||||
>I</span
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="hidden md:inline"
|
|
||||||
style="
|
|
||||||
animation-delay: 0.475s;
|
|
||||||
animation-fill-mode: forwards;
|
|
||||||
animation-duration: 0.15s;
|
|
||||||
"
|
|
||||||
>C</span
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="hidden md:inline"
|
|
||||||
style="
|
|
||||||
animation-delay: 0.5s;
|
|
||||||
animation-fill-mode: forwards;
|
|
||||||
animation-duration: 0.15s;
|
|
||||||
"
|
|
||||||
>E</span
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="hidden md:inline"
|
|
||||||
style="
|
|
||||||
animation-delay: 0.525s;
|
|
||||||
animation-fill-mode: forwards;
|
|
||||||
animation-duration: 0.15s;
|
|
||||||
"
|
|
||||||
>S</span
|
|
||||||
>
|
>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<!-- PROJECTS - Most right -->
|
<!-- WHAT - Most right -->
|
||||||
<a
|
<a
|
||||||
href="projects.html"
|
href="projects.html"
|
||||||
class="block text-white text-xl md:text-lg font-medium border-b border-white pb-1 ml-0 md:ml-20 font-montserrat opacity-0 animate-fade-in-left"
|
class="block text-white text-xl md:text-lg font-medium border-b border-white pb-1 ml-0 md:ml-20 font-montserrat opacity-0 animate-fade-in-left"
|
||||||
|
|
@ -267,7 +177,7 @@
|
||||||
animation-duration: 0.3s;
|
animation-duration: 0.3s;
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
<span class="md:hidden">PROJECTS</span>
|
<span class="md:hidden">WHAT</span>
|
||||||
<span
|
<span
|
||||||
class="hidden md:inline"
|
class="hidden md:inline"
|
||||||
style="
|
style="
|
||||||
|
|
@ -275,7 +185,7 @@
|
||||||
animation-fill-mode: forwards;
|
animation-fill-mode: forwards;
|
||||||
animation-duration: 0.15s;
|
animation-duration: 0.15s;
|
||||||
"
|
"
|
||||||
>P</span
|
>W</span
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
class="hidden md:inline"
|
class="hidden md:inline"
|
||||||
|
|
@ -284,7 +194,7 @@
|
||||||
animation-fill-mode: forwards;
|
animation-fill-mode: forwards;
|
||||||
animation-duration: 0.15s;
|
animation-duration: 0.15s;
|
||||||
"
|
"
|
||||||
>R</span
|
>H</span
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
class="hidden md:inline"
|
class="hidden md:inline"
|
||||||
|
|
@ -293,7 +203,7 @@
|
||||||
animation-fill-mode: forwards;
|
animation-fill-mode: forwards;
|
||||||
animation-duration: 0.15s;
|
animation-duration: 0.15s;
|
||||||
"
|
"
|
||||||
>O</span
|
>A</span
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
class="hidden md:inline"
|
class="hidden md:inline"
|
||||||
|
|
@ -302,44 +212,8 @@
|
||||||
animation-fill-mode: forwards;
|
animation-fill-mode: forwards;
|
||||||
animation-duration: 0.15s;
|
animation-duration: 0.15s;
|
||||||
"
|
"
|
||||||
>J</span
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="hidden md:inline"
|
|
||||||
style="
|
|
||||||
animation-delay: 0.65s;
|
|
||||||
animation-fill-mode: forwards;
|
|
||||||
animation-duration: 0.15s;
|
|
||||||
"
|
|
||||||
>E</span
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="hidden md:inline"
|
|
||||||
style="
|
|
||||||
animation-delay: 0.675s;
|
|
||||||
animation-fill-mode: forwards;
|
|
||||||
animation-duration: 0.15s;
|
|
||||||
"
|
|
||||||
>C</span
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="hidden md:inline"
|
|
||||||
style="
|
|
||||||
animation-delay: 0.7s;
|
|
||||||
animation-fill-mode: forwards;
|
|
||||||
animation-duration: 0.15s;
|
|
||||||
"
|
|
||||||
>T</span
|
>T</span
|
||||||
>
|
>
|
||||||
<span
|
|
||||||
class="hidden md:inline"
|
|
||||||
style="
|
|
||||||
animation-delay: 0.725s;
|
|
||||||
animation-fill-mode: forwards;
|
|
||||||
animation-duration: 0.15s;
|
|
||||||
"
|
|
||||||
>S</span
|
|
||||||
>
|
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<!-- CONTACTS - More right -->
|
<!-- CONTACTS - More right -->
|
||||||
|
|
@ -500,7 +374,7 @@
|
||||||
<h1
|
<h1
|
||||||
class="whitespace-nowrap text-4xl md:text-6xl tracking-[0.2em] font-bold"
|
class="whitespace-nowrap text-4xl md:text-6xl tracking-[0.2em] font-bold"
|
||||||
>
|
>
|
||||||
OUR PROJECTS
|
OUR WHAT
|
||||||
</h1>
|
</h1>
|
||||||
<div class="flex-1 h-px bg-white"></div>
|
<div class="flex-1 h-px bg-white"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -555,13 +429,13 @@
|
||||||
<section class="py-32 bg-kh3-black">
|
<section class="py-32 bg-kh3-black">
|
||||||
<div class="container mx-auto px-8 max-w-7xl">
|
<div class="container mx-auto px-8 max-w-7xl">
|
||||||
<!-- Category Filters -->
|
<!-- Category Filters -->
|
||||||
<div class="mb-16 text-center category-filter">
|
<div class="mb-16 text-center">
|
||||||
<div class="flex flex-wrap justify-center gap-4 mb-8">
|
<div class="flex flex-wrap justify-center gap-4 mb-8">
|
||||||
<button
|
<button
|
||||||
class="category-filter px-6 py-3 text-white border border-white/30 rounded-full hover:bg-white hover:text-kh3-black transition-all duration-300 active"
|
class="category-filter px-6 py-3 text-white border border-white/30 rounded-full hover:bg-white hover:text-kh3-black transition-all duration-300 active"
|
||||||
data-category="all"
|
data-category="all"
|
||||||
>
|
>
|
||||||
ALL PROJECTS
|
ALL WHAT
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
class="category-filter px-6 py-3 text-white border border-white/30 rounded-full hover:bg-white hover:text-kh3-black transition-all duration-300"
|
class="category-filter px-6 py-3 text-white border border-white/30 rounded-full hover:bg-white hover:text-kh3-black transition-all duration-300"
|
||||||
|
|
@ -965,10 +839,11 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Category filter animations */
|
/* Category filter animations */
|
||||||
.category-filter.active {
|
.category-filter.active,
|
||||||
background: white;
|
.category-filter.active:hover {
|
||||||
color: #212829;
|
background: white !important;
|
||||||
border-color: white;
|
color: #212829 !important;
|
||||||
|
border-color: white !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Diagonal mask reveal for hero image */
|
/* Diagonal mask reveal for hero image */
|
||||||
|
|
|
||||||
160
services.html
160
services.html
|
|
@ -3,7 +3,7 @@
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>Services - KH3</title>
|
<title>How - KH3</title>
|
||||||
<script src="https://cdn.tailwindcss.com"></script>
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
<link
|
<link
|
||||||
href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&display=swap"
|
href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&display=swap"
|
||||||
|
|
@ -237,7 +237,7 @@
|
||||||
>
|
>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<!-- ABOUT US - 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"
|
||||||
|
|
@ -248,7 +248,7 @@
|
||||||
"
|
"
|
||||||
data-trans="crossfade"
|
data-trans="crossfade"
|
||||||
>
|
>
|
||||||
<span class="md:hidden">ABOUT US</span>
|
<span class="md:hidden">WHY</span>
|
||||||
<span
|
<span
|
||||||
class="hidden md:inline"
|
class="hidden md:inline"
|
||||||
style="
|
style="
|
||||||
|
|
@ -256,7 +256,7 @@
|
||||||
animation-fill-mode: forwards;
|
animation-fill-mode: forwards;
|
||||||
animation-duration: 0.15s;
|
animation-duration: 0.15s;
|
||||||
"
|
"
|
||||||
>A</span
|
>W</span
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
class="hidden md:inline"
|
class="hidden md:inline"
|
||||||
|
|
@ -265,7 +265,7 @@
|
||||||
animation-fill-mode: forwards;
|
animation-fill-mode: forwards;
|
||||||
animation-duration: 0.15s;
|
animation-duration: 0.15s;
|
||||||
"
|
"
|
||||||
>B</span
|
>H</span
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
class="hidden md:inline"
|
class="hidden md:inline"
|
||||||
|
|
@ -274,56 +274,11 @@
|
||||||
animation-fill-mode: forwards;
|
animation-fill-mode: forwards;
|
||||||
animation-duration: 0.15s;
|
animation-duration: 0.15s;
|
||||||
"
|
"
|
||||||
>O</span
|
>Y</span
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="hidden md:inline"
|
|
||||||
style="
|
|
||||||
animation-delay: 0.275s;
|
|
||||||
animation-fill-mode: forwards;
|
|
||||||
animation-duration: 0.15s;
|
|
||||||
"
|
|
||||||
>U</span
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="hidden md:inline"
|
|
||||||
style="
|
|
||||||
animation-delay: 0.3s;
|
|
||||||
animation-fill-mode: forwards;
|
|
||||||
animation-duration: 0.15s;
|
|
||||||
"
|
|
||||||
>T</span
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="hidden md:inline"
|
|
||||||
style="
|
|
||||||
animation-delay: 0.325s;
|
|
||||||
animation-fill-mode: forwards;
|
|
||||||
animation-duration: 0.15s;
|
|
||||||
"
|
|
||||||
> </span
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="hidden md:inline"
|
|
||||||
style="
|
|
||||||
animation-delay: 0.35s;
|
|
||||||
animation-fill-mode: forwards;
|
|
||||||
animation-duration: 0.15s;
|
|
||||||
"
|
|
||||||
>U</span
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="hidden md:inline"
|
|
||||||
style="
|
|
||||||
animation-delay: 0.375s;
|
|
||||||
animation-fill-mode: forwards;
|
|
||||||
animation-duration: 0.15s;
|
|
||||||
"
|
|
||||||
>S</span
|
|
||||||
>
|
>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<!-- SERVICES - More right -->
|
<!-- HOW - More right -->
|
||||||
<a
|
<a
|
||||||
href="services.html"
|
href="services.html"
|
||||||
class="block text-white text-xl md:text-lg font-medium border-b border-white pb-1 ml-0 md:ml-12 font-montserrat opacity-0 animate-fade-in-left"
|
class="block text-white text-xl md:text-lg font-medium border-b border-white pb-1 ml-0 md:ml-12 font-montserrat opacity-0 animate-fade-in-left"
|
||||||
|
|
@ -333,7 +288,7 @@
|
||||||
animation-duration: 0.3s;
|
animation-duration: 0.3s;
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
<span class="md:hidden">SERVICES</span>
|
<span class="md:hidden">HOW</span>
|
||||||
<span
|
<span
|
||||||
class="hidden md:inline"
|
class="hidden md:inline"
|
||||||
style="
|
style="
|
||||||
|
|
@ -341,7 +296,7 @@
|
||||||
animation-fill-mode: forwards;
|
animation-fill-mode: forwards;
|
||||||
animation-duration: 0.15s;
|
animation-duration: 0.15s;
|
||||||
"
|
"
|
||||||
>S</span
|
>H</span
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
class="hidden md:inline"
|
class="hidden md:inline"
|
||||||
|
|
@ -350,7 +305,7 @@
|
||||||
animation-fill-mode: forwards;
|
animation-fill-mode: forwards;
|
||||||
animation-duration: 0.15s;
|
animation-duration: 0.15s;
|
||||||
"
|
"
|
||||||
>E</span
|
>O</span
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
class="hidden md:inline"
|
class="hidden md:inline"
|
||||||
|
|
@ -359,56 +314,11 @@
|
||||||
animation-fill-mode: forwards;
|
animation-fill-mode: forwards;
|
||||||
animation-duration: 0.15s;
|
animation-duration: 0.15s;
|
||||||
"
|
"
|
||||||
>R</span
|
>W</span
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="hidden md:inline"
|
|
||||||
style="
|
|
||||||
animation-delay: 0.425s;
|
|
||||||
animation-fill-mode: forwards;
|
|
||||||
animation-duration: 0.15s;
|
|
||||||
"
|
|
||||||
>V</span
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="hidden md:inline"
|
|
||||||
style="
|
|
||||||
animation-delay: 0.45s;
|
|
||||||
animation-fill-mode: forwards;
|
|
||||||
animation-duration: 0.15s;
|
|
||||||
"
|
|
||||||
>I</span
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="hidden md:inline"
|
|
||||||
style="
|
|
||||||
animation-delay: 0.475s;
|
|
||||||
animation-fill-mode: forwards;
|
|
||||||
animation-duration: 0.15s;
|
|
||||||
"
|
|
||||||
>C</span
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="hidden md:inline"
|
|
||||||
style="
|
|
||||||
animation-delay: 0.5s;
|
|
||||||
animation-fill-mode: forwards;
|
|
||||||
animation-duration: 0.15s;
|
|
||||||
"
|
|
||||||
>E</span
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="hidden md:inline"
|
|
||||||
style="
|
|
||||||
animation-delay: 0.525s;
|
|
||||||
animation-fill-mode: forwards;
|
|
||||||
animation-duration: 0.15s;
|
|
||||||
"
|
|
||||||
>S</span
|
|
||||||
>
|
>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<!-- PROJECTS - Most right -->
|
<!-- WHAT - Most right -->
|
||||||
<a
|
<a
|
||||||
href="projects.html"
|
href="projects.html"
|
||||||
class="block text-white text-xl md:text-lg font-medium hover:text-kh3-red transition-colors ml-0 md:ml-20 font-montserrat opacity-0 animate-fade-in-left"
|
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"
|
||||||
|
|
@ -419,7 +329,7 @@
|
||||||
"
|
"
|
||||||
data-trans="crossfade"
|
data-trans="crossfade"
|
||||||
>
|
>
|
||||||
<span class="md:hidden">PROJECTS</span>
|
<span class="md:hidden">WHAT</span>
|
||||||
<span
|
<span
|
||||||
class="hidden md:inline"
|
class="hidden md:inline"
|
||||||
style="
|
style="
|
||||||
|
|
@ -427,7 +337,7 @@
|
||||||
animation-fill-mode: forwards;
|
animation-fill-mode: forwards;
|
||||||
animation-duration: 0.15s;
|
animation-duration: 0.15s;
|
||||||
"
|
"
|
||||||
>P</span
|
>W</span
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
class="hidden md:inline"
|
class="hidden md:inline"
|
||||||
|
|
@ -436,7 +346,7 @@
|
||||||
animation-fill-mode: forwards;
|
animation-fill-mode: forwards;
|
||||||
animation-duration: 0.15s;
|
animation-duration: 0.15s;
|
||||||
"
|
"
|
||||||
>R</span
|
>H</span
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
class="hidden md:inline"
|
class="hidden md:inline"
|
||||||
|
|
@ -445,7 +355,7 @@
|
||||||
animation-fill-mode: forwards;
|
animation-fill-mode: forwards;
|
||||||
animation-duration: 0.15s;
|
animation-duration: 0.15s;
|
||||||
"
|
"
|
||||||
>O</span
|
>A</span
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
class="hidden md:inline"
|
class="hidden md:inline"
|
||||||
|
|
@ -454,44 +364,8 @@
|
||||||
animation-fill-mode: forwards;
|
animation-fill-mode: forwards;
|
||||||
animation-duration: 0.15s;
|
animation-duration: 0.15s;
|
||||||
"
|
"
|
||||||
>J</span
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="hidden md:inline"
|
|
||||||
style="
|
|
||||||
animation-delay: 0.65s;
|
|
||||||
animation-fill-mode: forwards;
|
|
||||||
animation-duration: 0.15s;
|
|
||||||
"
|
|
||||||
>E</span
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="hidden md:inline"
|
|
||||||
style="
|
|
||||||
animation-delay: 0.675s;
|
|
||||||
animation-fill-mode: forwards;
|
|
||||||
animation-duration: 0.15s;
|
|
||||||
"
|
|
||||||
>C</span
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="hidden md:inline"
|
|
||||||
style="
|
|
||||||
animation-delay: 0.7s;
|
|
||||||
animation-fill-mode: forwards;
|
|
||||||
animation-duration: 0.15s;
|
|
||||||
"
|
|
||||||
>T</span
|
>T</span
|
||||||
>
|
>
|
||||||
<span
|
|
||||||
class="hidden md:inline"
|
|
||||||
style="
|
|
||||||
animation-delay: 0.725s;
|
|
||||||
animation-fill-mode: forwards;
|
|
||||||
animation-duration: 0.15s;
|
|
||||||
"
|
|
||||||
>S</span
|
|
||||||
>
|
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<!-- CONTACTS - More right -->
|
<!-- CONTACTS - More right -->
|
||||||
|
|
@ -652,7 +526,7 @@
|
||||||
<h1
|
<h1
|
||||||
class="whitespace-nowrap text-4xl md:text-6xl tracking-[0.2em] font-bold"
|
class="whitespace-nowrap text-4xl md:text-6xl tracking-[0.2em] font-bold"
|
||||||
>
|
>
|
||||||
OUR SERVICES
|
OUR HOW
|
||||||
</h1>
|
</h1>
|
||||||
<div class="flex-1 h-px bg-white"></div>
|
<div class="flex-1 h-px bg-white"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue