feat: all html pages

This commit is contained in:
George Birikorang 2025-08-18 02:26:51 -04:00
parent 9ebc495d7a
commit 23791a2768
14 changed files with 1192 additions and 18 deletions

BIN
assets/icons/address.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 884 B

BIN
assets/icons/admin.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 713 B

BIN
assets/icons/calendar.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 548 B

BIN
assets/icons/phone.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 811 B

BIN
assets/icons/shipping.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.1 KiB

BIN
assets/icons/support.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.4 KiB

BIN
assets/icons/tag.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 749 B

BIN
assets/icons/time.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 803 B

BIN
assets/icons/trophy.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.3 KiB

BIN
assets/icons/warranty.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 MiB

493
blog.html Normal file
View file

@ -0,0 +1,493 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Blog - KHY</title>
<meta
name="description"
content="Read our latest blog posts about furniture design and interior styling."
/>
<link rel="stylesheet" href="styles/main.css" />
<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"
/>
</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-lg z-50">
<nav class="h-full">
<div
class="max-w-7xl mx-auto h-full flex items-center justify-between px-5"
>
<!-- Logo Section -->
<div class="flex items-center">
<img
src="assets/images/khy_logo.png"
alt="KHY Logo"
class="h-16 w-auto drop-shadow-sm"
/>
</div>
<!-- Navigation -->
<ul class="flex space-x-10">
<li>
<a
href="index.html"
class="text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors text-shadow-default"
>Home</a
>
</li>
<li>
<a
href="products.html"
class="text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors text-shadow-default"
>Products</a
>
</li>
<li>
<a
href="projects.html"
class="text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-colors text-shadow-default"
>Projects</a
>
</li>
<li>
<a
href="clients.html"
class="text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors text-shadow-default"
>Clients</a
>
</li>
<li>
<a
href="about.html"
class="text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors text-shadow-default"
>About</a
>
</li>
<li>
<a
href="contact.html"
class="text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors text-shadow-default"
>Contact</a
>
</li>
<li>
<a
href="blog.html"
class="text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors text-shadow-default"
>Blog</a
>
</li>
<li>
<a
href="quote.html"
class="text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors text-shadow-default"
>Quote</a
>
</li>
</ul>
</div>
</nav>
</header>
<main>
<!-- Hero Section -->
<section class="relative h-80 mt-28">
<!-- Background Image -->
<div class="absolute inset-0 w-full h-full">
<img
src="assets/images/first_homepage.jpg"
alt="Modern office interior"
class="w-full h-full object-cover object-center"
style="filter: blur(3px)"
/>
</div>
<!-- White Overlay -->
<div class="absolute inset-0 bg-white bg-opacity-60"></div>
<!-- Overlay Content -->
<div
class="absolute z-10 inset-0 flex items-center justify-center text-center text-black"
>
<h1
class="font-playfair font-medium text-4xl md:text-5xl lg:text-6xl leading-tight"
>
Blog
</h1>
</div>
</section>
<!-- Blog Content Section -->
<section class="relative bg-white py-20">
<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">
<!-- Blog Post -->
<article class="mb-16">
<!-- Featured Image -->
<div class="mb-8">
<img
src="assets/images/blog_post_1.png"
alt="Going all-in with millennial design"
class="w-full h-96 object-cover rounded-lg"
/>
</div>
<!-- Post Meta -->
<div class="flex items-center space-x-8 mb-6">
<!-- Admin -->
<div class="flex items-center space-x-2">
<img
src="assets/icons/admin.png"
alt="Admin"
class="w-5 h-5"
/>
<span
class="font-playfair font-normal text-base text-gray-500"
>
Admin
</span>
</div>
<!-- Date -->
<div class="flex items-center space-x-2">
<img
src="assets/icons/calendar.png"
alt="Calendar"
class="w-5 h-5"
/>
<span
class="font-playfair font-normal text-base text-gray-500"
>
14 Oct 2022
</span>
</div>
<!-- Category -->
<div class="flex items-center space-x-2">
<img src="assets/icons/tag.png" alt="Tag" class="w-6 h-6" />
<span
class="font-playfair font-normal text-base text-gray-500"
>
Wood
</span>
</div>
</div>
<!-- Post Title -->
<h2
class="font-playfair font-medium text-3xl md:text-4xl leading-tight text-black mb-6"
>
Going all-in with millennial design
</h2>
<!-- Post Excerpt -->
<p
class="font-playfair font-normal text-base leading-relaxed text-gray-500 mb-8 text-justify"
>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Mus mauris vitae ultricies leo integer malesuada nunc. In
nulla posuere sollicitudin aliquam ultrices. Morbi blandit
cursus risus at ultrices mi tempus imperdiet. Libero enim sed
faucibus turpis in. Cursus mattis molestie a iaculis at erat.
Nibh cras pulvinar mattis nunc sed blandit libero.
Pellentesque elit ullamcorper dignissim cras tincidunt.
Pharetra et ultrices neque ornare aenean euismod elementum.
</p>
<!-- Read More Link -->
<a
href="#"
class="inline-block font-playfair font-normal text-base text-black border-b border-black hover:text-gray-600 hover:border-gray-600 transition-colors"
>
Read more
</a>
</article>
<!-- Pagination -->
<div class="flex items-center justify-center space-x-4">
<button
class="w-15 h-15 bg-uc-gold text-white font-playfair font-normal text-xl rounded-lg"
>
1
</button>
<button
class="w-15 h-15 bg-linen text-black font-playfair font-normal text-xl rounded-lg hover:bg-uc-gold hover:text-white transition-all"
>
2
</button>
<button
class="w-15 h-15 bg-linen text-black font-playfair font-normal text-xl rounded-lg hover:bg-uc-gold hover:text-white transition-all"
>
3
</button>
<button
class="px-8 h-15 bg-linen text-black font-playfair font-normal text-xl rounded-lg hover:bg-uc-gold hover:text-white transition-all"
>
Next
</button>
</div>
</div>
<!-- Sidebar -->
<div class="lg:col-span-1">
<!-- Search -->
<div class="bg-white p-6 rounded-lg shadow-sm mb-8">
<div class="relative">
<input
type="text"
placeholder="Search..."
class="w-full px-4 py-3 font-playfair font-normal text-base text-gray-500 bg-white border border-gray-300 rounded-lg focus:outline-none focus:border-uc-gold pr-12"
/>
<img
src="assets/icons/search.png"
alt="Search"
class="absolute right-4 top-1/2 transform -translate-y-1/2 w-6 h-6"
/>
</div>
</div>
<!-- Categories -->
<div class="bg-white p-6 rounded-lg shadow-sm mb-8">
<h3 class="font-playfair font-medium text-2xl text-black mb-6">
Categories
</h3>
<div class="space-y-4">
<div class="flex justify-between items-center">
<span
class="font-playfair font-normal text-base text-gray-500"
>Crafts</span
>
<span
class="font-playfair font-normal text-base text-gray-500"
>(2)</span
>
</div>
<div class="flex justify-between items-center">
<span
class="font-playfair font-normal text-base text-gray-500"
>Design</span
>
<span
class="font-playfair font-normal text-base text-gray-500"
>(8)</span
>
</div>
<div class="flex justify-between items-center">
<span
class="font-playfair font-normal text-base text-gray-500"
>Handmade</span
>
<span
class="font-playfair font-normal text-base text-gray-500"
>(7)</span
>
</div>
<div class="flex justify-between items-center">
<span
class="font-playfair font-normal text-base text-gray-500"
>Interior</span
>
<span
class="font-playfair font-normal text-base text-gray-500"
>(1)</span
>
</div>
<div class="flex justify-between items-center">
<span
class="font-playfair font-normal text-base text-gray-500"
>Wood</span
>
<span
class="font-playfair font-normal text-base text-gray-500"
>(6)</span
>
</div>
</div>
</div>
<!-- Recent Posts -->
<div class="bg-white p-6 rounded-lg shadow-sm">
<h3 class="font-playfair font-medium text-2xl text-black mb-6">
Recent Posts
</h3>
<div class="space-y-6">
<!-- Recent Post 1 -->
<div class="flex space-x-4">
<img
src="assets/images/blog_thumb_1.jpg"
alt="Blog thumbnail"
class="w-20 h-20 object-cover rounded-lg"
/>
<div>
<h4
class="font-playfair font-normal text-sm text-black mb-2 leading-tight"
>
Going all-in with millennial design
</h4>
<p
class="font-playfair font-normal text-xs text-gray-500"
>
03 Aug 2022
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
<!-- Footer -->
<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">
<!-- Company Information -->
<div class="space-y-2">
<!-- Logo -->
<div class="w-16 h-20">
<img
src="assets/images/khy_logo.png"
alt="khy"
class="w-full h-full object-contain"
/>
</div>
<!-- Address -->
<p
class="font-playfair font-normal text-base leading-relaxed text-gray-600"
>
5 Labone Crescent, Greater Accra, Ghana
</p>
<!-- Contact Info -->
<div class="space-y-1">
<!-- Phone -->
<div class="flex items-center space-x-3">
<img
src="assets/images/phone.png"
alt="Phone"
class="w-4 h-4"
/>
<span class="font-playfair font-normal text-base text-gray-800">
+233 (555) 76677
</span>
</div>
<!-- Email -->
<div class="flex items-center space-x-3">
<img src="assets/images/mail.png" alt="Email" class="w-4 h-4" />
<span class="font-playfair font-normal text-base text-gray-800">
design@khyltd.com
</span>
</div>
</div>
</div>
<!-- Quick Links -->
<div class="space-y-6">
<h3
class="font-playfair font-normal text-md leading-relaxed tracking-wider 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"
>
Home
</a>
<a
href="#"
class="block font-playfair font-normal text-base leading-relaxed tracking-wider text-gray-800 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"
>
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"
>
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">
<h3
class="font-playfair font-normal text-md leading-relaxed tracking-wider text-eerie-black uppercase"
>
Newsletter
</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>
</div>
</div>
</div>
</div>
<!-- Copyright Section -->
<div class="border-t border-light-silver">
<div class="max-w-7xl mx-auto px-5 py-4">
<p
class="font-playfair font-normal text-xs leading-relaxed text-davys-grey"
>
© 2025 khy. All rights reserved.
</p>
</div>
</div>
</footer>
<script src="scripts/main.js"></script>
</body>
</html>

523
contact.html Normal file
View file

@ -0,0 +1,523 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Contact - KHY</title>
<meta
name="description"
content="Get in touch with KHY for professional furniture and design services."
/>
<link rel="stylesheet" href="styles/main.css" />
<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"
/>
</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-lg z-50">
<nav class="h-full">
<div
class="max-w-7xl mx-auto h-full flex items-center justify-between px-5"
>
<!-- Logo Section -->
<div class="flex items-center">
<img
src="assets/images/khy_logo.png"
alt="KHY Logo"
class="h-16 w-auto drop-shadow-sm"
/>
</div>
<!-- Navigation -->
<ul class="flex space-x-10">
<li>
<a
href="index.html"
class="text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors text-shadow-default"
>Home</a
>
</li>
<li>
<a
href="products.html"
class="text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors text-shadow-default"
>Products</a
>
</li>
<li>
<a
href="projects.html"
class="text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-colors text-shadow-default"
>Projects</a
>
</li>
<li>
<a
href="clients.html"
class="text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors text-shadow-default"
>Clients</a
>
</li>
<li>
<a
href="about.html"
class="text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors text-shadow-default"
>About</a
>
</li>
<li>
<a
href="contact.html"
class="text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors text-shadow-default"
>Contact</a
>
</li>
<li>
<a
href="blog.html"
class="text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors text-shadow-default"
>Blog</a
>
</li>
<li>
<a
href="quote.html"
class="text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors text-shadow-default"
>Quote</a
>
</li>
</ul>
</div>
</nav>
</header>
<main>
<!-- Hero Section -->
<section class="relative h-80 mt-28">
<!-- Background Image -->
<div class="absolute inset-0 w-full h-full">
<img
src="assets/images/first_homepage.jpg"
alt="Modern office interior"
class="w-full h-full object-cover object-center"
style="filter: blur(2px)"
/>
</div>
<!-- White Overlay -->
<div class="absolute inset-0 bg-white bg-opacity-60"></div>
<!-- Overlay Content -->
<div
class="absolute z-10 inset-0 flex items-center justify-center text-center text-black"
>
<h1
class="font-playfair font-medium text-3xl md:text-4xl lg:text-5xl leading-tight"
>
Contact
</h1>
</div>
</section>
<!-- Get In Touch Section -->
<section class="relative bg-white py-20">
<div class="max-w-7xl mx-auto px-5">
<!-- Section Header -->
<div class="text-center mb-16">
<h2
class="font-playfair font-bold text-2xl md:text-3xl lg:text-4xl leading-tight text-black mb-6"
>
Get In Touch With Us
</h2>
<p
class="font-playfair font-normal text-base leading-relaxed text-gray-500 max-w-2xl mx-auto"
>
For More Information About Our Product & Services. Please Feel
Free To Drop Us An Email. Our Staff Always Be There To Help You
Out. Do Not Hesitate!
</p>
</div>
<!-- Contact Content -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-16">
<!-- Contact Information -->
<div class="bg-white p-8 rounded-lg shadow-sm">
<div class="space-y-8">
<!-- Address -->
<div class="flex items-start space-x-4">
<img
src="assets/icons/address.png"
alt="Address"
class="w-6 mt-1"
/>
<div>
<h3
class="font-playfair font-semibold text-2xl text-black mb-2"
>
Address
</h3>
<p
class="font-playfair font-normal text-base leading-relaxed text-black"
>
5 Labone Crescent, <br />
Greater Accra, <br />
Ghana
</p>
</div>
</div>
<!-- Phone -->
<div class="flex items-start space-x-4">
<img
src="assets/icons/phone.png"
alt="Phone"
class="w-6 h-6 mt-1"
/>
<div>
<h3
class="font-playfair font-semibold text-2xl text-black mb-2"
>
Phone
</h3>
<p
class="font-playfair font-normal text-base leading-relaxed text-black"
>
Mobile: +(233) 546-6789
</p>
</div>
</div>
<!-- Working Time -->
<div class="flex items-start space-x-4">
<img
src="assets/icons/time.png"
alt="Time"
class="w-6 h-6 mt-1"
/>
<div>
<h3
class="font-playfair font-semibold text-2xl text-black mb-2"
>
Working Time
</h3>
<p
class="font-playfair font-normal text-base leading-relaxed text-black"
>
Monday-Friday: 9AM - 5PM
</p>
</div>
</div>
</div>
</div>
<!-- Contact Form -->
<div class="bg-white p-8 rounded-lg shadow-sm">
<form class="space-y-6">
<!-- Name -->
<div>
<label
class="block font-playfair font-semibold text-base text-black mb-2"
>
Your name
</label>
<input
type="text"
placeholder="Abc"
class="w-full px-4 py-3 font-playfair font-normal text-base text-gray-500 bg-white border border-gray-300 rounded-lg focus:outline-none focus:border-uc-gold"
/>
</div>
<!-- Email -->
<div>
<label
class="block font-playfair font-semibold text-base text-black mb-2"
>
Email address
</label>
<input
type="email"
placeholder="Abc@def.com"
class="w-full px-4 py-3 font-playfair font-normal text-base text-gray-500 bg-white border border-gray-300 rounded-lg focus:outline-none focus:border-uc-gold"
/>
</div>
<!-- Subject -->
<div>
<label
class="block font-playfair font-semibold text-base text-black mb-2"
>
Subject
</label>
<input
type="text"
placeholder="This is an optional"
class="w-full px-4 py-3 font-playfair font-normal text-base text-gray-500 bg-white border border-gray-300 rounded-lg focus:outline-none focus:border-uc-gold"
/>
</div>
<!-- Message -->
<div>
<label
class="block font-playfair font-semibold text-base text-black mb-2"
>
Message
</label>
<textarea
rows="5"
placeholder="Hi! I'd like to ask about"
class="w-full px-4 py-3 font-playfair font-normal text-base text-gray-500 bg-white border border-gray-300 rounded-lg focus:outline-none focus:border-uc-gold resize-none"
></textarea>
</div>
<!-- Submit Button -->
<button
type="submit"
class="bg-uc-gold text-white font-playfair font-normal text-base px-8 py-3 rounded-lg hover:bg-opacity-90 transition-all"
>
Submit
</button>
</form>
</div>
</div>
</div>
</section>
<!-- Features Section -->
<section class="relative bg-linen py-16">
<div class="max-w-7xl mx-auto px-5">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
<!-- High Quality -->
<div class="flex items-center space-x-4">
<div class="w-12 h-12">
<img
src="assets/icons/trophy.png"
alt="Trophy"
class="w-full h-full object-contain"
/>
</div>
<div>
<h3
class="font-playfair font-semibold text-2xl text-black mb-1"
>
High Quality
</h3>
<p class="font-playfair font-normal text-lg text-gray-500">
crafted from top materials
</p>
</div>
</div>
<!-- Warranty Protection -->
<div class="flex items-center space-x-4">
<div class="w-12 h-12">
<img
src="assets/icons/warranty.png"
alt="Guarantee"
class="w-full h-full object-contain"
/>
</div>
<div>
<h3
class="font-playfair font-semibold text-2xl text-black mb-1"
>
Warranty Protection
</h3>
<p class="font-playfair font-normal text-lg text-gray-500">
Over 2 years
</p>
</div>
</div>
<!-- Free Shipping -->
<div class="flex items-center space-x-4">
<div class="w-12 h-12">
<img
src="assets/icons/shipping.png"
alt="Shipping"
class="w-full h-full object-contain"
/>
</div>
<div>
<h3
class="font-playfair font-semibold text-2xl text-black mb-1"
>
Free Shipping
</h3>
<p class="font-playfair font-normal text-lg text-gray-500">
Order over 150 $
</p>
</div>
</div>
<!-- 24/7 Support -->
<div class="flex items-center space-x-4">
<div class="w-12 h-12">
<img
src="assets/icons/support.png"
alt="Support"
class="w-full h-full object-contain"
/>
</div>
<div>
<h3
class="font-playfair font-semibold text-2xl text-black mb-1"
>
24 / 7 Support
</h3>
<p class="font-playfair font-normal text-lg text-gray-500">
Dedicated support
</p>
</div>
</div>
</div>
</div>
</section>
</main>
<!-- Footer -->
<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">
<!-- Company Information -->
<div class="space-y-2">
<!-- Logo -->
<div class="w-16 h-20">
<img
src="assets/images/khy_logo.png"
alt="khy"
class="w-full h-full object-contain"
/>
</div>
<!-- Address -->
<p
class="font-playfair font-normal text-base leading-relaxed text-gray-600"
>
5 Labone Crescent, Greater Accra, Ghana
</p>
<!-- Contact Info -->
<div class="space-y-1">
<!-- Phone -->
<div class="flex items-center space-x-3">
<img
src="assets/images/phone.png"
alt="Phone"
class="w-4 h-4"
/>
<span class="font-playfair font-normal text-base text-gray-800">
+233 (555) 76677
</span>
</div>
<!-- Email -->
<div class="flex items-center space-x-3">
<img src="assets/images/mail.png" alt="Email" class="w-4 h-4" />
<span class="font-playfair font-normal text-base text-gray-800">
design@khyltd.com
</span>
</div>
</div>
</div>
<!-- Quick Links -->
<div class="space-y-6">
<h3
class="font-playfair font-normal text-md leading-relaxed tracking-wider 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"
>
Home
</a>
<a
href="#"
class="block font-playfair font-normal text-base leading-relaxed tracking-wider text-gray-800 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"
>
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"
>
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">
<h3
class="font-playfair font-normal text-md leading-relaxed tracking-wider text-eerie-black uppercase"
>
Newsletter
</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>
</div>
</div>
</div>
</div>
<!-- Copyright Section -->
<div class="border-t border-light-silver">
<div class="max-w-7xl mx-auto px-5 py-4">
<p
class="font-playfair font-normal text-xs leading-relaxed text-davys-grey"
>
© 2025 khy. All rights reserved.
</p>
</div>
</div>
</footer>
<script src="scripts/main.js"></script>
</body>
</html>

