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

fix: matches our services hero with about us hero

Browse source
This commit is contained in:
George Birikorang 2025-08-28 19:12:50 -04:00
parent f52b5e4614
commit 2595c7571e
5 changed files with 288 additions and 394 deletions
Download patch file Download diff file Expand all files Collapse all files

12
about.html
View file

@ -599,8 +599,8 @@
We treat all stake holders with politeness, dignity and civility
that equals the outward beauty of our environment and the
environments we create.
</p>
</div>
</p>
</div>
<!-- Empty middle column for H layout -->
<div class="hidden md:block"></div>
@ -624,8 +624,8 @@
deliver on our promises. If forfeiting on our word is beyond our
human control; we will communicate this transparently and in
good time.
</p>
</div>
</p>
</div>
</div>
<!-- Row 2: All three columns -->
@ -647,8 +647,8 @@
>
We our faithful to our mission and vision and that of our
stakeholders and the organizations they represent.
</p>
</div>
</p>
</div>
<div
class="text-center opacity-0 group cursor-pointer transform transition-all duration-500 hover:scale-105 hover:-translate-y-2"

32
index.html
View file

@ -26,7 +26,7 @@
<div class="p-8 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" />
<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>
@ -37,8 +37,8 @@
<!-- Navigation items in inverted C shape -->
<div class="space-y-6">
<!-- HOME - Top -->
<a
href="index.html"
<a
href="index.html"
class="block text-white text-xl md:text-lg font-medium border-b border-white pb-1 ml-0 font-montserrat"
>
<span class="md:hidden">HOME</span>
@ -85,8 +85,8 @@
</a>
<!-- ABOUT US - Slightly right -->
<a
href="about.html"
<a
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"
>
<span class="md:hidden">ABOUT&nbsp;US</span>
@ -173,8 +173,8 @@
</a>
<!-- SERVICES - More right -->
<a
href="services.html"
<a
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"
>
<span class="md:hidden">SERVICES</span>
@ -349,8 +349,8 @@
</a>
<!-- CONTACTS - More right -->
<a
href="contact.html"
<a
href="contact.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"
>
<span class="md:hidden">CONTACTS</span>
@ -539,7 +539,7 @@
>DESIGN</span
>
</div>
</div>
</div>
<!-- DELIVER -->
<div class="flex items-center gap-6">
@ -613,7 +613,7 @@
CONTACTS
</a>
<div class="w-6 md:w-8 h-px bg-kh3-red"></div>
</div>
</div>
<!-- Mobile CTA bar: About & Contacts (centered) -->
<div
@ -621,14 +621,14 @@
style="animation: fadeInUp 0.8s ease-out 1.2s forwards"
>
<div class="flex items-center gap-4">
<a
href="about.html"
<a
href="about.html"
data-trans
class="px-4 py-2 text-sm uppercase tracking-wider border border-white text-white hover:bg-kh3-red hover:border-kh3-red transition-all duration-300 rounded-none"
>About us</a
>
<a
href="contact.html"
<a
href="contact.html"
data-trans
class="px-4 py-2 text-sm uppercase tracking-wider border border-white text-white hover:bg-kh3-red hover:border-kh3-red transition-all duration-300 rounded-none"
>Contacts</a
@ -636,7 +636,7 @@
</div>
</div>
</section>
</div>
</div>
<!-- Custom Cursor -->
<div

320
project-accra-corporate-tower.html
View file

