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

refactor: update footer layout across multiple pages to improve consistency and reduce spacing, while enhancing link accessibility

Browse source
This commit is contained in:
George Birikorang 2025-09-15 05:11:07 -07:00
parent 74e27ebd36
commit 4baf19983a
6 changed files with 164 additions and 242 deletions
Download patch file Download diff file Expand all files Collapse all files

74
product-catalog.html
View file

@ -354,7 +354,7 @@
<footer class="bg-white">
<!-- Main Footer Content -->
<div class="max-w-7xl mx-auto px-5 py-16">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
<!-- Company Information -->
<div class="space-y-2">
<!-- Logo -->
@ -405,85 +405,59 @@
</div>
<!-- Quick Links -->
<div class="space-y-6">
<div class="space-y-4 md:ml-6 lg:ml-8">
<h3
class="font-playfair font-normal text-md leading-relaxed tracking-wider text-eerie-black uppercase"
class="font-playfair font-normal text-sm leading-snug tracking-widest text-eerie-black uppercase"
>
Quick Links
</h3>
<div class="space-y-4">
<a
href="#"
class="block font-playfair font-normal text-base leading-relaxed tracking-wider text-gray-800 hover:text-black transition-colors"
href="index.html"
class="block font-playfair font-normal text-base leading-relaxed tracking-wider text-gray-900 hover:text-black transition-colors"
>
Home
</a>
<a
href="#"
class="block font-playfair font-normal text-base leading-relaxed tracking-wider text-gray-800 hover:text-black transition-colors"
href="product-catalog.html"
class="block font-playfair font-normal text-base leading-relaxed tracking-wider text-gray-900 hover:text-black transition-colors"
>
Products
</a>
<a
href="#"
class="block font-playfair font-normal text-base leading-relaxed tracking-wider text-gray-800 hover:text-black transition-colors"
href="#about"
class="block font-playfair font-normal text-base leading-relaxed tracking-wider text-gray-900 hover:text-black transition-colors"
>
About
</a>
</div>
</div>
<!-- Help -->
<div class="space-y-6">
<h3
class="font-playfair font-normal text-md leading-relaxed tracking-wider text-eerie-black uppercase"
>
Help
</h3>
<div class="space-y-4">
<a
href="#"
class="block font-playfair font-normal text-base leading-relaxed tracking-wider text-gray-800 hover:text-black transition-colors"
href="contact.html"
class="block font-playfair font-normal text-base leading-relaxed tracking-wider text-gray-900 hover:text-black transition-colors"
>
Contact Us
</a>
<a
href="#"
class="block font-playfair font-normal text-base leading-relaxed tracking-wider text-gray-800 hover:text-black transition-colors"
>
Privacy Policies
</a>
<a
href="#"
class="block font-playfair font-normal text-base leading-relaxed tracking-wider text-gray-800 hover:text-black transition-colors"
>
Terms and Conditions
</a>
</div>
</div>
<!-- Newsletter -->
<div class="space-y-6">
<!-- Company / Hours / Social -->
<div class="space-y-4">
<h3
class="font-playfair font-normal text-md leading-relaxed tracking-wider text-eerie-black uppercase"
class="font-playfair font-normal text-sm leading-snug tracking-widest text-eerie-black uppercase"
>
Newsletter
Company
</h3>
<div class="space-y-4">
<div class="flex items-center space-x-4">
<input
type="email"
placeholder="Enter Your Email Address"
class="flex-1 font-playfair font-normal text-sm leading-relaxed tracking-wider text-taupe-gray bg-transparent border-b border-black focus:outline-none focus:border-black"
/>
<button
class="font-playfair font-normal text-sm leading-relaxed tracking-wider text-gray-800 border-b border-black hover:text-black transition-colors"
>
Subscribe
</button>
</div>
<p class="font-playfair font-normal text-base leading-relaxed text-gray-900">
Mon–Fri: 9AM – 5PM · Accra, Ghana
</p>
<div class="flex items-center space-x-6">
<a href="#" class="font-playfair font-normal text-base leading-relaxed text-gray-900 hover:text-black transition-colors">Instagram</a>
<a href="#" class="font-playfair font-normal text-base leading-relaxed text-gray-900 hover:text-black transition-colors">LinkedIn</a>
</div>
</div>
</div>
</div>
</div>