File 1: style.css
Remember to save this one as style.css (and select "All Files" if you are on Windows).

CSS
/* CSS Resets and Variables */
:root {
    --primary-color: #0c4a6e;
    --secondary-color: #f8fafc;
    --accent-color: #0284c7;
    --text-color: #334155;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    color: var(--text-color);
    line-height: 1.6;
}

header {
    background-color: #ffffff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.2rem 5%;
    max-width: 1200px;
    margin: auto;
}

.logo {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--primary-color);
    text-decoration: none;
    letter-spacing: -0.5px;
}

.nav-links a {
    margin-left: 30px;
    text-decoration: none;
    color: var(--text-color);
    font-weight: 600;
    transition: color 0.3s;
}

.nav-links a:hover {
    color: var(--accent-color);
}

.btn {
    background-color: var(--accent-color);
    color: #ffffff;
    padding: 12px 24px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.3s;
    border: none;
    cursor: pointer;
}

.btn:hover {
    background-color: var(--primary-color);
    color: #ffffff;
}

.hero {
    background: linear-gradient(rgba(12, 74, 110, 0.85), rgba(12, 74, 110, 0.85)), url('https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?auto=format&fit=crop&w=1920&q=80') center/cover;
    color: #ffffff;
    text-align: center;
    padding: 120px 20px;
}

.hero h1 {
    font-size: 3.5rem;
    margin-bottom: 20px;
    line-height: 1.2;
}

.hero p {
    font-size: 1.25rem;
    margin-bottom: 40px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    opacity: 0.9;
}

.services {
    padding: 80px 5%;
    background-color: var(--secondary-color);
    text-align: center;
}

.section-title {
    font-size: 2.5rem;
    color: var(--primary-color);
    margin-bottom: 15px;
}

.services-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    margin-top: 50px;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.service-card {
    background: #ffffff;
    padding: 40px 30px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.03);
    flex: 1;
    min-width: 320px;
    border-top: 4px solid var(--accent-color);
    transition: transform 0.3s;
}

.service-card:hover {
    transform: translateY(-5px);
}

.service-card h3 {
    font-size: 1.5rem;
    color: var(--primary-color);
    margin-bottom: 15px;
}

.trusted-by {
    padding: 80px 5%;
    text-align: center;
    max-width: 1200px;
    margin: auto;
}

.client-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin-top: 40px;
}

.client-tag {
    background: var(--secondary-color);
    padding: 12px 25px;
    border-radius: 50px;
    font-weight: 600;
    color: #475569;
    border: 1px solid #e2e8f0;
}

.gallery {
    padding: 80px 5%;
    background-color: var(--secondary-color);
    text-align: center;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    max-width: 1200px;
    margin: 40px auto 0;
}

.gallery-item {
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
    height: 300px;
}

.gallery-item:hover {
    transform: scale(1.03);
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.gallery-caption {
    background-color: var(--primary-color);
    color: white;
    padding: 10px;
    font-weight: 600;
    font-size: 0.9rem;
}

footer {
    background-color: var(--primary-color);
    color: #ffffff;
    text-align: center;
    padding: 60px 20px;
}

footer h2 {
    font-size: 2rem;
    margin-bottom: 20px;
}

footer p {
    margin-bottom: 30px;
    opacity: 0.9;
}

.copyright {
    margin-top: 50px;
    font-size: 0.9rem;
    opacity: 0.6;
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 20px;
}

@media (max-width: 768px) {
    .nav-links { display: none; }
    .hero h1 { font-size: 2.5rem; }
    .nav-container { justify-content: center; }
}
File 2: index.html


HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Top Notch Window Cleaning & Pressure Washing | Pflugerville, TX</title>
    
    <meta name="description" content="Top Notch Window Cleaning provides specialized commercial window washing and heavy-duty pressure washing services in Pflugerville, Round Rock, Austin, and Lakeway.">
    <meta name="keywords" content="commercial window cleaning, pressure washing, Pflugerville, Austin, commercial property maintenance, streak-free glass">
    
    <link rel="stylesheet" href="style.css">

    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "LocalBusiness",
      "name": "Top Notch Window Cleaning",
      "image": "https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?auto=format&fit=crop&w=1920&q=80",
      "description": "Specialized commercial window washing and high-performance pressure washing services tailored to commercial properties.",
      "address": {
        "@type": "PostalAddress",
        "streetAddress": "4204 Arthurs Flight Path",
        "addressLocality": "Pflugerville",
        "addressRegion": "TX"
      },
      "areaServed": ["Pflugerville", "Round Rock", "Georgetown", "Austin", "Lakeway"],
      "priceRange": "$$"
    }
    </script>
</head>
<body>

<header>
    <div class="nav-container">
        <a href="index.html" class="logo">Top Notch Window Cleaning</a>
        <nav class="nav-links">
            <a href="index.html">Home</a>
            <a href="services.html">All Services</a>
            <a href="window-cleaning.html">Window Cleaning</a>
            <a href="gallery.html">Gallery</a>
            <a href="contact.html" class="btn">Request a Quote</a>
        </nav>
    </div>
