feat: add services page
This commit is contained in:
parent
e53db02cfd
commit
bc95267aa4
8 changed files with 2661 additions and 398 deletions
718
projects.html
718
projects.html
|
|
@ -3,192 +3,576 @@
|
|||
<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" />
|
||||
<title>Projects - KH3</title>
|
||||
<link rel="stylesheet" href="styles/main.css" />
|
||||
<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="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>
|
||||
<body class="bg-kh3-black text-white font-montserrat">
|
||||
<!-- Navigation Menu -->
|
||||
<div
|
||||
id="navMenu"
|
||||
class="fixed left-0 top-0 h-full w-1/3 bg-kh3-black z-50 hidden shadow-2xl"
|
||||
>
|
||||
<div class="p-8 flex flex-col h-full">
|
||||
<!-- Logo -->
|
||||
<div class="flex items-center gap-3 mb-12">
|
||||
<img src="assets/images/kh3_logo.png" alt="KH3" class="w-12 h-12" />
|
||||
<span class="text-white text-2xl font-bold tracking-wider">KH3</span>
|
||||
</div>
|
||||
|
||||
<!-- Navigation Links - Inverted C Layout -->
|
||||
<nav class="flex-1 relative">
|
||||
<div class="absolute inset-0 flex items-center">
|
||||
<div class="relative ml-8">
|
||||
<!-- Navigation items in inverted C shape -->
|
||||
<div class="space-y-6">
|
||||
<!-- HOME -->
|
||||
<a
|
||||
href="index.html"
|
||||
class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-0 font-montserrat"
|
||||
>
|
||||
<span
|
||||
class="inline-block opacity-0 animate-fade-in-left"
|
||||
style="
|
||||
animation-delay: 0.05s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-duration: 0.15s;
|
||||
"
|
||||
>H</span
|
||||
>
|
||||
<span
|
||||
class="inline-block opacity-0 animate-fade-in-left"
|
||||
style="
|
||||
animation-delay: 0.075s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-duration: 0.15s;
|
||||
"
|
||||
>O</span
|
||||
>
|
||||
<span
|
||||
class="inline-block opacity-0 animate-fade-in-left"
|
||||
style="
|
||||
animation-delay: 0.1s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-duration: 0.15s;
|
||||
"
|
||||
>M</span
|
||||
>
|
||||
<span
|
||||
class="inline-block opacity-0 animate-fade-in-left"
|
||||
style="
|
||||
animation-delay: 0.125s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-duration: 0.15s;
|
||||
"
|
||||
>E</span
|
||||
>
|
||||
</a>
|
||||
|
||||
<!-- ABOUT US -->
|
||||
<a
|
||||
href="about.html"
|
||||
class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-6 font-montserrat"
|
||||
>
|
||||
<span
|
||||
class="inline-block opacity-0 animate-fade-in-left"
|
||||
style="
|
||||
animation-delay: 0.15s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-duration: 0.15s;
|
||||
"
|
||||
>A</span
|
||||
>
|
||||
<span
|
||||
class="inline-block opacity-0 animate-fade-in-left"
|
||||
style="
|
||||
animation-delay: 0.175s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-duration: 0.15s;
|
||||
"
|
||||
>B</span
|
||||
>
|
||||
<span
|
||||
class="inline-block opacity-0 animate-fade-in-left"
|
||||
style="
|
||||
animation-delay: 0.2s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-duration: 0.15s;
|
||||
"
|
||||
>O</span
|
||||
>
|
||||
<span
|
||||
class="inline-block opacity-0 animate-fade-in-left"
|
||||
style="
|
||||
animation-delay: 0.225s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-duration: 0.15s;
|
||||
"
|
||||
>U</span
|
||||
>
|
||||
<span
|
||||
class="inline-block opacity-0 animate-fade-in-left"
|
||||
style="
|
||||
animation-delay: 0.25s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-duration: 0.15s;
|
||||
"
|
||||
>T</span
|
||||
>
|
||||
<span
|
||||
class="inline-block opacity-0 animate-fade-in-left"
|
||||
style="
|
||||
animation-delay: 0.275s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-duration: 0.15s;
|
||||
"
|
||||
> </span
|
||||
>
|
||||
<span
|
||||
class="inline-block opacity-0 animate-fade-in-left"
|
||||
style="
|
||||
animation-delay: 0.3s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-duration: 0.15s;
|
||||
"
|
||||
>U</span
|
||||
>
|
||||
<span
|
||||
class="inline-block opacity-0 animate-fade-in-left"
|
||||
style="
|
||||
animation-delay: 0.325s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-duration: 0.15s;
|
||||
"
|
||||
>S</span
|
||||
>
|
||||
</a>
|
||||
|
||||
<!-- SERVICES -->
|
||||
<a
|
||||
href="services.html"
|
||||
class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-12 font-montserrat"
|
||||
>
|
||||
<span
|
||||
class="inline-block opacity-0 animate-fade-in-left"
|
||||
style="
|
||||
animation-delay: 0.35s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-duration: 0.15s;
|
||||
"
|
||||
>S</span
|
||||
>
|
||||
<span
|
||||
class="inline-block opacity-0 animate-fade-in-left"
|
||||
style="
|
||||
animation-delay: 0.375s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-duration: 0.15s;
|
||||
"
|
||||
>E</span
|
||||
>
|
||||
<span
|
||||
class="inline-block opacity-0 animate-fade-in-left"
|
||||
style="
|
||||
animation-delay: 0.4s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-duration: 0.15s;
|
||||
"
|
||||
>R</span
|
||||
>
|
||||
<span
|
||||
class="inline-block opacity-0 animate-fade-in-left"
|
||||
style="
|
||||
animation-delay: 0.425s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-duration: 0.15s;
|
||||
"
|
||||
>V</span
|
||||
>
|
||||
<span
|
||||
class="inline-block opacity-0 animate-fade-in-left"
|
||||
style="
|
||||
animation-delay: 0.45s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-duration: 0.15s;
|
||||
"
|
||||
>I</span
|
||||
>
|
||||
<span
|
||||
class="inline-block opacity-0 animate-fade-in-left"
|
||||
style="
|
||||
animation-delay: 0.475s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-duration: 0.15s;
|
||||
"
|
||||
>C</span
|
||||
>
|
||||
<span
|
||||
class="inline-block opacity-0 animate-fade-in-left"
|
||||
style="
|
||||
animation-delay: 0.5s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-duration: 0.15s;
|
||||
"
|
||||
>E</span
|
||||
>
|
||||
<span
|
||||
class="inline-block opacity-0 animate-fade-in-left"
|
||||
style="
|
||||
animation-delay: 0.525s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-duration: 0.15s;
|
||||
"
|
||||
>S</span
|
||||
>
|
||||
</a>
|
||||
|
||||
<!-- PROJECTS - Active -->
|
||||
<a
|
||||
href="projects.html"
|
||||
class="block text-white text-lg font-medium border-b border-white pb-1 ml-20 font-montserrat"
|
||||
>
|
||||
<span
|
||||
class="inline-block opacity-0 animate-fade-in-left"
|
||||
style="
|
||||
animation-delay: 0.55s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-duration: 0.15s;
|
||||
"
|
||||
>P</span
|
||||
>
|
||||
<span
|
||||
class="inline-block opacity-0 animate-fade-in-left"
|
||||
style="
|
||||
animation-delay: 0.575s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-duration: 0.15s;
|
||||
"
|
||||
>R</span
|
||||
>
|
||||
<span
|
||||
class="inline-block opacity-0 animate-fade-in-left"
|
||||
style="
|
||||
animation-delay: 0.6s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-duration: 0.15s;
|
||||
"
|
||||
>O</span
|
||||
>
|
||||
<span
|
||||
class="inline-block opacity-0 animate-fade-in-left"
|
||||
style="
|
||||
animation-delay: 0.625s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-duration: 0.15s;
|
||||
"
|
||||
>J</span
|
||||
>
|
||||
<span
|
||||
class="inline-block opacity-0 animate-fade-in-left"
|
||||
style="
|
||||
animation-delay: 0.65s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-duration: 0.15s;
|
||||
"
|
||||
>E</span
|
||||
>
|
||||
<span
|
||||
class="inline-block opacity-0 animate-fade-in-left"
|
||||
style="
|
||||
animation-delay: 0.675s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-duration: 0.15s;
|
||||
"
|
||||
>C</span
|
||||
>
|
||||
<span
|
||||
class="inline-block opacity-0 animate-fade-in-left"
|
||||
style="
|
||||
animation-delay: 0.7s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-duration: 0.15s;
|
||||
"
|
||||
>T</span
|
||||
>
|
||||
<span
|
||||
class="inline-block opacity-0 animate-fade-in-left"
|
||||
style="
|
||||
animation-delay: 0.725s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-duration: 0.15s;
|
||||
"
|
||||
>S</span
|
||||
>
|
||||
</a>
|
||||
|
||||
<!-- CONTACTS -->
|
||||
<a
|
||||
href="contact.html"
|
||||
class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-20 font-montserrat"
|
||||
>
|
||||
<span
|
||||
class="inline-block opacity-0 animate-fade-in-left"
|
||||
style="
|
||||
animation-delay: 0.75s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-duration: 0.15s;
|
||||
"
|
||||
>C</span
|
||||
>
|
||||
<span
|
||||
class="inline-block opacity-0 animate-fade-in-left"
|
||||
style="
|
||||
animation-delay: 0.775s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-duration: 0.15s;
|
||||
"
|
||||
>O</span
|
||||
>
|
||||
<span
|
||||
class="inline-block opacity-0 animate-fade-in-left"
|
||||
style="
|
||||
animation-delay: 0.8s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-duration: 0.15s;
|
||||
"
|
||||
>N</span
|
||||
>
|
||||
<span
|
||||
class="inline-block opacity-0 animate-fade-in-left"
|
||||
style="
|
||||
animation-delay: 0.825s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-duration: 0.15s;
|
||||
"
|
||||
>T</span
|
||||
>
|
||||
<span
|
||||
class="inline-block opacity-0 animate-fade-in-left"
|
||||
style="
|
||||
animation-delay: 0.85s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-duration: 0.15s;
|
||||
"
|
||||
>A</span
|
||||
>
|
||||
<span
|
||||
class="inline-block opacity-0 animate-fade-in-left"
|
||||
style="
|
||||
animation-delay: 0.875s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-duration: 0.15s;
|
||||
"
|
||||
>C</span
|
||||
>
|
||||
<span
|
||||
class="inline-block opacity-0 animate-fade-in-left"
|
||||
style="
|
||||
animation-delay: 0.9s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-duration: 0.15s;
|
||||
"
|
||||
>T</span
|
||||
>
|
||||
<span
|
||||
class="inline-block opacity-0 animate-fade-in-left"
|
||||
style="
|
||||
animation-delay: 0.925s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-duration: 0.15s;
|
||||
"
|
||||
>S</span
|
||||
>
|
||||
</a>
|
||||
|
||||
<!-- PARTNERS -->
|
||||
<a
|
||||
href="partners.html"
|
||||
class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-20 font-montserrat"
|
||||
>
|
||||
<span
|
||||
class="inline-block opacity-0 animate-fade-in-left"
|
||||
style="
|
||||
animation-delay: 0.95s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-duration: 0.15s;
|
||||
"
|
||||
>P</span
|
||||
>
|
||||
<span
|
||||
class="inline-block opacity-0 animate-fade-in-left"
|
||||
style="
|
||||
animation-delay: 0.975s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-duration: 0.15s;
|
||||
"
|
||||
>A</span
|
||||
>
|
||||
<span
|
||||
class="inline-block opacity-0 animate-fade-in-left"
|
||||
style="
|
||||
animation-delay: 1s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-duration: 0.15s;
|
||||
"
|
||||
>R</span
|
||||
>
|
||||
<span
|
||||
class="inline-block opacity-0 animate-fade-in-left"
|
||||
style="
|
||||
animation-delay: 1.025s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-duration: 0.15s;
|
||||
"
|
||||
>T</span
|
||||
>
|
||||
<span
|
||||
class="inline-block opacity-0 animate-fade-in-left"
|
||||
style="
|
||||
animation-delay: 1.05s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-duration: 0.15s;
|
||||
"
|
||||
>N</span
|
||||
>
|
||||
<span
|
||||
class="inline-block opacity-0 animate-fade-in-left"
|
||||
style="
|
||||
animation-delay: 1.075s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-duration: 0.15s;
|
||||
"
|
||||
>E</span
|
||||
>
|
||||
<span
|
||||
class="inline-block opacity-0 animate-fade-in-left"
|
||||
style="
|
||||
animation-delay: 1.1s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-duration: 0.15s;
|
||||
"
|
||||
>R</span
|
||||
>
|
||||
<span
|
||||
class="inline-block opacity-0 animate-fade-in-left"
|
||||
style="
|
||||
animation-delay: 1.125s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-duration: 0.15s;
|
||||
"
|
||||
>S</span
|
||||
>
|
||||
</a>
|
||||
</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>
|
||||
<!-- Menu Grid -->
|
||||
<div
|
||||
class="fixed bottom-12 left-12 z-50 opacity-0 animate-fade-in-left"
|
||||
style="animation-delay: 0.4s; animation-fill-mode: forwards"
|
||||
>
|
||||
<div class="cursor-pointer" id="menuToggle">
|
||||
<div
|
||||
class="grid grid-cols-3 gap-1 w-6 h-6 animate-logo-float"
|
||||
id="menuGrid"
|
||||
>
|
||||
<span class="w-1 h-1 bg-white"></span>
|
||||
<span class="w-1 h-1 bg-white"></span>
|
||||
<span class="w-1 h-1 bg-white"></span>
|
||||
<span class="w-1 h-1 bg-white"></span>
|
||||
<span class="w-1 h-1 bg-white"></span>
|
||||
<span class="w-1 h-1 bg-white"></span>
|
||||
<span class="w-1 h-1 bg-white"></span>
|
||||
<span class="w-1 h-1 bg-white"></span>
|
||||
<span class="w-1 h-1 bg-white"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Main Content -->
|
||||
<main>
|
||||
<main class="pt-20">
|
||||
<!-- 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>
|
||||
<section class="min-h-screen flex items-center justify-center">
|
||||
<div class="text-center">
|
||||
<h1 class="text-6xl md:text-8xl font-bold mb-8 tracking-wider">
|
||||
PROJECTS
|
||||
</h1>
|
||||
<div class="w-32 h-px bg-kh3-red mx-auto mb-8"></div>
|
||||
<p class="text-2xl md:text-3xl text-neutral-300 mb-12 tracking-wide">
|
||||
COMING SOON
|
||||
</p>
|
||||
<p class="text-lg text-neutral-400 max-w-2xl mx-auto leading-relaxed">
|
||||
We're working on something amazing. Our portfolio of completed
|
||||
projects will be available soon.
|
||||
</p>
|
||||
</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>
|
||||
<script>
|
||||
// Menu toggle functionality
|
||||
const menuToggle = document.getElementById("menuToggle");
|
||||
const navMenu = document.getElementById("navMenu");
|
||||
const menuGrid = document.getElementById("menuGrid");
|
||||
|
||||
if (menuToggle && navMenu && menuGrid) {
|
||||
let isMenuOpen = false;
|
||||
|
||||
menuToggle.addEventListener("click", () => {
|
||||
if (isMenuOpen) {
|
||||
// Close menu
|
||||
navMenu.classList.add("hidden");
|
||||
menuGrid.innerHTML = `
|
||||
<span class="w-1 h-1 bg-white"></span>
|
||||
<span class="w-1 h-1 bg-white"></span>
|
||||
<span class="w-1 h-1 bg-white"></span>
|
||||
<span class="w-1 h-1 bg-white"></span>
|
||||
<span class="w-1 h-1 bg-white"></span>
|
||||
<span class="w-1 h-1 bg-white"></span>
|
||||
<span class="w-1 h-1 bg-white"></span>
|
||||
<span class="w-1 h-1 bg-white"></span>
|
||||
<span class="w-1 h-1 bg-white"></span>
|
||||
`;
|
||||
isMenuOpen = false;
|
||||
} else {
|
||||
// Open menu
|
||||
navMenu.classList.remove("hidden");
|
||||
menuGrid.innerHTML = `
|
||||
<div class="absolute inset-0 flex items-center justify-center">
|
||||
<svg class="w-5 h-5 text-kh3-red" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
|
||||
</svg>
|
||||
</div>
|
||||
`;
|
||||
isMenuOpen = true;
|
||||
}
|
||||
});
|
||||
|
||||
// Close menu when clicking outside
|
||||
document.addEventListener("click", (e) => {
|
||||
if (!menuToggle.contains(e.target) && !navMenu.contains(e.target)) {
|
||||
navMenu.classList.add("hidden");
|
||||
menuGrid.innerHTML = `
|
||||
<span class="w-1 h-1 bg-white"></span>
|
||||
<span class="w-1 h-1 bg-white"></span>
|
||||
<span class="w-1 h-1 bg-white"></span>
|
||||
<span class="w-1 h-1 bg-white"></span>
|
||||
<span class="w-1 h-1 bg-white"></span>
|
||||
<span class="w-1 h-1 bg-white"></span>
|
||||
<span class="w-1 h-1 bg-white"></span>
|
||||
<span class="w-1 h-1 bg-white"></span>
|
||||
<span class="w-1 h-1 bg-white"></span>
|
||||
`;
|
||||
isMenuOpen = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue