mirror of
https://git.kh3group.com/georgebiri/khy_website.git
synced 2026-10-16 17:41:48 +00:00
feat: add tailwind
This commit is contained in:
parent
34d6f638bd
commit
323c135c84
16 changed files with 2581 additions and 1224 deletions
66
.gitignore
vendored
Normal file
66
.gitignore
vendored
Normal file
|
|
@ -0,0 +1,66 @@
|
||||||
|
# Dependencies
|
||||||
|
node_modules/
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
|
||||||
|
# Build outputs
|
||||||
|
dist/
|
||||||
|
build/
|
||||||
|
*.min.css
|
||||||
|
*.min.js
|
||||||
|
|
||||||
|
# Environment variables
|
||||||
|
.env
|
||||||
|
.env.local
|
||||||
|
.env.development.local
|
||||||
|
.env.test.local
|
||||||
|
.env.production.local
|
||||||
|
|
||||||
|
# IDE and editor files
|
||||||
|
.vscode/
|
||||||
|
.idea/
|
||||||
|
*.swp
|
||||||
|
*.swo
|
||||||
|
*~
|
||||||
|
|
||||||
|
# OS generated files
|
||||||
|
.DS_Store
|
||||||
|
.DS_Store?
|
||||||
|
._*
|
||||||
|
.Spotlight-V100
|
||||||
|
.Trashes
|
||||||
|
ehthumbs.db
|
||||||
|
Thumbs.db
|
||||||
|
|
||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
|
||||||
|
# Runtime data
|
||||||
|
pids
|
||||||
|
*.pid
|
||||||
|
*.seed
|
||||||
|
*.pid.lock
|
||||||
|
|
||||||
|
# Coverage directory used by tools like istanbul
|
||||||
|
coverage/
|
||||||
|
|
||||||
|
# Temporary folders
|
||||||
|
tmp/
|
||||||
|
temp/
|
||||||
|
|
||||||
|
# Optional npm cache directory
|
||||||
|
.npm
|
||||||
|
|
||||||
|
# Optional eslint cache
|
||||||
|
.eslintcache
|
||||||
|
|
||||||
|
# Optional REPL history
|
||||||
|
.node_repl_history
|
||||||
|
|
||||||
|
# Output of 'npm pack'
|
||||||
|
*.tgz
|
||||||
|
|
||||||
|
# Yarn Integrity file
|
||||||
|
.yarn-integrity
|
||||||
105
README.md
105
README.md
|
|
@ -1,2 +1,107 @@
|
||||||
# khy_website
|
# khy_website
|
||||||
|
|
||||||
|
A clean, minimal static website built with HTML, JavaScript, and Tailwind CSS.
|
||||||
|
|
||||||
|
## Quick Start
|
||||||
|
|
||||||
|
### Prerequisites
|
||||||
|
|
||||||
|
- Node.js (for Tailwind CSS CLI)
|
||||||
|
- npm (comes with Node.js)
|
||||||
|
|
||||||
|
### Setup Instructions
|
||||||
|
|
||||||
|
1. **Clone or download the project**
|
||||||
|
|
||||||
|
```bash
|
||||||
|
git clone <repository-url>
|
||||||
|
cd khy_website
|
||||||
|
```
|
||||||
|
|
||||||
|
2. **Install Tailwind CSS**
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm install -D tailwindcss@^3.4.0
|
||||||
|
```
|
||||||
|
|
||||||
|
3. **Generate the optimized CSS**
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npx tailwindcss -i ./src/input.css -o ./styles/main.css
|
||||||
|
```
|
||||||
|
|
||||||
|
4. **Open the website**
|
||||||
|
- Open `index.html` in your web browser
|
||||||
|
- Or serve it with a local server
|
||||||
|
|
||||||
|
## 📁 Project Structure
|
||||||
|
|
||||||
|
```
|
||||||
|
my-site/
|
||||||
|
├─ index.html # Main website page
|
||||||
|
├─ src/
|
||||||
|
│ └─ input.css # Tailwind directives
|
||||||
|
├─ styles/
|
||||||
|
│ └─ main.css # Generated optimized CSS
|
||||||
|
├─ scripts/
|
||||||
|
│ └─ main.js # JavaScript functionality
|
||||||
|
├─ assets/
|
||||||
|
│ ├─ images/ # Image assets
|
||||||
|
│ └─ fonts/ # Font assets
|
||||||
|
├─ tailwind.config.js # Tailwind configuration
|
||||||
|
└─ package.json # Dependencies
|
||||||
|
```
|
||||||
|
|
||||||
|
## 🛠️ Development
|
||||||
|
|
||||||
|
### For Active Development
|
||||||
|
|
||||||
|
If you're making frequent changes to the HTML, you can use watch mode to automatically regenerate CSS:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npx tailwindcss -i ./src/input.css -o ./styles/main.css --watch
|
||||||
|
```
|
||||||
|
|
||||||
|
Keep this running in a terminal while you work. It will automatically rebuild the CSS whenever you save changes to your HTML files.
|
||||||
|
|
||||||
|
### Manual Regeneration
|
||||||
|
|
||||||
|
If watch mode doesn't work or you prefer manual control:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# One-time build
|
||||||
|
npx tailwindcss -i ./src/input.css -o ./styles/main.css
|
||||||
|
|
||||||
|
# Watch mode (auto-regenerate on changes)
|
||||||
|
npx tailwindcss -i ./src/input.css -o ./styles/main.css --watch
|
||||||
|
```
|
||||||
|
|
||||||
|
**Note:** If watch mode doesn't work, just run the one-time build command after each change.
|
||||||
|
|
||||||
|
### What This Does
|
||||||
|
|
||||||
|
- Scans your HTML files for used Tailwind classes
|
||||||
|
- Generates only the CSS you need (purges unused styles)
|
||||||
|
- Creates a tiny, optimized CSS file (~1KB vs ~3MB CDN)
|
||||||
|
|
||||||
|
## Features
|
||||||
|
|
||||||
|
- **Clean, minimal design** with Tailwind CSS
|
||||||
|
- **Optimized performance** with purged CSS
|
||||||
|
- **Responsive layout** that works on all devices
|
||||||
|
- **No build tools required** for production
|
||||||
|
- **Easy maintenance** with Tailwind utility classes
|
||||||
|
|
||||||
|
## Customization
|
||||||
|
|
||||||
|
To add new Tailwind classes:
|
||||||
|
|
||||||
|
1. Add the classes to your HTML
|
||||||
|
2. Run the CSS generation command
|
||||||
|
3. The new styles will be included in the output
|
||||||
|
|
||||||
|
To modify the design:
|
||||||
|
|
||||||
|
1. Change Tailwind classes in `index.html`
|
||||||
|
2. Regenerate CSS with the CLI command
|
||||||
|
3. Refresh your browser to see changes
|
||||||
|
|
|
||||||
99
about.html
99
about.html
|
|
@ -1,99 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8" />
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
||||||
<title>About - My Website</title>
|
|
||||||
<link rel="stylesheet" href="styles/main.css" />
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<header>
|
|
||||||
<nav>
|
|
||||||
<div class="nav-container">
|
|
||||||
<h1 class="logo">My Website</h1>
|
|
||||||
<ul class="nav-links">
|
|
||||||
<li><a href="index.html">Home</a></li>
|
|
||||||
<li><a href="about.html">About</a></li>
|
|
||||||
<li><a href="services.html">Services</a></li>
|
|
||||||
<li><a href="contact.html">Contact</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<main>
|
|
||||||
<section class="page-header">
|
|
||||||
<div class="container">
|
|
||||||
<h1>About Us</h1>
|
|
||||||
<p>Learn more about our company and mission</p>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section class="about-content">
|
|
||||||
<div class="container">
|
|
||||||
<div class="about-grid">
|
|
||||||
<div class="about-text">
|
|
||||||
<h2>Our Story</h2>
|
|
||||||
<p>
|
|
||||||
Founded in 2020, we've been passionate about delivering
|
|
||||||
exceptional services to our clients. Our journey began with a
|
|
||||||
simple mission: to make a difference in the digital world.
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
Today, we're proud to serve clients across the globe, helping
|
|
||||||
them achieve their goals and bring their visions to life.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="about-stats">
|
|
||||||
<div class="stat-item">
|
|
||||||
<h3>500+</h3>
|
|
||||||
<p>Happy Clients</p>
|
|
||||||
</div>
|
|
||||||
<div class="stat-item">
|
|
||||||
<h3>1000+</h3>
|
|
||||||
<p>Projects Completed</p>
|
|
||||||
</div>
|
|
||||||
<div class="stat-item">
|
|
||||||
<h3>5+</h3>
|
|
||||||
<p>Years Experience</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section class="team">
|
|
||||||
<div class="container">
|
|
||||||
<h2>Our Team</h2>
|
|
||||||
<div class="team-grid">
|
|
||||||
<div class="team-member">
|
|
||||||
<h3>John Doe</h3>
|
|
||||||
<p class="position">CEO & Founder</p>
|
|
||||||
<p>
|
|
||||||
Visionary leader with 10+ years of experience in the industry.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="team-member">
|
|
||||||
<h3>Jane Smith</h3>
|
|
||||||
<p class="position">Creative Director</p>
|
|
||||||
<p>Passionate designer who brings creativity to every project.</p>
|
|
||||||
</div>
|
|
||||||
<div class="team-member">
|
|
||||||
<h3>Mike Johnson</h3>
|
|
||||||
<p class="position">Lead Developer</p>
|
|
||||||
<p>Technical expert who turns ideas into reality.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<footer>
|
|
||||||
<div class="container">
|
|
||||||
<p>© 2024 My Website. All rights reserved.</p>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
|
|
||||||
<script src="scripts/main.js"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
BIN
assets/images/KHY logo.png
Normal file
BIN
assets/images/KHY logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 48 KiB |
129
contact.html
129
contact.html
|
|
@ -1,129 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8" />
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
||||||
<title>Contact - My Website</title>
|
|
||||||
<link rel="stylesheet" href="styles/main.css" />
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<header>
|
|
||||||
<nav>
|
|
||||||
<div class="nav-container">
|
|
||||||
<h1 class="logo">My Website</h1>
|
|
||||||
<ul class="nav-links">
|
|
||||||
<li><a href="index.html">Home</a></li>
|
|
||||||
<li><a href="about.html">About</a></li>
|
|
||||||
<li><a href="services.html">Services</a></li>
|
|
||||||
<li><a href="contact.html">Contact</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<main>
|
|
||||||
<section class="page-header">
|
|
||||||
<div class="container">
|
|
||||||
<h1>Contact Us</h1>
|
|
||||||
<p>Get in touch with us today</p>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section class="contact-content">
|
|
||||||
<div class="container">
|
|
||||||
<div class="contact-grid">
|
|
||||||
<div class="contact-info">
|
|
||||||
<h2>Get In Touch</h2>
|
|
||||||
<p>
|
|
||||||
Ready to start your next project? We'd love to hear from you.
|
|
||||||
Send us a message and we'll respond as soon as possible.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div class="contact-details">
|
|
||||||
<div class="contact-item">
|
|
||||||
<h3>Address</h3>
|
|
||||||
<p>123 Business Street<br />City, State 12345</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="contact-item">
|
|
||||||
<h3>Email</h3>
|
|
||||||
<p>
|
|
||||||
<a href="mailto:contact@example.com">contact@example.com</a>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="contact-item">
|
|
||||||
<h3>Phone</h3>
|
|
||||||
<p><a href="tel:+1234567890">+1 (234) 567-890</a></p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="contact-item">
|
|
||||||
<h3>Hours</h3>
|
|
||||||
<p>
|
|
||||||
Monday - Friday: 9:00 AM - 6:00 PM<br />
|
|
||||||
Saturday: 10:00 AM - 4:00 PM
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="contact-form">
|
|
||||||
<h2>Send Message</h2>
|
|
||||||
<form id="contactForm">
|
|
||||||
<div class="form-group">
|
|
||||||
<label for="name">Name *</label>
|
|
||||||
<input type="text" id="name" name="name" required />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-group">
|
|
||||||
<label for="email">Email *</label>
|
|
||||||
<input type="email" id="email" name="email" required />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-group">
|
|
||||||
<label for="phone">Phone</label>
|
|
||||||
<input type="tel" id="phone" name="phone" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-group">
|
|
||||||
<label for="subject">Subject *</label>
|
|
||||||
<input type="text" id="subject" name="subject" required />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-group">
|
|
||||||
<label for="message">Message *</label>
|
|
||||||
<textarea
|
|
||||||
id="message"
|
|
||||||
name="message"
|
|
||||||
rows="5"
|
|
||||||
required
|
|
||||||
></textarea>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<button type="submit" class="submit-btn">Send Message</button>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section class="map-section">
|
|
||||||
<div class="container">
|
|
||||||
<h2>Find Us</h2>
|
|
||||||
<div class="map-placeholder">
|
|
||||||
<p>Map would be embedded here</p>
|
|
||||||
<p>You can add Google Maps or any other mapping service</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<footer>
|
|
||||||
<div class="container">
|
|
||||||
<p>© 2024 My Website. All rights reserved.</p>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
|
|
||||||
<script src="scripts/main.js"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,82 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8" />
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
||||||
<title>Example with Partials - MySite</title>
|
|
||||||
<link rel="stylesheet" href="styles/main.css" />
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<!-- Include Header Partial -->
|
|
||||||
<!-- Copy the content from partials/header.html and paste it here -->
|
|
||||||
<header class="site-header">
|
|
||||||
<a class="logo" href="index.html">MySite</a>
|
|
||||||
<nav class="nav">
|
|
||||||
<a href="index.html">Home</a>
|
|
||||||
<a href="about.html">About</a>
|
|
||||||
<a href="services.html">Services</a>
|
|
||||||
<a href="contact.html">Contact</a>
|
|
||||||
</nav>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<main>
|
|
||||||
<section class="page-header">
|
|
||||||
<div class="container">
|
|
||||||
<h1>Example Page with Partials</h1>
|
|
||||||
<p>This shows how to use the shared header and footer partials</p>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section class="content">
|
|
||||||
<div class="container">
|
|
||||||
<h2>How to Use Partials</h2>
|
|
||||||
<p>
|
|
||||||
Since you're not using build tools, you'll need to manually copy and
|
|
||||||
paste the partial content into each page. Here's how:
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div class="instructions">
|
|
||||||
<h3>For Header:</h3>
|
|
||||||
<ol>
|
|
||||||
<li>Open <code>partials/header.html</code></li>
|
|
||||||
<li>Copy the content</li>
|
|
||||||
<li>
|
|
||||||
Paste it at the top of your page's
|
|
||||||
<code><body></code> section
|
|
||||||
</li>
|
|
||||||
</ol>
|
|
||||||
|
|
||||||
<h3>For Footer:</h3>
|
|
||||||
<ol>
|
|
||||||
<li>Open <code>partials/footer.html</code></li>
|
|
||||||
<li>Copy the content</li>
|
|
||||||
<li>
|
|
||||||
Paste it at the bottom of your page's
|
|
||||||
<code><body></code> section
|
|
||||||
</li>
|
|
||||||
</ol>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="benefits">
|
|
||||||
<h3>Benefits of This Approach:</h3>
|
|
||||||
<ul>
|
|
||||||
<li>✅ Consistent header and footer across all pages</li>
|
|
||||||
<li>✅ Easy to maintain - update one file, copy to all pages</li>
|
|
||||||
<li>✅ No build tools required</li>
|
|
||||||
<li>✅ Works with any static hosting</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<!-- Include Footer Partial -->
|
|
||||||
<!-- Copy the content from partials/footer.html and paste it here -->
|
|
||||||
<footer class="site-footer" id="contact">
|
|
||||||
<p>© <span id="year"></span> MySite</p>
|
|
||||||
<a href="mailto:hello@example.com">hello@example.com</a>
|
|
||||||
</footer>
|
|
||||||
|
|
||||||
<script src="scripts/main.js"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
157
index.html
157
index.html
|
|
@ -5,56 +5,153 @@
|
||||||
<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>My Website</title>
|
||||||
<link rel="stylesheet" href="styles/main.css" />
|
<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>
|
</head>
|
||||||
<body>
|
<body class="bg-gray-50 font-sans text-gray-800">
|
||||||
<header>
|
<!-- Header -->
|
||||||
<nav>
|
<header class="absolute w-full h-28 top-0 left-0 bg-white shadow-lg z-50">
|
||||||
<div class="nav-container">
|
<nav class="h-full">
|
||||||
<h1 class="logo">My Website</h1>
|
<div
|
||||||
<ul class="nav-links">
|
class="max-w-7xl mx-auto h-full flex items-center justify-between px-5"
|
||||||
<li><a href="index.html">Home</a></li>
|
>
|
||||||
<li><a href="about.html">About</a></li>
|
<!-- Logo Section -->
|
||||||
<li><a href="services.html">Services</a></li>
|
<div class="flex items-center">
|
||||||
<li><a href="contact.html">Contact</a></li>
|
<img
|
||||||
|
src="assets/images/KHY logo.png"
|
||||||
|
alt="KHY Logo"
|
||||||
|
class="h-16 w-auto"
|
||||||
|
/>
|
||||||
|
</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 drop-shadow-lg"
|
||||||
|
>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"
|
||||||
|
>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"
|
||||||
|
>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"
|
||||||
|
>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"
|
||||||
|
>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"
|
||||||
|
>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"
|
||||||
|
>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"
|
||||||
|
>Quote</a
|
||||||
|
>
|
||||||
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<main>
|
<main>
|
||||||
<section class="hero">
|
<!-- Hero Section -->
|
||||||
<div class="container">
|
<section
|
||||||
<h2>Welcome to My Website</h2>
|
class="bg-gradient-to-br from-blue-600 to-purple-700 text-white text-center py-16 min-h-[60vh] flex items-center"
|
||||||
<p>
|
>
|
||||||
|
<div class="max-w-6xl mx-auto px-5">
|
||||||
|
<h2 class="text-5xl font-light mb-4">Welcome to My Website</h2>
|
||||||
|
<p class="text-xl mb-8 opacity-90">
|
||||||
This is a simple, clean starter template for your static website.
|
This is a simple, clean starter template for your static website.
|
||||||
</p>
|
</p>
|
||||||
<button class="cta-button">Get Started</button>
|
<button
|
||||||
|
class="bg-red-500 hover:bg-red-600 text-white px-8 py-4 text-lg rounded-lg transition-colors"
|
||||||
|
>
|
||||||
|
Get Started
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="features">
|
<!-- Features Section -->
|
||||||
<div class="container">
|
<section class="py-16 bg-white">
|
||||||
<h2>What We Offer</h2>
|
<div class="max-w-6xl mx-auto px-5">
|
||||||
<div class="features-grid">
|
<h2 class="text-4xl font-light text-center text-gray-800 mb-8">
|
||||||
<div class="feature-card">
|
What We Offer
|
||||||
<h3>Quality Service</h3>
|
</h2>
|
||||||
<p>We provide top-notch services tailored to your needs.</p>
|
<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
|
||||||
|
</h3>
|
||||||
|
<p class="text-gray-600">
|
||||||
|
We provide top-notch services tailored to your needs.
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="feature-card">
|
<div
|
||||||
<h3>Expert Team</h3>
|
class="bg-white p-8 rounded-lg shadow-lg text-center hover:-translate-y-1 transition-transform"
|
||||||
<p>Our experienced team is here to help you succeed.</p>
|
>
|
||||||
|
<h3 class="text-2xl font-semibold text-gray-800 mb-4">
|
||||||
|
Expert Team
|
||||||
|
</h3>
|
||||||
|
<p class="text-gray-600">
|
||||||
|
Our experienced team is here to help you succeed.
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="feature-card">
|
<div
|
||||||
<h3>24/7 Support</h3>
|
class="bg-white p-8 rounded-lg shadow-lg text-center hover:-translate-y-1 transition-transform"
|
||||||
<p>Round-the-clock support whenever you need us.</p>
|
>
|
||||||
|
<h3 class="text-2xl font-semibold text-gray-800 mb-4">
|
||||||
|
24/7 Support
|
||||||
|
</h3>
|
||||||
|
<p class="text-gray-600">
|
||||||
|
Round-the-clock support whenever you need us.
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<footer>
|
<!-- Footer -->
|
||||||
<div class="container">
|
<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 My Website. All rights reserved.</p>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
|
|
|
||||||
1479
package-lock.json
generated
Normal file
1479
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load diff
5
package.json
Normal file
5
package.json
Normal file
|
|
@ -0,0 +1,5 @@
|
||||||
|
{
|
||||||
|
"devDependencies": {
|
||||||
|
"tailwindcss": "^3.4.17"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,4 +0,0 @@
|
||||||
<footer class="site-footer" id="contact">
|
|
||||||
<p>© <span id="year"></span> MySite</p>
|
|
||||||
<a href="mailto:hello@example.com">hello@example.com</a>
|
|
||||||
</footer>
|
|
||||||
|
|
@ -1,9 +0,0 @@
|
||||||
<header class="site-header">
|
|
||||||
<a class="logo" href="index.html">MySite</a>
|
|
||||||
<nav class="nav">
|
|
||||||
<a href="index.html">Home</a>
|
|
||||||
<a href="about.html">About</a>
|
|
||||||
<a href="services.html">Services</a>
|
|
||||||
<a href="contact.html">Contact</a>
|
|
||||||
</nav>
|
|
||||||
</header>
|
|
||||||
|
|
@ -1,98 +1,5 @@
|
||||||
// Navigation and general functionality
|
// Update year in footer
|
||||||
document.addEventListener("DOMContentLoaded", function () {
|
document.addEventListener("DOMContentLoaded", function () {
|
||||||
// Handle contact form submission
|
|
||||||
const contactForm = document.getElementById("contactForm");
|
|
||||||
if (contactForm) {
|
|
||||||
contactForm.addEventListener("submit", function (e) {
|
|
||||||
e.preventDefault();
|
|
||||||
|
|
||||||
// Get form data
|
|
||||||
const formData = new FormData(this);
|
|
||||||
const name = formData.get("name");
|
|
||||||
const email = formData.get("email");
|
|
||||||
const subject = formData.get("subject");
|
|
||||||
const message = formData.get("message");
|
|
||||||
|
|
||||||
// Simple validation
|
|
||||||
if (!name || !email || !subject || !message) {
|
|
||||||
alert("Please fill in all required fields.");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Here you would typically send the data to a server
|
|
||||||
// For now, we'll just show a success message
|
|
||||||
alert("Thank you for your message! We'll get back to you soon.");
|
|
||||||
this.reset();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Add click event to CTA button
|
|
||||||
const ctaButton = document.querySelector(".cta-button");
|
|
||||||
if (ctaButton) {
|
|
||||||
ctaButton.addEventListener("click", function () {
|
|
||||||
alert(
|
|
||||||
"Thank you for your interest! This is where you can add your custom functionality."
|
|
||||||
);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Add click events to pricing buttons
|
|
||||||
const pricingButtons = document.querySelectorAll(".pricing-btn");
|
|
||||||
pricingButtons.forEach((button) => {
|
|
||||||
button.addEventListener("click", function () {
|
|
||||||
alert(
|
|
||||||
"Thank you for your interest! Please contact us to discuss pricing options."
|
|
||||||
);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
// Add scroll effect to navigation
|
|
||||||
window.addEventListener("scroll", function () {
|
|
||||||
const header = document.querySelector("header");
|
|
||||||
if (window.scrollY > 100) {
|
|
||||||
header.style.backgroundColor = "rgba(255, 255, 255, 0.95)";
|
|
||||||
header.style.backdropFilter = "blur(10px)";
|
|
||||||
} else {
|
|
||||||
header.style.backgroundColor = "#fff";
|
|
||||||
header.style.backdropFilter = "none";
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// Simple animation for sections when they come into view
|
|
||||||
const observerOptions = {
|
|
||||||
threshold: 0.1,
|
|
||||||
rootMargin: "0px 0px -50px 0px",
|
|
||||||
};
|
|
||||||
|
|
||||||
const observer = new IntersectionObserver(function (entries) {
|
|
||||||
entries.forEach((entry) => {
|
|
||||||
if (entry.isIntersecting) {
|
|
||||||
entry.target.style.opacity = "1";
|
|
||||||
entry.target.style.transform = "translateY(0)";
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}, observerOptions);
|
|
||||||
|
|
||||||
// Observe all sections
|
|
||||||
const sections = document.querySelectorAll("section");
|
|
||||||
sections.forEach((section) => {
|
|
||||||
section.style.opacity = "0";
|
|
||||||
section.style.transform = "translateY(20px)";
|
|
||||||
section.style.transition = "opacity 0.6s ease, transform 0.6s ease";
|
|
||||||
observer.observe(section);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
// Add current year to footer
|
|
||||||
document.addEventListener("DOMContentLoaded", function () {
|
|
||||||
// Update year in both old and new footer structures
|
|
||||||
const footerYear = document.getElementById("year");
|
|
||||||
if (footerYear) {
|
|
||||||
const currentYear = new Date().getFullYear();
|
|
||||||
footerYear.textContent = currentYear;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Also update the old footer structure for backward compatibility
|
|
||||||
const footer = document.querySelector("footer p");
|
const footer = document.querySelector("footer p");
|
||||||
if (footer) {
|
if (footer) {
|
||||||
const currentYear = new Date().getFullYear();
|
const currentYear = new Date().getFullYear();
|
||||||
|
|
|
||||||
149
services.html
149
services.html
|
|
@ -1,149 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8" />
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
||||||
<title>Services - My Website</title>
|
|
||||||
<link rel="stylesheet" href="styles/main.css" />
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<header>
|
|
||||||
<nav>
|
|
||||||
<div class="nav-container">
|
|
||||||
<h1 class="logo">My Website</h1>
|
|
||||||
<ul class="nav-links">
|
|
||||||
<li><a href="index.html">Home</a></li>
|
|
||||||
<li><a href="about.html">About</a></li>
|
|
||||||
<li><a href="services.html">Services</a></li>
|
|
||||||
<li><a href="contact.html">Contact</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<main>
|
|
||||||
<section class="page-header">
|
|
||||||
<div class="container">
|
|
||||||
<h1>Our Services</h1>
|
|
||||||
<p>Discover what we can do for you</p>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section class="services-content">
|
|
||||||
<div class="container">
|
|
||||||
<div class="services-grid">
|
|
||||||
<div class="service-card">
|
|
||||||
<h3>Web Design</h3>
|
|
||||||
<p>
|
|
||||||
Beautiful, responsive websites that look great on all devices.
|
|
||||||
We create custom designs that reflect your brand and engage your
|
|
||||||
audience.
|
|
||||||
</p>
|
|
||||||
<ul>
|
|
||||||
<li>Custom Design</li>
|
|
||||||
<li>Responsive Layout</li>
|
|
||||||
<li>SEO Optimized</li>
|
|
||||||
<li>Fast Loading</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="service-card">
|
|
||||||
<h3>Web Development</h3>
|
|
||||||
<p>
|
|
||||||
Full-stack web development services. From simple websites to
|
|
||||||
complex web applications, we build solutions that work.
|
|
||||||
</p>
|
|
||||||
<ul>
|
|
||||||
<li>Frontend Development</li>
|
|
||||||
<li>Backend Development</li>
|
|
||||||
<li>Database Design</li>
|
|
||||||
<li>API Integration</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="service-card">
|
|
||||||
<h3>Digital Marketing</h3>
|
|
||||||
<p>
|
|
||||||
Comprehensive digital marketing strategies to grow your online
|
|
||||||
presence and reach your target audience effectively.
|
|
||||||
</p>
|
|
||||||
<ul>
|
|
||||||
<li>SEO Optimization</li>
|
|
||||||
<li>Social Media Marketing</li>
|
|
||||||
<li>Content Marketing</li>
|
|
||||||
<li>Email Campaigns</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="service-card">
|
|
||||||
<h3>Consulting</h3>
|
|
||||||
<p>
|
|
||||||
Expert advice on digital strategy, technology choices, and
|
|
||||||
business optimization to help you make informed decisions.
|
|
||||||
</p>
|
|
||||||
<ul>
|
|
||||||
<li>Technology Consulting</li>
|
|
||||||
<li>Digital Strategy</li>
|
|
||||||
<li>Performance Analysis</li>
|
|
||||||
<li>Growth Planning</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section class="pricing">
|
|
||||||
<div class="container">
|
|
||||||
<h2>Pricing Plans</h2>
|
|
||||||
<div class="pricing-grid">
|
|
||||||
<div class="pricing-card">
|
|
||||||
<h3>Starter</h3>
|
|
||||||
<div class="price">$99<span>/month</span></div>
|
|
||||||
<ul>
|
|
||||||
<li>Basic Website</li>
|
|
||||||
<li>5 Pages</li>
|
|
||||||
<li>Mobile Responsive</li>
|
|
||||||
<li>Basic SEO</li>
|
|
||||||
</ul>
|
|
||||||
<button class="pricing-btn">Choose Plan</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="pricing-card featured">
|
|
||||||
<h3>Professional</h3>
|
|
||||||
<div class="price">$199<span>/month</span></div>
|
|
||||||
<ul>
|
|
||||||
<li>Custom Website</li>
|
|
||||||
<li>Unlimited Pages</li>
|
|
||||||
<li>Advanced SEO</li>
|
|
||||||
<li>Analytics Integration</li>
|
|
||||||
<li>Priority Support</li>
|
|
||||||
</ul>
|
|
||||||
<button class="pricing-btn">Choose Plan</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="pricing-card">
|
|
||||||
<h3>Enterprise</h3>
|
|
||||||
<div class="price">$399<span>/month</span></div>
|
|
||||||
<ul>
|
|
||||||
<li>Full Custom Solution</li>
|
|
||||||
<li>E-commerce Features</li>
|
|
||||||
<li>Advanced Analytics</li>
|
|
||||||
<li>24/7 Support</li>
|
|
||||||
<li>Custom Integrations</li>
|
|
||||||
</ul>
|
|
||||||
<button class="pricing-btn">Choose Plan</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<footer>
|
|
||||||
<div class="container">
|
|
||||||
<p>© 2024 My Website. All rights reserved.</p>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
|
|
||||||
<script src="scripts/main.js"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
3
src/input.css
Normal file
3
src/input.css
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
@tailwind base;
|
||||||
|
@tailwind components;
|
||||||
|
@tailwind utilities;
|
||||||
1410
styles/main.css
1410
styles/main.css
File diff suppressed because it is too large
Load diff
13
tailwind.config.js
Normal file
13
tailwind.config.js
Normal file
|
|
@ -0,0 +1,13 @@
|
||||||
|
/** @type {import('tailwindcss').Config} */
|
||||||
|
module.exports = {
|
||||||
|
content: ["./*.html", "./src/**/*.{html,js}", "./scripts/**/*.js"],
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
fontFamily: {
|
||||||
|
montserrat: ["Montserrat", "sans-serif"],
|
||||||
|
playfair: ["Playfair Display", "serif"],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
plugins: [],
|
||||||
|
};
|
||||||
Loading…
Add table
Add a link
Reference in a new issue