</header>

<section class="hero">
    <h1>Crystal Clear Views & Pristine Exteriors</h1>
    <p>Specialized commercial window washing and high-performance pressure washing services tailored to your property's exact specifications.</p>
    <a href="contact.html" class="btn" style="font-size: 1.1rem; padding: 15px 30px;">Schedule Service</a>
</section>

<section style="background-color: var(--primary-color); color: #ffffff; text-align: center; padding: 40px 20px;">
    <h2 style="font-size: 1.8rem; margin-bottom: 10px;">Proudly Serving Central Texas</h2>
    <p style="font-size: 1.2rem; font-weight: 600; opacity: 0.9;">
        Pflugerville | Round Rock | Georgetown | Austin | Lakeway
    </p>
</section>

</body>
</html>
File 3: services.html
Save this exactly as services.html.

HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Our Services | Top Notch Window Cleaning</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

<header>
    <div class="nav-container">
        <a href="index.html" class="logo">Top Notch Window Cleaning</a>
        <nav class="nav-links">
            <a href="index.html">Home</a>
            <a href="services.html">All Services</a>
            <a href="window-cleaning.html">Window Cleaning</a>
            <a href="gallery.html">Gallery</a>
            <a href="contact.html" class="btn">Request a Quote</a>
        </nav>
    </div>
</header>

<section class="services">
    <h2 class="section-title">Our Core Services</h2>
    <div class="services-grid">
        <div class="service-card">
            <h3>Commercial Window Washing</h3>
            <p>From retail storefronts to multi-story commercial facilities, we ensure your glass is spotless and streak-free. We remove hard water stains, dirt, and build-up to keep your business looking its best.</p>
        </div>
        <div class="service-card">
            <h3>Professional Pressure Washing</h3>
            <p>Instantly boost your property's curb appeal. We provide aggressive yet safe cleaning for building exteriors, concrete walkways, driveways, parking lots, and dumpster pads to cut through heavy grease and environmental grime.</p>
        </div>
    </div>
</section>

<section class="trusted-by">
    <h2 class="section-title">Trusted By Local Businesses</h2>
    <div class="client-list">
        <span class="client-tag">Longhorn Village</span>
        <span class="client-tag">Twin Liquors</span>
        <span class="client-tag">Chuy's</span>
        <span class="client-tag">Darden Restaurants</span>
        <span class="client-tag">Triple S Fuels</span>
        <span class="client-tag">Texas Roadhouse</span>
    </div>
</section>

</body>
</html>
File 4: window-cleaning.html
Save this exactly as window-cleaning.html.

HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Commercial Window Cleaning | Top Notch Window Cleaning</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

<header>
    <div class="nav-container">
        <a href="index.html" class="logo">Top Notch Window Cleaning</a>
        <nav class="nav-links">
            <a href="index.html">Home</a>
            <a href="services.html">All Services</a>
            <a href="window-cleaning.html">Window Cleaning</a>
            <a href="gallery.html">Gallery</a>
            <a href="contact.html" class="btn">Request a Quote</a>
        </nav>
    </div>
</header>

<section class="hero" style="background: linear-gradient(rgba(12, 74, 110, 0.85), rgba(12, 74, 110, 0.85)), url('https://images.unsplash.com/photo-1584622650111-993a426fbf0a?auto=format&fit=crop&w=1920&q=80') center/cover; padding: 100px 20px;">
    <h1>Professional Window Cleaning Services</h1>
    <p>Spotless, streak-free glass for commercial facilities, retail storefronts, and restaurants across Central Texas.</p>
    <a href="contact.html" class="btn" style="font-size: 1.1rem; padding: 15px 30px;">Get a Free Estimate</a>
</section>

<section class="services">
    <h2 class="section-title">Clear Views for Your Business</h2>
    <p style="max-width: 800px; margin: 0 auto 40px; font-size: 1.1rem;">Clean windows are essential for making a great first impression. We use professional-grade squeegees, purified water systems, and eco-friendly solutions to remove hard water stains, dirt, and environmental build-up.</p>
    
    <div class="services-grid">
        <div class="service-card">
            <h3>Retail Storefronts</h3>
            <p>Keep your displays clearly visible and invite customers in with pristine, smudge-free entrance glass and display windows.</p>
        </div>
        <div class="service-card">
            <h3>Restaurants & Dining</h3>
            <p>We remove greasy fingerprints and smudges so your patrons can enjoy the view. We offer recurring schedules tailored to the high-traffic needs of food service locations.</p>
        </div>
        <div class="service-card">
            <h3>Commercial Facilities</h3>
            <p>From offices to multi-level commercial properties, we have the equipment and expertise to handle large-scale glass cleaning safely and efficiently.</p>
        </div>
    </div>
</section>