@ -1,320 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Accra Corporate Tower - KH3 | Building Inspiring Spaces</title>
<meta
name="description"
content="A state-of-the-art corporate headquarters featuring modern workspace design, sustainable materials, and cutting-edge technology integration."
/>
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/animations.css" />
<link
href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&display=swap"
rel="stylesheet"
/>
</head>
<body class="dark-gothic-mode">
<!-- Navigation Menu Overlay -->
<nav class="nav-overlay" id="navOverlay">
<div class="nav-content">
<div class="nav-header">
<div class="logo">
<img src="images/kh3_logo.png" alt="KH3" class="logo-image" />
<span class="logo-text">KH3</span>
</div>
<button class="nav-close" id="navClose">
<span></span>
<span></span>
</button>
</div>
<div class="nav-links">
<a href="index.html">Home</a>
<a href="about.html">About</a>
<a href="projects.html">Projects</a>
<a href="services.html">Services</a>
<a href="approach.html">Approach</a>
<a href="careers.html">Careers</a>
<a href="news.html">News</a>
<a href="brands.html">Brands</a>
<a href="contact.html">Contact</a>
</div>
<div class="nav-footer">
<div class="contact-info">
<p>Accra, Ghana</p>
<p>+233 20 123 4567</p>
<p>info@kh3.com</p>
</div>
</div>
</div>
</nav>
<!-- Page Header -->
<header class="page-header">
<div class="container">
<div class="header-content">
<div class="logo">
<img src="images/kh3_logo.png" alt="KH3" class="logo-image" />
<span class="logo-text">KH3</span>
</div>
<div class="menu-toggle" id="menuToggle">
<div class="grid-icon">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
</div>
</header>
<!-- Main Content -->
<main class="project-detail-main">
<!-- Project Hero -->
<section class="project-hero">
<div class="container">
<div class="project-hero-content">
<div class="project-hero-text">
<div class="project-category">Corporate</div>
<h1 class="project-title">Accra Corporate Tower</h1>
<p class="project-location">Accra, Ghana</p>
</div>
<div class="project-hero-image">
<img
src="images/projects/accra-corporate-tower-cover.jpg"
alt="Accra Corporate Tower"
/>
</div>
</div>
</div>
</section>
<!-- Project Content -->
<section class="project-content">
<div class="container">
<div class="project-layout">
<!-- Project Meta Panel -->
<aside class="project-meta-panel">
<div class="meta-panel-content">
<h3>Project Details</h3>
<div class="meta-item">
<span class="meta-label">Type</span>
<span class="meta-value">Corporate</span>
</div>
<div class="meta-item">
<span class="meta-label">Client</span>
<span class="meta-value"
>Ghana Investment Promotion Centre</span
>
</div>
<div class="meta-item">
<span class="meta-label">Project Location</span>
<span class="meta-value">Accra, Ghana</span>
</div>
<div class="meta-item">
<span class="meta-label">Type of Work</span>
<span class="meta-value">Turnkey Design & Fit-out</span>
</div>
<div class="meta-item">
<span class="meta-label">Size</span>
<span class="meta-value">2,500 sq m</span>
</div>
<div class="meta-item">
<span class="meta-label">Year</span>
<span class="meta-value">2023</span>
</div>
<div class="meta-cta">
<a href="contact.html" class="btn-primary"
>Start a Similar Project</a
>
</div>
</div>
</aside>
<!-- Project Body -->
<div class="project-body">
<div class="project-summary">
<h2>Project Overview</h2>
<p>
A state-of-the-art corporate headquarters featuring modern
workspace design, sustainable materials, and cutting-edge
technology integration.
</p>
</div>
<div class="project-story">
<div class="story-section">
<h3>The Challenge</h3>
<p>
Create a prestigious corporate environment that reflects
Ghana's economic growth while incorporating sustainable
design principles.
</p>
</div>
<div class="story-section">
<h3>Our Approach</h3>
<p>
Implemented modular workspace design with natural lighting,
local materials, and flexible meeting spaces.
</p>
</div>
<div class="story-section">
<h3>The Outcome</h3>
<p>
Delivered a 2,500 sqm premium office space that increased
employee productivity by 40% and achieved LEED
certification.
</p>
</div>
</div>
<!-- Project Gallery -->
<div class="project-gallery">
<h3>Project Gallery</h3>
<div class="gallery-grid">
<div class="gallery-item">
<img
src="images/projects/accra-corporate-tower-1.jpg"
alt="Corporate Tower Interior"
/>
</div>
<div class="gallery-item">
<img
src="images/projects/accra-corporate-tower-2.jpg"
alt="Modern Workspace"
/>
</div>
<div class="gallery-item">
<img
src="images/projects/accra-corporate-tower-3.jpg"
alt="Meeting Rooms"
/>
</div>
<div class="gallery-item">
<img
src="images/projects/accra-corporate-tower-4.jpg"
alt="Reception Area"
/>
</div>
<div class="gallery-item">
<img
src="images/projects/accra-corporate-tower-5.jpg"
alt="Collaborative Spaces"
/>
</div>
<div class="gallery-item">
<img
src="images/projects/accra-corporate-tower-6.jpg"
alt="Building Exterior"
/>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Related Projects -->
<section class="related-projects">
<div class="container">
<h2>Related Projects</h2>
<div class="related-projects-grid">
<div class="project-card">
<div
class="project-card-image"
style="
background-image: url('images/projects/takoradi-office-cover.jpg');
"
>
<div class="project-card-overlay"></div>
</div>
<div class="project-card-content">
<div class="project-card-category">Corporate</div>
<h3 class="project-card-title">Takoradi Office Complex</h3>
<p class="project-card-location">Takoradi, Ghana</p>
<a
href="project-takoradi-office-complex.html"
class="project-card-link"
>View Project</a
>
</div>
</div>
<div class="project-card">
<div
class="project-card-image"
style="
background-image: url('images/projects/kumasi-library-cover.jpg');
"
>
<div class="project-card-overlay"></div>
</div>
<div class="project-card-content">
<div class="project-card-category">Education</div>
<h3 class="project-card-title">Kumasi University Library</h3>
<p class="project-card-location">Kumasi, Ghana</p>
<a
href="project-kumasi-university-library.html"
class="project-card-link"
>View Project</a
>
</div>
</div>
<div class="project-card">
<div
class="project-card-image"
style="
background-image: url('images/projects/tema-hotel-cover.jpg');
"
>
<div class="project-card-overlay"></div>
</div>
<div class="project-card-content">
<div class="project-card-category">Hospitality</div>
<h3 class="project-card-title">Tema Harbor Hotel</h3>
<p class="project-card-location">Tema, Ghana</p>
<a
href="project-tema-harbor-hotel.html"
class="project-card-link"
>View Project</a
>
</div>
</div>
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer class="footer">
<div class="container">
<div class="footer-content">
<div class="footer-logo">
<img src="images/kh3_logo.png" alt="KH3" class="logo-image" />
<span class="logo-text">KH3</span>
</div>
<div class="footer-links">
<a href="contact.html">Contact</a>
<a href="about.html">About</a>
<a href="projects.html">Projects</a>
<a href="services.html">Services</a>
<a href="careers.html">Careers</a>
<a href="privacy.html">Privacy Policy</a>
<a href="terms.html">Terms of Service</a>
</div>
<div class="footer-copyright">© 2024 KH3. All rights reserved.</div>
</div>
</div>
</footer>
<script src="js/main.js"></script>
</body>
</html>

