added more preview pages and more templates
This commit is contained in:
BIN
Binary file not shown.
@@ -0,0 +1,605 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>CleanHaul – Junk Removal HTML Template Documentation</title>
|
||||
|
||||
<!-- Google Fonts (CleanHaul brand) -->
|
||||
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800;900&family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet" />
|
||||
|
||||
<!-- Tailwind CSS CDN -->
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<script>
|
||||
tailwind.config = {
|
||||
theme: {
|
||||
extend: {
|
||||
fontFamily: {
|
||||
heading: ['Poppins', 'sans-serif'],
|
||||
body: ['Inter', 'sans-serif'],
|
||||
mono: ['JetBrains Mono', 'monospace'],
|
||||
},
|
||||
colors: {
|
||||
brand: {
|
||||
DEFAULT: '#1f9b5e',
|
||||
light: '#2dd47f',
|
||||
dark: '#166b40',
|
||||
accent: '#e0b143',
|
||||
'accent-foreground': '#2a2415',
|
||||
glow: 'rgba(31,155,94,0.25)',
|
||||
soft: 'rgba(31,155,94,0.08)',
|
||||
},
|
||||
dark: {
|
||||
1: '#0f1729',
|
||||
2: '#1e293b',
|
||||
3: '#334155',
|
||||
},
|
||||
muted: {
|
||||
DEFAULT: '#64748b',
|
||||
light: '#94a3b8',
|
||||
},
|
||||
border: {
|
||||
DEFAULT: 'rgba(31,155,94,0.2)',
|
||||
light: 'rgba(203,213,225,0.12)',
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
:root {
|
||||
--clr-primary: #1f9b5e;
|
||||
--clr-primary-dark: #166b40;
|
||||
--clr-accent: #e0b143;
|
||||
--clr-dark: #0f1729;
|
||||
--clr-dark2: #1e293b;
|
||||
--clr-muted: #64748b;
|
||||
--clr-muted-light: #94a3b8;
|
||||
--ff-heading: 'Poppins', sans-serif;
|
||||
--ff-body: 'Inter', sans-serif;
|
||||
--ff-mono: 'JetBrains Mono', monospace;
|
||||
--radius-lg: 12px;
|
||||
--radius-md: 8px;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: var(--ff-body);
|
||||
background: var(--clr-dark);
|
||||
color: #f8fafc;
|
||||
line-height: 1.7;
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
width: 280px;
|
||||
background: rgba(15, 23, 42, 0.98);
|
||||
backdrop-filter: blur(20px);
|
||||
border-right: 1px solid rgba(31,155,94,0.2);
|
||||
padding: 32px 24px;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
height: 100vh;
|
||||
overflow-y: auto;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.sidebar h2 {
|
||||
font-family: var(--ff-heading);
|
||||
font-size: 24px;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.5px;
|
||||
color: #fff;
|
||||
margin-top: 0;
|
||||
margin-bottom: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.sidebar h2 span {
|
||||
background: linear-gradient(135deg, #1f9b5e 0%, #e0b143 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.sidebar a {
|
||||
display: block;
|
||||
color: var(--clr-muted-light);
|
||||
text-decoration: none;
|
||||
margin-bottom: 14px;
|
||||
font-size: 14px;
|
||||
font-family: var(--ff-heading);
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.3px;
|
||||
transition: all 0.3s;
|
||||
padding: 6px 0;
|
||||
border-bottom: 1px solid transparent;
|
||||
}
|
||||
|
||||
.sidebar a:hover {
|
||||
color: #2dd47f;
|
||||
border-bottom-color: #2dd47f;
|
||||
transform: translateX(4px);
|
||||
}
|
||||
|
||||
.content {
|
||||
flex: 1;
|
||||
max-width: 960px;
|
||||
padding: 48px 60px;
|
||||
background: #1e293b;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4 {
|
||||
font-family: var(--ff-heading);
|
||||
color: #fff;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 44px;
|
||||
font-weight: 900;
|
||||
border-bottom: 3px solid var(--clr-primary);
|
||||
display: inline-block;
|
||||
padding-bottom: 8px;
|
||||
margin-bottom: 16px;
|
||||
letter-spacing: -0.5px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 32px;
|
||||
font-weight: 700;
|
||||
margin-top: 56px;
|
||||
margin-bottom: 20px;
|
||||
color: #2dd47f;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
margin-top: 36px;
|
||||
margin-bottom: 12px;
|
||||
color: #f8fafc;
|
||||
}
|
||||
|
||||
.section {
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
.code {
|
||||
background: #0f1729;
|
||||
border: 1px solid rgba(31,155,94,0.2);
|
||||
color: #bbf7d0;
|
||||
padding: 20px;
|
||||
border-radius: var(--radius-lg);
|
||||
overflow-x: auto;
|
||||
font-family: var(--ff-mono);
|
||||
font-size: 14px;
|
||||
white-space: pre-wrap;
|
||||
margin: 16px 0;
|
||||
}
|
||||
|
||||
.note {
|
||||
background: rgba(31,155,94,0.08);
|
||||
border-left: 4px solid var(--clr-primary);
|
||||
padding: 16px 20px;
|
||||
border-radius: var(--radius-lg);
|
||||
margin: 20px 0;
|
||||
color: var(--clr-muted-light);
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.note strong {
|
||||
color: #2dd47f;
|
||||
}
|
||||
|
||||
.tag {
|
||||
display: inline-block;
|
||||
background: var(--clr-primary);
|
||||
color: #fff;
|
||||
padding: 2px 12px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
margin-left: 8px;
|
||||
font-family: var(--ff-heading);
|
||||
letter-spacing: 0.5px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
ul {
|
||||
padding-left: 24px;
|
||||
color: var(--clr-muted-light);
|
||||
}
|
||||
li {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #2dd47f;
|
||||
text-decoration: none;
|
||||
}
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.divider-primary {
|
||||
width: 60px;
|
||||
height: 3px;
|
||||
background: linear-gradient(90deg, #1f9b5e, #e0b143);
|
||||
margin: 16px 0 24px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
body { flex-direction: column; }
|
||||
.sidebar {
|
||||
width: 100%; height: auto; position: relative;
|
||||
padding: 20px; border-right: none;
|
||||
border-bottom: 1px solid rgba(31,155,94,0.2);
|
||||
}
|
||||
.content { padding: 24px 20px; }
|
||||
}
|
||||
|
||||
::-webkit-scrollbar { width: 6px; }
|
||||
::-webkit-scrollbar-track { background: #0f1729; }
|
||||
::-webkit-scrollbar-thumb { background: #1f9b5e; border-radius: 3px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- Sidebar -->
|
||||
<aside class="sidebar">
|
||||
<h2>🧹 <span>CLEANHAUL</span> DOCS</h2>
|
||||
<a href="#intro">Introduction</a>
|
||||
<a href="#installation">Installation</a>
|
||||
<a href="#structure">Folder Structure</a>
|
||||
<a href="#tech">Tech Stack</a>
|
||||
<a href="#pages">Pages & Templates</a>
|
||||
<a href="#features">Key Features</a>
|
||||
<a href="#customize">Customization</a>
|
||||
<a href="#images">Images & Assets</a>
|
||||
<a href="#forms">Forms & Inquiries</a>
|
||||
<a href="#faq">FAQ & Legal</a>
|
||||
<a href="#credits">Credits</a>
|
||||
</aside>
|
||||
|
||||
<!-- Main Content -->
|
||||
<main class="content">
|
||||
|
||||
<!-- Introduction -->
|
||||
<section id="intro" class="section">
|
||||
<h1>CleanHaul<br /><span style="color:#2dd47f;">Junk Removal & Hauling Service Template</span></h1>
|
||||
|
||||
<p style="color:#94a3b8; font-size:18px; margin-top:16px;">
|
||||
Welcome to <strong>CleanHaul</strong> – 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.
|
||||
</p>
|
||||
|
||||
<p style="color:#94a3b8;">
|
||||
The template includes <strong>10 professionally designed pages</strong> 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.
|
||||
</p>
|
||||
|
||||
<div class="divider-primary"></div>
|
||||
|
||||
<p><strong style="color:#fff;">Version:</strong> 1.0 | <strong style="color:#fff;">Last Updated:</strong> June 2026</p>
|
||||
</section>
|
||||
|
||||
<!-- Installation -->
|
||||
<section id="installation" class="section">
|
||||
<h2>🚀 Installation</h2>
|
||||
<p style="color:#94a3b8;">
|
||||
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.
|
||||
</p>
|
||||
|
||||
<div class="code">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.</div>
|
||||
|
||||
<div class="note">
|
||||
<strong>Quick Start:</strong> Open <code>index.html</code> 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 <code><style></code> tags – no extra CSS files to manage.
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Folder Structure -->
|
||||
<section id="structure" class="section">
|
||||
<h2>📁 Folder Structure</h2>
|
||||
|
||||
<pre class="code">/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</pre>
|
||||
|
||||
<div class="note">
|
||||
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.
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Tech Stack -->
|
||||
<section id="tech" class="section">
|
||||
<h2>⚙️ Tech Stack</h2>
|
||||
|
||||
<ul style="color:#94a3b8;">
|
||||
<li><strong style="color:#fff;">HTML5</strong> – semantic, accessible markup</li>
|
||||
<li><strong style="color:#fff;">Tailwind CSS (via CDN)</strong> – utility‑first responsive framework with custom configuration</li>
|
||||
<li><strong style="color:#fff;">AOS (Animate on Scroll)</strong> – smooth scroll‑triggered animations</li>
|
||||
<li><strong style="color:#fff;">Lucide Icons</strong> – lightweight, customizable SVG icon library</li>
|
||||
<li><strong style="color:#fff;">Google Fonts</strong> – Poppins (headings) + Inter (body)</li>
|
||||
<li><strong style="color:#fff;">Vanilla JavaScript</strong> – preloader, mobile menu, sticky navbar, testimonial slider, booking form simulation, accordion FAQ, scroll‑to‑top, and more</li>
|
||||
</ul>
|
||||
|
||||
<div class="code"><!-- 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" /></div>
|
||||
|
||||
<div class="note">
|
||||
All custom styles are embedded inside each HTML file within a <code><style></code> tag. This makes the template self‑contained and easy to edit. You can extract these styles into a separate <code>style.css</code> if preferred.
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Pages & Templates -->
|
||||
<section id="pages" class="section">
|
||||
<h2>📄 Pages & Templates</h2>
|
||||
|
||||
<h3>Home Page <span class="tag">index.html</span></h3>
|
||||
<ul>
|
||||
<li>Preloader with truck animation and loading bar</li>
|
||||
<li>Sticky navbar (transparent → white on scroll) with mobile hamburger menu</li>
|
||||
<li>Hero section with background image, gradient overlay, badge pills (Same‑Day Service, Eco‑Friendly, Licensed & Insured)</li>
|
||||
<li>Services grid with icon cards (Household, Office, Construction, Yard Waste)</li>
|
||||
<li>How It Works – 4‑step process with numbered circles</li>
|
||||
<li>Why Choose Us – 4 feature cards (Same‑Day, Affordable, Eco, Professional)</li>
|
||||
<li>Before & After photo gallery (3 images)</li>
|
||||
<li>Testimonials slider (prev/next, auto‑rotate)</li>
|
||||
<li>CTA banner</li>
|
||||
<li>Free quote form (name, phone, email, service, address, message)</li>
|
||||
<li>Comprehensive footer with services, quick links, contact info, social icons, newsletter, payment methods, legal links</li>
|
||||
<li>Scroll‑to‑top button, mobile call button</li>
|
||||
</ul>
|
||||
|
||||
<h3>About Us <span class="tag">about.html</span></h3>
|
||||
<ul>
|
||||
<li>Hero section with gradient background</li>
|
||||
<li>Our Story – two‑column with image and text</li>
|
||||
<li>Our Values – 4 cards (Licensed, 5‑Star, Eco, Expert Team)</li>
|
||||
<li>Meet the Team – 4 profile cards with photos</li>
|
||||
<li>Company Milestones – vertical timeline (2015‑2025)</li>
|
||||
<li>Impact Statistics – counter cards (Jobs Completed, Tons Diverted, Satisfaction Rate, Fleet Size)</li>
|
||||
<li>Certifications & Partners row</li>
|
||||
<li>CTA banner</li>
|
||||
</ul>
|
||||
|
||||
<h3>Services <span class="tag">services.html</span></h3>
|
||||
<ul>
|
||||
<li>Hero section</li>
|
||||
<li>6 service cards in a responsive grid: Household Junk, Office Cleanouts, Construction Debris, Yard Waste, Appliance Removal, Furniture Removal – each with icon, description, bullet points, "Get Quote" button</li>
|
||||
<li>"We Make Junk Removal Easy" – 4 benefit cards</li>
|
||||
<li>"From Booking to Cleanup" – 4‑step process visualization</li>
|
||||
<li>CTA banner</li>
|
||||
</ul>
|
||||
|
||||
<h3>Pricing <span class="tag">pricing.html</span></h3>
|
||||
<ul>
|
||||
<li>Hero section</li>
|
||||
<li>3 pricing cards: Small Load ($149), Medium Load ($299 – highlighted as Most Popular), Full Truck ($499). Each with feature list and Book Now button</li>
|
||||
<li>"Always Included" – 4 guarantee cards (Free Estimate, Labor, Eco Disposal, Satisfaction)</li>
|
||||
<li>Specialty Removal Pricing table (appliances, mattresses, electronics, yard waste)</li>
|
||||
<li>Price Match Guarantee banner</li>
|
||||
<li>Free quote form</li>
|
||||
</ul>
|
||||
|
||||
<h3>Contact Us <span class="tag">contact.html</span></h3>
|
||||
<ul>
|
||||
<li>Hero section</li>
|
||||
<li>Two‑column layout: contact information cards (Phone, Email, Service Area, Business Hours) with social icons, and a booking form</li>
|
||||
<li>Service Area Map placeholder with location grid</li>
|
||||
<li>FAQ quick links (6 common questions)</li>
|
||||
<li>CTA banner with phone call focus</li>
|
||||
</ul>
|
||||
|
||||
<h3>Blog Listing <span class="tag">blog.html</span></h3>
|
||||
<ul>
|
||||
<li>Hero section</li>
|
||||
<li>Grid of 6 blog post cards with images, category badges, dates, titles, excerpts, "Read More" links</li>
|
||||
<li>Pagination component</li>
|
||||
<li>CTA banner</li>
|
||||
</ul>
|
||||
|
||||
<h3>Blog Detail <span class="tag">blog-detail.html</span></h3>
|
||||
<ul>
|
||||
<li>Article header with category, date, author avatar & name</li>
|
||||
<li>Featured image</li>
|
||||
<li>Rich article content with headings, paragraphs, blockquote, bullet list, embedded CTA banner</li>
|
||||
<li>Related articles grid (3 cards)</li>
|
||||
<li>CTA banner</li>
|
||||
</ul>
|
||||
|
||||
<h3>FAQ <span class="tag">faq.html</span></h3>
|
||||
<ul>
|
||||
<li>Hero section</li>
|
||||
<li>Accordion categorized into: General Questions, Our Services, Pricing & Payment, Booking & Cancellation</li>
|
||||
<li>Plus/minus icon toggle, smooth expand/collapse (only one open at a time)</li>
|
||||
<li>Still have questions? CTA card</li>
|
||||
<li>CTA banner</li>
|
||||
</ul>
|
||||
|
||||
<h3>Terms & Conditions <span class="tag">terms.html</span></h3>
|
||||
<ul>
|
||||
<li>Last updated date</li>
|
||||
<li>Sections: Services Provided, Pricing & Payment, Customer Responsibilities, Cancellation, Liability, Disposal Policy, Privacy, Intellectual Property, Changes to Terms, Contact Info</li>
|
||||
</ul>
|
||||
|
||||
<h3>Privacy Policy <span class="tag">privacy.html</span></h3>
|
||||
<ul>
|
||||
<li>Last updated date</li>
|
||||
<li>Sections: Information We Collect, How We Use Your Info, Security, Cookies, Third‑Party Services, Data Retention, Your Rights, Children's Privacy, Changes, Contact Info</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<!-- Key Features -->
|
||||
<section id="features" class="section">
|
||||
<h2>✨ Key Features</h2>
|
||||
|
||||
<h3>Clean, Professional Design</h3>
|
||||
<p style="color:#94a3b8;">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.</p>
|
||||
|
||||
<h3>Fully Responsive</h3>
|
||||
<p style="color:#94a3b8;">Every page looks great on mobile, tablet, and desktop. The navigation collapses into a hamburger menu, cards stack vertically, and forms are touch‑friendly.</p>
|
||||
|
||||
<h3>Interactive Components</h3>
|
||||
<ul>
|
||||
<li>Preloader with truck animation</li>
|
||||
<li>Sticky glassmorphism‑style navbar (transparent → white on scroll)</li>
|
||||
<li>Testimonial slider with manual controls</li>
|
||||
<li>FAQ accordion with smooth open/close</li>
|
||||
<li>Scroll‑triggered AOS animations (fade, zoom, slide)</li>
|
||||
<li>Before & After image gallery with hover zoom</li>
|
||||
<li>Quote forms with success message</li>
|
||||
<li>Scroll‑to‑top button</li>
|
||||
<li>Mobile floating call button</li>
|
||||
</ul>
|
||||
|
||||
<h3>Conversion‑Optimized</h3>
|
||||
<p style="color:#94a3b8;">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.</p>
|
||||
|
||||
<h3>Easy to Customize</h3>
|
||||
<p style="color:#94a3b8;">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.</p>
|
||||
|
||||
<h3>SEO‑Ready</h3>
|
||||
<p style="color:#94a3b8;">Semantic HTML5, descriptive meta tags, Open Graph tags, and fast CDN‑loaded resources help your site rank better.</p>
|
||||
</section>
|
||||
|
||||
<!-- Customization -->
|
||||
<section id="customize" class="section">
|
||||
<h2>🎨 Customization</h2>
|
||||
|
||||
<h3>Change the Color Scheme</h3>
|
||||
<p style="color:#94a3b8;">
|
||||
The brand colors are defined in the <code>tailwind.config</code> JavaScript block inside each page. Modify these values to instantly rebrand the entire template.
|
||||
</p>
|
||||
<pre class="code">// Inside the <script> tailwind.config
|
||||
colors: {
|
||||
brand: {
|
||||
DEFAULT: '#1f9b5e', // primary green
|
||||
foreground: '#ffffff',
|
||||
secondary: '#e0b143', // accent gold
|
||||
accent: '#dff0e3',
|
||||
dark: '#0f1729',
|
||||
light: '#f7f8fa',
|
||||
},
|
||||
}</pre>
|
||||
|
||||
<h3>Typography</h3>
|
||||
<p style="color:#94a3b8;">
|
||||
The template uses Google Fonts: <strong>Poppins</strong> (headings) and <strong>Inter</strong> (body). To change them, update the Google Fonts link in the <code><head></code> and modify the <code>fontFamily</code> entries in the Tailwind config.
|
||||
</p>
|
||||
|
||||
<h3>Editing Content</h3>
|
||||
<p style="color:#94a3b8;">
|
||||
All text, pricing, services, and testimonials are inside the HTML files. For the blog, the article data is stored in JavaScript arrays (<code>window.__testimonials</code> for testimonials, blog posts are hardcoded). To add or modify blog articles, duplicate the article card structure.
|
||||
</p>
|
||||
|
||||
<div class="note">
|
||||
<strong>Tailwind Classes:</strong> 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.
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Images & Assets -->
|
||||
<section id="images" class="section">
|
||||
<h2>🖼️ Images & Assets</h2>
|
||||
<p style="color:#94a3b8;">
|
||||
The template uses placeholder images (e.g., <code>assets/hero-truck.jpg</code>, <code>assets/team.jpg</code>, <code>assets/before-after-*.jpg</code>). Replace them with your own photography:
|
||||
</p>
|
||||
<ul>
|
||||
<li>Add your images to the <code>assets/images/</code> folder.</li>
|
||||
<li>Update the <code>src</code> attributes in the <code><img></code> tags.</li>
|
||||
<li>For blog posts, update the image paths in the respective HTML files.</li>
|
||||
<li>Replace team member photos, before/after shots, and the hero truck image with your own.</li>
|
||||
</ul>
|
||||
<div class="note">
|
||||
<strong>Image License:</strong> 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.
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Forms -->
|
||||
<section id="forms" class="section">
|
||||
<h2>📋 Forms & Inquiries</h2>
|
||||
<p style="color:#94a3b8;">The template includes several demo forms:</p>
|
||||
<ul>
|
||||
<li><strong style="color:#fff;">Free Quote Form</strong> – on Home, Pricing, and Contact pages</li>
|
||||
<li><strong style="color:#fff;">Contact Form</strong> – on Contact page</li>
|
||||
<li><strong style="color:#fff;">Newsletter Subscription</strong> – in the footer</li>
|
||||
</ul>
|
||||
<p style="color:#94a3b8;">Currently, forms show a demo success message. To connect them to a real service, modify the <code>addEventListener('submit', ...)</code> handler to send data to:</p>
|
||||
<ul>
|
||||
<li>PHP Mail</li>
|
||||
<li>Formspree</li>
|
||||
<li>Netlify Forms</li>
|
||||
<li>Zapier / Make webhooks</li>
|
||||
<li>Your own API endpoint</li>
|
||||
</ul>
|
||||
<div class="code">// 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';
|
||||
});</div>
|
||||
</section>
|
||||
|
||||
<!-- FAQ & Legal -->
|
||||
<section id="faq" class="section">
|
||||
<h2>❓ FAQ & Legal Pages</h2>
|
||||
<p style="color:#94a3b8;">
|
||||
The <strong>FAQ page</strong> (<code>faq.html</code>) 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.
|
||||
</p>
|
||||
<p style="color:#94a3b8;">
|
||||
The <strong>Terms & Conditions</strong> and <strong>Privacy Policy</strong> 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.
|
||||
</p>
|
||||
<div class="note">
|
||||
<strong>Important:</strong> 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.
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Credits -->
|
||||
<section id="credits" class="section">
|
||||
<h2>🙏 Credits</h2>
|
||||
<ul>
|
||||
<li><strong style="color:#fff;">Tailwind CSS</strong> – utility‑first CSS framework</li>
|
||||
<li><strong style="color:#fff;">Lucide Icons</strong> – open‑source SVG icons</li>
|
||||
<li><strong style="color:#fff;">Google Fonts</strong> – Poppins, Inter</li>
|
||||
<li><strong style="color:#fff;">Unsplash</strong> – demo placeholder images (replace with your own licensed photography)</li>
|
||||
<li><strong style="color:#fff;">AOS</strong> – Animate On Scroll (included via CDN)</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<p style="margin-top:60px; color:#64748b; font-size:14px;">
|
||||
CleanHaul – Junk Removal & Hauling Service HTML Template. Built for speed, designed for trust.
|
||||
</p>
|
||||
|
||||
</main>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user