khy_website/index.html

167 lines
5.9 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>KHY - Professional Services</title>
<meta
name="description"
content="KHY provides professional services and solutions for your business needs."
/>
<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@200;300;400;500;600;700&display=swap"
rel="stylesheet"
/>
</head>
<body class="bg-gray-50 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-wider transition-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="bg-gradient-to-br from-blue-600 to-purple-700 text-white text-center py-16 min-h-[60vh] flex items-center"
>
<div class="max-w-6xl mx-auto px-5">
<h1 class="text-5xl font-light mb-4">Welcome to KHY</h1>
<p class="text-xl mb-8 opacity-90">
Professional services and innovative solutions for your business
</p>
<button
class="bg-white text-blue-600 hover:bg-gray-100 px-8 py-4 text-lg rounded-lg transition-colors font-medium"
>
Get Started
</button>
</div>
</section>
<!-- Services Section -->
<section class="py-16 bg-white">
<div class="max-w-6xl mx-auto px-5">
<h2 class="text-4xl font-light text-center text-gray-800 mb-8">
Our Services
</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 mt-12">
<div
class="bg-white p-8 rounded-lg shadow-lg text-center hover:-translate-y-1 transition-transform"
>
<h3 class="text-2xl font-semibold text-gray-800 mb-4">
Professional Consulting
</h3>
<p class="text-gray-600">
Expert guidance and strategic solutions for your business
challenges.
</p>
</div>
<div
class="bg-white p-8 rounded-lg shadow-lg text-center hover:-translate-y-1 transition-transform"
>
<h3 class="text-2xl font-semibold text-gray-800 mb-4">
Project Management
</h3>
<p class="text-gray-600">
Comprehensive project management services to ensure successful
delivery.
</p>
</div>
<div
class="bg-white p-8 rounded-lg shadow-lg text-center hover:-translate-y-1 transition-transform"
>
<h3 class="text-2xl font-semibold text-gray-800 mb-4">
Client Support
</h3>
<p class="text-gray-600">
Dedicated support and maintenance for all your business needs.
</p>
</div>
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer class="bg-gray-800 text-white text-center py-8">
<div class="max-w-6xl mx-auto px-5">
<p>&copy; 2024 KHY. All rights reserved.</p>
</div>
</footer>
<script src="scripts/main.js"></script>
</body>
</html>