khy_website/blog.html

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