polished webspages and completed implementation.
This commit is contained in:
parent
23791a2768
commit
9a3a106fca
7 changed files with 1194 additions and 172 deletions
262
index.html
262
index.html
|
|
@ -17,6 +17,90 @@
|
|||
background-color: currentColor;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/* Enhanced hover effects for curated cards */
|
||||
.curated-card {
|
||||
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.curated-card:hover .curated-card-image {
|
||||
transform: scale(1.08) translateY(-12px);
|
||||
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
.curated-card-image {
|
||||
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.curated-card img {
|
||||
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.curated-card:hover img {
|
||||
transform: scale(1.15);
|
||||
}
|
||||
|
||||
.curated-card-title {
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.curated-card:hover .curated-card-title {
|
||||
color: #b8873f;
|
||||
}
|
||||
|
||||
/* Smooth scrolling for the entire page */
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
/* Active navigation link styling */
|
||||
.nav-link.active {
|
||||
color: #b8873f !important;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Product card hover effects */
|
||||
.product-card {
|
||||
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
will-change: transform;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.product-card:hover {
|
||||
transform: translateY(-8px) scale(1.02);
|
||||
box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.product-card-image {
|
||||
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.product-card:hover .product-card-image img {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.product-card-image img {
|
||||
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.product-card-title {
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.product-card:hover .product-card-title {
|
||||
color: #b8873f;
|
||||
}
|
||||
|
||||
.product-card-description {
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.product-card:hover .product-card-description {
|
||||
color: #666;
|
||||
}
|
||||
</style>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&family=Playfair+Display:wght@100;200;300;400;500;600;700&family=Poppins:wght@400;500;600&display=swap"
|
||||
|
|
@ -44,35 +128,35 @@
|
|||
<li>
|
||||
<a
|
||||
href="index.html"
|
||||
class="text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors text-shadow-default"
|
||||
class="nav-link text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors text-shadow-default"
|
||||
>Home</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="products.html"
|
||||
class="text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors text-shadow-default"
|
||||
href="#products"
|
||||
class="nav-link text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors text-shadow-default"
|
||||
>Products</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="projects.html"
|
||||
class="text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors text-shadow-default"
|
||||
href="#projects-button"
|
||||
class="nav-link text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors text-shadow-default"
|
||||
>Projects</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="clients.html"
|
||||
class="text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors text-shadow-default"
|
||||
href="#clients"
|
||||
class="nav-link text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors text-shadow-default"
|
||||
>Clients</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="about.html"
|
||||
class="text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors text-shadow-default"
|
||||
href="#about"
|
||||
class="nav-link text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors text-shadow-default"
|
||||
>About</a
|
||||
>
|
||||
</li>
|
||||
|
|
@ -177,9 +261,9 @@
|
|||
<!-- Image Cards -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-6xl mx-auto">
|
||||
<!-- Lounge Areas Card -->
|
||||
<div class="text-center">
|
||||
<div class="text-center cursor-pointer curated-card">
|
||||
<div
|
||||
class="bg-black rounded-lg overflow-hidden mb-8 w-full max-w-sm h-96 md:h-[484px] mx-auto"
|
||||
class="curated-card-image bg-black rounded-lg overflow-hidden mb-8 w-full max-w-sm h-96 md:h-[484px] mx-auto"
|
||||
>
|
||||
<img
|
||||
src="assets/images/google_accra.jpg"
|
||||
|
|
@ -188,16 +272,16 @@
|
|||
/>
|
||||
</div>
|
||||
<h3
|
||||
class="font-playfair font-semibold text-2xl leading-tight text-gray-800"
|
||||
class="font-playfair font-semibold text-2xl leading-tight text-gray-800 curated-card-title"
|
||||
>
|
||||
Lounge Areas
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<!-- Workstations Card -->
|
||||
<div class="text-center">
|
||||
<div class="text-center cursor-pointer curated-card">
|
||||
<div
|
||||
class="bg-gray-100 rounded-lg overflow-hidden mb-8 w-full max-w-sm h-96 md:h-[484px] mx-auto"
|
||||
class="curated-card-image bg-gray-100 rounded-lg overflow-hidden mb-8 w-full max-w-sm h-96 md:h-[484px] mx-auto"
|
||||
>
|
||||
<img
|
||||
src="assets/images/workstation.jpg"
|
||||
|
|
@ -206,16 +290,16 @@
|
|||
/>
|
||||
</div>
|
||||
<h3
|
||||
class="font-playfair font-semibold text-2xl leading-tight text-gray-800"
|
||||
class="font-playfair font-semibold text-2xl leading-tight text-gray-800 curated-card-title"
|
||||
>
|
||||
Workstations
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<!-- Conference Rooms Card -->
|
||||
<div class="text-center">
|
||||
<div class="text-center cursor-pointer curated-card">
|
||||
<div
|
||||
class="bg-blue-50 rounded-lg overflow-hidden mb-8 w-full max-w-sm h-96 md:h-[484px] mx-auto"
|
||||
class="curated-card-image bg-blue-50 rounded-lg overflow-hidden mb-8 w-full max-w-sm h-96 md:h-[484px] mx-auto"
|
||||
>
|
||||
<img
|
||||
src="assets/images/conference_room.jpg"
|
||||
|
|
@ -224,7 +308,7 @@
|
|||
/>
|
||||
</div>
|
||||
<h3
|
||||
class="font-playfair font-semibold text-2xl leading-tight text-gray-800"
|
||||
class="font-playfair font-semibold text-2xl leading-tight text-gray-800 curated-card-title"
|
||||
>
|
||||
Conference Rooms
|
||||
</h3>
|
||||
|
|
@ -234,7 +318,7 @@
|
|||
</section>
|
||||
|
||||
<!-- Our Story Section -->
|
||||
<section class="relative bg-white pt-8 pb-16">
|
||||
<section id="about" class="relative bg-white pt-8 pb-16">
|
||||
<div class="max-w-7xl mx-auto px-5">
|
||||
<!-- Section Header -->
|
||||
<div class="text-center mb-16">
|
||||
|
|
@ -256,11 +340,12 @@
|
|||
/>
|
||||
<!-- Navigation Arrow -->
|
||||
<div class="absolute top-1/2 right-4 transform -translate-y-1/2">
|
||||
<div
|
||||
class="bg-white rounded-full w-12 h-12 flex items-center justify-center shadow-lg"
|
||||
<button
|
||||
id="story-arrow-button"
|
||||
class="bg-white rounded-full w-12 h-12 flex items-center justify-center shadow-lg hover:bg-uc-gold hover:shadow-xl hover:scale-110 transition-all duration-300 cursor-pointer group"
|
||||
>
|
||||
<svg
|
||||
class="w-6 h-6"
|
||||
class="w-6 h-6 transition-all duration-300 group-hover:stroke-white group-hover:scale-110"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
|
|
@ -272,7 +357,7 @@
|
|||
d="M9 5l7 7-7 7"
|
||||
></path>
|
||||
</svg>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -298,6 +383,7 @@
|
|||
</p>
|
||||
|
||||
<button
|
||||
id="projects-button"
|
||||
class="bg-black bg-opacity-70 text-white font-playfair font-normal text-xl md:text-2xl lg:text-3xl leading-tight tracking-wider px-8 py-4 rounded-lg hover:bg-opacity-80 transition-all text-center max-w-sm"
|
||||
>
|
||||
Explore past projects
|
||||
|
|
@ -323,7 +409,7 @@
|
|||
</section>
|
||||
|
||||
<!-- Our Products Section -->
|
||||
<section class="relative bg-white pt-12 pb-20">
|
||||
<section id="products" class="relative bg-white pt-12 pb-20">
|
||||
<div class="max-w-7xl mx-auto px-5">
|
||||
<!-- Section Header -->
|
||||
<div class="text-center mb-16">
|
||||
|
|
@ -345,8 +431,10 @@
|
|||
class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-12"
|
||||
>
|
||||
<!-- Product Card 1: Lounge Chairs -->
|
||||
<div class="bg-light-bg rounded-lg overflow-hidden h-[446px]">
|
||||
<div class="h-[301px] bg-gray-200">
|
||||
<div
|
||||
class="product-card bg-light-bg rounded-lg overflow-hidden h-[446px]"
|
||||
>
|
||||
<div class="product-card-image h-[301px] bg-gray-200">
|
||||
<img
|
||||
src="assets/images/lounge_chair.jpg"
|
||||
alt="Lounge Chairs"
|
||||
|
|
@ -355,19 +443,23 @@
|
|||
</div>
|
||||
<div class="p-4 h-[145px] flex flex-col justify-center">
|
||||
<h3
|
||||
class="font-poppins font-semibold text-xl text-gray-800 mb-2"
|
||||
class="product-card-title font-poppins font-semibold text-xl text-gray-800 mb-2"
|
||||
>
|
||||
Lounge Chairs
|
||||
</h3>
|
||||
<p class="font-poppins font-medium text-sm text-gray-500">
|
||||
<p
|
||||
class="product-card-description font-poppins font-medium text-sm text-gray-500"
|
||||
>
|
||||
Stylish cafe chair
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Product Card 2: Office Chairs -->
|
||||
<div class="bg-light-bg rounded-lg overflow-hidden h-[446px]">
|
||||
<div class="h-[301px] bg-gray-200">
|
||||
<div
|
||||
class="product-card bg-light-bg rounded-lg overflow-hidden h-[446px]"
|
||||
>
|
||||
<div class="product-card-image h-[301px] bg-gray-200">
|
||||
<img
|
||||
src="assets/images/office_chair.jpg"
|
||||
alt="Office Chairs"
|
||||
|
|
@ -376,19 +468,23 @@
|
|||
</div>
|
||||
<div class="p-4 h-[145px] flex flex-col justify-center">
|
||||
<h3
|
||||
class="font-poppins font-semibold text-xl text-gray-800 mb-2"
|
||||
class="product-card-title font-poppins font-semibold text-xl text-gray-800 mb-2"
|
||||
>
|
||||
Office Chairs
|
||||
</h3>
|
||||
<p class="font-poppins font-medium text-sm text-gray-500">
|
||||
<p
|
||||
class="product-card-description font-poppins font-medium text-sm text-gray-500"
|
||||
>
|
||||
Luxury big sofa
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Product Card 3: Conference Room -->
|
||||
<div class="bg-light-bg rounded-lg overflow-hidden h-[446px]">
|
||||
<div class="h-[301px] bg-gray-200">
|
||||
<div
|
||||
class="product-card bg-light-bg rounded-lg overflow-hidden h-[446px]"
|
||||
>
|
||||
<div class="product-card-image h-[301px] bg-gray-200">
|
||||
<img
|
||||
src="assets/images/conference_rooms.jpg"
|
||||
alt="Conference Room"
|
||||
|
|
@ -397,19 +493,23 @@
|
|||
</div>
|
||||
<div class="p-4 h-[145px] flex flex-col justify-center">
|
||||
<h3
|
||||
class="font-poppins font-semibold text-xl text-gray-800 mb-2"
|
||||
class="product-card-title font-poppins font-semibold text-xl text-gray-800 mb-2"
|
||||
>
|
||||
Conference Room
|
||||
</h3>
|
||||
<p class="font-poppins font-medium text-sm text-gray-500">
|
||||
<p
|
||||
class="product-card-description font-poppins font-medium text-sm text-gray-500"
|
||||
>
|
||||
Tables
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Product Card 4: Storage -->
|
||||
<div class="bg-light-bg rounded-lg overflow-hidden h-[446px]">
|
||||
<div class="h-[301px] bg-gray-200">
|
||||
<div
|
||||
class="product-card bg-light-bg rounded-lg overflow-hidden h-[446px]"
|
||||
>
|
||||
<div class="product-card-image h-[301px] bg-gray-200">
|
||||
<img
|
||||
src="assets/images/storage.jpg"
|
||||
alt="Storage"
|
||||
|
|
@ -418,19 +518,23 @@
|
|||
</div>
|
||||
<div class="p-4 h-[145px] flex flex-col justify-center">
|
||||
<h3
|
||||
class="font-poppins font-semibold text-xl text-gray-800 mb-2"
|
||||
class="product-card-title font-poppins font-semibold text-xl text-gray-800 mb-2"
|
||||
>
|
||||
Storage
|
||||
</h3>
|
||||
<p class="font-poppins font-medium text-sm text-gray-500">
|
||||
<p
|
||||
class="product-card-description font-poppins font-medium text-sm text-gray-500"
|
||||
>
|
||||
Outdoor bar table and stool
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Product Card 5: Kitchen -->
|
||||
<div class="bg-light-bg rounded-lg overflow-hidden h-[446px]">
|
||||
<div class="h-[301px] bg-gray-200">
|
||||
<div
|
||||
class="product-card bg-light-bg rounded-lg overflow-hidden h-[446px]"
|
||||
>
|
||||
<div class="product-card-image h-[301px] bg-gray-200">
|
||||
<img
|
||||
src="assets/images/kitchen.jpg"
|
||||
alt="Kitchen"
|
||||
|
|
@ -439,19 +543,23 @@
|
|||
</div>
|
||||
<div class="p-4 h-[145px] flex flex-col justify-center">
|
||||
<h3
|
||||
class="font-poppins font-semibold text-xl text-gray-800 mb-2"
|
||||
class="product-card-title font-poppins font-semibold text-xl text-gray-800 mb-2"
|
||||
>
|
||||
Kitchen
|
||||
</h3>
|
||||
<p class="font-poppins font-medium text-sm text-gray-500">
|
||||
<p
|
||||
class="product-card-description font-poppins font-medium text-sm text-gray-500"
|
||||
>
|
||||
Night lamp
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Product Card 6: Chairs -->
|
||||
<div class="bg-light-bg rounded-lg overflow-hidden h-[446px]">
|
||||
<div class="h-[301px] bg-gray-200">
|
||||
<div
|
||||
class="product-card bg-light-bg rounded-lg overflow-hidden h-[446px]"
|
||||
>
|
||||
<div class="product-card-image h-[301px] bg-gray-200">
|
||||
<img
|
||||
src="assets/images/chairs.jpg"
|
||||
alt="Chairs"
|
||||
|
|
@ -460,19 +568,23 @@
|
|||
</div>
|
||||
<div class="p-4 h-[145px] flex flex-col justify-center">
|
||||
<h3
|
||||
class="font-poppins font-semibold text-xl text-gray-800 mb-2"
|
||||
class="product-card-title font-poppins font-semibold text-xl text-gray-800 mb-2"
|
||||
>
|
||||
Chairs
|
||||
</h3>
|
||||
<p class="font-poppins font-medium text-sm text-gray-500">
|
||||
<p
|
||||
class="product-card-description font-poppins font-medium text-sm text-gray-500"
|
||||
>
|
||||
Small mug
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Product Card 7: Pods -->
|
||||
<div class="bg-light-bg rounded-lg overflow-hidden h-[446px]">
|
||||
<div class="h-[301px] bg-gray-200">
|
||||
<div
|
||||
class="product-card bg-light-bg rounded-lg overflow-hidden h-[446px]"
|
||||
>
|
||||
<div class="product-card-image h-[301px] bg-gray-200">
|
||||
<img
|
||||
src="assets/images/pods.jpg"
|
||||
alt="Pods"
|
||||
|
|
@ -481,19 +593,23 @@
|
|||
</div>
|
||||
<div class="p-4 h-[145px] flex flex-col justify-center">
|
||||
<h3
|
||||
class="font-poppins font-semibold text-xl text-gray-800 mb-2"
|
||||
class="product-card-title font-poppins font-semibold text-xl text-gray-800 mb-2"
|
||||
>
|
||||
Pods
|
||||
</h3>
|
||||
<p class="font-poppins font-medium text-sm text-gray-500">
|
||||
<p
|
||||
class="product-card-description font-poppins font-medium text-sm text-gray-500"
|
||||
>
|
||||
Cute bed set
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Product Card 8: Potty -->
|
||||
<div class="bg-light-bg rounded-lg overflow-hidden h-[446px]">
|
||||
<div class="h-[301px] bg-gray-200">
|
||||
<div
|
||||
class="product-card bg-light-bg rounded-lg overflow-hidden h-[446px]"
|
||||
>
|
||||
<div class="product-card-image h-[301px] bg-gray-200">
|
||||
<img
|
||||
src="assets/images/potty.jpg"
|
||||
alt="Potty"
|
||||
|
|
@ -502,11 +618,13 @@
|
|||
</div>
|
||||
<div class="p-4 h-[145px] flex flex-col justify-center">
|
||||
<h3
|
||||
class="font-poppins font-semibold text-xl text-gray-800 mb-2"
|
||||
class="product-card-title font-poppins font-semibold text-xl text-gray-800 mb-2"
|
||||
>
|
||||
Potty
|
||||
</h3>
|
||||
<p class="font-poppins font-medium text-sm text-gray-500">
|
||||
<p
|
||||
class="product-card-description font-poppins font-medium text-sm text-gray-500"
|
||||
>
|
||||
Minimalist flower pot
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -633,7 +751,7 @@
|
|||
</section>
|
||||
|
||||
<!-- Trusted by Leading Brands Section -->
|
||||
<section class="relative bg-floral-white py-12">
|
||||
<section id="clients" class="relative bg-floral-white py-12">
|
||||
<div class="max-w-7xl mx-auto px-5">
|
||||
<div class="text-center">
|
||||
<!-- Section Title -->
|
||||
|
|
@ -703,27 +821,35 @@
|
|||
<div class="max-w-7xl mx-auto px-5 py-16">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||
<!-- Company Information -->
|
||||
<div class="space-y-2">
|
||||
<div class="space-y-1">
|
||||
<!-- Logo -->
|
||||
<div class="w-16 h-20">
|
||||
<img
|
||||
src="assets/images/khy_logo.png"
|
||||
alt="khy"
|
||||
class="w-full h-full object-contain"
|
||||
/>
|
||||
<div class="w-16 h-20 -mt-6">
|
||||
<a
|
||||
href="index.html"
|
||||
aria-label="Go to KHY home"
|
||||
title="KHY Home"
|
||||
class="inline-block w-full h-full group focus:outline-none focus-visible:ring-2 focus-visible:ring-uc-gold rounded-md transition"
|
||||
>
|
||||
<img
|
||||
src="assets/images/khy_logo.png"
|
||||
alt="KHY logo"
|
||||
loading="lazy"
|
||||
class="w-full h-full object-contain transition-transform duration-300 group-hover:scale-105"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Address -->
|
||||
<p
|
||||
class="font-playfair font-normal text-base leading-relaxed text-gray-600"
|
||||
class="font-playfair font-normal text-base leading-relaxed text-gray-600 -mt-4"
|
||||
>
|
||||
5 Labone Crescent, Greater Accra, Ghana
|
||||
</p>
|
||||
|
||||
<!-- Contact Info -->
|
||||
<div class="space-y-1">
|
||||
<div class="space-y-1 -mt-2">
|
||||
<!-- Phone -->
|
||||
<div class="flex items-center space-x-3">
|
||||
<div class="flex items-center space-x-3 -mt-1">
|
||||
<img
|
||||
src="assets/images/phone.png"
|
||||
alt="Phone"
|
||||
|
|
@ -735,7 +861,7 @@
|
|||
</div>
|
||||
|
||||
<!-- Email -->
|
||||
<div class="flex items-center space-x-3">
|
||||
<div class="flex items-center space-x-3 -mt-1">
|
||||
<img src="assets/images/mail.png" alt="Email" class="w-4 h-4" />
|
||||
<span class="font-playfair font-normal text-base text-gray-800">
|
||||
design@khyltd.com
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue