mirror of
https://git.kh3group.com/georgebiri/khy_website.git
synced 2026-07-02 06:23:33 +00:00
fix: style header
This commit is contained in:
parent
323c135c84
commit
6e74f1e8d5
6 changed files with 1166 additions and 29 deletions
|
|
@ -34,7 +34,7 @@ A clean, minimal static website built with HTML, JavaScript, and Tailwind CSS.
|
|||
- Open `index.html` in your web browser
|
||||
- Or serve it with a local server
|
||||
|
||||
## 📁 Project Structure
|
||||
## Project Structure
|
||||
|
||||
```
|
||||
my-site/
|
||||
|
|
@ -52,7 +52,7 @@ my-site/
|
|||
└─ package.json # Dependencies
|
||||
```
|
||||
|
||||
## 🛠️ Development
|
||||
## Development
|
||||
|
||||
### For Active Development
|
||||
|
||||
|
|
|
|||
50
index.html
50
index.html
|
|
@ -3,7 +3,11 @@
|
|||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>My Website</title>
|
||||
<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"
|
||||
|
|
@ -22,7 +26,7 @@
|
|||
<img
|
||||
src="assets/images/KHY logo.png"
|
||||
alt="KHY Logo"
|
||||
class="h-16 w-auto"
|
||||
class="h-16 w-auto drop-shadow-sm"
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
|
@ -31,56 +35,56 @@
|
|||
<li>
|
||||
<a
|
||||
href="index.html"
|
||||
class="text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors drop-shadow-lg"
|
||||
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 drop-shadow-lg"
|
||||
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 drop-shadow-lg"
|
||||
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 drop-shadow-lg"
|
||||
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 drop-shadow-lg"
|
||||
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 drop-shadow-lg"
|
||||
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 drop-shadow-lg"
|
||||
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 drop-shadow-lg"
|
||||
class="text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors text-shadow-default"
|
||||
>Quote</a
|
||||
>
|
||||
</li>
|
||||
|
|
@ -95,53 +99,55 @@
|
|||
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">
|
||||
<h2 class="text-5xl font-light mb-4">Welcome to My Website</h2>
|
||||
<h1 class="text-5xl font-light mb-4">Welcome to KHY</h1>
|
||||
<p class="text-xl mb-8 opacity-90">
|
||||
This is a simple, clean starter template for your static website.
|
||||
Professional services and innovative solutions for your business
|
||||
</p>
|
||||
<button
|
||||
class="bg-red-500 hover:bg-red-600 text-white px-8 py-4 text-lg rounded-lg transition-colors"
|
||||
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>
|
||||
|
||||
<!-- Features 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">
|
||||
What We Offer
|
||||
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">
|
||||
Quality Service
|
||||
Professional Consulting
|
||||
</h3>
|
||||
<p class="text-gray-600">
|
||||
We provide top-notch services tailored to your needs.
|
||||
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">
|
||||
Expert Team
|
||||
Project Management
|
||||
</h3>
|
||||
<p class="text-gray-600">
|
||||
Our experienced team is here to help you succeed.
|
||||
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">
|
||||
24/7 Support
|
||||
Client Support
|
||||
</h3>
|
||||
<p class="text-gray-600">
|
||||
Round-the-clock support whenever you need us.
|
||||
Dedicated support and maintenance for all your business needs.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -152,7 +158,7 @@
|
|||
<!-- Footer -->
|
||||
<footer class="bg-gray-800 text-white text-center py-8">
|
||||
<div class="max-w-6xl mx-auto px-5">
|
||||
<p>© 2024 My Website. All rights reserved.</p>
|
||||
<p>© 2024 KHY. All rights reserved.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
|
|
|
|||
1113
package-lock.json
generated
1113
package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
|
@ -1,5 +1,6 @@
|
|||
{
|
||||
"devDependencies": {
|
||||
"tailwindcss": "^3.4.17"
|
||||
"tailwindcss": "^3.4.17",
|
||||
"tailwindcss-textshadow": "^2.1.3"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -769,6 +769,10 @@ video {
|
|||
font-weight: 600;
|
||||
}
|
||||
|
||||
.font-medium {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.tracking-wider {
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
|
@ -793,6 +797,11 @@ video {
|
|||
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
|
||||
.text-blue-600 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(37 99 235 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
|
||||
.opacity-90 {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
|
@ -803,8 +812,8 @@ video {
|
|||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
||||
}
|
||||
|
||||
.drop-shadow-lg {
|
||||
--tw-drop-shadow: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.1));
|
||||
.drop-shadow-sm {
|
||||
--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);
|
||||
}
|
||||
|
||||
|
|
@ -830,6 +839,11 @@ video {
|
|||
background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
|
||||
.hover\:bg-gray-100:hover {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
|
||||
.hover\:text-gray-600:hover {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(75 85 99 / var(--tw-text-opacity, 1));
|
||||
|
|
|
|||
|
|
@ -7,7 +7,12 @@ module.exports = {
|
|||
montserrat: ["Montserrat", "sans-serif"],
|
||||
playfair: ["Playfair Display", "serif"],
|
||||
},
|
||||
textShadow: {
|
||||
default: "0 2px 4px rgba(0,0,0,0.1)",
|
||||
lg: "2px 2px 4px rgba(0,0,0,0.3)",
|
||||
xl: "4px 4px 8px rgba(0,0,0,0.4)",
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
plugins: [require("tailwindcss-textshadow")],
|
||||
};
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue