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-expanded state 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