Pro-Cleankers is a professionally designed HTML5 template built exclusively for cleaning service businesses—including residential cleaning, commercial janitorial, housekeeping, maid service, and facilities management companies. With 46 pages, 4 unique home layouts, and a foundation of Bootstrap 5.3.8, Pro-Cleankers delivers the most feature-rich and technically complete cleaning service template available on ThemeForest today.
Pro-Cleankers stands entirely alone in the cleaning niche when it comes to accessibility and inclusivity. It ships with a bundled 30-feature accessibility widget (zero competitors offer anything like it), a full ARIA 1.2 compliance pass across all 46 pages, complete keyboard navigation support, and a 6-colour theme switcher with localStorage persistence. No other cleaning service HTML template on ThemeForest mentions WCAG, ARIA, or keyboard navigation—Pro-Cleankers is the only one that delivers them out of the box.
Key Features
- 46 pages total across all sections—homes, services, blog, shop, portfolio, gallery, team, pricing, and utilities
- 4 home page layouts—each with a distinct hero style and section arrangement
- Bootstrap 5.3.8—latest stable release, fully upgraded from Bootstrap 4
- 30-feature accessibility widget bundled—unique in the cleaning template niche
- Full ARIA 1.2 compliance across all 46 pages
- 6 colour theme system with live switcher and localStorage persistence
- Before/After image comparison sliders—single column and two-column layouts
- Interactive cost calculator page
- Full e-commerce shop—grid, 4-col grid, product detail, cart, and checkout
- 10 blog layouts (6 list variations + 4 detail variations)
- 4 portfolio layouts—3-col grid, 4-col grid, masonry, and portfolio details
- 4 gallery formats—3 standard gallery views plus 2 before/after comparison views
- 2 pricing table layouts
- 2 team grid layouts + team member detail page
- Primary colours: Blue #0C2278 + Orange #f15933
- Google Fonts: Roboto + Roboto Slab
- jQuery compatible, all plugins included
- Clean, well-commented HTML, CSS, and JavaScript
- Retina-ready and fully responsive on all screen sizes
- W3C valid HTML markup
30-Feature Accessibility Widget (Unique in Cleaning Niche)
- Zero competitors in the cleaning service template category offer an accessibility widget of any kind—Pro-Cleankers is the only one
- Self-bootstrapping: the widget auto-injects its own CSS via a single script tag—no extra link tags required on any page
- Settings persist across page reloads and sessions via localStorage
- Fixed position, bottom-left of screen, tab-style trigger button—non-intrusive and always reachable
- Panel slides from the left at z-index 99999—sits above all page content without obscuring it
- Profiles: Seizure Safe Profile, Vision Impaired Profile, Motor Impaired Profile, Cognitive / ADHD Profile, Dyslexia-Friendly Profile
- Content adjustments: readable font toggle, highlight links, highlight headings, zoom text, dyslexia font
- Display adjustments: font size control (increase / decrease), line height control, letter spacing control
- Colour filters: high contrast, invert colours, greyscale, low saturation, sepia tone
- UX tools: focus highlight, reading mask, reading guide line, big cursor, stop animations
- Skip-to-content shortcut integrated into the widget panel
- Fully keyboard-operable—every widget control is reachable and activatable by keyboard alone
- Drop-in integration: one script tag before closing body tag activates the entire system on any page
ARIA and Keyboard Compliance (Competitor Differentiator)
- No other cleaning service HTML template on ThemeForest implements ARIA attributes or documents keyboard accessibility
- Full ARIA 1.2 pass applied across all 46 pages in v1.2
- Skip link on every page—visually hidden by default, visible on keyboard focus, fully WCAG compliant
<main>landmark element present on every page for screen reader navigation- Focus-visible 3px outline applied via CSS—active for keyboard users, invisible for mouse users (no UX disruption)
- Social icon aria-labels auto-injected by JavaScript—no manual HTML edits required per page
- Sliders and carousels:
role="button",aria-label, and full Enter/Space keyboard activation - Mobile navigation toggle:
aria-expandedstate updated on open/close - Back-to-top button: proper
aria-label="Back to top"for screen reader users - 67+
aria-*attribute instances across the v1.1 and v1.2 release - All form inputs labelled correctly with associated
<label>elements - Image alt text applied throughout all demo content
4 Unique Home Layouts
- Home 1—classic hero with full-width banner, service highlights, and featured call-to-action
- Home 2—alternate hero treatment with a distinct section order and layout variation
- Home 3—third layout variation with different hero and content arrangement
- Home 4—fourth layout with its own visual style and section selection
- All four homes share the same navigation, footer, and colour switcher system
- Each home layout uses the same Bootstrap 5.3.8 grid and responds identically on mobile and tablet
- Switching between home styles requires only swapping the HTML file—no CSS or JS changes needed
6 Colour Theme System (Competitor Differentiator)
- Klano is the only cleaning template competitor with any colour customisation—and it offers only a basic single primary-colour picker with no persistence and no pre-built themes
- Pro-Cleankers ships 6 fully pre-built colour themes: color.css, color2.css, color3.css, color4.css, color5.css, color6.css
- Live colour switcher panel built into the template—visitors or developers can switch themes with one click
- Selected colour theme persists across page loads via jquery.cookie.js and localStorage
- Colour themes swap dynamically via data-color attributes—no page reload required
- All 6 colour files are fully commented and easy to customise for client branding
- Default colour scheme: Blue #0C2278 (primary) + Orange #f15933 (accent)
- Colour switcher activates consistently across all 46 pages without extra configuration
Before/After Gallery Comparison System
- Interactive before/after image comparison sliders—a natural fit for cleaning service marketing
- Before/After Gallery (Single Column)—full-width comparison sliders stacked vertically
- Before/After Gallery (2-Column)—two-up side-by-side comparison sliders
- Drag the divider handle to reveal the before or after state of any image
- Touch-enabled for mobile users—swipe to compare on phones and tablets
- Ideal for showcasing cleaning transformations: carpets, kitchens, office spaces, upholstery, windows
- No other cleaning service HTML template on ThemeForest highlights before/after comparison as a dedicated feature
Interactive Cost Calculator
- Cost Calculator—a dedicated interactive pricing calculator page
- Allows prospective clients to estimate their cleaning service cost before contacting the business
- Input fields for room count, service type, frequency, and add-on services
- Instant real-time price calculation—no page refresh required
- Reduces pre-sales friction and increases conversion rates for cleaning businesses
- Fully styled to match the Pro-Cleankers design system and active colour theme
- Mobile-responsive layout—works on phones, tablets, and desktops
Portfolio and Gallery System (4 Layouts)
- Portfolio 3-Column Grid—clean three-column project showcase
- Portfolio 4-Column Grid—compact four-column layout for larger libraries
- Portfolio Masonry—variable-height masonry grid for mixed portrait/landscape images
- Portfolio Detail—single project detail page with full description and image gallery
- Gallery Style 2—standard image gallery layout variation
- Gallery Style 3—alternative gallery grid layout
- Gallery Style 4—fourth gallery grid variation
- All portfolio and gallery pages are filterable and lightbox-enabled
- Lightbox supports keyboard navigation (Esc to close, arrow keys to browse)
Services System
- Services Layout 1—grid-based services listing with icons and descriptions
- Services Layout 2—alternate services grid with a different card style
- Service Detail Page—individual service page with full content area, sidebar, and related services
- Covers all cleaning service verticals: residential, commercial, deep clean, carpet, window, office, industrial
- Service cards include icon, title, short description, and call-to-action link
- Detail page includes image, extended description, feature list, and sidebar widgets
- All service pages are cross-linked to the cost calculator and contact page
E-Commerce Shop
- Shop Grid—standard product grid for cleaning products, supplies, or service packages
- Shop 4-Column Grid—compact four-column product listing for larger catalogues
- Product Detail—full product page with images, description, pricing, and add-to-cart
- Shopping Cart—cart summary with quantity controls and order total
- Checkout—full checkout form with billing, delivery, and order summary
- Suitable for selling cleaning products, starter kits, gift vouchers, or prepaid service packages
- All shop pages are fully responsive and styled to the Pro-Cleankers design system
Team Pages System (2 Grids + Detail)
- Team Grid Layout 1—clean card-based staff grid with photo, name, role, and social links
- Team Grid Layout 2—alternate team grid style with a different card treatment
- Team Member Detail—individual staff profile page with full bio, skills, and contact information
- Social media links on team cards include auto-injected aria-labels for screen reader users
- Team photos are displayed in consistent aspect ratios across both grid layouts
- Both grids are responsive and collapse to single-column on mobile
Pricing Pages (2 Layouts)
- Pricing Layout 1—standard three-column pricing table with featured plan highlight
- Pricing Layout 2—alternate pricing table style with a different column arrangement
- Each plan includes feature list, price, billing period, and call-to-action button
- Featured plan is visually highlighted with the active colour theme accent colour
- Both pricing layouts link naturally to the cost calculator and contact pages
- Fully responsive—stacks to single column on mobile without losing readability
Blog System (10 Layouts)
- Blog Grid 1—two or three column card-based blog listing
- Blog Grid 2—alternate blog grid layout variation
- Blog Grid with Sidebar—blog grid with right-hand sidebar widgets
- Blog Standard—classic full-width post excerpts with right sidebar
- Blog Standard Left Sidebar—standard post list with left-hand sidebar
- Blog Standard No Sidebar—full-width standard post list with no sidebar
- Blog Detail—standard single post page with sidebar
- Blog Detail No Sidebar—full-width single post with no sidebar
- Blog Detail with Slider—single post with a featured image slider in the hero area
- Blog Detail with Video—single post with an embedded video hero
- All blog layouts include category tags, author info, date, read time, and comment count
- Blog sidebar includes search, recent posts, categories, and tag cloud widgets
Client and Testimonials
- Clients Page—logo showcase grid for displaying partner and client brand logos
- Testimonials Page—dedicated page of customer reviews with photo, name, company, and star rating
- Testimonial cards are responsive and stack cleanly on mobile
- Client logo grid supports both coloured and greyscale logo treatments
- Testimonials carousel is keyboard-navigable with ARIA roles and labels applied
- Both pages cross-link to services and contact for a natural conversion flow
Authentication Pages (Login + Signup)
- Login Page—clean centred login form with email, password, remember me, and forgot password link
- Signup Page—registration form with name, email, password, confirm password, and terms acceptance
- All form inputs are fully labelled with associated label elements for screen reader accessibility
- Forms include visible focus outlines for keyboard users
- Both pages share the same header and footer as the rest of the template for visual consistency
- Forms are HTML5 only—no server-side code required; integrate with any backend or form handler
Utility Pages (FAQ, Coming Soon, 404)
- FAQ Page—accordion-based frequently asked questions with smooth open/close animation
- Coming Soon Page—countdown timer page for pre-launch or maintenance mode
- 404 Error Page—branded not-found page with navigation back to the home page
- FAQ accordion is keyboard-accessible: Tab to each item, Enter or Space to expand
- Coming Soon countdown timer is JavaScript-driven with a configurable target date
- 404 page includes a search field and popular links to reduce bounce rate
Navigation and UX
- Sticky header navigation—remains visible as users scroll down the page
- Mobile hamburger menu with smooth slide animation and aria-expanded state management
- Dropdown mega menu support for organising large site structures
- Back-to-top button with smooth scroll and aria-label=”Back to top”
- Skip link on every page: visually hidden by default, visible on keyboard focus—fully WCAG compliant
- Smooth scroll anchor links throughout all pages
- Breadcrumb navigation on inner pages for clear wayfinding
- All interactive elements (buttons, links, form controls) have visible focus states
- Colour switcher panel integrated into the header for instant live theme preview
Typography and Design
- Google Fonts: Roboto (body and UI text) + Roboto Slab (headings)—both loaded from Google Fonts CDN
- Primary colour palette: Blue #0C2278 (trust, professionalism) + Orange #f15933 (energy, action)
- 6 additional colour themes available via the built-in colour switcher
- Consistent vertical rhythm and spacing scale throughout all 46 pages
- Icon library: Font Awesome 6—used for service icons, social icons, UI indicators, and feature bullets
- Retina-ready graphics—all icons are vector-based, all images are sized for high-DPI displays
- Section backgrounds alternate between white, light grey, and primary colour to create natural visual flow
- Card components use subtle box shadows and border-radius for a modern, clean aesthetic
- Hover states and micro-interactions applied to all interactive elements
Performance and Code Quality
- Bootstrap 5.3.8—latest stable release, upgraded from Bootstrap 4.0.0 in v1.1
- Popper.js upgraded to @popperjs/core 2.11.8 alongside the Bootstrap 5 migration
- All Bootstrap 4 data-toggle attributes migrated to Bootstrap 5 data-bs-toggle across all HTML files
- Spacing utility classes migrated from Bootstrap 4 (ml-, mr-) to Bootstrap 5 (ms-, me-)
- Form classes updated to Bootstrap 5 standards throughout all pages
- bootstrap-compat.css shim included for any legacy third-party components
- CSS is modular: base styles, colour themes, and accessibility widget are in separate files for easy maintenance
- JavaScript follows an IIFE pattern with strict mode for safe, conflict-free plugin integration
- All assets (CSS, JS, images, fonts) are organised into a logical folder structure
- HTML is W3C valid and passes the Nu HTML Checker without errors
- No inline styles—all visual styling lives in external CSS files
- Minimal render-blocking resources—CSS in head, all JavaScript before closing body tag
Pages Included
- Home 1
- Home 2
- Home 3
- Home 4
- About Us
- Clients
- Services Layout 1
- Services Layout 2
- Service Details
- Gallery Style 2
- Gallery Style 3
- Gallery Style 4
- Gallery Before/After (Single Column)
- Gallery Before/After (2-Column)
- Portfolio 3-Column
- Portfolio 4-Column
- Portfolio Masonry
- Portfolio Details
- Team Grid 1
- Team Grid 2
- Team Member Details
- Testimonials
- Pricing Layout 1
- Pricing Layout 2
- Cost Calculator
- Shop Grid
- Shop 4-Column Grid
- Product Details
- Shopping Cart
- Checkout
- Blog Grid 1
- Blog Grid 2
- Blog Grid with Sidebar
- Blog Standard
- Blog Standard Left Sidebar
- Blog Standard No Sidebar
- Blog Details
- Blog Details No Sidebar
- Blog Details with Slider
- Blog Details with Video
- FAQ
- Contact Us
- Coming Soon
- 404 Error
- Login
- Signup
Credits and Sources
- Bootstrap 5.3.8
- https://getbootstrap.com -MIT License - jQuery
- https://jquery.com -MIT License - Popper.js (@popperjs/core 2.11.8)
- https://popper.js.org -MIT License - Font Awesome 6
- https://fontawesome.com -Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License - Google Fonts: Roboto + Roboto Slab
- https://fonts.google.com -SIL Open Font License - jquery.cookie.js
- https://github.com/carhartl/jquery-cookie -MIT License - Owl Carousel 2
- https://owlcarousel2.github.io/OwlCarousel2/ -MIT License - Magnific Popup
- https://dimsemenov.com/plugins/magnific-popup/ -MIT License - Masonry
- https://masonry.desandro.com/ -MIT License - ion.rangeSlider
- http://ionden.com/a/plugins/ion.rangeSlider/ -MIT License - Demo images
- https://unsplash.com -Unsplash License (free for commercial use) - Demo images
- https://pexels.com -Pexels License (free for commercial use)
v1.2 10/03/2026 - Full ARIA 1.2 accessibility pass across all 46 pages - Skip link added to every page - main landmark added to every page - Focus-visible 3px keyboard outline added via CSS (mouse unaffected) - Social icon aria-labels auto-injected by JavaScript - Slider role=button + aria-label + Enter/Space keyboard activation - Mobile nav aria-expanded toggle state management - Back-to-top aria-label added - 30-feature accessibility widget bundled (assets/accessibility/) v1.1 27/02/2026 - Bootstrap upgraded from 4.0.0 to 5.3.8 - Popper upgraded to @popperjs/core 2.11.8 - data-toggle migrated to data-bs-toggle across all HTML files - Spacing utilities migrated: ml/mr to ms/me - Form classes updated to Bootstrap 5 standards - bootstrap-compat.css shim added for legacy component support