CleanHaul
Junk Removal & Hauling Service Template

Welcome to CleanHaul – a complete, modern HTML template designed specifically for junk removal, hauling, and cleanout businesses. With its clean green palette, smooth animations, and conversion‑focused layout, CleanHaul helps you turn website visitors into paying customers.

The template includes 10 professionally designed pages covering everything from an attention‑grabbing home page and service catalog to a blog, FAQ, and essential legal pages. Built with Tailwind CSS and vanilla JavaScript, it's lightweight, easy to customize, and ready to deploy.

Version: 1.0  |  Last Updated: June 2026

🚀 Installation

CleanHaul is built with pure HTML, Tailwind CSS (via CDN), and vanilla JavaScript. No build tools, no npm installs, no complex configuration – just unzip and open in your browser.

1. Download and unzip the package. 2. Open the project folder. 3. Double‑click any .html file (e.g., index.html) to preview in your browser. 4. We recommend using VS Code with the Live Server extension for development.
Quick Start: Open index.html and start customizing. All external resources (Tailwind CSS, Lucide Icons, Google Fonts, AOS) are loaded from CDNs. Custom styles are embedded within each HTML file via <style> tags – no extra CSS files to manage.

📁 Folder Structure

/cleanhaul-theme
│
├── index.html                ← Home page (preloader, hero, services, etc.)
├── about.html                ← About us with team, milestones, impact stats
├── services.html             ← Services catalog (6 service cards)
├── pricing.html              ← Pricing plans (small, medium, full truck)
├── contact.html              ← Contact form + location/FAQ
├── blog.html                 ← Blog listing with pagination
├── blog-detail.html          ← Single article detail page
├── faq.html                  ← FAQ with accordion & search
├── terms.html                ← Terms & Conditions
├── privacy.html              ← Privacy Policy
│
├── assets/
│   ├── images/               ← Place your own images here
│   └── uploads/              ← (optional) uploaded content
│
└── documentation.html        ← This file
All external dependencies (Tailwind CSS, Lucide Icons, Google Fonts, AOS) are loaded from CDNs. You only need to upload the HTML files and any local assets like images.

⚙️ Tech Stack

<!-- Tailwind CSS --> <script src="https://cdn.tailwindcss.com"></script> <!-- Lucide Icons --> <script src="https://unpkg.com/lucide@latest"></script> <!-- Google Fonts --> <link href="https://fonts.googleapis.com/css2?family=Inter:...&family=Poppins:..." rel="stylesheet" />
All custom styles are embedded inside each HTML file within a <style> tag. This makes the template self‑contained and easy to edit. You can extract these styles into a separate style.css if preferred.

📄 Pages & Templates

Home Page index.html

About Us about.html

Services services.html

Pricing pricing.html

Contact Us contact.html

Blog Listing blog.html

Blog Detail blog-detail.html

FAQ faq.html

Terms & Conditions terms.html

Privacy Policy privacy.html

✨ Key Features

Clean, Professional Design

A green‑and‑white color palette with subtle shadows and rounded corners gives a fresh, trustworthy feel. Poppins headings and Inter body text ensure readability and modern aesthetics.

Fully Responsive

Every page looks great on mobile, tablet, and desktop. The navigation collapses into a hamburger menu, cards stack vertically, and forms are touch‑friendly.

Interactive Components

Conversion‑Optimized

Multiple CTAs ("Get Free Quote", "Call Now"), trust badges (Licensed, Insured, Eco‑Friendly), and social proof (testimonials, stats) are strategically placed to build confidence and drive inquiries.

Easy to Customize

Change colors, fonts, images, and text by editing a few lines in the HTML. Tailwind utility classes make layout adjustments intuitive. The code is well‑commented and organized.

SEO‑Ready

Semantic HTML5, descriptive meta tags, Open Graph tags, and fast CDN‑loaded resources help your site rank better.

🎨 Customization

Change the Color Scheme

The brand colors are defined in the tailwind.config JavaScript block inside each page. Modify these values to instantly rebrand the entire template. 

// Inside the <script> tailwind.config
colors: {
  brand: {
    DEFAULT: '#1f9b5e',   // primary green
    foreground: '#ffffff',
    secondary: '#e0b143', // accent gold
    accent: '#dff0e3',
    dark: '#0f1729',
    light: '#f7f8fa',
  },
}

Typography

The template uses Google Fonts: Poppins (headings) and Inter (body). To change them, update the Google Fonts link in the <head> and modify the fontFamily entries in the Tailwind config.

Editing Content

All text, pricing, services, and testimonials are inside the HTML files. For the blog, the article data is stored in JavaScript arrays (window.__testimonials for testimonials, blog posts are hardcoded). To add or modify blog articles, duplicate the article card structure.

Tailwind Classes: Since the template uses Tailwind CSS, you can adjust spacing, colors, and layout by simply changing utility classes directly in the HTML – no need to dig into CSS files.

🖼️ Images & Assets

The template uses placeholder images (e.g., assets/hero-truck.jpg, assets/team.jpg, assets/before-after-*.jpg). Replace them with your own photography:

Image License: The placeholder images used in the demo are from Unsplash and are free to use. However, for a commercial project, we recommend replacing them with your own licensed photography to avoid any attribution issues.

📋 Forms & Inquiries

The template includes several demo forms:

Currently, forms show a demo success message. To connect them to a real service, modify the addEventListener('submit', ...) handler to send data to:

// Example: modify the free quote form document.getElementById('bookingForm').addEventListener('submit', function(e) { e.preventDefault(); // add your integration here // fetch('/your-endpoint', { method: 'POST', body: new FormData(this) }); document.getElementById('bookingSuccess').classList.remove('hidden'); this.style.display = 'none'; });

❓ FAQ & Legal Pages

The FAQ page (faq.html) features a categorized accordion. Questions are grouped into General, Services, Pricing, and Booking categories. Clicking a question expands the answer with a smooth animation and rotates the plus icon to a minus.

The Terms & Conditions and Privacy Policy pages contain comprehensive sample legal text tailored for a junk removal business. You must replace this placeholder content with your own company's actual policies before publishing.

Important: The legal information provided is generic sample text and is not legal advice. Consult with a qualified attorney to create your final policies that comply with your local regulations and business operations.

🙏 Credits

CleanHaul – Junk Removal & Hauling Service HTML Template. Built for speed, designed for trust.