georgebiri/khy_website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

fix: style header

Browse source
This commit is contained in:
George Birikorang 2025-08-13 16:26:35 -04:00
parent 323c135c84
commit 6e74f1e8d5
6 changed files with 1166 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

4
README.md
View file

@ -34,7 +34,7 @@ A clean, minimal static website built with HTML, JavaScript, and Tailwind CSS.
- Open `index.html` in your web browser - Open `index.html` in your web browser
- Or serve it with a local server - Or serve it with a local server
## 📁 Project Structure ## Project Structure
``` ```
my-site/ my-site/
@ -52,7 +52,7 @@ my-site/
└─ package.json # Dependencies └─ package.json # Dependencies
``` ```
## 🛠️ Development ## Development
### For Active Development ### For Active Development

50
index.html
View file

@ -3,7 +3,11 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <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 rel="stylesheet" href="styles/main.css" />
<link <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" 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 <img
src="assets/images/KHY logo.png" src="assets/images/KHY logo.png"
alt="KHY Logo" alt="KHY Logo"
class="h-16 w-auto" class="h-16 w-auto drop-shadow-sm"
/> />
</div> </div>
@ -31,56 +35,56 @@
<li> <li>
<a <a
href="index.html" 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 >Home</a
> >
</li> </li>
<li> <li>
<a <a
href="products.html" 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 >Products</a
> >
</li> </li>
<li> <li>
<a <a
href="projects.html" 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 >Projects</a
> >
</li> </li>
<li> <li>
<a <a
href="clients.html" 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 >Clients</a
> >
</li> </li>
<li> <li>
<a <a
href="about.html" 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 >About</a
> >
</li> </li>
<li> <li>
<a <a
href="contact.html" 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 >Contact</a
> >
</li> </li>
<li> <li>
<a <a
href="blog.html" 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 >Blog</a
> >
</li> </li>
<li> <li>
<a <a
href="quote.html" 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 >Quote</a
> >
</li> </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" 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"> <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"> <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> </p>
<button <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 Get Started
</button> </button>
</div> </div>
</section> </section>
<!-- Features Section --> <!-- Services Section -->
<section class="py-16 bg-white"> <section class="py-16 bg-white">
<div class="max-w-6xl mx-auto px-5"> <div class="max-w-6xl mx-auto px-5">
<h2 class="text-4xl font-light text-center text-gray-800 mb-8"> <h2 class="text-4xl font-light text-center text-gray-800 mb-8">
What We Offer Our Services
</h2> </h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 mt-12"> <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mt-12">
<div <div
class="bg-white p-8 rounded-lg shadow-lg text-center hover:-translate-y-1 transition-transform" 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"> <h3 class="text-2xl font-semibold text-gray-800 mb-4">
Quality Service Professional Consulting
</h3> </h3>
<p class="text-gray-600"> <p class="text-gray-600">
We provide top-notch services tailored to your needs. Expert guidance and strategic solutions for your business
challenges.
</p> </p>
</div> </div>
<div <div
class="bg-white p-8 rounded-lg shadow-lg text-center hover:-translate-y-1 transition-transform" 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"> <h3 class="text-2xl font-semibold text-gray-800 mb-4">
Expert Team Project Management
</h3> </h3>
<p class="text-gray-600"> <p class="text-gray-600">
Our experienced team is here to help you succeed. Comprehensive project management services to ensure successful
delivery.
</p> </p>
</div> </div>
<div <div
class="bg-white p-8 rounded-lg shadow-lg text-center hover:-translate-y-1 transition-transform" 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"> <h3 class="text-2xl font-semibold text-gray-800 mb-4">
24/7 Support Client Support
</h3> </h3>
<p class="text-gray-600"> <p class="text-gray-600">
Round-the-clock support whenever you need us. Dedicated support and maintenance for all your business needs.
</p> </p>
</div> </div>
</div> </div>
@ -152,7 +158,7 @@
<!-- Footer --> <!-- Footer -->
<footer class="bg-gray-800 text-white text-center py-8"> <footer class="bg-gray-800 text-white text-center py-8">
<div class="max-w-6xl mx-auto px-5"> <div class="max-w-6xl mx-auto px-5">
<p>&copy; 2024 My Website. All rights reserved.</p> <p>&copy; 2024 KHY. All rights reserved.</p>
</div> </div>
</footer> </footer>

1113
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

3
package.json
View file

@ -1,5 +1,6 @@
{ {
"devDependencies": { "devDependencies": {
"tailwindcss": "^3.4.17" "tailwindcss": "^3.4.17",
"tailwindcss-textshadow": "^2.1.3"
} }
} }

18
styles/main.css
View file

@ -769,6 +769,10 @@ video {
font-weight: 600; font-weight: 600;
} }
.font-medium {
font-weight: 500;
}
.tracking-wider { .tracking-wider {
letter-spacing: 0.05em; letter-spacing: 0.05em;
} }
@ -793,6 +797,11 @@ video {
color: rgb(255 255 255 / var(--tw-text-opacity, 1)); 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-90 {
opacity: 0.9; 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); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
} }
.drop-shadow-lg { .drop-shadow-sm {
--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)); --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);
} }
@ -830,6 +839,11 @@ video {
background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1)); 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 { .hover\:text-gray-600:hover {
--tw-text-opacity: 1; --tw-text-opacity: 1;
color: rgb(75 85 99 / var(--tw-text-opacity, 1)); color: rgb(75 85 99 / var(--tw-text-opacity, 1));

7
tailwind.config.js
View file

@ -7,7 +7,12 @@ module.exports = {
montserrat: ["Montserrat", "sans-serif"], montserrat: ["Montserrat", "sans-serif"],
playfair: ["Playfair Display", "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")],
}; };