282
services.html
View file

@ -64,6 +64,91 @@
.hover-card:hover { transform: translateY(-6px); box-shadow: 0 10px 30px rgba(0,0,0,0.25); }
.hover-row { transition: transform 200ms ease, color 200ms ease; }
.hover-row:hover { transform: translateX(6px); color: #ffffff; }
/* Diagonal mask reveal for hero image */
@keyframes diagMaskReveal {
0% {
opacity: 0;
clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
transform: scale(1.03);
}
55% {
opacity: 1;
/* Sharper diagonal (more vertical edge) */
clip-path: polygon(82% 0, 100% 0, 100% 100%, 64% 100%);
}
100% {
opacity: 1;
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
}
/* Arrow pulse animation */
@keyframes arrowPulse {
0%, 100% {
transform: translateY(0);
opacity: 0.7;
}
50% {
transform: translateY(10px);
opacity: 1;
}
}
.animate-arrowPulse {
animation: arrowPulse 2s ease-in-out infinite;
}
/* Ensure horizontal lines are visible and extend beyond container */
.flex-1.h-px.bg-white {
min-width: 0;
flex: 1 1 0%;
}
/* Slide transition animations for image carousel */
@keyframes slideOutLeft {
0% {
transform: translateX(0) scale(1);
opacity: 1;
}
100% {
transform: translateX(-100%) scale(0.8);
opacity: 0;
}
}
@keyframes slideOutRight {
0% {
transform: translateX(0) scale(1);
opacity: 1;
}
100% {
transform: translateX(100%) scale(0.8);
opacity: 0;
}
}
@keyframes zoomInFromLeft {
0% {
transform: translateX(-100%) scale(1.2);
opacity: 0;
}
100% {
transform: translateX(0) scale(1);
opacity: 1;
}
}
@keyframes zoomInFromRight {
0% {
transform: translateX(100%) scale(1.2);
opacity: 0;
}
100% {
transform: translateX(0) scale(1);
opacity: 1;
}
}
</style>
</head>
<body class="bg-kh3-black text-white font-montserrat">
@ -151,63 +236,88 @@
</div>
</div>
<!-- Hero Section -->
<section class="min-h-screen relative flex">
<!-- Left Panel - Dark Background -->
<div
class="w-1/3 bg-kh3-black relative z-20 flex flex-col justify-center pl-16 pt-8 md:pt-12"
>
<!-- Vertical Line with Diamonds -->
<div
class="absolute left-8 top-1/2 transform -translate-y-1/2 flex flex-col items-center"
>
<div class="w-2.5 h-2.5 bg-white transform rotate-45 mb-8"></div>
<div class="w-px h-32 bg-neutral-800 mb-8"></div>
<div class="w-2.5 h-2.5 bg-white transform rotate-45 mb-8"></div>
<div class="w-px h-32 bg-neutral-800 mb-8"></div>
<div class="w-2.5 h-2.5 bg-white transform rotate-45"></div>
</div>
<!-- Main Content -->
<main class="pt-20">
<!-- Hero Section (Left panel + vertical line + diamond markers, title with horizontal rule) -->
<section class="relative bg-kh3-black">
<div class="grid grid-cols-1 md:grid-cols-2 min-h-[90vh]">
<!-- Left dark panel -->
<div class="relative bg-kh3-black flex items-center justify-center">
<!-- Vertical timeline with diamonds -->
<div
class="absolute left-12 top-8 bottom-16 flex flex-col items-center opacity-0 animate-fade-in-up"
style="animation-delay: 1200ms; animation-fill-mode: forwards;"
>
<div class="w-px flex-1 bg-neutral-800"></div>
<div class="w-2.5 h-2.5 bg-white transform rotate-45"></div>
<div class="w-px flex-1 bg-neutral-800"></div>
<div class="w-2.5 h-2.5 bg-white transform rotate-45"></div>
<div class="w-px flex-1 bg-neutral-800"></div>
<div class="w-2.5 h-2.5 bg-white transform rotate-45"></div>
<div class="w-px flex-1 bg-neutral-800"></div>
</div>
<!-- Title with horizontal ruler -->
<div class="mb-8 relative">
<h1 class="text-4xl md:text-6xl tracking-[0.2em] font-bold text-white whitespace-nowrap ml-8 md:ml-12">
OUR SERVICES
</h1>
</div>
<!-- Subtle underline -->
<div
class="w-24 h-px bg-kh3-grey mt-8 opacity-0"
style="animation: fadeInUp 1s ease-out 1.2s forwards"
></div>
</div>
<!-- Right Panel - Image Background -->
<div class="w-2/3 relative z-10 h-full min-h-[90vh]">
<div
class="absolute left-0 right-0 top-20 md:top-28 bottom-0 bg-cover bg-center"
style="background-image: url('assets/images/room.png')"
>
<div class="absolute inset-0 bg-black/60"></div>
</div>
<!-- Scroll Prompt -->
<div
class="absolute bottom-10 left-4 flex flex-col items-center text-white/60"
>
<span class="text-sm mb-2">Scroll</span>
<div class="animate-pulse">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
<path
fill-rule="evenodd"
d="M16.707 10.293a1 1 0 010 1.414l-6 6a1 1 0 01-1.414 0l-6-6a1 1 0 111.414-1.414L9 14.586V3a1 1 0 012 0v11.586l4.293-4.293a1 1 0 011.414 0z"
clip-rule="evenodd"
></path>
</svg>
<!-- Title with horizontal ruler -->
<div class="pl-28 pr-6 w-full relative overflow-visible z-30">
<div
class="flex items-center gap-6 opacity-0 animate-fade-in-up"
style="animation-delay: 1600ms; animation-fill-mode: forwards;"
>
<div class="flex-1 h-px bg-white"></div>
<h1
class="whitespace-nowrap text-4xl md:text-6xl tracking-[0.2em] font-bold"
>
OUR SERVICES
</h1>
<div class="flex-1 h-px bg-white"></div>
</div>
</div>
</div>
<!-- Right image panel -->
<div class="relative overflow-hidden pt-32 z-10">
<!-- Current image -->
<img
id="servicesCurrentImg"
src="assets/images/room.png"
alt="KH3 Services"
class="w-full h-full object-cover opacity-0 absolute inset-0"
style="animation: diagMaskReveal 1500ms ease-out 300ms forwards"
/>
<!-- Next image (for transitions) -->
<img
id="servicesNextImg"
src="assets/images/chair.png"
alt="KH3 Services"
class="w-full h-full object-cover opacity-0 absolute inset-0"
/>
<!-- Down arrow prompt -->
<button
id="servicesScrollArrow"
class="flex absolute bottom-10 left-6 items-center flex-col text-white/80 hover:text-white transition-colors opacity-0 animate-fade-in-up"
style="animation-delay: 1900ms; animation-fill-mode: forwards;"
>
<span class="text-xs tracking-widest mb-2">SCROLL</span>
<svg
class="w-5 h-5 animate-arrowPulse"
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="M19 9l-7 7-7-7"
/>
</svg>
<div class="w-px h-8 bg-white/70"></div>
</button>
</div>
</div>
</section>
</main>
<!-- KH3 Services Sections -->
<section class="py-32 bg-kh3-black text-white">
@ -732,5 +842,73 @@
if (menuGrid) menuGrid.style.transform = "none";
}
</script>
<script src="js/main.js"></script>
<script>
// Services page image carousel
const servicesImgs = [
"assets/images/room.png",
"assets/images/chair.png",
"assets/images/google.png"
];
const servicesCurrentImg = document.getElementById("servicesCurrentImg");
const servicesNextImg = document.getElementById("servicesNextImg");
if (servicesCurrentImg && servicesNextImg) {
let currentIndex = 0;
let isTransitioning = false;
// Alternate slide directions for dynamic effect
const slideDirections = ["left", "right"];
let slideIndex = 0;
function performServicesSlideZoomTransition() {
if (isTransitioning) return;
isTransitioning = true;
// Get next image index
const nextIndex = (currentIndex + 1) % servicesImgs.length;
const slideDirection = slideDirections[slideIndex % slideDirections.length];
slideIndex++;
// Set up next image
servicesNextImg.src = servicesImgs[nextIndex];
servicesNextImg.style.opacity = "1";
// Apply animations based on slide direction
if (slideDirection === "left") {
// Current slides out left, next zooms in from right
servicesCurrentImg.style.animation = "slideOutLeft 1s ease-in-out forwards";
servicesNextImg.style.animation = "zoomInFromRight 1s ease-in-out forwards";
} else {
// Current slides out right, next zooms in from left
servicesCurrentImg.style.animation = "slideOutRight 1s ease-in-out forwards";
servicesNextImg.style.animation = "zoomInFromLeft 1s ease-in-out forwards";
}
// After animation completes, swap the images
setTimeout(() => {
// Swap the images
servicesCurrentImg.src = servicesImgs[nextIndex];
servicesCurrentImg.style.animation = "";
servicesCurrentImg.style.transform = "";
servicesCurrentImg.style.opacity = "1";
// Reset next image
servicesNextImg.style.animation = "";
servicesNextImg.style.transform = "";
servicesNextImg.style.opacity = "0";
currentIndex = nextIndex;
isTransitioning = false;
}, 1000); // Match animation duration
}
// Start the transition cycle after initial diagonal reveal
setTimeout(() => {
setInterval(performServicesSlideZoomTransition, 10000); // Every 10 seconds
}, 2000); // Wait for initial diagonal reveal to complete
}
</script>
</body>
</html>

36
styles/output.css
View file

@ -592,6 +592,10 @@ video {
pointer-events: none;
}
.visible {
visibility: visible;
}
.static {
position: static;
}
@ -725,6 +729,10 @@ video {
top: 2rem;
}
.top-28 {
top: 7rem;
}
.-z-10 {
z-index: -10;
}
@ -745,6 +753,10 @@ video {
z-index: 50;
}
.z-30 {
z-index: 30;
}
.mx-4 {
margin-left: 1rem;
margin-right: 1rem;
@ -1203,6 +1215,22 @@ video {
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes fadeInUp {
0% {
opacity: 0;
transform: translateY(30px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.animate-fade-in-up {
animation: fadeInUp 1s ease-out forwards;
}
.cursor-pointer {
cursor: pointer;
}
@ -1333,6 +1361,10 @@ video {
overflow: hidden;
}
.overflow-visible {
overflow: visible;
}
.overflow-x-hidden {
overflow-x: hidden;
}
@ -1696,6 +1728,10 @@ video {
padding-top: 2rem;
}
.pt-32 {
padding-top: 8rem;
}
.text-center {
text-align: center;
}