georgebiri/khy_website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

feat: implement responsive mobile menu and navigation enhancements across all pages

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

170
blog.html
View file

@ -20,6 +20,16 @@
color: #b8873f !important;
font-weight: 500;
}
/* 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"
@ -29,7 +39,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
@ -40,12 +50,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"
@ -103,13 +113,149 @@
>
</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>
<!-- 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>
<!-- Hero Section -->
<section class="relative h-80 mt-28">
<section class="relative h-80 mt-20 sm:mt-28">
<!-- Background Image -->
<div class="absolute inset-0 w-full h-full">
<img
@ -140,7 +286,7 @@
<div class="max-w-7xl mx-auto px-5">
<div class="grid grid-cols-1 lg:grid-cols-3 gap-16">
<!-- Main Blog Content -->
<div class="lg:col-span-2">
<div class="lg:col-span-2 order-2 lg:order-1">
<div id="main-blog-content">
<!-- Blog posts will be dynamically loaded here -->
</div>
@ -182,9 +328,11 @@
</div>
<!-- Sidebar -->
<div class="lg:col-span-1">
<div class="lg:col-span-1 order-1 lg:order-2 flex flex-col">
<!-- Search -->
<div class="bg-white p-6 rounded-lg shadow-sm mb-8">
<div
class="bg-white p-6 rounded-lg shadow-sm mb-8 order-3 lg:order-1"
>
<div class="relative">
<input
id="blog-search-input"
@ -201,7 +349,9 @@
</div>
<!-- Categories -->
<div class="bg-white p-6 rounded-lg shadow-sm mb-8">
<div
class="bg-white p-6 rounded-lg shadow-sm mb-8 order-2 lg:order-2"
>
<h3 class="font-playfair font-medium text-2xl text-black mb-6">
Categories
</h3>
@ -211,7 +361,7 @@
</div>
<!-- Recent Posts -->
<div class="bg-white p-6 rounded-lg shadow-sm">
<div class="bg-white p-6 rounded-lg shadow-sm order-1 lg:order-3">
<h3 class="font-playfair font-medium text-2xl text-black mb-6">
Recent Posts
</h3>

156
contact.html
View file

@ -20,6 +20,16 @@
color: #b8873f !important;
font-weight: 500;
}
/* 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"
@ -29,7 +39,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
@ -40,12 +50,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"
@ -103,13 +113,149 @@
>
</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>
<!-- 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>
<!-- Hero Section -->
<section class="relative h-80 mt-28">
<section class="relative h-80 mt-20 sm:mt-28">
<!-- Background Image -->
<div class="absolute inset-0 w-full h-full">
<img

156
index.html
View file

@ -157,6 +157,16 @@
.product-card:hover .product-card-description {
color: #666;
}
/* 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"
@ -166,7 +176,7 @@
<body class="bg-gray-50 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
@ -177,12 +187,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"
@ -240,13 +250,149 @@
>
</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>
<!-- 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="#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="#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="#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="#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>
<!-- Hero Section -->
<section class="relative h-screen mt-28">
<section class="relative h-screen mt-20 sm:mt-28">
<!-- Background Image -->
<div class="absolute inset-0 w-full h-full">
<img

146
product-catalog.html
View file

@ -5,6 +5,17 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Product Catalog - 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"
@ -12,7 +23,7 @@
</head>
<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">
<header 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
class="max-w-7xl mx-auto h-full flex items-center justify-between px-5"
@ -22,12 +33,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"
@ -85,12 +96,137 @@
>
</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>
<!-- 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>
<!-- Hero Section -->
<section class="relative h-80 mt-28">
<section class="relative h-80 mt-20 sm:mt-28">
<!-- Background Image -->
<div class="absolute inset-0 w-full h-full">
<img

157
product-comparison.html
View file

@ -5,6 +5,17 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Product Comparison - 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">
<!-- Hero Section -->
<section class="relative h-80">
<!-- Background Image -->

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">

156
quote.html
View file

@ -20,6 +20,16 @@
color: #b8873f !important;
font-weight: 500;
}
/* 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"
@ -29,7 +39,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
@ -40,12 +50,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"
@ -103,13 +113,149 @@
>
</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>
<!-- 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>
<!-- Hero Section -->
<section class="relative h-80 mt-28">
<section class="relative h-80 mt-20 sm:mt-28">
<!-- Background Image -->
<div class="absolute inset-0 w-full h-full">
<img

72
scripts/main.js
View file

@ -1512,9 +1512,9 @@ function initQuoteBadge() {
// Calculate total count
const count = quoteItems.reduce((total, item) => total + item.quantity, 0);
// Update quote badge
const quoteLink = document.querySelector('a[href="quote.html"]');
if (quoteLink) {
// Update quote badge on all quote links (desktop nav, mobile button, mobile menu)
const quoteLinks = document.querySelectorAll('a[href="quote.html"]');
quoteLinks.forEach((quoteLink) => {
// Remove existing badge
const existingBadge = quoteLink.querySelector(".quote-badge");
if (existingBadge) {
@ -1530,7 +1530,7 @@ function initQuoteBadge() {
quoteLink.style.position = "relative";
quoteLink.appendChild(badge);
}
}
});
}
// Initialize Add To Quote functionality on product detail pages
@ -1721,6 +1721,7 @@ document.addEventListener("DOMContentLoaded", function () {
initQuoteBadge();
initAddToQuote();
initHeroCarousel();
initMobileMenu();
});
// Hero Carousel Functionality
@ -1827,4 +1828,65 @@ function initHeroCarousel() {
}, 5000);
}
// Version: 4.7 - Use original image height as standard for carousel uniformity
// Mobile Menu Functionality
function initMobileMenu() {
const mobileMenuButton = document.getElementById("mobile-menu-button");
const mobileMenuClose = document.getElementById("mobile-menu-close");
const mobileMenu = document.getElementById("mobile-menu");
const mobileMenuOverlay = document.getElementById("mobile-menu-overlay");
if (
!mobileMenuButton ||
!mobileMenuClose ||
!mobileMenu ||
!mobileMenuOverlay
) {
console.log("Mobile menu elements not found");
return;
}
// Function to open mobile menu
function openMobileMenu() {
mobileMenu.classList.remove("translate-x-full");
mobileMenuOverlay.classList.remove("hidden");
document.body.style.overflow = "hidden"; // Prevent background scrolling
}
// Function to close mobile menu
function closeMobileMenu() {
mobileMenu.classList.add("translate-x-full");
mobileMenuOverlay.classList.add("hidden");
document.body.style.overflow = ""; // Restore scrolling
}
// Event listeners
mobileMenuButton.addEventListener("click", openMobileMenu);
mobileMenuClose.addEventListener("click", closeMobileMenu);
mobileMenuOverlay.addEventListener("click", closeMobileMenu);
// Close menu when clicking on navigation links
const mobileNavLinks = mobileMenu.querySelectorAll("a");
mobileNavLinks.forEach((link) => {
link.addEventListener("click", closeMobileMenu);
});
// Close menu on escape key
document.addEventListener("keydown", (e) => {
if (
e.key === "Escape" &&
!mobileMenu.classList.contains("translate-x-full")
) {
closeMobileMenu();
}
});
// Handle window resize - close menu if screen becomes large
window.addEventListener("resize", () => {
if (window.innerWidth >= 640) {
// sm breakpoint
closeMobileMenu();
}
});
}
// Version: 4.8 - Added mobile hamburger menu functionality

6
scripts/quote.js
View file

@ -306,9 +306,9 @@ class QuoteManager {
// Update quote badge in navigation
updateQuoteBadge() {
const count = this.getQuoteCount();
const quoteLink = document.querySelector('a[href="quote.html"]');
const quoteLinks = document.querySelectorAll('a[href="quote.html"]');
if (quoteLink) {
quoteLinks.forEach((quoteLink) => {
// Remove existing badge
const existingBadge = quoteLink.querySelector(".quote-badge");
if (existingBadge) {
@ -324,7 +324,7 @@ class QuoteManager {
quoteLink.style.position = "relative";
quoteLink.appendChild(badge);
}
}
});
}
// Show success message when item is added

2458
styles/main.css
View file

File diff suppressed because one or more lines are too long

7
tailwind.config.js
View file

@ -2,6 +2,13 @@
module.exports = {
content: ["./*.html", "./src/**/*.{html,js}", "./scripts/**/*.js"],
theme: {
screens: {
sm: "640px",
md: "768px",
lg: "1024px",
xl: "1280px",
"2xl": "1536px",
},
extend: {
fontFamily: {
montserrat: ["Montserrat", "sans-serif"],