<section style="background-color: var(--primary-color); color: #ffffff; text-align: center; padding: 60px 20px;">
    <h2 style="font-size: 2rem; margin-bottom: 20px;">Window Cleaning Service Areas</h2>
    <p style="max-width: 700px; margin: 0 auto 30px; font-size: 1.1rem; opacity: 0.9;">We are proud to provide reliable, recurring window washing services to local businesses throughout the greater Austin area. Whether you need a one-time deep clean or weekly maintenance, we cover your location:</p>
    
    <div style="display: flex; flex-wrap: wrap; justify-content: center; gap: 15px; max-width: 800px; margin: 0 auto;">
        <span style="background: rgba(255,255,255,0.1); padding: 10px 20px; border-radius: 5px; font-weight: bold; border: 1px solid rgba(255,255,255,0.3);">📍 Pflugerville, TX</span>
        <span style="background: rgba(255,255,255,0.1); padding: 10px 20px; border-radius: 5px; font-weight: bold; border: 1px solid rgba(255,255,255,0.3);">📍 Round Rock, TX</span>
        <span style="background: rgba(255,255,255,0.1); padding: 10px 20px; border-radius: 5px; font-weight: bold; border: 1px solid rgba(255,255,255,0.3);">📍 Georgetown, TX</span>
        <span style="background: rgba(255,255,255,0.1); padding: 10px 20px; border-radius: 5px; font-weight: bold; border: 1px solid rgba(255,255,255,0.3);">📍 Austin, TX</span>
        <span style="background: rgba(255,255,255,0.1); padding: 10px 20px; border-radius: 5px; font-weight: bold; border: 1px solid rgba(255,255,255,0.3);">📍 Lakeway, TX</span>
    </div>
</section>

</body>
</html>
File 5: gallery.html
Save this exactly as gallery.html.

HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Our Work | Top Notch Window Cleaning</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

<header>
    <div class="nav-container">
        <a href="index.html" class="logo">Top Notch Window Cleaning</a>
        <nav class="nav-links">
            <a href="index.html">Home</a>
            <a href="services.html">All Services</a>
            <a href="window-cleaning.html">Window Cleaning</a>
            <a href="gallery.html">Gallery</a>
            <a href="contact.html" class="btn">Request a Quote</a>
        </nav>
    </div>
</header>

<section class="gallery">
    <h2 class="section-title">Our Recent Work</h2>
    <p>See the difference professional window and pressure washing makes for commercial properties across Central Texas.</p>
    
    <div class="gallery-grid">
        <div class="gallery-item">
            <img src="https://images.unsplash.com/photo-1584622650111-993a426fbf0a?auto=format&fit=crop&w=800&q=80" alt="Commercial window cleaning">
            <div class="gallery-caption">Streak-Free Commercial Glass</div>
        </div>
        <div class="gallery-item">
            <img src="https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?auto=format&fit=crop&w=800&q=80" alt="Pristine commercial building exterior">
            <div class="gallery-caption">Exterior Building Washing</div>
        </div>
        <div class="gallery-item">
            <img src="https://images.unsplash.com/photo-1621619856624-42fd193a0661?auto=format&fit=crop&w=800&q=80" alt="Pressure washing concrete surface">
            <div class="gallery-caption">Heavy-Duty Pressure Washing</div>
        </div>
        <div class="gallery-item">
            <img src="https://images.unsplash.com/photo-1518558997970-4fdc4de5b211?auto=format&fit=crop&w=800&q=80" alt="Clean commercial storefront">
            <div class="gallery-caption">Retail Storefront Maintenance</div>
        </div>
    </div>
</section>

</body>
</html>
File 6: contact.html
Save this exactly as contact.html.

HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contact Us | Top Notch Window Cleaning</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

<header>
    <div class="nav-container">
        <a href="index.html" class="logo">Top Notch Window Cleaning</a>
        <nav class="nav-links">
            <a href="index.html">Home</a>
            <a href="services.html">All Services</a>
            <a href="window-cleaning.html">Window Cleaning</a>
            <a href="gallery.html">Gallery</a>
            <a href="contact.html" class="btn">Request a Quote</a>
        </nav>
    </div>
</header>

<footer style="padding-top: 100px; height: 100vh;">
    <h2>Ready to elevate your property's exterior?</h2>
    <p>Set up a recurring maintenance schedule or request a specialized one-time clean.</p>
    
    <div class="contact-info" style="margin: 30px 0; font-size: 1.1rem;">
        <p style="margin-bottom: 5px; font-weight: bold; font-size: 1.3rem;">Top Notch Window Cleaning</p>
        <p style="margin-bottom: 0;">4204 Arthurs Flight Path</p>
        <p style="margin-bottom: 20px;">Pflugerville, TX</p>
        
        <p style="font-weight: 600; color: #cbd5e1;">Service Areas:</p>
        <p>Pflugerville &bull; Round Rock &bull; Georgetown &bull; Austin &bull; Lakeway</p>
    </div>
    
    <a href="YOUR_BOOKING_URL_HERE" class="btn" style="display:inline-block; margin-top: 20px;">Access Client Portal / Book Online</a>
</footer>

</body>
</html>