View file

@ -639,6 +639,18 @@ video {
margin-top: 7rem; margin-top: 7rem;
} }
.mb-1 {
margin-bottom: 0.25rem;
}
.mb-6 {
margin-bottom: 1.5rem;
}
.mt-1 {
margin-top: 0.25rem;
}
.block { .block {
display: block; display: block;
} }
@ -715,6 +727,14 @@ video {
height: 100vh; height: 100vh;
} }
.h-80 {
height: 20rem;
}
.h-5 {
height: 1.25rem;
}
.w-12 { .w-12 {
width: 3rem; width: 3rem;
} }
@ -767,6 +787,14 @@ video {
width: 100%; width: 100%;
} }
.w-20 {
width: 5rem;
}
.w-5 {
width: 1.25rem;
}
.max-w-4xl { .max-w-4xl {
max-width: 56rem; max-width: 56rem;
} }
@ -791,6 +819,10 @@ video {
max-width: 24rem; max-width: 24rem;
} }
.max-w-2xl {
max-width: 42rem;
}
.flex-1 { .flex-1 {
flex: 1 1 0%; flex: 1 1 0%;
} }
@ -809,13 +841,12 @@ video {
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
} }
.rotate-45 { .transform {
--tw-rotate: 45deg;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
} }
.transform { .resize-none {
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); resize: none;
} }
.grid-cols-1 { .grid-cols-1 {
@ -866,6 +897,10 @@ video {
gap: 2rem; gap: 2rem;
} }
.gap-16 {
gap: 4rem;
}
.space-x-10 > :not([hidden]) ~ :not([hidden]) { .space-x-10 > :not([hidden]) ~ :not([hidden]) {
--tw-space-x-reverse: 0; --tw-space-x-reverse: 0;
margin-right: calc(2.5rem * var(--tw-space-x-reverse)); margin-right: calc(2.5rem * var(--tw-space-x-reverse));
@ -884,6 +919,12 @@ video {
margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse))); margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
} }
.space-y-1 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}
.space-y-16 > :not([hidden]) ~ :not([hidden]) { .space-y-16 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0; --tw-space-y-reverse: 0;
margin-top: calc(4rem * calc(1 - var(--tw-space-y-reverse))); margin-top: calc(4rem * calc(1 - var(--tw-space-y-reverse)));
@ -896,12 +937,6 @@ video {
margin-bottom: calc(0.5rem * var(--tw-space-y-reverse)); margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
} }
.space-y-3 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}
.space-y-4 > :not([hidden]) ~ :not([hidden]) { .space-y-4 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0; --tw-space-y-reverse: 0;
margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse))); margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
@ -914,10 +949,22 @@ video {
margin-bottom: calc(1.5rem * var(--tw-space-y-reverse)); margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
} }
.space-y-1 > :not([hidden]) ~ :not([hidden]) { .space-y-8 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0; --tw-space-y-reverse: 0;
margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse))); margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0.25rem * var(--tw-space-y-reverse)); margin-bottom: calc(2rem * var(--tw-space-y-reverse));
}
.space-x-2 > :not([hidden]) ~ :not([hidden]) {
--tw-space-x-reverse: 0;
margin-right: calc(0.5rem * var(--tw-space-x-reverse));
margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-x-8 > :not([hidden]) ~ :not([hidden]) {
--tw-space-x-reverse: 0;
margin-right: calc(2rem * var(--tw-space-x-reverse));
margin-left: calc(2rem * calc(1 - var(--tw-space-x-reverse)));
} }
.overflow-hidden { .overflow-hidden {
@ -967,6 +1014,11 @@ video {
border-color: rgb(184 135 63 / var(--tw-border-opacity, 1)); border-color: rgb(184 135 63 / var(--tw-border-opacity, 1));
} }
.border-gray-300 {
--tw-border-opacity: 1;
border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
}
.border-opacity-20 { .border-opacity-20 {
--tw-border-opacity: 0.2; --tw-border-opacity: 0.2;
} }
@ -981,11 +1033,6 @@ video {
background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1)); background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));
} }
.bg-dark-charcoal-ii {
--tw-bg-opacity: 1;
background-color: rgb(33 33 33 / var(--tw-bg-opacity, 1));
}
.bg-floral-white { .bg-floral-white {
--tw-bg-opacity: 1; --tw-bg-opacity: 1;
background-color: rgb(251 249 243 / var(--tw-bg-opacity, 1)); background-color: rgb(251 249 243 / var(--tw-bg-opacity, 1));
@ -1020,10 +1067,24 @@ video {
background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
} }
.bg-linen {
--tw-bg-opacity: 1;
background-color: rgb(250 240 230 / var(--tw-bg-opacity, 1));
}
.bg-uc-gold {
--tw-bg-opacity: 1;
background-color: rgb(184 135 63 / var(--tw-bg-opacity, 1));
}
.bg-opacity-70 { .bg-opacity-70 {
--tw-bg-opacity: 0.7; --tw-bg-opacity: 0.7;
} }
.bg-opacity-60 {
--tw-bg-opacity: 0.6;
}
.object-contain { .object-contain {
-o-object-fit: contain; -o-object-fit: contain;
object-fit: contain; object-fit: contain;
@ -1039,10 +1100,23 @@ video {
object-position: top; object-position: top;
} }
.object-center {
-o-object-position: center;
object-position: center;
}
.p-4 { .p-4 {
padding: 1rem; padding: 1rem;
} }
.p-8 {
padding: 2rem;
}
.p-6 {
padding: 1.5rem;
}
.px-5 { .px-5 {
padding-left: 1.25rem; padding-left: 1.25rem;
padding-right: 1.25rem; padding-right: 1.25rem;
@ -1088,6 +1162,11 @@ video {
padding-bottom: 1rem; padding-bottom: 1rem;
} }
.px-4 {
padding-left: 1rem;
padding-right: 1rem;
}
.pb-16 { .pb-16 {
padding-bottom: 4rem; padding-bottom: 4rem;
} }
@ -1112,10 +1191,18 @@ video {
padding-top: 2rem; padding-top: 2rem;
} }
.pr-12 {
padding-right: 3rem;
}
.text-center { .text-center {
text-align: center; text-align: center;
} }
.text-justify {
text-align: justify;
}
.font-playfair { .font-playfair {
font-family: Playfair Display, serif; font-family: Playfair Display, serif;
} }
@ -1163,6 +1250,11 @@ video {
line-height: 1rem; line-height: 1rem;
} }
.text-4xl {
font-size: 2.25rem;
line-height: 2.5rem;
}
.font-bold { .font-bold {
font-weight: 700; font-weight: 700;
} }
@ -1276,11 +1368,41 @@ video {
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
} }
.shadow-sm {
--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.blur-sm {
--tw-blur: blur(4px);
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.blur-lg {
--tw-blur: blur(16px);
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.blur-md {
--tw-blur: blur(12px);
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.blur {
--tw-blur: blur(8px);
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.drop-shadow-sm { .drop-shadow-sm {
--tw-drop-shadow: drop-shadow(0 1px 1px rgb(0 0 0 / 0.05)); --tw-drop-shadow: drop-shadow(0 1px 1px rgb(0 0 0 / 0.05));
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
} }
.filter {
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.transition-all { .transition-all {
transition-property: all; transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@ -1293,6 +1415,11 @@ video {
transition-duration: 150ms; transition-duration: 150ms;
} }
.hover\:border-gray-600:hover {
--tw-border-opacity: 1;
border-color: rgb(75 85 99 / var(--tw-border-opacity, 1));
}
.hover\:bg-uc-gold:hover { .hover\:bg-uc-gold:hover {
--tw-bg-opacity: 1; --tw-bg-opacity: 1;
background-color: rgb(184 135 63 / var(--tw-bg-opacity, 1)); background-color: rgb(184 135 63 / var(--tw-bg-opacity, 1));
@ -1302,6 +1429,10 @@ video {
--tw-bg-opacity: 0.8; --tw-bg-opacity: 0.8;
} }
.hover\:bg-opacity-90:hover {
--tw-bg-opacity: 0.9;
}
.hover\:text-black:hover { .hover\:text-black:hover {
--tw-text-opacity: 1; --tw-text-opacity: 1;
color: rgb(0 0 0 / var(--tw-text-opacity, 1)); color: rgb(0 0 0 / var(--tw-text-opacity, 1));
@ -1322,6 +1453,11 @@ video {
border-color: rgb(0 0 0 / var(--tw-border-opacity, 1)); border-color: rgb(0 0 0 / var(--tw-border-opacity, 1));
} }
.focus\:border-uc-gold:focus {
--tw-border-opacity: 1;
border-color: rgb(184 135 63 / var(--tw-border-opacity, 1));
}
.focus\:outline-none:focus { .focus\:outline-none:focus {
outline: 2px solid transparent; outline: 2px solid transparent;
outline-offset: 2px; outline-offset: 2px;
@ -1400,6 +1536,11 @@ video {
font-size: 1.25rem; font-size: 1.25rem;
line-height: 1.75rem; line-height: 1.75rem;
} }
.md\:text-5xl {
font-size: 3rem;
line-height: 1;
}
} }
@media (min-width: 1024px) { @media (min-width: 1024px) {
@ -1407,6 +1548,14 @@ video {
top: 29rem; top: 29rem;
} }
.lg\:col-span-1 {
grid-column: span 1 / span 1;
}
.lg\:col-span-2 {
grid-column: span 2 / span 2;
}
.lg\:w-36 { .lg\:w-36 {
width: 9rem; width: 9rem;
} }
@ -1435,6 +1584,10 @@ video {
grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-columns: repeat(4, minmax(0, 1fr));
} }
.lg\:grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.lg\:gap-12 { .lg\:gap-12 {
gap: 3rem; gap: 3rem;
} }
@ -1475,4 +1628,9 @@ video {
font-size: 1.25rem; font-size: 1.25rem;
line-height: 1.75rem; line-height: 1.75rem;
} }
.lg\:text-6xl {
font-size: 3.75rem;
line-height: 1;
}
} }