Initial commit: KH3 Group Limited website with enhanced animations and slide+zoom transitions
This commit is contained in:
commit
ecebd00021
23 changed files with 5879 additions and 0 deletions
67
.gitignore
vendored
Normal file
67
.gitignore
vendored
Normal file
|
|
@ -0,0 +1,67 @@
|
|||
# Dependencies
|
||||
node_modules/
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
|
||||
# Build outputs
|
||||
dist/
|
||||
build/
|
||||
*.min.css
|
||||
*.min.js
|
||||
styles/main.css
|
||||
|
||||
# Environment variables
|
||||
.env
|
||||
.env.local
|
||||
.env.development.local
|
||||
.env.test.local
|
||||
.env.production.local
|
||||
|
||||
# IDE and editor files
|
||||
.vscode/
|
||||
.idea/
|
||||
*.swp
|
||||
*.swo
|
||||
*~
|
||||
|
||||
# OS generated files
|
||||
.DS_Store
|
||||
.DS_Store?
|
||||
._*
|
||||
.Spotlight-V100
|
||||
.Trashes
|
||||
ehthumbs.db
|
||||
Thumbs.db
|
||||
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
|
||||
# Runtime data
|
||||
pids
|
||||
*.pid
|
||||
*.seed
|
||||
*.pid.lock
|
||||
|
||||
# Coverage directory used by tools like istanbul
|
||||
coverage/
|
||||
|
||||
# Temporary folders
|
||||
tmp/
|
||||
temp/
|
||||
|
||||
# Optional npm cache directory
|
||||
.npm
|
||||
|
||||
# Optional eslint cache
|
||||
.eslintcache
|
||||
|
||||
# Optional REPL history
|
||||
.node_repl_history
|
||||
|
||||
# Output of 'npm pack'
|
||||
*.tgz
|
||||
|
||||
# Yarn Integrity file
|
||||
.yarn-integrity
|
||||
130
README.md
Normal file
130
README.md
Normal file
|
|
@ -0,0 +1,130 @@
|
|||
# KH3 Website
|
||||
|
||||
A clean, minimal static website built with HTML, JavaScript, and Tailwind CSS for KH3 - Building Inspiring Spaces.
|
||||
|
||||
## Quick Start
|
||||
|
||||
### Prerequisites
|
||||
|
||||
- Node.js (for Tailwind CSS CLI)
|
||||
- npm (comes with Node.js)
|
||||
|
||||
### Setup Instructions
|
||||
|
||||
1. **Clone or download the project**
|
||||
|
||||
```bash
|
||||
git clone <repository-url>
|
||||
cd fbs-static
|
||||
```
|
||||
|
||||
2. **Install Tailwind CSS**
|
||||
|
||||
```bash
|
||||
npm install
|
||||
```
|
||||
|
||||
3. **Generate the optimized CSS**
|
||||
|
||||
```bash
|
||||
npm run build
|
||||
```
|
||||
|
||||
4. **Open the website**
|
||||
- Open `index.html` in your web browser
|
||||
- Or serve it with a local server
|
||||
|
||||
## Project Structure
|
||||
|
||||
```
|
||||
fbs-static/
|
||||
├─ index.html # Main website page
|
||||
├─ about.html # About Us page
|
||||
├─ contact.html # Contact page
|
||||
├─ src/
|
||||
│ └─ input.css # Tailwind directives
|
||||
├─ styles/
|
||||
│ └─ main.css # Generated optimized CSS
|
||||
├─ js/
|
||||
│ └─ main.js # JavaScript functionality
|
||||
├─ assets/images/ # Image assets
|
||||
├─ tailwind.config.js # Tailwind configuration
|
||||
├─ package.json # Dependencies
|
||||
└─ README.md # This file
|
||||
```
|
||||
|
||||
## Development
|
||||
|
||||
### For Active Development
|
||||
|
||||
If you're making frequent changes to the HTML, you can use watch mode to automatically regenerate CSS:
|
||||
|
||||
```bash
|
||||
npm run watch
|
||||
```
|
||||
|
||||
Keep this running in a terminal while you work. It will automatically rebuild the CSS whenever you save changes to your HTML files.
|
||||
|
||||
### Manual Regeneration
|
||||
|
||||
If watch mode doesn't work or you prefer manual control:
|
||||
|
||||
```bash
|
||||
# One-time build
|
||||
npm run build
|
||||
|
||||
# Watch mode (auto-regenerate on changes)
|
||||
npm run watch
|
||||
```
|
||||
|
||||
**Note:** If watch mode doesn't work, just run the one-time build command after each change.
|
||||
|
||||
### What This Does
|
||||
|
||||
- Scans your HTML files for used Tailwind classes
|
||||
- Generates only the CSS you need (purges unused styles)
|
||||
- Creates a tiny, optimized CSS file (~1KB vs ~3MB CDN)
|
||||
|
||||
## Features
|
||||
|
||||
- **Clean, minimal design** with Tailwind CSS
|
||||
- **Optimized performance** with purged CSS
|
||||
- **Responsive layout** that works on all devices
|
||||
- **No build tools required** for production
|
||||
- **Easy maintenance** with Tailwind utility classes
|
||||
- **Custom animations** for logo, menu grid, and buttons
|
||||
- **Auto-switching hero images**
|
||||
- **Staggered loading animations**
|
||||
|
||||
## Customization
|
||||
|
||||
To add new Tailwind classes:
|
||||
|
||||
1. Add the classes to your HTML
|
||||
2. Run the CSS generation command
|
||||
3. The new styles will be included in the output
|
||||
|
||||
To modify the design:
|
||||
|
||||
1. Change Tailwind classes in HTML files
|
||||
2. Regenerate CSS with the CLI command
|
||||
3. Refresh your browser to see changes
|
||||
|
||||
## Custom Colors & Animations
|
||||
|
||||
The website uses custom KH3 brand colors and animations defined in `tailwind.config.js`:
|
||||
|
||||
- **Colors**: kh3-black, kh3-red, kh3-gold, kh3-darkGold, kh3-lightGold
|
||||
- **Animations**: logo-float, text-float, border-glow, menu-grid-cycle, fade-in variants
|
||||
|
||||
## Production
|
||||
|
||||
For production deployment:
|
||||
|
||||
1. Run `npm run build` to generate the final CSS
|
||||
2. Upload all files to your web server
|
||||
3. The website will work without Node.js in production
|
||||
|
||||
## License
|
||||
|
||||
MIT License
|
||||
1076
about.html
Normal file
1076
about.html
Normal file
File diff suppressed because it is too large
Load diff
BIN
assets/images/chair.png
Normal file
BIN
assets/images/chair.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.6 MiB |
BIN
assets/images/google.png
Normal file
BIN
assets/images/google.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.8 MiB |
BIN
assets/images/kh3_logo.png
Normal file
BIN
assets/images/kh3_logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 186 KiB |
BIN
assets/images/kh3_logo_dark.png
Normal file
BIN
assets/images/kh3_logo_dark.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 88 KiB |
BIN
assets/images/room.png
Normal file
BIN
assets/images/room.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.1 MiB |
408
contact.html
Normal file
408
contact.html
Normal file
|
|
@ -0,0 +1,408 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" class="dark">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="stylesheet" href="styles/main.css" />
|
||||
<title>Contact Us - KH3 | Building Inspiring Spaces</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="Get in touch with KH3 for your construction and project management needs. Contact us today for a consultation."
|
||||
/>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&display=swap"
|
||||
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"
|
||||
>
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Header -->
|
||||
<header
|
||||
class="fixed top-0 left-0 right-0 z-40 bg-kh3-black/80 backdrop-blur-sm"
|
||||
>
|
||||
<div class="container mx-auto px-8">
|
||||
<div class="flex justify-between items-center py-6">
|
||||
<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>
|
||||
<div class="cursor-pointer" id="menuToggle">
|
||||
<div class="grid grid-cols-3 gap-1 w-6 h-6">
|
||||
<span class="w-1 h-1 bg-white rounded-full"></span>
|
||||
<span class="w-1 h-1 bg-white rounded-full"></span>
|
||||
<span class="w-1 h-1 bg-white rounded-full"></span>
|
||||
<span class="w-1 h-1 bg-white rounded-full"></span>
|
||||
<span class="w-1 h-1 bg-white rounded-full"></span>
|
||||
<span class="w-1 h-1 bg-white rounded-full"></span>
|
||||
<span class="w-1 h-1 bg-white rounded-full"></span>
|
||||
<span class="w-1 h-1 bg-white rounded-full"></span>
|
||||
<span class="w-1 h-1 bg-white rounded-full"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Hero Section -->
|
||||
<section class="relative h-screen flex items-center justify-center">
|
||||
<div
|
||||
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>
|
||||
<div class="text-xl md:text-2xl text-neutral-300 tracking-widest">
|
||||
LET'S DISCUSS YOUR PROJECT
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="absolute inset-0 bg-gradient-to-b from-transparent to-kh3-black"
|
||||
></div>
|
||||
</section>
|
||||
|
||||
<!-- Contact Section -->
|
||||
<section class="py-20 bg-white text-kh3-black">
|
||||
<div class="container mx-auto px-8 max-w-6xl">
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-16">
|
||||
<div class="space-y-8">
|
||||
<h2 class="text-4xl font-bold">GET IN TOUCH</h2>
|
||||
<p class="text-lg leading-relaxed text-neutral-600">
|
||||
Ready to start your next project? We'd love to hear from you. Fill
|
||||
out the form and we'll get back to you within 24 hours.
|
||||
</p>
|
||||
|
||||
<div class="space-y-8">
|
||||
<div class="flex items-start space-x-4">
|
||||
<div class="text-3xl">📍</div>
|
||||
<div>
|
||||
<h3 class="text-xl font-semibold mb-2">Address</h3>
|
||||
<p class="text-neutral-600">Accra, Ghana<br />Main Office</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-start space-x-4">
|
||||
<div class="text-3xl">📞</div>
|
||||
<div>
|
||||
<h3 class="text-xl font-semibold mb-2">Phone</h3>
|
||||
<p class="text-neutral-600">
|
||||
+233 20 123 4567<br />+233 24 123 4567
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-start space-x-4">
|
||||
<div class="text-3xl">✉️</div>
|
||||
<div>
|
||||
<h3 class="text-xl font-semibold mb-2">Email</h3>
|
||||
<p class="text-neutral-600">
|
||||
info@kh3.com<br />projects@kh3.com
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-start space-x-4">
|
||||
<div class="text-3xl">🕒</div>
|
||||
<div>
|
||||
<h3 class="text-xl font-semibold mb-2">Business Hours</h3>
|
||||
<p class="text-neutral-600">
|
||||
Monday - Friday<br />8:00 AM - 6:00 PM
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-neutral-50 p-8 rounded-lg">
|
||||
<form class="space-y-6" id="contactForm">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<label for="name" class="block text-sm font-semibold mb-2"
|
||||
>Full Name *</label
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
id="name"
|
||||
name="name"
|
||||
required
|
||||
class="w-full px-4 py-3 border border-neutral-300 rounded-md focus:outline-none focus:ring-2 focus:ring-kh3-red focus:border-transparent"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="email" class="block text-sm font-semibold mb-2"
|
||||
>Email Address *</label
|
||||
>
|
||||
<input
|
||||
type="email"
|
||||
id="email"
|
||||
name="email"
|
||||
required
|
||||
class="w-full px-4 py-3 border border-neutral-300 rounded-md focus:outline-none focus:ring-2 focus:ring-kh3-red focus:border-transparent"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="phone" class="block text-sm font-semibold mb-2"
|
||||
>Phone Number</label
|
||||
>
|
||||
<input
|
||||
type="tel"
|
||||
id="phone"
|
||||
name="phone"
|
||||
class="w-full px-4 py-3 border border-neutral-300 rounded-md focus:outline-none focus:ring-2 focus:ring-kh3-red focus:border-transparent"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="company" class="block text-sm font-semibold mb-2"
|
||||
>Company</label
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
id="company"
|
||||
name="company"
|
||||
class="w-full px-4 py-3 border border-neutral-300 rounded-md focus:outline-none focus:ring-2 focus:ring-kh3-red focus:border-transparent"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="service" class="block text-sm font-semibold mb-2"
|
||||
>Service Interest</label
|
||||
>
|
||||
<select
|
||||
id="service"
|
||||
name="service"
|
||||
class="w-full px-4 py-3 border border-neutral-300 rounded-md focus:outline-none focus:ring-2 focus:ring-kh3-red focus:border-transparent"
|
||||
>
|
||||
<option value="">Select a service</option>
|
||||
<option value="design">Interior Design</option>
|
||||
<option value="build">Construction & Build</option>
|
||||
<option value="furnish">Furnishing</option>
|
||||
<option value="full-service">
|
||||
Full Service (Design + Build + Furnish)
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="budget" class="block text-sm font-semibold mb-2"
|
||||
>Project Budget</label
|
||||
>
|
||||
<select
|
||||
id="budget"
|
||||
name="budget"
|
||||
class="w-full px-4 py-3 border border-neutral-300 rounded-md focus:outline-none focus:ring-2 focus:ring-kh3-red focus:border-transparent"
|
||||
>
|
||||
<option value="">Select budget range</option>
|
||||
<option value="under-100k">Under 100K GHS</option>
|
||||
<option value="100k-500k">100K - 500K GHS</option>
|
||||
<option value="500k-1m">500K - 1M GHS</option>
|
||||
<option value="over-1m">Over 1M GHS</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="message" class="block text-sm font-semibold mb-2"
|
||||
>Project Details *</label
|
||||
>
|
||||
<textarea
|
||||
id="message"
|
||||
name="message"
|
||||
rows="6"
|
||||
required
|
||||
placeholder="Tell us about your project, requirements, timeline, and any specific needs..."
|
||||
class="w-full px-4 py-3 border border-neutral-300 rounded-md focus:outline-none focus:ring-2 focus:ring-kh3-red focus:border-transparent resize-none"
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
class="w-full bg-kh3-red text-white py-4 px-8 rounded-md hover:bg-kh3-red/90 transition-colors duration-300 flex items-center justify-center space-x-2"
|
||||
>
|
||||
<span>Send Message</span>
|
||||
<span>→</span>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Map Section -->
|
||||
<section class="py-20 bg-kh3-black text-white">
|
||||
<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">
|
||||
<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
|
||||
accessible from all major areas.
|
||||
</p>
|
||||
<div class="text-kh3-red font-semibold">
|
||||
<span>📍 5.5600° N, 0.2057° W</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="bg-kh3-black text-white py-16">
|
||||
<div class="container mx-auto px-8 max-w-6xl">
|
||||
<div
|
||||
class="flex flex-col md:flex-row justify-between items-center space-y-6 md:space-y-0"
|
||||
>
|
||||
<div class="flex items-center gap-3">
|
||||
<img src="assets/images/kh3_logo.png" alt="KH3" class="w-12 h-12" />
|
||||
<span class="text-2xl font-bold tracking-wider">KH3</span>
|
||||
</div>
|
||||
<div class="flex space-x-8">
|
||||
<a
|
||||
href="contact.html"
|
||||
class="text-neutral-300 hover:text-white transition-colors"
|
||||
>Contact</a
|
||||
>
|
||||
<a
|
||||
href="privacy.html"
|
||||
class="text-neutral-300 hover:text-white transition-colors"
|
||||
>Privacy Policy</a
|
||||
>
|
||||
<a
|
||||
href="terms.html"
|
||||
class="text-neutral-300 hover:text-white transition-colors"
|
||||
>Terms of Service</a
|
||||
>
|
||||
</div>
|
||||
<div class="text-neutral-400">© 2024 KH3. All rights reserved.</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="js/main.js"></script>
|
||||
<script>
|
||||
// Menu toggle functionality
|
||||
const menuToggle = document.getElementById("menuToggle");
|
||||
const navOverlay = document.getElementById("navOverlay");
|
||||
const navClose = document.getElementById("navClose");
|
||||
|
||||
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");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Form submission
|
||||
const contactForm = document.getElementById("contactForm");
|
||||
if (contactForm) {
|
||||
contactForm.addEventListener("submit", (e) => {
|
||||
e.preventDefault();
|
||||
// Add your form submission logic here
|
||||
alert(
|
||||
"Thank you for your message! We'll get back to you within 24 hours."
|
||||
);
|
||||
contactForm.reset();
|
||||
});
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
18
data/approach.json
Normal file
18
data/approach.json
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
[
|
||||
{
|
||||
"number": "01",
|
||||
"title": "Professional",
|
||||
"description": "We maintain the highest standards of professionalism in every aspect of our work. From initial consultation to project completion, our team demonstrates expertise, reliability, and unwavering commitment to quality. We adhere to international best practices and local regulations, ensuring your project meets all requirements while exceeding expectations."
|
||||
},
|
||||
{
|
||||
"number": "02",
|
||||
"title": "Innovative",
|
||||
"description": "Innovation drives everything we do at KH3. We embrace cutting-edge technologies, sustainable practices, and creative solutions to deliver exceptional results. Our approach combines traditional construction wisdom with modern methodologies, creating spaces that are both timeless and forward-thinking."
|
||||
},
|
||||
{
|
||||
"number": "03",
|
||||
"title": "Caring",
|
||||
"description": "We care deeply about our clients, our team, and the communities we serve. This commitment to care manifests in our attention to detail, our dedication to client satisfaction, and our responsibility to environmental stewardship. We build relationships that last beyond project completion."
|
||||
}
|
||||
]
|
||||
|
||||
15
data/brands.json
Normal file
15
data/brands.json
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
[
|
||||
{
|
||||
"name": "Symphony",
|
||||
"blurb": "Symphony specializes in premium audio-visual integration and smart building solutions. We transform spaces with cutting-edge technology that enhances user experience and operational efficiency.",
|
||||
"logo": "images/brands/symphony-logo.png",
|
||||
"url": "https://symphony-gh.com"
|
||||
},
|
||||
{
|
||||
"name": "Knock",
|
||||
"blurb": "Knock delivers innovative door and access solutions for commercial and residential projects. Our products combine security, aesthetics, and functionality to create seamless entry experiences.",
|
||||
"logo": "images/brands/knock-logo.png",
|
||||
"url": "https://knock-gh.com"
|
||||
}
|
||||
]
|
||||
|
||||
145
data/projects.json
Normal file
145
data/projects.json
Normal file
|
|
@ -0,0 +1,145 @@
|
|||
[
|
||||
{
|
||||
"slug": "accra-corporate-tower",
|
||||
"title": "Accra Corporate Tower",
|
||||
"category": "Corporate",
|
||||
"location": "Accra, Ghana",
|
||||
"client": "Ghana Investment Promotion Centre",
|
||||
"typeOfWork": "Turnkey Design & Fit-out",
|
||||
"sizeM2": 2500,
|
||||
"year": 2023,
|
||||
"coverImage": "images/projects/accra-corporate-tower-cover.jpg",
|
||||
"gallery": [
|
||||
"images/projects/accra-corporate-tower-1.jpg",
|
||||
"images/projects/accra-corporate-tower-2.jpg",
|
||||
"images/projects/accra-corporate-tower-3.jpg",
|
||||
"images/projects/accra-corporate-tower-4.jpg",
|
||||
"images/projects/accra-corporate-tower-5.jpg",
|
||||
"images/projects/accra-corporate-tower-6.jpg"
|
||||
],
|
||||
"summary": "A state-of-the-art corporate headquarters featuring modern workspace design, sustainable materials, and cutting-edge technology integration.",
|
||||
"story": {
|
||||
"challenge": "Create a prestigious corporate environment that reflects Ghana's economic growth while incorporating sustainable design principles.",
|
||||
"approach": "Implemented modular workspace design with natural lighting, local materials, and flexible meeting spaces.",
|
||||
"outcome": "Delivered a 2,500 sqm premium office space that increased employee productivity by 40% and achieved LEED certification."
|
||||
}
|
||||
},
|
||||
{
|
||||
"slug": "kumasi-university-library",
|
||||
"title": "Kumasi University Library",
|
||||
"category": "Education",
|
||||
"location": "Kumasi, Ghana",
|
||||
"client": "Kwame Nkrumah University of Science and Technology",
|
||||
"typeOfWork": "Design & Build",
|
||||
"sizeM2": 1800,
|
||||
"year": 2023,
|
||||
"coverImage": "images/projects/kumasi-library-cover.jpg",
|
||||
"gallery": [
|
||||
"images/projects/kumasi-library-1.jpg",
|
||||
"images/projects/kumasi-library-2.jpg",
|
||||
"images/projects/kumasi-library-3.jpg",
|
||||
"images/projects/kumasi-library-4.jpg"
|
||||
],
|
||||
"summary": "Modern academic library designed to foster learning and research with flexible study spaces and digital integration.",
|
||||
"story": {
|
||||
"challenge": "Transform traditional library spaces into modern learning environments that support both individual study and collaborative research.",
|
||||
"approach": "Designed flexible zones with movable furniture, digital workstations, and natural lighting to create an inspiring academic atmosphere.",
|
||||
"outcome": "Created a 1,800 sqm learning hub that increased student engagement and became a model for modern academic facilities in West Africa."
|
||||
}
|
||||
},
|
||||
{
|
||||
"slug": "tema-harbor-hotel",
|
||||
"title": "Tema Harbor Hotel",
|
||||
"category": "Hospitality",
|
||||
"location": "Tema, Ghana",
|
||||
"client": "Tema Development Corporation",
|
||||
"typeOfWork": "Interior Design & Fit-out",
|
||||
"sizeM2": 3200,
|
||||
"year": 2022,
|
||||
"coverImage": "images/projects/tema-hotel-cover.jpg",
|
||||
"gallery": [
|
||||
"images/projects/tema-hotel-1.jpg",
|
||||
"images/projects/tema-hotel-2.jpg",
|
||||
"images/projects/tema-hotel-3.jpg",
|
||||
"images/projects/tema-hotel-4.jpg",
|
||||
"images/projects/tema-hotel-5.jpg"
|
||||
],
|
||||
"summary": "Luxury hotel interior featuring coastal-inspired design, premium finishes, and world-class amenities for business and leisure travelers.",
|
||||
"story": {
|
||||
"challenge": "Create a luxury hotel experience that celebrates Ghana's coastal heritage while meeting international hospitality standards.",
|
||||
"approach": "Integrated local cultural elements with modern luxury design, using sustainable materials and creating seamless indoor-outdoor connections.",
|
||||
"outcome": "Delivered a 3,200 sqm luxury hotel that achieved 4-star rating and became a landmark destination in Tema's hospitality sector."
|
||||
}
|
||||
},
|
||||
{
|
||||
"slug": "accra-mall-retail",
|
||||
"title": "Accra Mall Retail Expansion",
|
||||
"category": "Retail",
|
||||
"location": "Accra, Ghana",
|
||||
"client": "Accra Mall Management",
|
||||
"typeOfWork": "Retail Fit-out & Design",
|
||||
"sizeM2": 1500,
|
||||
"year": 2022,
|
||||
"coverImage": "images/projects/accra-mall-cover.jpg",
|
||||
"gallery": [
|
||||
"images/projects/accra-mall-1.jpg",
|
||||
"images/projects/accra-mall-2.jpg",
|
||||
"images/projects/accra-mall-3.jpg",
|
||||
"images/projects/accra-mall-4.jpg"
|
||||
],
|
||||
"summary": "Modern retail spaces designed to enhance customer experience and maximize sales potential for premium brands.",
|
||||
"story": {
|
||||
"challenge": "Transform existing mall spaces into premium retail environments that attract international brands and enhance customer experience.",
|
||||
"approach": "Implemented modular retail design with flexible layouts, premium lighting, and customer flow optimization.",
|
||||
"outcome": "Created 1,500 sqm of premium retail space that increased foot traffic by 60% and attracted major international brands."
|
||||
}
|
||||
},
|
||||
{
|
||||
"slug": "takoradi-office-complex",
|
||||
"title": "Takoradi Office Complex",
|
||||
"category": "Corporate",
|
||||
"location": "Takoradi, Ghana",
|
||||
"client": "Ghana National Petroleum Corporation",
|
||||
"typeOfWork": "Design & Build",
|
||||
"sizeM2": 2800,
|
||||
"year": 2021,
|
||||
"coverImage": "images/projects/takoradi-office-cover.jpg",
|
||||
"gallery": [
|
||||
"images/projects/takoradi-office-1.jpg",
|
||||
"images/projects/takoradi-office-2.jpg",
|
||||
"images/projects/takoradi-office-3.jpg",
|
||||
"images/projects/takoradi-office-4.jpg",
|
||||
"images/projects/takoradi-office-5.jpg"
|
||||
],
|
||||
"summary": "Modern office complex designed for the energy sector, featuring collaborative workspaces and advanced technology integration.",
|
||||
"story": {
|
||||
"challenge": "Design a corporate headquarters that reflects the energy sector's innovation while creating productive work environments.",
|
||||
"approach": "Created open-plan offices with collaborative zones, advanced AV systems, and sustainable energy features.",
|
||||
"outcome": "Delivered a 2,800 sqm office complex that improved team collaboration and became a benchmark for corporate design in Ghana's energy sector."
|
||||
}
|
||||
},
|
||||
{
|
||||
"slug": "cape-coast-school",
|
||||
"title": "Cape Coast International School",
|
||||
"category": "Education",
|
||||
"location": "Cape Coast, Ghana",
|
||||
"client": "Cape Coast Education Trust",
|
||||
"typeOfWork": "Turnkey Design & Build",
|
||||
"sizeM2": 2200,
|
||||
"year": 2021,
|
||||
"coverImage": "images/projects/cape-coast-school-cover.jpg",
|
||||
"gallery": [
|
||||
"images/projects/cape-coast-school-1.jpg",
|
||||
"images/projects/cape-coast-school-2.jpg",
|
||||
"images/projects/cape-coast-school-3.jpg",
|
||||
"images/projects/cape-coast-school-4.jpg"
|
||||
],
|
||||
"summary": "International school campus featuring modern classrooms, science labs, and sports facilities designed for 21st-century learning.",
|
||||
"story": {
|
||||
"challenge": "Create an educational environment that meets international standards while incorporating local cultural elements and sustainable design.",
|
||||
"approach": "Designed flexible learning spaces with integrated technology, outdoor learning areas, and community gathering spaces.",
|
||||
"outcome": "Built a 2,200 sqm school campus that enhanced learning outcomes and became a model for modern education facilities in Ghana."
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
54
data/services.json
Normal file
54
data/services.json
Normal file
|
|
@ -0,0 +1,54 @@
|
|||
[
|
||||
{
|
||||
"slug": "design",
|
||||
"title": "Design",
|
||||
"intro": "Our comprehensive design services transform your vision into detailed, buildable plans that optimize space, functionality, and aesthetics.",
|
||||
"bullets": [
|
||||
"Site assessment and feasibility studies",
|
||||
"Conceptual design and space planning",
|
||||
"Detailed architectural drawings and specifications",
|
||||
"MEP (Mechanical, Electrical, Plumbing) design",
|
||||
"Interior design and material selection",
|
||||
"Lighting design and acoustic planning",
|
||||
"3D visualization and virtual walkthroughs",
|
||||
"Building Information Modeling (BIM)",
|
||||
"Value engineering and cost optimization",
|
||||
"Regulatory compliance and permit documentation"
|
||||
]
|
||||
},
|
||||
{
|
||||
"slug": "build",
|
||||
"title": "Build",
|
||||
"intro": "From groundbreaking to completion, our construction management expertise ensures projects are delivered on time, within budget, and to the highest quality standards.",
|
||||
"bullets": [
|
||||
"Project management and coordination",
|
||||
"Construction planning and scheduling",
|
||||
"Quality control and assurance",
|
||||
"Health and safety management",
|
||||
"Subcontractor management and coordination",
|
||||
"Material procurement and logistics",
|
||||
"Progress monitoring and reporting",
|
||||
"Change order management",
|
||||
"Commissioning and handover",
|
||||
"Post-construction support and maintenance"
|
||||
]
|
||||
},
|
||||
{
|
||||
"slug": "furnish",
|
||||
"title": "Furnish",
|
||||
"intro": "Complete your space with our comprehensive furnishing services, from custom furniture design to complete fit-out solutions that bring your vision to life.",
|
||||
"bullets": [
|
||||
"Custom furniture design and manufacturing",
|
||||
"Procurement and supply chain management",
|
||||
"Installation and fit-out services",
|
||||
"Workplace consultancy and optimization",
|
||||
"Furniture layout and space planning",
|
||||
"Audio-visual and technology integration",
|
||||
"Signage and branding implementation",
|
||||
"Soft furnishings and accessories",
|
||||
"Maintenance and aftercare services",
|
||||
"Sustainable and ergonomic solutions"
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
67
data/team.json
Normal file
67
data/team.json
Normal file
|
|
@ -0,0 +1,67 @@
|
|||
{
|
||||
"team": [
|
||||
{
|
||||
"name": "Kwame Asante",
|
||||
"role": "Managing Director",
|
||||
"photo": "images/team/kwame-asante.jpg",
|
||||
"bio": "With over 15 years of experience in construction project management, Kwame leads KH3's strategic vision and oversees all major projects. His expertise spans corporate, hospitality, and educational sectors across West Africa."
|
||||
},
|
||||
{
|
||||
"name": "Ama Osei",
|
||||
"role": "Head of Design",
|
||||
"photo": "images/team/ama-osei.jpg",
|
||||
"bio": "Ama brings 12 years of architectural and interior design experience to KH3. She specializes in sustainable design solutions and has led award-winning projects in Ghana's corporate and hospitality sectors."
|
||||
},
|
||||
{
|
||||
"name": "Kofi Mensah",
|
||||
"role": "Construction Manager",
|
||||
"photo": "images/team/kofi-mensah.jpg",
|
||||
"bio": "Kofi manages all construction operations with a focus on quality, safety, and timely delivery. His background in civil engineering and project management ensures excellence in every build."
|
||||
},
|
||||
{
|
||||
"name": "Efua Addo",
|
||||
"role": "Project Coordinator",
|
||||
"photo": "images/team/efua-addo.jpg",
|
||||
"bio": "Efua coordinates project delivery across all phases, from initial planning to final handover. Her attention to detail and client communication skills ensure seamless project execution."
|
||||
},
|
||||
{
|
||||
"name": "Yaw Darko",
|
||||
"role": "Senior Architect",
|
||||
"photo": "images/team/yaw-darko.jpg",
|
||||
"bio": "Yaw leads our architectural team with expertise in modern design principles and sustainable building practices. His innovative approach has shaped many of Ghana's landmark projects."
|
||||
},
|
||||
{
|
||||
"name": "Akosua Boateng",
|
||||
"role": "Interior Designer",
|
||||
"photo": "images/team/akosua-boateng.jpg",
|
||||
"bio": "Akosua creates inspiring interior spaces that balance functionality with aesthetics. Her work spans corporate offices, luxury hotels, and educational facilities across Ghana."
|
||||
}
|
||||
],
|
||||
"partners": [
|
||||
{
|
||||
"name": "Ghana Investment Promotion Centre",
|
||||
"logo": "images/partners/gipc-logo.png"
|
||||
},
|
||||
{
|
||||
"name": "Kwame Nkrumah University of Science and Technology",
|
||||
"logo": "images/partners/knust-logo.png"
|
||||
},
|
||||
{
|
||||
"name": "Ghana National Petroleum Corporation",
|
||||
"logo": "images/partners/gnpc-logo.png"
|
||||
},
|
||||
{
|
||||
"name": "Tema Development Corporation",
|
||||
"logo": "images/partners/tdc-logo.png"
|
||||
},
|
||||
{
|
||||
"name": "Accra Mall Management",
|
||||
"logo": "images/partners/accra-mall-logo.png"
|
||||
},
|
||||
{
|
||||
"name": "Cape Coast Education Trust",
|
||||
"logo": "images/partners/cape-coast-trust-logo.png"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
1249
index.html
Normal file
1249
index.html
Normal file
File diff suppressed because it is too large
Load diff
392
js/main.js
Normal file
392
js/main.js
Normal file
|
|
@ -0,0 +1,392 @@
|
|||
// Main JavaScript for FBS Website
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
// Initialize all functionality
|
||||
initNavigation();
|
||||
initScrollAnimations();
|
||||
initSmoothScrolling();
|
||||
initSlider();
|
||||
initCustomCursor();
|
||||
initScrollProgress();
|
||||
initLoadingScreen();
|
||||
initTextReveal();
|
||||
initParallax();
|
||||
});
|
||||
|
||||
// Navigation functionality
|
||||
function initNavigation() {
|
||||
const menuToggle = document.getElementById("menuToggle");
|
||||
const navOverlay = document.getElementById("navOverlay");
|
||||
const navClose = document.getElementById("navClose");
|
||||
const navLinks = document.querySelectorAll(".nav-link");
|
||||
|
||||
// Open navigation
|
||||
menuToggle.addEventListener("click", function () {
|
||||
navOverlay.classList.add("active");
|
||||
document.body.style.overflow = "hidden";
|
||||
});
|
||||
|
||||
// Close navigation
|
||||
navClose.addEventListener("click", function () {
|
||||
navOverlay.classList.remove("active");
|
||||
document.body.style.overflow = "";
|
||||
});
|
||||
|
||||
// Close navigation when clicking outside
|
||||
navOverlay.addEventListener("click", function (e) {
|
||||
if (e.target === navOverlay) {
|
||||
navOverlay.classList.remove("active");
|
||||
document.body.style.overflow = "";
|
||||
}
|
||||
});
|
||||
|
||||
// Close navigation when clicking on a link
|
||||
navLinks.forEach((link) => {
|
||||
link.addEventListener("click", function () {
|
||||
navOverlay.classList.remove("active");
|
||||
document.body.style.overflow = "";
|
||||
});
|
||||
});
|
||||
|
||||
// Close navigation with Escape key
|
||||
document.addEventListener("keydown", function (e) {
|
||||
if (e.key === "Escape" && navOverlay.classList.contains("active")) {
|
||||
navOverlay.classList.remove("active");
|
||||
document.body.style.overflow = "";
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Scroll-triggered animations
|
||||
function initScrollAnimations() {
|
||||
const observerOptions = {
|
||||
threshold: 0.1,
|
||||
rootMargin: "0px 0px -50px 0px",
|
||||
};
|
||||
|
||||
const observer = new IntersectionObserver(function (entries) {
|
||||
entries.forEach((entry) => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add("animated");
|
||||
}
|
||||
});
|
||||
}, observerOptions);
|
||||
|
||||
// Observe all elements with animation classes
|
||||
const animatedElements = document.querySelectorAll(
|
||||
".animate-on-scroll, .animate-on-scroll-left, .animate-on-scroll-right, .animate-on-scroll-scale"
|
||||
);
|
||||
|
||||
animatedElements.forEach((el) => {
|
||||
observer.observe(el);
|
||||
});
|
||||
}
|
||||
|
||||
// Smooth scrolling for anchor links
|
||||
function initSmoothScrolling() {
|
||||
const links = document.querySelectorAll('a[href^="#"]');
|
||||
|
||||
links.forEach((link) => {
|
||||
link.addEventListener("click", function (e) {
|
||||
e.preventDefault();
|
||||
const targetId = this.getAttribute("href");
|
||||
const targetElement = document.querySelector(targetId);
|
||||
|
||||
if (targetElement) {
|
||||
const offsetTop = targetElement.offsetTop;
|
||||
window.scrollTo({
|
||||
top: offsetTop,
|
||||
behavior: "smooth",
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Global scroll to section function
|
||||
function scrollToSection(sectionId) {
|
||||
const section = document.getElementById(sectionId);
|
||||
if (section) {
|
||||
section.scrollIntoView({
|
||||
behavior: "smooth",
|
||||
block: "start",
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Slider functionality
|
||||
function initSlider() {
|
||||
const sliderDots = document.querySelectorAll(".slider-dot");
|
||||
let currentSlide = 0;
|
||||
|
||||
sliderDots.forEach((dot, index) => {
|
||||
dot.addEventListener("click", function () {
|
||||
// Remove active class from all dots
|
||||
sliderDots.forEach((d) => d.classList.remove("active"));
|
||||
|
||||
// Add active class to clicked dot
|
||||
this.classList.add("active");
|
||||
|
||||
// Update current slide
|
||||
currentSlide = index;
|
||||
|
||||
// Here you would typically change the background image
|
||||
// For now, we'll just add a visual effect
|
||||
const heroImage = document.querySelector(".hero-image");
|
||||
heroImage.style.transform = `scale(1.05)`;
|
||||
|
||||
setTimeout(() => {
|
||||
heroImage.style.transform = "scale(1)";
|
||||
}, 300);
|
||||
});
|
||||
});
|
||||
|
||||
// Auto-slide functionality (optional)
|
||||
setInterval(() => {
|
||||
currentSlide = (currentSlide + 1) % sliderDots.length;
|
||||
sliderDots.forEach((dot, index) => {
|
||||
dot.classList.toggle("active", index === currentSlide);
|
||||
});
|
||||
}, 5000);
|
||||
}
|
||||
|
||||
// Custom cursor
|
||||
function initCustomCursor() {
|
||||
// Only enable on desktop
|
||||
if (window.innerWidth <= 768) return;
|
||||
|
||||
const cursor = document.createElement("div");
|
||||
cursor.className = "custom-cursor";
|
||||
document.body.appendChild(cursor);
|
||||
|
||||
document.addEventListener("mousemove", function (e) {
|
||||
cursor.style.left = e.clientX + "px";
|
||||
cursor.style.top = e.clientY + "px";
|
||||
});
|
||||
|
||||
// Add hover effect for interactive elements
|
||||
const interactiveElements = document.querySelectorAll(
|
||||
"a, button, .cta-button, .service-card"
|
||||
);
|
||||
|
||||
interactiveElements.forEach((el) => {
|
||||
el.addEventListener("mouseenter", function () {
|
||||
cursor.classList.add("hover");
|
||||
});
|
||||
|
||||
el.addEventListener("mouseleave", function () {
|
||||
cursor.classList.remove("hover");
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Scroll progress indicator
|
||||
function initScrollProgress() {
|
||||
const progressBar = document.createElement("div");
|
||||
progressBar.className = "scroll-progress";
|
||||
document.body.appendChild(progressBar);
|
||||
|
||||
window.addEventListener("scroll", function () {
|
||||
const scrollTop = window.pageYOffset;
|
||||
const docHeight = document.body.scrollHeight - window.innerHeight;
|
||||
const scrollPercent = (scrollTop / docHeight) * 100;
|
||||
|
||||
progressBar.style.width = scrollPercent + "%";
|
||||
});
|
||||
}
|
||||
|
||||
// Loading screen
|
||||
function initLoadingScreen() {
|
||||
const loading = document.createElement("div");
|
||||
loading.className = "loading";
|
||||
loading.innerHTML = '<div class="loading-spinner"></div>';
|
||||
document.body.appendChild(loading);
|
||||
|
||||
// Hide loading screen after page loads
|
||||
window.addEventListener("load", function () {
|
||||
setTimeout(() => {
|
||||
loading.classList.add("hidden");
|
||||
setTimeout(() => {
|
||||
loading.remove();
|
||||
}, 500);
|
||||
}, 1000);
|
||||
});
|
||||
}
|
||||
|
||||
// Text reveal animations
|
||||
function initTextReveal() {
|
||||
const textElements = document.querySelectorAll(
|
||||
".main-headline, .section-title"
|
||||
);
|
||||
|
||||
textElements.forEach((element) => {
|
||||
const text = element.textContent;
|
||||
element.innerHTML = "";
|
||||
element.classList.add("text-reveal");
|
||||
|
||||
text.split("").forEach((char) => {
|
||||
const span = document.createElement("span");
|
||||
span.textContent = char === " " ? "\u00A0" : char;
|
||||
element.appendChild(span);
|
||||
});
|
||||
});
|
||||
|
||||
// Trigger text reveal on scroll
|
||||
const textObserver = new IntersectionObserver(
|
||||
function (entries) {
|
||||
entries.forEach((entry) => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add("revealed");
|
||||
}
|
||||
});
|
||||
},
|
||||
{ threshold: 0.5 }
|
||||
);
|
||||
|
||||
document.querySelectorAll(".text-reveal").forEach((el) => {
|
||||
textObserver.observe(el);
|
||||
});
|
||||
}
|
||||
|
||||
// Parallax effects
|
||||
function initParallax() {
|
||||
const parallaxElements = document.querySelectorAll(
|
||||
".hero-image, .vertical-line"
|
||||
);
|
||||
|
||||
window.addEventListener("scroll", function () {
|
||||
const scrolled = window.pageYOffset;
|
||||
|
||||
parallaxElements.forEach((element) => {
|
||||
const speed = element.dataset.speed || 0.5;
|
||||
const yPos = -(scrolled * speed);
|
||||
element.style.transform = `translateY(${yPos}px)`;
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Utility functions
|
||||
function debounce(func, wait) {
|
||||
let timeout;
|
||||
return function executedFunction(...args) {
|
||||
const later = () => {
|
||||
clearTimeout(timeout);
|
||||
func(...args);
|
||||
};
|
||||
clearTimeout(timeout);
|
||||
timeout = setTimeout(later, wait);
|
||||
};
|
||||
}
|
||||
|
||||
// Handle window resize
|
||||
window.addEventListener(
|
||||
"resize",
|
||||
debounce(function () {
|
||||
// Reinitialize cursor on resize
|
||||
const cursor = document.querySelector(".custom-cursor");
|
||||
if (cursor && window.innerWidth <= 768) {
|
||||
cursor.remove();
|
||||
} else if (!cursor && window.innerWidth > 768) {
|
||||
initCustomCursor();
|
||||
}
|
||||
}, 250)
|
||||
);
|
||||
|
||||
// Add ripple effect to buttons
|
||||
document.addEventListener("click", function (e) {
|
||||
if (
|
||||
e.target.classList.contains("cta-button") ||
|
||||
e.target.closest(".cta-button")
|
||||
) {
|
||||
const button = e.target.classList.contains("cta-button")
|
||||
? e.target
|
||||
: e.target.closest(".cta-button");
|
||||
button.classList.add("ripple");
|
||||
|
||||
setTimeout(() => {
|
||||
button.classList.remove("ripple");
|
||||
}, 600);
|
||||
}
|
||||
});
|
||||
|
||||
// Form handling (for contact forms)
|
||||
function handleFormSubmit(form) {
|
||||
const formData = new FormData(form);
|
||||
const submitButton = form.querySelector('button[type="submit"]');
|
||||
const originalText = submitButton.textContent;
|
||||
|
||||
// Show loading state
|
||||
submitButton.textContent = "Sending...";
|
||||
submitButton.disabled = true;
|
||||
|
||||
// Simulate form submission (replace with actual endpoint)
|
||||
setTimeout(() => {
|
||||
submitButton.textContent = "Sent!";
|
||||
submitButton.style.backgroundColor = "var(--color-primary)";
|
||||
|
||||
setTimeout(() => {
|
||||
submitButton.textContent = originalText;
|
||||
submitButton.disabled = false;
|
||||
submitButton.style.backgroundColor = "";
|
||||
form.reset();
|
||||
}, 2000);
|
||||
}, 1500);
|
||||
}
|
||||
|
||||
// Initialize form handlers
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
const forms = document.querySelectorAll("form");
|
||||
forms.forEach((form) => {
|
||||
form.addEventListener("submit", function (e) {
|
||||
e.preventDefault();
|
||||
handleFormSubmit(this);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
// Add some interactive effects to service cards
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
const serviceCards = document.querySelectorAll(".service-card");
|
||||
|
||||
serviceCards.forEach((card) => {
|
||||
card.addEventListener("mouseenter", function () {
|
||||
this.style.transform = "translateY(-10px) scale(1.02)";
|
||||
});
|
||||
|
||||
card.addEventListener("mouseleave", function () {
|
||||
this.style.transform = "translateY(0) scale(1)";
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
// Keyboard navigation support
|
||||
document.addEventListener("keydown", function (e) {
|
||||
// Tab navigation for accessibility
|
||||
if (e.key === "Tab") {
|
||||
document.body.classList.add("keyboard-navigation");
|
||||
}
|
||||
});
|
||||
|
||||
document.addEventListener("mousedown", function () {
|
||||
document.body.classList.remove("keyboard-navigation");
|
||||
});
|
||||
|
||||
// Performance optimization: Lazy load images
|
||||
function initLazyLoading() {
|
||||
const images = document.querySelectorAll("img[data-src]");
|
||||
|
||||
const imageObserver = new IntersectionObserver(function (entries) {
|
||||
entries.forEach((entry) => {
|
||||
if (entry.isIntersecting) {
|
||||
const img = entry.target;
|
||||
img.src = img.dataset.src;
|
||||
img.classList.remove("lazy");
|
||||
imageObserver.unobserve(img);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
images.forEach((img) => imageObserver.observe(img));
|
||||
}
|
||||
|
||||
// Initialize lazy loading
|
||||
document.addEventListener("DOMContentLoaded", initLazyLoading);
|
||||
130
js/projects.js
Normal file
130
js/projects.js
Normal file
|
|
@ -0,0 +1,130 @@
|
|||
// Projects Page JavaScript
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
const pills = document.querySelectorAll("[data-filter]");
|
||||
const grid = document.querySelector("#projectsGrid");
|
||||
let projectsData = [];
|
||||
|
||||
// Load projects data
|
||||
async function loadProjects() {
|
||||
try {
|
||||
const response = await fetch("/data/projects.json");
|
||||
projectsData = await response.json();
|
||||
renderProjects("All");
|
||||
} catch (error) {
|
||||
console.error("Error loading projects:", error);
|
||||
grid.innerHTML =
|
||||
'<p class="error-message">Error loading projects. Please try again later.</p>';
|
||||
}
|
||||
}
|
||||
|
||||
// Render projects based on category
|
||||
function renderProjects(category = "All") {
|
||||
const filteredProjects =
|
||||
category === "All"
|
||||
? projectsData
|
||||
: projectsData.filter((project) => project.category === category);
|
||||
|
||||
grid.classList.add("fade-out");
|
||||
|
||||
setTimeout(() => {
|
||||
grid.innerHTML = filteredProjects
|
||||
.map(
|
||||
(project) => `
|
||||
<div class="project-card" onclick="window.location.href='project-${project.slug}.html'">
|
||||
<div class="project-card-image" style="background-image: url('${project.coverImage}')">
|
||||
<div class="project-card-overlay"></div>
|
||||
</div>
|
||||
<div class="project-card-content">
|
||||
<div class="project-card-category">${project.category}</div>
|
||||
<h3 class="project-card-title">${project.title}</h3>
|
||||
<p class="project-card-location">${project.location}</p>
|
||||
<a href="project-${project.slug}.html" class="project-card-link">View Project</a>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
)
|
||||
.join("");
|
||||
|
||||
grid.classList.remove("fade-out");
|
||||
grid.classList.add("fade-in");
|
||||
|
||||
setTimeout(() => {
|
||||
grid.classList.remove("fade-in");
|
||||
}, 180);
|
||||
}, 120);
|
||||
}
|
||||
|
||||
// Handle filter pill clicks
|
||||
pills.forEach((pill) => {
|
||||
pill.addEventListener("click", (e) => {
|
||||
e.preventDefault();
|
||||
const category = pill.dataset.filter;
|
||||
|
||||
// Update pill states
|
||||
pills.forEach((p) => {
|
||||
p.setAttribute("aria-pressed", p === pill ? "true" : "false");
|
||||
});
|
||||
|
||||
// Update URL
|
||||
const url = new URL(location);
|
||||
if (category === "All") {
|
||||
url.searchParams.delete("category");
|
||||
} else {
|
||||
url.searchParams.set("category", category);
|
||||
}
|
||||
history.pushState({}, "", url);
|
||||
|
||||
// Render filtered projects
|
||||
renderProjects(category);
|
||||
});
|
||||
});
|
||||
|
||||
// Handle browser back/forward
|
||||
window.addEventListener("popstate", () => {
|
||||
const category = new URL(location).searchParams.get("category") || "All";
|
||||
const activePill = document.querySelector(`[data-filter="${category}"]`);
|
||||
|
||||
if (activePill) {
|
||||
pills.forEach((p) => {
|
||||
p.setAttribute("aria-pressed", p === activePill ? "true" : "false");
|
||||
});
|
||||
renderProjects(category);
|
||||
}
|
||||
});
|
||||
|
||||
// Initialize with URL category if present
|
||||
const initialCategory =
|
||||
new URL(location).searchParams.get("category") || "All";
|
||||
const initialPill = document.querySelector(
|
||||
`[data-filter="${initialCategory}"]`
|
||||
);
|
||||
|
||||
if (initialPill) {
|
||||
pills.forEach((p) => {
|
||||
p.setAttribute("aria-pressed", p === initialPill ? "true" : "false");
|
||||
});
|
||||
}
|
||||
|
||||
// Load projects on page load
|
||||
loadProjects();
|
||||
});
|
||||
|
||||
// Keyboard navigation for filter pills
|
||||
document.addEventListener("keydown", function (e) {
|
||||
const activePill = document.querySelector('.pill[aria-pressed="true"]');
|
||||
const pills = Array.from(document.querySelectorAll(".pill"));
|
||||
const currentIndex = pills.indexOf(activePill);
|
||||
|
||||
if (e.key === "ArrowRight" || e.key === "ArrowDown") {
|
||||
e.preventDefault();
|
||||
const nextIndex = (currentIndex + 1) % pills.length;
|
||||
pills[nextIndex].click();
|
||||
pills[nextIndex].focus();
|
||||
} else if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
|
||||
e.preventDefault();
|
||||
const prevIndex = currentIndex === 0 ? pills.length - 1 : currentIndex - 1;
|
||||
pills[prevIndex].click();
|
||||
pills[prevIndex].focus();
|
||||
}
|
||||
});
|
||||
|
||||
1483
package-lock.json
generated
Normal file
1483
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load diff
22
package.json
Normal file
22
package.json
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
{
|
||||
"name": "kh3-website",
|
||||
"version": "1.0.0",
|
||||
"description": "KH3 - Building Inspiring Spaces",
|
||||
"main": "index.html",
|
||||
"scripts": {
|
||||
"build": "tailwindcss -i ./src/input.css -o ./styles/main.css",
|
||||
"watch": "tailwindcss -i ./src/input.css -o ./styles/main.css --watch",
|
||||
"dev": "tailwindcss -i ./src/input.css -o ./styles/main.css --watch"
|
||||
},
|
||||
"devDependencies": {
|
||||
"tailwindcss": "^3.4.0"
|
||||
},
|
||||
"keywords": [
|
||||
"construction",
|
||||
"project-management",
|
||||
"fit-outs",
|
||||
"ghana"
|
||||
],
|
||||
"author": "KH3",
|
||||
"license": "MIT"
|
||||
}
|
||||
320
project-accra-corporate-tower.html
Normal file
320
project-accra-corporate-tower.html
Normal file
|
|
@ -0,0 +1,320 @@
|
|||
<!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>
|
||||
|
||||
194
projects.html
Normal file
194
projects.html
Normal file
|
|
@ -0,0 +1,194 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Projects - KH3 | Building Inspiring Spaces</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="Explore KH3's portfolio of construction and project management projects across Ghana. Corporate, Education, Hospitality, and Retail projects."
|
||||
/>
|
||||
<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" aria-current="page">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>
|
||||
<!-- Hero Section -->
|
||||
<section class="hero-section">
|
||||
<div class="container">
|
||||
<div class="hero-content">
|
||||
<h1 class="hero-title">Our Projects</h1>
|
||||
<p class="hero-subtitle">
|
||||
Discover our portfolio of construction and project management
|
||||
excellence across Ghana
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Projects Filter Section -->
|
||||
<section class="projects-filter-section">
|
||||
<div class="container">
|
||||
<div class="filter-container">
|
||||
<div
|
||||
class="filter-group"
|
||||
role="tablist"
|
||||
aria-label="Project categories"
|
||||
>
|
||||
<button
|
||||
class="pill"
|
||||
data-filter="All"
|
||||
aria-pressed="true"
|
||||
role="tab"
|
||||
>
|
||||
All Projects
|
||||
</button>
|
||||
<button
|
||||
class="pill"
|
||||
data-filter="Corporate"
|
||||
aria-pressed="false"
|
||||
role="tab"
|
||||
>
|
||||
Corporate
|
||||
</button>
|
||||
<button
|
||||
class="pill"
|
||||
data-filter="Education"
|
||||
aria-pressed="false"
|
||||
role="tab"
|
||||
>
|
||||
Education
|
||||
</button>
|
||||
<button
|
||||
class="pill"
|
||||
data-filter="Hospitality"
|
||||
aria-pressed="false"
|
||||
role="tab"
|
||||
>
|
||||
Hospitality
|
||||
</button>
|
||||
<button
|
||||
class="pill"
|
||||
data-filter="Retail"
|
||||
aria-pressed="false"
|
||||
role="tab"
|
||||
>
|
||||
Retail
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Projects Grid Section -->
|
||||
<section class="projects-grid-section">
|
||||
<div class="container">
|
||||
<div class="projects-grid" id="projectsGrid">
|
||||
<!-- Projects will be loaded here via JavaScript -->
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA Section -->
|
||||
<section class="cta-section">
|
||||
<div class="container">
|
||||
<div class="cta-content">
|
||||
<h2>Ready to Start Your Project?</h2>
|
||||
<p>Let's discuss how KH3 can bring your vision to life</p>
|
||||
<a href="contact.html" class="btn-primary">Get in Touch</a>
|
||||
</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>
|
||||
<script src="js/projects.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
3
src/input.css
Normal file
3
src/input.css
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
106
tailwind.config.js
Normal file
106
tailwind.config.js
Normal file
|
|
@ -0,0 +1,106 @@
|
|||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
content: ["./*.html", "./js/*.js"],
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
kh3: {
|
||||
black: "#212629",
|
||||
red: "#B03037",
|
||||
gold: "#b8860b",
|
||||
darkGold: "#8b6914",
|
||||
lightGold: "#daa520",
|
||||
},
|
||||
black: "#000000",
|
||||
white: "#ffffff",
|
||||
},
|
||||
fontFamily: {
|
||||
montserrat: ["Montserrat", "sans-serif"],
|
||||
calibri: ["Calibri", "sans-serif"],
|
||||
},
|
||||
animation: {
|
||||
"logo-float": "logoFloat 3s ease-in-out infinite",
|
||||
"text-float": "textFloat 4s ease-in-out infinite",
|
||||
"border-glow": "borderGlow 3s ease-in-out infinite",
|
||||
"menu-grid-cycle": "menuGridCycle 15s ease-in-out infinite",
|
||||
"fade-in-up": "fadeInUp 1s ease-out forwards",
|
||||
"fade-in-left": "fadeInLeft 1s ease-out forwards",
|
||||
"fade-in-right": "fadeInRight 1s ease-out forwards",
|
||||
"fade-in-center": "fadeInCenter 1s ease-out forwards",
|
||||
"logo-glow": "logoGlow 3s ease-in-out infinite",
|
||||
},
|
||||
keyframes: {
|
||||
logoFloat: {
|
||||
"0%, 100%": { transform: "translateY(0px)" },
|
||||
"50%": { transform: "translateY(-10px)" },
|
||||
},
|
||||
textFloat: {
|
||||
"0%, 100%": { transform: "translateY(0px)" },
|
||||
"50%": { transform: "translateY(-5px)" },
|
||||
},
|
||||
borderGlow: {
|
||||
"0%, 100%": {
|
||||
borderColor: "#ffffff",
|
||||
boxShadow: "0 0 5px rgba(255, 255, 255, 0.3)",
|
||||
},
|
||||
"50%": {
|
||||
borderColor: "#B03037",
|
||||
boxShadow: "0 0 15px rgba(176, 48, 55, 0.6)",
|
||||
},
|
||||
},
|
||||
menuGridCycle: {
|
||||
"0%, 33.33%": {
|
||||
transform: "rotate(0deg) scale(1)",
|
||||
color: "#ffffff",
|
||||
},
|
||||
"6.67%, 26.67%": {
|
||||
transform: "rotate(360deg) scale(1.2)",
|
||||
color: "#B03037",
|
||||
},
|
||||
"33.34%, 66.67%": {
|
||||
transform: "rotate(0deg) scale(1)",
|
||||
color: "#ffffff",
|
||||
},
|
||||
"40%, 60%": {
|
||||
transform: "rotate(360deg) scale(1.2)",
|
||||
color: "#B03037",
|
||||
},
|
||||
"66.68%, 100%": {
|
||||
transform: "rotate(0deg) scale(1)",
|
||||
color: "#ffffff",
|
||||
},
|
||||
},
|
||||
fadeInUp: {
|
||||
"0%": { opacity: "0", transform: "translateY(30px)" },
|
||||
"100%": { opacity: "1", transform: "translateY(0)" },
|
||||
},
|
||||
fadeInLeft: {
|
||||
"0%": { opacity: "0", transform: "translateX(-30px)" },
|
||||
"100%": { opacity: "1", transform: "translateX(0)" },
|
||||
},
|
||||
fadeInRight: {
|
||||
"0%": { opacity: "0", transform: "translateX(30px)" },
|
||||
"100%": { opacity: "1", transform: "translateX(0)" },
|
||||
},
|
||||
fadeInCenter: {
|
||||
"0%": { opacity: "0", transform: "scale(0.9)" },
|
||||
"100%": { opacity: "1", transform: "scale(1)" },
|
||||
},
|
||||
logoGlow: {
|
||||
"0%, 100%": {
|
||||
textShadow:
|
||||
"0 0 1px rgba(255, 255, 255, 0.1), 0 0 1px rgba(176, 48, 55, 0.05)",
|
||||
filter: "brightness(1)",
|
||||
},
|
||||
"50%": {
|
||||
textShadow:
|
||||
"0 0 2px rgba(255, 255, 255, 0.15), 0 0 3px rgba(176, 48, 55, 0.08)",
|
||||
filter: "brightness(1.02)",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
};
|
||||
Loading…
Add table
Add a link
Reference in a new issue