mirror of
https://git.kh3group.com/georgebiri/khy_website.git
synced 2026-07-02 05:23:33 +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
|
||||
|
||||
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" />
|
||||
<title>My Website</title>
|
||||
<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>
|
||||
<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>
|
||||
<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"
|
||||
/>
|
||||
</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>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<section class="hero">
|
||||
<div class="container">
|
||||
<h2>Welcome to My Website</h2>
|
||||
<p>
|
||||
<!-- 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">
|
||||
<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.
|
||||
</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>
|
||||
</section>
|
||||
|
||||
<section class="features">
|
||||
<div class="container">
|
||||
<h2>What We Offer</h2>
|
||||
<div class="features-grid">
|
||||
<div class="feature-card">
|
||||
<h3>Quality Service</h3>
|
||||
<p>We provide top-notch services tailored to your needs.</p>
|
||||
<!-- Features 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
|
||||
</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
|
||||
</h3>
|
||||
<p class="text-gray-600">
|
||||
We provide top-notch services tailored to your needs.
|
||||
</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<h3>Expert Team</h3>
|
||||
<p>Our experienced team is here to help you succeed.</p>
|
||||
<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
|
||||
</h3>
|
||||
<p class="text-gray-600">
|
||||
Our experienced team is here to help you succeed.
|
||||
</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<h3>24/7 Support</h3>
|
||||
<p>Round-the-clock support whenever you need us.</p>
|
||||
<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
|
||||
</h3>
|
||||
<p class="text-gray-600">
|
||||
Round-the-clock support whenever you need us.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<div class="container">
|
||||
<!-- 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>
|
||||
</div>
|
||||
</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 () {
|
||||
// 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");
|
||||
if (footer) {
|
||||
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