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

78
product-comparison.html
View file

@ -909,7 +909,7 @@
<footer class="bg-white border-t border-black border-opacity-20">
<!-- 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-1">
<!-- Logo -->
@ -961,82 +961,64 @@
</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"
<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
>
Subscribe
</button>
</div>
</div>
</div>