mirror of
https://git.kh3group.com/georgebiri/kh3_website.git
synced 2026-07-02 07:03:46 +00:00
194 lines
5.9 KiB
HTML
194 lines
5.9 KiB
HTML
<!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>
|
|
|