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

feat: add about us page

Browse source
This commit is contained in:
George Birikorang 2025-08-26 06:09:46 -04:00
parent 374110ec1c
commit 82531c813e
3 changed files with 1580 additions and 1198 deletions
Download patch file Download diff file Expand all files Collapse all files

1085
about.html
View file

File diff suppressed because it is too large Load diff

734
contact.html
View file

@ -16,92 +16,471 @@
rel="stylesheet"
/>
</head>
<body class="bg-kh3-black text-white font-montserrat overflow-x-hidden">
<!-- Navigation Menu Overlay -->
<nav
class="fixed inset-0 bg-black bg-opacity-95 z-50 hidden"
id="navOverlay"
<body
class="bg-kh3-black text-white font-montserrat overflow-x-hidden"
style="animation: pageEnter 0.8s ease-out both"
>
<!-- Navigation Menu -->
<div
class="fixed left-0 top-0 h-full w-1/3 bg-kh3-black z-50 hidden shadow-2xl"
id="navMenu"
>
<div class="flex flex-col h-full">
<div class="flex justify-between items-center p-8">
<div class="flex items-center gap-3">
<img src="assets/images/kh3_logo.png" alt="KH3" class="w-12 h-12" />
<span class="text-white text-2xl font-bold tracking-wider"
>KH3</span
>
</div>
<button
class="text-white hover:text-kh3-red transition-colors"
id="navClose"
>
<span
class="block w-6 h-0.5 bg-current transform rotate-45 translate-y-0.5"
></span>
<span
class="block w-6 h-0.5 bg-current transform -rotate-45 -translate-y-0.5"
></span>
</button>
<div class="p-8 pt-12 flex flex-col h-full">
<!-- Logo -->
<div class="flex items-center gap-3 mb-12">
<img src="assets/images/kh3_logo.png" alt="KH3" class="w-12 h-12" />
<span class="text-white text-2xl font-bold tracking-wider">KH3</span>
</div>
<ul class="flex-1 flex flex-col justify-center items-center space-y-8">
<li>
<a
href="index.html"
class="text-white hover:text-kh3-red transition-colors text-xl font-medium"
>HOME</a
>
</li>
<li>
<a
href="about.html"
class="text-white hover:text-kh3-red transition-colors text-xl font-medium"
>ABOUT US</a
>
</li>
<li>
<a
href="projects.html"
class="text-white hover:text-kh3-red transition-colors text-xl font-medium"
>PROJECTS</a
>
</li>
<li>
<a
href="services.html"
class="text-white hover:text-kh3-red transition-colors text-xl font-medium"
>SERVICES</a
>
</li>
<li>
<a
href="approach.html"
class="text-white hover:text-kh3-red transition-colors text-xl font-medium"
>APPROACH</a
>
</li>
<li>
<a
href="careers.html"
class="text-white hover:text-kh3-red transition-colors text-xl font-medium"
>CAREER</a
>
</li>
<li>
<a
href="news.html"
class="text-white hover:text-kh3-red transition-colors text-xl font-medium"
>NEWS</a
>
</li>
<li>
<a
href="brands.html"
class="text-white hover:text-kh3-red transition-colors text-xl font-medium"
>OTHER BRANDS BY FBS</a
>
</li>
</ul>
<!-- Navigation Links - Inverted C Layout -->
<nav class="flex-1 relative">
<div class="absolute inset-0 flex items-start">
<div class="relative ml-8">
<!-- Navigation items in inverted C shape -->
<div class="space-y-6">
<!-- HOME - Top -->
<a
href="index.html"
class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-0 font-montserrat"
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.05s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>H</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.075s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>O</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.1s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>M</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.125s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>E</span
>
</a>
<!-- ABOUT US - Slightly right -->
<a
href="about.html"
class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-6 font-montserrat"
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.15s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>A</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.175s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>B</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.2s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>O</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.225s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>U</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.25s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>T</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.275s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>&nbsp;</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.3s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>U</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.325s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>S</span
>
</a>
<!-- SERVICES - More right -->
<a
href="services.html"
class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-12 font-montserrat"
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.35s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>S</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.375s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>E</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.4s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>R</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.425s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>V</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.45s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>I</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.475s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>C</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.5s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>E</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.525s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>S</span
>
</a>
<!-- PROJECTS - Most right -->
<a
href="projects.html"
class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-20 font-montserrat"
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.55s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>P</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.575s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>R</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.6s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>O</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.625s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>J</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.65s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>E</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.675s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>C</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.7s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>T</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.725s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>S</span
>
</a>
<!-- CONTACTS - More right -->
<a
href="contact.html"
class="block text-white text-lg font-medium border-b border-white pb-1 ml-12 font-montserrat"
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.75s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>C</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.775s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>O</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.8s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>N</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.825s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>T</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.85s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>A</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.875s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>C</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.9s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>T</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.925s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>S</span
>
</a>
<!-- PARTNERS - Back to left -->
<a
href="brands.html"
class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-0 font-montserrat"
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.95s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>P</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.975s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>A</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 1s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>R</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 1.025s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>T</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 1.05s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>N</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 1.075s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>E</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 1.1s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>R</span
>
<span
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 1.125s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>S</span
>
</a>
</div>
</div>
</div>
</nav>
</div>
</nav>
</div>
<!-- Header -->
<header
@ -116,7 +495,7 @@
>
</div>
<div class="cursor-pointer" id="menuToggle">
<div class="grid grid-cols-3 gap-1 w-6 h-6">
<div class="grid grid-cols-3 gap-1 w-6 h-6" id="menuGrid">
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
@ -138,7 +517,9 @@
class="absolute inset-0 bg-gradient-to-br from-kh3-black/80 to-kh3-black/60"
></div>
<div class="relative z-10 text-center">
<h1 class="text-6xl md:text-8xl font-bold mb-6">CONTACT US</h1>
<h1 class="text-6xl md:text-8xl font-bold mb-6 masked-reveal">
CONTACT US
</h1>
<div class="text-xl md:text-2xl text-neutral-300 tracking-widest">
LET'S DISCUSS YOUR PROJECT
</div>
@ -322,7 +703,7 @@
<div class="container mx-auto px-8 max-w-6xl">
<h2 class="text-4xl font-bold text-center mb-16">FIND US</h2>
<div class="bg-neutral-800 rounded-lg p-12 text-center">
<div class="max-w-2xl mx-auto">
<div class="max-w-5xl mx-auto">
<h3 class="text-2xl font-bold mb-4">Accra, Ghana</h3>
<p class="text-neutral-300 leading-relaxed mb-6">
Our main office is located in the heart of Accra, easily
@ -331,6 +712,24 @@
<div class="text-kh3-red font-semibold">
<span>📍 5.5600° N, 0.2057° W</span>
</div>
<!-- Embedded Map -->
<div
class="mt-10 w-full overflow-hidden rounded-lg"
style="aspect-ratio: 4 / 3"
>
<iframe
title="KH3 Office Location Map"
width="100%"
height="100%"
style="border: 0; filter: grayscale(20%) contrast(110%)"
loading="lazy"
allowfullscreen
referrerpolicy="no-referrer-when-downgrade"
src="https://www.google.com/maps?q=29%20Labone%20Crescent%2C%20Accra%2C%20Ghana&z=18&output=embed"
>
</iframe>
</div>
</div>
</div>
</div>
@ -369,24 +768,99 @@
</footer>
<script src="js/main.js"></script>
<style>
@keyframes fadeUp {
from {
opacity: 0;
transform: translateY(12px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes maskReveal {
0% {
clip-path: inset(0 100% 0 0);
opacity: 0.001;
}
20% {
opacity: 1;
}
100% {
clip-path: inset(0 0 0 0);
opacity: 1;
}
}
.masked-reveal {
clip-path: inset(0 100% 0 0);
}
</style>
<script>
// Menu toggle functionality
const menuToggle = document.getElementById("menuToggle");
const navOverlay = document.getElementById("navOverlay");
const navClose = document.getElementById("navClose");
const navMenu = document.getElementById("navMenu");
const menuGrid = document.getElementById("menuGrid");
if (menuToggle && navMenu && menuGrid) {
let isMenuOpen = false;
let closeBtnEl = null;
if (menuToggle && navOverlay && navClose) {
menuToggle.addEventListener("click", () => {
navOverlay.classList.remove("hidden");
});
navClose.addEventListener("click", () => {
navOverlay.classList.add("hidden");
});
navOverlay.addEventListener("click", (e) => {
if (e.target === navOverlay) {
navOverlay.classList.add("hidden");
if (isMenuOpen) {
// Close menu
navMenu.classList.add("hidden");
menuGrid.innerHTML = `
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
`;
if (closeBtnEl) {
closeBtnEl.remove();
closeBtnEl = null;
}
isMenuOpen = false;
} else {
// Open menu
navMenu.classList.remove("hidden");
// Place red X close button at the bottom of the menu panel
closeBtnEl = document.createElement("button");
closeBtnEl.setAttribute("aria-label", "Close navigation");
closeBtnEl.className =
"absolute bottom-12 left-6 text-kh3-red hover:text-white transition-colors";
closeBtnEl.innerHTML = `
<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>
</svg>
`;
navMenu.appendChild(closeBtnEl);
closeBtnEl.addEventListener("click", () => {
navMenu.classList.add("hidden");
if (closeBtnEl) {
closeBtnEl.remove();
closeBtnEl = null;
}
menuGrid.innerHTML = `
<span class=\"w-1 h-1 bg-white\"></span>
<span class=\"w-1 h-1 bg-white\"></span>
<span class=\"w-1 h-1 bg-white\"></span>
<span class=\"w-1 h-1 bg-white\"></span>
<span class=\"w-1 h-1 bg-white\"></span>
<span class=\"w-1 h-1 bg-white\"></span>
<span class=\"w-1 h-1 bg-white\"></span>
<span class=\"w-1 h-1 bg-white\"></span>
<span class=\"w-1 h-1 bg-white\"></span>
`;
isMenuOpen = false;
});
isMenuOpen = true;
}
});
}
@ -403,6 +877,68 @@
contactForm.reset();
});
}
// Staggered entrance for hero and sections
window.addEventListener("load", () => {
const heroTitle = document.querySelector(
"section.relative h1.masked-reveal"
);
const heroSub = document.querySelector("section.relative div.text-xl");
if (heroTitle) {
heroTitle.style.animation =
"maskReveal 900ms ease-out 150ms forwards";
}
if (heroSub) {
heroSub.style.opacity = "0";
heroSub.style.animation = "fadeUp 700ms ease-out 320ms forwards";
}
const contactSection = document.querySelector("section.py-20.bg-white");
if (contactSection) {
contactSection.style.opacity = "0";
contactSection.style.animation =
"fadeUp 800ms ease-out 600ms forwards";
}
const mapSection = document.querySelector("section.py-20.bg-kh3-black");
if (mapSection) {
mapSection.style.opacity = "0";
mapSection.style.animation = "fadeUp 800ms ease-out 850ms forwards";
}
});
// Auto-scroll to contact section after 2 seconds with custom smooth animation
setTimeout(() => {
const contactSection = document.querySelector("section:nth-of-type(2)"); // Contact Section
if (contactSection) {
const targetPosition = contactSection.offsetTop;
const startPosition = window.pageYOffset;
const distance = targetPosition - startPosition;
const duration = 2000; // 2 seconds for the scroll animation
let start = null;
function animation(currentTime) {
if (start === null) start = currentTime;
const timeElapsed = currentTime - start;
const run = easeInOutCubic(
timeElapsed,
startPosition,
distance,
duration
);
window.scrollTo(0, run);
if (timeElapsed < duration) requestAnimationFrame(animation);
}
// Easing function for smooth animation
function easeInOutCubic(t, b, c, d) {
t /= d / 2;
if (t < 1) return (c / 2) * t * t * t + b;
t -= 2;
return (c / 2) * (t * t * t + 2) + b;
}
requestAnimationFrame(animation);
}
}, 2000);
</script>
</body>
</html>

959
index.html
View file

File diff suppressed because it is too large Load diff