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
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>
|
||||
|
||||
Loading…
Add table
Add a link
Reference in a new issue