support/khy_website
1
0
Fork 0
mirror of https://git.kh3group.com/georgebiri/khy_website.git synced 2026-10-16 20:41:47 +00:00
Code Issues Projects Releases Packages Wiki Activity

feat: implement responsive mobile menu and navigation enhancements across all pages
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse source
This commit is contained in:
George Birikorang 2025-09-08 20:52:51 -07:00
parent d8d9f1a584
commit 228095ed83
11 changed files with 3592 additions and 49 deletions
Download patch file Download diff file Expand all files Collapse all files

157
product-detail.html
View file

@ -5,6 +5,17 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Product Detail - KHY</title>
<link rel="stylesheet" href="styles/main.css" />
<style>
/* Force responsive behavior */
@media (min-width: 640px) {
.sm\:hidden {
display: none !important;
}
.sm\:flex {
display: flex !important;
}
}
</style>
<link
href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&family=Playfair+Display:wght@100;200;300;400;500;600;700&family=Poppins:wght@400;500;600&display=swap"
rel="stylesheet"
@ -13,7 +24,7 @@
<body class="bg-white font-sans text-gray-800">
<!-- Header -->
<header
class="absolute w-full h-28 top-0 left-0 bg-white shadow-[0_8px_24px_rgba(0,0,0,0.06)] border-b border-black/10 z-50"
class="fixed w-full h-20 sm:h-28 top-0 left-0 bg-white shadow-[0_8px_24px_rgba(0,0,0,0.06)] border-b border-black/10 z-50"
>
<nav class="h-full">
<div
@ -24,12 +35,12 @@
<img
src="assets/images/khy_logo.png"
alt="KHY Logo"
class="h-16 w-auto drop-shadow-sm"
class="h-12 sm:h-20 w-auto drop-shadow-sm"
/>
</div>
<!-- Navigation -->
<ul class="flex space-x-10">
<!-- Desktop Navigation -->
<ul class="hidden sm:flex space-x-10">
<li>
<a
href="index.html"
@ -87,11 +98,147 @@
>
</li>
</ul>
<!-- Mobile Quote Button and Hamburger -->
<div class="sm:hidden flex items-center space-x-3">
<!-- Quote Button -->
<a
href="quote.html"
class="px-3 py-1 border border-black text-black font-playfair text-sm font-normal tracking-wider hover:bg-black hover:text-white transition-colors"
>
Quote
</a>
<!-- Hamburger Button -->
<button
id="mobile-menu-button"
class="text-black hover:text-gray-600 transition-colors"
aria-label="Open mobile menu"
>
<svg
class="w-7 h-7"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M4 6h16M4 12h16M4 18h16"
></path>
</svg>
</button>
</div>
</div>
</nav>
</header>
<main class="pt-28">
<!-- Mobile Menu Overlay -->
<div
id="mobile-menu-overlay"
class="fixed inset-0 bg-black bg-opacity-50 z-40 hidden transition-opacity duration-300 sm:hidden"
></div>
<!-- Mobile Menu -->
<div
id="mobile-menu"
class="fixed top-0 right-0 h-full w-80 bg-white shadow-xl z-50 transform translate-x-full transition-transform duration-300 sm:hidden"
>
<!-- Mobile Menu Header -->
<div
class="flex items-center justify-between p-5 border-b border-gray-200"
>
<img
src="assets/images/khy_logo.png"
alt="KHY Logo"
class="h-10 w-auto"
/>
<button
id="mobile-menu-close"
class="p-2 text-black hover:text-gray-600 transition-colors"
aria-label="Close mobile menu"
>
<svg
class="w-6 h-6"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M6 18L18 6M6 6l12 12"
></path>
</svg>
</button>
</div>
<!-- Mobile Menu Items -->
<nav class="p-5">
<ul class="flex flex-col space-y-4">
<li>
<a
href="index.html"
class="nav-link block text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors py-2"
>Home</a
>
</li>
<li>
<a
href="index.html#products"
class="nav-link block text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors py-2"
>Products</a
>
</li>
<li>
<a
href="index.html#projects-button"
class="nav-link block text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors py-2"
>Projects</a
>
</li>
<li>
<a
href="index.html#clients"
class="nav-link block text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors py-2"
>Clients</a
>
</li>
<li>
<a
href="index.html#about"
class="nav-link block text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors py-2"
>About</a
>
</li>
<li>
<a
href="contact.html"
class="block text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors py-2"
>Contact</a
>
</li>
<li>
<a
href="blog.html"
class="block text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors py-2"
>Blog</a
>
</li>
<li>
<a
href="quote.html"
class="block text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors py-2"
>Quote</a
>
</li>
</ul>
</nav>
</div>
<main class="pt-20 sm:pt-28">
<!-- Product Details Section -->
<section class="relative w-full bg-white py-6">
<div class="max-w-7xl mx-auto px-5">