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

feat: Create template

Browse source
This commit is contained in:
George Birikorang 2025-08-13 14:10:25 -04:00
parent 1b53dc6a20
commit 34d6f638bd
9 changed files with 1325 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

99
about.html Normal file
View file

@ -0,0 +1,99 @@
<!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>&copy; 2024 My Website. All rights reserved.</p>
</div>
</footer>
<script src="scripts/main.js"></script>
</body>
</html>

129
contact.html Normal file
View file

@ -0,0 +1,129 @@
<!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>&copy; 2024 My Website. All rights reserved.</p>
</div>
</footer>
<script src="scripts/main.js"></script>
</body>
</html>

82
example-with-partials.html Normal file
View file

@ -0,0 +1,82 @@
<!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>&lt;body&gt;</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>&lt;body&gt;</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>

64
index.html Normal file
View file

@ -0,0 +1,64 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>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="hero">
<div class="container">
<h2>Welcome to My Website</h2>
<p>
This is a simple, clean starter template for your static website.
</p>
<button class="cta-button">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>
</div>
<div class="feature-card">
<h3>Expert Team</h3>
<p>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>
</div>
</div>
</section>
</main>
<footer>
<div class="container">
<p>&copy; 2024 My Website. All rights reserved.</p>
</div>
</footer>
<script src="scripts/main.js"></script>
</body>
</html>

4
partials/footer.html Normal file
View file

@ -0,0 +1,4 @@
<footer class="site-footer" id="contact">
<p>© <span id="year"></span> MySite</p>
<a href="mailto:hello@example.com">hello@example.com</a>
</footer>

9
partials/header.html Normal file
View file

@ -0,0 +1,9 @@
<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>

101
scripts/main.js Normal file
View file

@ -0,0 +1,101 @@
// Navigation and general functionality
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();
footer.innerHTML = footer.innerHTML.replace("2024", currentYear);
}
});

149
services.html Normal file
View file

@ -0,0 +1,149 @@
<!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>&copy; 2024 My Website. All rights reserved.</p>
</div>
</footer>
<script src="scripts/main.js"></script>
</body>
</html>

688
styles/main.css Normal file
View file

@ -0,0 +1,688 @@
/* Reset and base styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
color: #333;
background-color: #f8f9fa;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
/* Navigation */
.site-header {
background-color: #fff;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
position: sticky;
top: 0;
z-index: 1000;
padding: 1rem 0;
}
.site-header .nav-container {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.site-header .logo {
font-size: 1.5rem;
font-weight: bold;
color: #2c3e50;
text-decoration: none;
transition: color 0.3s ease;
}
.site-header .logo:hover {
color: #3498db;
}
.site-header .nav {
display: flex;
gap: 2rem;
}
.site-header .nav a {
text-decoration: none;
color: #2c3e50;
font-weight: 500;
transition: color 0.3s ease;
}
.site-header .nav a:hover {
color: #3498db;
}
/* Keep old styles for backward compatibility */
header {
background-color: #fff;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
position: sticky;
top: 0;
z-index: 1000;
}
nav {
padding: 1rem 0;
}
.nav-container {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.logo {
font-size: 1.5rem;
font-weight: bold;
color: #2c3e50;
}
.nav-links {
display: flex;
list-style: none;
gap: 2rem;
}
.nav-links a {
text-decoration: none;
color: #2c3e50;
font-weight: 500;
transition: color 0.3s ease;
}
.nav-links a:hover {
color: #3498db;
}
/* Hero section */
.hero {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
text-align: center;
padding: 4rem 0;
min-height: 60vh;
display: flex;
align-items: center;
}
.hero h2 {
font-size: 3rem;
margin-bottom: 1rem;
font-weight: 300;
}
.hero p {
font-size: 1.2rem;
margin-bottom: 2rem;
opacity: 0.9;
}
.cta-button {
background-color: #e74c3c;
color: white;
border: none;
padding: 1rem 2rem;
font-size: 1.1rem;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.cta-button:hover {
background-color: #c0392b;
}
/* Sections */
section {
padding: 4rem 0;
}
section h2 {
font-size: 2.5rem;
margin-bottom: 2rem;
text-align: center;
color: #2c3e50;
}
.about {
background-color: white;
}
.about p {
font-size: 1.1rem;
text-align: center;
max-width: 800px;
margin: 0 auto;
}
.contact {
background-color: #ecf0f1;
}
.contact p {
text-align: center;
font-size: 1.1rem;
}
.contact a {
color: #3498db;
text-decoration: none;
}
.contact a:hover {
text-decoration: underline;
}
/* Footer */
.site-footer {
background-color: #2c3e50;
color: white;
text-align: center;
padding: 2rem 0;
}
.site-footer p {
margin-bottom: 1rem;
}
.site-footer a {
color: #3498db;
text-decoration: none;
transition: color 0.3s ease;
}
.site-footer a:hover {
color: #5dade2;
}
/* Keep old styles for backward compatibility */
footer {
background-color: #2c3e50;
color: white;
text-align: center;
padding: 2rem 0;
}
/* Page Header */
.page-header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
text-align: center;
padding: 4rem 0;
}
.page-header h1 {
font-size: 3rem;
margin-bottom: 1rem;
font-weight: 300;
}
.page-header p {
font-size: 1.2rem;
opacity: 0.9;
}
/* Features Grid */
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin-top: 3rem;
}
.feature-card {
background: white;
padding: 2rem;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
text-align: center;
transition: transform 0.3s ease;
}
.feature-card:hover {
transform: translateY(-5px);
}
.feature-card h3 {
color: #2c3e50;
margin-bottom: 1rem;
font-size: 1.5rem;
}
/* About Page Styles */
.about-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: start;
margin-top: 3rem;
}
.about-text h2 {
color: #2c3e50;
margin-bottom: 1.5rem;
}
.about-text p {
margin-bottom: 1.5rem;
line-height: 1.8;
}
.about-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
}
.stat-item {
text-align: center;
padding: 2rem;
background: white;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.stat-item h3 {
font-size: 2.5rem;
color: #3498db;
margin-bottom: 0.5rem;
}
.team {
background-color: #f8f9fa;
padding: 4rem 0;
}
.team-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
margin-top: 3rem;
}
.team-member {
background: white;
padding: 2rem;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
text-align: center;
}
.team-member h3 {
color: #2c3e50;
margin-bottom: 0.5rem;
}
.position {
color: #3498db;
font-weight: 600;
margin-bottom: 1rem;
}
/* Services Page Styles */
.services-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin-top: 3rem;
}
.service-card {
background: white;
padding: 2rem;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
}
.service-card:hover {
transform: translateY(-5px);
}
.service-card h3 {
color: #2c3e50;
margin-bottom: 1rem;
font-size: 1.5rem;
}
.service-card ul {
margin-top: 1rem;
padding-left: 1.5rem;
}
.service-card li {
margin-bottom: 0.5rem;
color: #666;
}
/* Pricing Styles */
.pricing {
background-color: #f8f9fa;
padding: 4rem 0;
}
.pricing-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2rem;
margin-top: 3rem;
}
.pricing-card {
background: white;
padding: 2rem;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
text-align: center;
transition: transform 0.3s ease;
position: relative;
}
.pricing-card.featured {
transform: scale(1.05);
border: 2px solid #3498db;
}
.pricing-card:hover {
transform: translateY(-5px);
}
.pricing-card.featured:hover {
transform: scale(1.05) translateY(-5px);
}
.price {
font-size: 3rem;
font-weight: bold;
color: #2c3e50;
margin: 1rem 0;
}
.price span {
font-size: 1rem;
color: #666;
}
.pricing-card ul {
list-style: none;
padding: 0;
margin: 2rem 0;
}
.pricing-card li {
padding: 0.5rem 0;
border-bottom: 1px solid #eee;
}
.pricing-btn {
background-color: #3498db;
color: white;
border: none;
padding: 1rem 2rem;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
width: 100%;
}
.pricing-btn:hover {
background-color: #2980b9;
}
/* Contact Page Styles */
.contact-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
margin-top: 3rem;
}
.contact-info h2 {
color: #2c3e50;
margin-bottom: 1rem;
}
.contact-details {
margin-top: 2rem;
}
.contact-item {
margin-bottom: 2rem;
}
.contact-item h3 {
color: #3498db;
margin-bottom: 0.5rem;
}
.contact-item a {
color: #2c3e50;
text-decoration: none;
}
.contact-item a:hover {
color: #3498db;
}
/* Contact Form */
.contact-form {
background: white;
padding: 2rem;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.contact-form h2 {
color: #2c3e50;
margin-bottom: 2rem;
}
.form-group {
margin-bottom: 1.5rem;
}
.form-group label {
display: block;
margin-bottom: 0.5rem;
color: #2c3e50;
font-weight: 500;
}
.form-group input,
.form-group textarea {
width: 100%;
padding: 0.75rem;
border: 1px solid #ddd;
border-radius: 5px;
font-size: 1rem;
transition: border-color 0.3s ease;
}
.form-group input:focus,
.form-group textarea:focus {
outline: none;
border-color: #3498db;
}
.submit-btn {
background-color: #3498db;
color: white;
border: none;
padding: 1rem 2rem;
border-radius: 5px;
cursor: pointer;
font-size: 1rem;
transition: background-color 0.3s ease;
width: 100%;
}
.submit-btn:hover {
background-color: #2980b9;
}
/* Map Section */
.map-section {
background-color: #f8f9fa;
padding: 4rem 0;
}
.map-placeholder {
background: white;
padding: 4rem;
text-align: center;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
margin-top: 2rem;
}
/* Example page styles */
.content {
padding: 4rem 0;
}
.instructions {
background: white;
padding: 2rem;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
margin: 2rem 0;
}
.instructions h3 {
color: #2c3e50;
margin-bottom: 1rem;
}
.instructions ol {
padding-left: 1.5rem;
}
.instructions li {
margin-bottom: 0.5rem;
}
.instructions code {
background: #f8f9fa;
padding: 0.2rem 0.4rem;
border-radius: 3px;
font-family: monospace;
}
.benefits {
background: #f8f9fa;
padding: 2rem;
border-radius: 10px;
margin: 2rem 0;
}
.benefits h3 {
color: #2c3e50;
margin-bottom: 1rem;
}
.benefits ul {
list-style: none;
padding: 0;
}
.benefits li {
margin-bottom: 0.5rem;
padding-left: 1.5rem;
position: relative;
}
.benefits li:before {
content: "✅";
position: absolute;
left: 0;
}
/* Responsive design */
@media (max-width: 768px) {
.site-header .nav-container {
flex-direction: column;
gap: 1rem;
}
.site-header .nav {
gap: 1rem;
}
.nav-container {
flex-direction: column;
gap: 1rem;
}
.nav-links {
gap: 1rem;
}
.hero h2,
.page-header h1 {
font-size: 2rem;
}
.hero p,
.page-header p {
font-size: 1rem;
}
section h2 {
font-size: 2rem;
}
.container {
padding: 0 15px;
}
.about-grid,
.contact-grid {
grid-template-columns: 1fr;
gap: 2rem;
}
.about-stats {
grid-template-columns: 1fr;
}
.features-grid,
.services-grid,
.team-grid,
.pricing-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 480px) {
.hero {
padding: 2rem 0;
}
.hero h2 {
font-size: 1.5rem;
}
section {
padding: 2rem 0;
}
section h2 {
font-size: 1.5rem;
}
}