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
khy_website/blog.html

523 lines
20 KiB
HTML
Raw Blame History

<!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" />
<style>
/* Smooth scrolling for the entire page */
html {
scroll-behavior: smooth;
}
/* Active navigation link styling */
.nav-link.active {
color: #b8873f !important;
font-weight: 500;
}
</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"
/>
</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="nav-link 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="index.html#products"
class="nav-link 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="index.html#projects-button"
class="nav-link text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors text-shadow-default"
>Projects</a
>
</li>
<li>
<a
href="index.html#clients"
class="nav-link 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="index.html#about"
class="nav-link 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="nav-link 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="nav-link 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="nav-link 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 id="main-blog-content" class="lg:col-span-2">
<!-- Blog Post -->
<article class="mb-16" data-tags="wood" data-date="2022-10-14">
<!-- 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 -->
<button
type="button"
class="read-more-toggle 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
</button>
<!-- Full content (initially hidden) -->
<div
class="full-content hidden font-playfair font-normal text-base leading-relaxed text-gray-500 mt-6 text-justify"
>
<p class="mb-4">
Quis hendrerit dolor magna eget est lorem ipsum. Bibendum
arcu vitae elementum curabitur vitae nunc sed velit
dignissim sodales. Non tellus orci ac auctor augue mauris
augue neque gravida in. Nisl condimentum id venenatis a
condimentum vitae sapien pellentesque habitant. Sit amet
volutpat consequat mauris nunc congue nisi vitae suscipit.
Integer enim neque volutpat ac tincidunt vitae semper quis
lectus. Nibh tellus molestie nunc non blandit massa enim
nec. Amet consectetur adipiscing elit ut aliquam purus sit
amet luctus.
</p>
<p class="mb-4">
At tellus at urna condimentum mattis pellentesque id nibh
tortor id. Non quam lacus suspendisse faucibus interdum.
Interdum velit euismod in pellentesque massa placerat duis
ultricies. Platea dictumst quisque sagittis purus sit amet
volutpat consequat. Sem viverra aliquet eget sit amet tellus
cras adipiscing. Eget lorem dolor sed viverra ipsum nunc
aliquet bibendum enim facilisis gravida neque convallis a
cras.
</p>
<p>
Mattis rhoncus urna neque viverra justo nec. Aliquet
porttitor lacus luctus accumsan tortor posuere ac ut
consequat semper viverra nam libero justo laoreet sit amet
cursus sit amet dictum sit amet justo. Risus at ultrices mi
tempus imperdiet nulla malesuada pellentesque elit.
</p>
</div>
</article>
<!-- Pagination -->
<div
id="blog-pagination"
class="flex items-center justify-center space-x-4"
>
<button
type="button"
data-page="1"
class="blog-page-btn inline-flex items-center justify-center px-6 py-2 bg-uc-gold text-white font-playfair font-normal text-xl rounded-full shadow-sm"
>
1
</button>
<button
type="button"
data-page="2"
class="blog-page-btn inline-flex items-center justify-center px-6 py-2 bg-linen text-black font-playfair font-normal text-xl rounded-full hover:bg-uc-gold hover:text-white transition-all shadow-sm"
>
2
</button>
<button
type="button"
data-page="3"
class="blog-page-btn inline-flex items-center justify-center px-6 py-2 bg-linen text-black font-playfair font-normal text-xl rounded-full hover:bg-uc-gold hover:text-white transition-all shadow-sm"
>
3
</button>
<button
type="button"
id="blog-next-btn"
class="inline-flex items-center justify-center px-6 py-2 bg-linen text-black font-playfair font-normal text-xl rounded-full hover:bg-uc-gold hover:text-white transition-all shadow-sm"
>
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
id="blog-search-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">
<button
type="button"
class="flex justify-between items-center w-full text-left tag-filter px-4 py-3 rounded-lg border border-gray-300 hover:border-uc-gold hover:bg-gray-50 transition-colors"
data-tag="wood"
aria-pressed="false"
>
<span class="font-playfair font-normal text-base">
Wood
</span>
<span class="font-playfair font-normal text-base">
(1)
</span>
</button>
</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.png"
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 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">
<!-- Company Information -->
<div class="space-y-1">
<!-- Logo -->
<div class="w-16 h-20 -mt-6">
<a
href="index.html"
aria-label="Go to KHY home"
title="KHY Home"
class="inline-block w-full h-full group focus:outline-none focus-visible:ring-2 focus-visible:ring-uc-gold rounded-md transition"
>
<img
src="assets/images/khy_logo.png"
alt="KHY logo"
loading="lazy"
class="w-full h-full object-contain transition-transform duration-300 group-hover:scale-105"
/>
</a>
</div>
<!-- Address -->
<p
class="font-playfair font-normal text-base leading-relaxed text-gray-600 -mt-4"
>
5 Labone Crescent, Greater Accra, Ghana
</p>
<!-- Contact Info -->
<div class="space-y-1 -mt-2">
<!-- Phone -->
<div class="flex items-center space-x-3 -mt-1">
<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 -mt-1">
<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>
Reference in a new issue View git blame Copy permalink