CleanMate - Cleaning Company Maid Gardening Template

CleanMate is a responsive and retina ready HTML Template best suitable for cleaning companies, maid services, loundries, car cleaning services, maintenance service companies, window cleaning businesses, post renovation services and move in out services. The Template comes with Online Calculator Form, Slider Revolution jQuery plugin, 94 premium cleaning services related font based icons, 24 page templates, sticky menu, 2 header types, touch friendly slider and carousels, ajax contact form and more.

PSD source files are available to all of our buyers. Please contact us to get the files. You will receive perfectly organized and layered Template plus all of the icons used within a project in full PSD vector.

Template Features

  • Responsive Layout
  • Retina Ready
  • jQuery Powered
  • Online Calculator Form
  • Slider Revolution Responsive jQuery Plugin (Value of $16) Included
  • Streamline Premium Icon Font with 94 Icons (Value of $69) Included
  • Full Width and Boxed Layout
  • Smart Sticky Columns
  • Sticky Menu
  • 2 Header Types
  • Mobile Touch Friendly Sliders and Carousels
  • Ajax Contact Form
  • Isotope Gallery
  • Parallax Backgrounds
  • Google Location Map
  • Page Templates
    • Home Style 1
    • Home Style 2
    • About Us Style 1
    • About Us Style 2
    • Services Style 1
    • Services Style 2
    • Single Service Page
    • Projects
    • Single Project Page
    • Our Team
    • Single Team Member
    • Testimonials
    • Cleaning Checklist
    • Calculator
    • Blog With Right Sidebar
    • Blog With Left Sidebar
    • Blog Small Image
    • Blog 2 Columns
    • Single Post
    • Search Template
    • Contact Style 1
    • Contact Style 2
    • Contact Style 3
    • 404 Not Found
  • Social Icons Font with 33 Icons to Choose From
  • PSD Files Included (Please Contact Us to Receive Perfectly Organized PSD Files)
  • Documentation Included
  • Valid HTML5 Code
  • Crossbrowser Compatible
  • Clean Design

CSS Styles

The project uses the following cascade of template styles (in order):

  • animations.css - styles for animated elements,
  • jquery.qtip.css - default styles for tooltips (overwritten in style.css),
  • superfish.css - default styles for superfish menu,
  • odometer-theme-default.css - styles for Odometer smoothly transitioning numbers plugin,
  • prettyPhoto.css - default styles for prettyPhoto lightbox,
  • style.css - base styles for the entire project,
  • responsive.css - styles for responsive design (remove it from header to disable responsive),
  • reset.css - styles which resets default browsers styles.

All CSS files are located in /style directory.

Javascript Files

Plugins and library:


Other files:

  • jquery.costCalculator.js - script which supports online calculator form,
  • jquery.parallax.js - script which supports parallax animations,
  • jquery.hint.js - script which supports hints/placeholders for form fields,
  • main.js - script contains all executable instructions of jquery plugins, events handlers etc.

All JS files are located in /js directory.

Plugins

Contact form

This project includes a contact form ready for use.
All you need is to configure some constants located in file contact_form/config.php:

  • _to_name - name of recipient eg. "My Company",
  • _to_email - e-mail of recipent eg. "mycompany@gmail.com",
  • _smtp_host - your SMTP host eg. "gmail.com",
  • _smtp_username - login to your e-mail account eg. "mycompany",
  • _smtp_password - password to your e-mail account,
  • _smtp_port - port number for SMTP connection (optional),
  • _smtp_secure - authorization method (optional) - ssl or tls.

PSD Files

PSD source files are available to all of our buyers. Please contact us to get the files. You will receive perfectly organized and layered Template plus all of the icons used within a project in full PSD vector.

Fonts used

Credits

Images

Premium images used for live preview purpose (not included in downloadable package):

Changelog

07 December 2017, ver. 1.4

  • Minor code fixes.
--- html version ---
all html files
fonts/features/style.css
fonts/social/style.css
fonts/template/style.css
js/main.js
style/responsive.css
--- php version ---
contact.php
contact_2.php
contact_3.php
header.php
home.php
home_2.php
post.php
service_calculator.php
service_commercial_cleaning.php
service_green_spaces_maintenance.php
service_house_cleaning.php
service_move_in_out.php
service_post_renovation.php
service_window_cleaning.php
team.php
team_celevic_parkhill.php
team_paige_morgan.php
fonts/features/style.css
fonts/social/style.css
fonts/template/style.css
js/main.js
style/responsive.css

06 September 2017, ver. 1.3

  • Fix for z-index issue with mobile menu.
  • Minor code fixes.
--- html version ---
home.html
home_2.html
index.html
js/main.js
style/responsive.css
style/style.css
--- php version ---
home.php
home_2.php
js/main.js
style/responsive.css

05 September 2017, ver. 1.2

  • Minor code fixes.
--- html version ---
style/responsive.css
style/superfish.css
--- php version ---
style/responsive.css
style/superfish.css

18 August 2017, ver. 1.1

  • Update for the documentation FAQ section.
  • Fix for Revolution Slider js code in strict mode.
documentation/index.html
--- html version ---
js/main.js
--- php version ---
js/main.js

17 August 2017, ver. 1.0

  • First release

Support

Support for all our items is conducted through our Support Forum.
Please register an account and search the forum or create a new topic, we'll answer as soon as possible.

We're in GMT +1 and we aim to answer all questions within 24 hours (Monday – Friday). In some cases the waiting time can be extended to 48 hours.
Support requests sent during weekends or public holidays will be processed on next Monday or the next business day.


Need pure HTML files or PHP version?

Theme could work without PHP. Pure html files are located in /www/html directory.
If you would like to use PHP version just use files located under /www/php directory.

FAQ - Frequently Asked Questions


1. How to choose between HTML or PHP version?

Template contains two versions PHP and HTML. If your server supports PHP please choose PHP version as it's more flexible. For example if you'll make change in header you won't need to duplicate it for each page.
If you would like to use PHP version use files located under /www/php directory.
If you would like to use HTML version use files located under /www/html directory.



2. How to set the menu to be sticky?


PHP version

Please replace line 187 in header.php:

<div class="header-container<?php echo (isset($_COOKIE['cm_menu_type']) ? ' ' . $_COOKIE['cm_menu_type'] : '');?>">

with:

<div class="header-container sticky">

HTML version

For each page please replace:

<div class="header-container">

with:

<div class="header-container sticky">


3. How to set boxed layout?


PHP version

Please replace line 51 in header.php:

<div class="site-container<?php echo ($_COOKIE['cm_layout']=="boxed" ? ' boxed' : ''); ?>">

with:

<div class="site-container boxed">

HTML version

For each page please replace:

<div class="site-container">

with:

<div class="site-container boxed">


4. How to set a pattern or background image for boxed layout?


PHP version

Please replace line 50 in header.php:

<body class="<?php echo (isset($_COOKIE['cm_layout']) && $_COOKIE['cm_layout']=="boxed" ? (isset($_COOKIE['cm_layout_style']) && $_COOKIE['cm_layout_style']!="" ? $_COOKIE['cm_layout_style'] . ' ' . $_COOKIE['cm_image_overlay'] : 'image-1 overlay') : ''); echo (isset($_COOKIE['cm_header_top_bar']) && $_COOKIE['cm_header_top_bar']=="yes" ? ' with-topbar' : ''); ?>">

with for example (image 1 background):

<body class="image-1">

example with pattern:

<body class="pattern-1">

example with background and overlay on it:

<body class="image-1 overlay">

You can find all available options commented in header.php file (lines 30-49).


HTML version

For each page please replace:

<body>

with for example (image 1 background):

<body class="image-1">

example with pattern:

<body class="pattern-1">

example with background and overlay on it:

<body class="image-1 overlay">


5. I'm getting "Please define Google Maps API Key" alert. What should I do?

You need to generate the Google Maps API Key here - https://developers.google.com/maps/documentation/javascript/get-api-key. Then you'll need to set it in the source code. Please follow the instructions below:

PHP version

Please open footer.php file and set the API Key by replacing YOUR_API_KEY phrase in line 121:

<script type="text/javascript" src="//maps.google.com/maps/api/js?key=YOUR_API_KEY"></script>

HTML version

Please open contact.html, contact_2.html and contact_3.html files and set the API Key by replacing YOUR_API_KEY phrase in below line before </body> closing tag:

<script type="text/javascript" src="//maps.google.com/maps/api/js?key=YOUR_API_KEY"></script>


6. How to enable top bar?


PHP version

Please open header.php file and in line 50 replace below part:

echo (isset($_COOKIE['cm_header_top_bar']) && $_COOKIE['cm_header_top_bar']=="yes" ? ' with-topbar' : '');

with:

echo ' with-topbar';

then remove lines 54-55:

if(isset($_COOKIE['cm_header_top_bar']) && $_COOKIE['cm_header_top_bar']=="yes")
{

and lines 190-192:

<?php
}
?>

HTML version

In HTML version the top bar is enabled by default. If you would like to disable it, simply remove lines 32-72:

<div class="header-top-bar-container clearfix">
	<div class="header-top-bar">
		<ul class="contact-details clearfix">
			<li class="template-location">
				745 Adelaide Street, Ottawa
			</li>
			<li class="template-mobile">
				<a href="tel:2507257052">250 725 7052</a>
			</li>
			<li class="template-clock">
				08.00 am - 05.00pm
			</li>
		</ul>
		<ul class="social-icons">
			<li class="show-on-mobiles">
				<a class="template-search" href="#" title="Search"></a>
				<form class="search">
					<input type="text" name="s" placeholder="Type and hit enter..." value="Type and hit enter..." class="search-input hint">
					<fieldset class="search-submit-container">
						<span class="template-search"></span>
						<input type="submit" class="search-submit" value="">
					</fieldset>
					<input type="hidden" name="page" value="search">
				</form>
			</li>
			<li class="show-on-mobiles">
				<a href="#" class="template-cart"><span class="cart-items-number">2<span class="cart-items-number-arrow"></span></span></a>
			</li>
			<li>
				<a target="_blank" href="https://facebook.com/QuanticaLabs" class="social-facebook" title="facebook"></a>
			</li>
			<li>
				<a target="_blank" href="https://twitter.com/QuanticaLabs" class="social-twitter" title="twitter"></a>
			</li>
			<li>
				<a href="https://pinterest.com/quanticalabs/" class="social-pinterest" title="pinterest"></a>
			</li>
		</ul>
	</div>
	<a href="#" class="header-toggle template-arrow-vertical-3"></a>
</div>


7. How to change header type to 'Type 2'?


PHP version

Please open header.php file and remove lines 196-207:

<?php
if(empty($_COOKIE["cm_header_type"]) || $_COOKIE["cm_header_type"]!="type_2")
{
?>
<div class="menu-container first-menu clearfix">
	&;lt;?php
	require_once('menu_1.php');
	?>
</div>
<?php
}
?>

Then remove lines 216-231:

<?php
if(empty($_COOKIE["cm_header_type"]) || $_COOKIE["cm_header_type"]!="type_2")
{
?>
<div class="logo-clone">
	<h1>
		<a href="?page=home" title="CleanMate">
			<img src="images/logo.png" srcset="images/logo_retina.png 2x" class="<?php echo (empty($_GET["page"]) || $_GET["page"]=="home" || $_GET["page"]=="about_2" || $_GET["page"]=="service_calculator" || $_GET["page"]=="services_2" || $_GET["page"]=="cleaning_checklist" || $_GET["page"]=="contact_3" ? 'secondary-logo' : 'primary-logo'); ?>" alt="logo">
			<img src="images/logo_transparent.png" srcset="images/logo_transparent_retina.png 2x" class="<?php echo (empty($_GET["page"]) || $_GET["page"]=="home" || $_GET["page"]=="about_2" || $_GET["page"]=="service_calculator" || $_GET["page"]=="services_2" || $_GET["page"]=="cleaning_checklist" || $_GET["page"]=="contact_3" ? 'primary-logo' : 'secondary-logo'); ?>" alt="logo">
			<span class="logo-text">CLEANMATE</span>
		</a>
	</h1>
</div>
<?php
}
?>

After that please replace lines 239-246:

<div class="menu-container clearfix<?php echo (empty($_COOKIE["cm_header_type"]) || $_COOKIE["cm_header_type"]!="type_2" ? ' second-menu' : ''); ?>">
	<?php
	if(empty($_COOKIE["cm_header_type"]) || $_COOKIE["cm_header_type"]!="type_2")
		require_once('menu_2.php');
	else
		require_once('menu.php');
	?>
</div>

with:

<div class="menu-container clearfix">
	<?php
	require_once('menu.php');
	?>
</div>

HTML version

For each page please remove the menu-container first-menu div with its content (by default lines 75-441):

<div class="menu-container first-menu clearfix">
	...
</div>

Then please remove lines 450-458:

<div class="logo-clone">
	<h1>
		<a href="home.html" title="CleanMate">
			<img src="images/logo.png" srcset="images/logo_retina.png 2x" class="primary-logo" alt="logo">
			<img src="images/logo_transparent.png" srcset="images/logo_transparent_retina.png 2x" class="secondary-logo" alt="logo">
			<span class="logo-text">CLEANMATE</span>
		</a>
	</h1>
</div>

Finally please replace line 466:

<div class="menu-container clearfix second-menu">

with:

<div class="menu-container clearfix">

and put all your menu positions inside that menu-container div. For default menu this code will look like below:

<div class="menu-container clearfix">
	<nav>
		<ul class="sf-menu">
			<li>
				<a href="home.html" title="Home">
					HOME
				</a>
				<ul>
					<li>
						<a href="home.html" title="Home Style 1">
							Home Style 1
						</a>
					</li>
					<li>
						<a href="home_2.html" title="Home Style 2">
							Home Style 2
						</a>
					</li>
				</ul>
			</li>
			<li class="selected">
				<a href="about.html" title="Pages">
					PAGES
				</a>
				<ul>
					<li class="selected">
						<a href="about.html" title="About Us Style 1">
							About Us Style 1
						</a>
					</li>
					<li>
						<a href="about_2.html" title="About Us Style 2">
							About Us Style 2
						</a>
					</li>
					<li>
						<a href="services.html" title="Services Style 1">
							Services Style 1
						</a>
					</li>
					<li>
						<a href="services_2.html" title="Services Style 2">
							Services Style 2
						</a>
					</li>
					<li>
						<a href="service_house_cleaning.html" title="Single Service">
							Single Service
						</a>
					</li>
					<li>
						<a href="projects.html" title="Projects">
							Projects
						</a>
					</li>
					<li>
						<a href="project_apartment_cleaning.html" title="Single Project">
							Single Project
						</a>
					</li>
					<li>
						<a href="team.html" title="Our Team">
							Our Team
						</a>
					</li>
					<li>
						<a href="team_celevic_parkhill.html" title="Single Team Member">
							Single Team Member
						</a>
					</li>
					<li>
						<a href="testimonials.html" title="Testimonials">
							Testimonials
						</a>
					</li>
					<li>
						<a href="cleaning_checklist.html" title="Cleaning Checklist">
							Cleaning Checklist
						</a>
					</li>
					<li>
						<a href="404.html" title="404 Not Found">
							404 Not Found
						</a>
					</li>
				</ul>
			</li>
			<li>
				<a href="service_calculator.html" title="Calculator">
					CALCULATOR
				</a>
			</li>
			<li>
				<a href="services.html" title="Services">
					SERVICES
				</a>
				<ul>
					<li>
						<a href="service_house_cleaning.html" title="House Cleaning">
							House Cleaning
						</a>
					</li>
					<li>
						<a href="service_post_renovation.html" title="Post Renovation">
							Post Renovation
						</a>
					</li>
					<li>
						<a href="service_green_spaces_maintenance.html" title="Green Spaces Maintenance">
							Green Spaces Maintenance
						</a>
					</li>
					<li>
						<a href="service_move_in_out.html" title="Move In Out Service">
							Move In Out Service
						</a>
					</li>
					<li>
						<a href="service_commercial_cleaning.html" title="Commercial Cleaning">
							Commercial Cleaning
						</a>
					</li>
					<li>
						<a href="service_window_cleaning.html" title="Window Cleaning">
							Window Cleaning
						</a>
					</li>
				</ul>
			</li>
			<li>
				<a href="projects.html" title="Projects">
					PROJECTS
				</a>
				<ul>
					<li>
						<a href="project_apartment_cleaning.html" title="Apartment Cleaning">
							Apartment Cleaning
						</a>
					</li>
					<li>
						<a href="project_garden_maintenance.html" title="Garden Maintenance">
							Garden Maintenance
						</a>
					</li>
					<li>
						<a href="project_move_in_out.html" title="Move In Out">
							Move In Out
						</a>
					</li>
					<li>
						<a href="project_after_renovation_cleaning.html" title="After Renovation Cleaning">
							After Renovation Cleaning
						</a>
					</li>
					<li>
						<a href="project_house_cleaning.html" title="House Cleaning">
							House Cleaning
						</a>
					</li>
					<li>
						<a href="project_gutter_cleaning.html" title="Gutter Cleaning">
							Gutter Cleaning
						</a>
					</li>
				</ul>
			</li>
			<li>
				<a href="blog.html" title="Blog">
					BLOG
				</a>
				<ul>
					<li>
						<a href="blog.html" title="Blog">
							Blog
						</a>
					</li>
					<li>
						<a href="blog_small_image.html" title="Blog Small Image">
							Blog Small Image
						</a>
					</li>
					<li>
						<a href="blog_2_columns.html" title="Blog 2 Columns">
							Blog 2 Columns
						</a>
					</li>
					<li>
						<a href="blog_left_sidebar.html" title="Blog Left Sidebar">
							Blog Left Sidebar
						</a>
					</li>
					<li>
						<a href="post.html" title="Single Post">
							Single Post
						</a>
					</li>
					<li>
						<a href="search.html?s=ipsum" title="Search Template">
							Search Template
						</a>
					</li>
				</ul>
			</li>
			<li class="left-flyout">
				<a href="contact.html" title="Contact">
					CONTACT
				</a>
				<ul>
					<li>
						<a href="contact.html" title="Contact Style 1">
							Contact Style 1
						</a>
					</li>
					<li>
						<a href="contact_2.html" title="Contact Style 2">
							Contact Style 2
						</a>
					</li>
					<li>
						<a href="contact_3.html" title="Contact Style 3">
							Contact Style 3
						</a>
					</li>
				</ul>
			</li>
		</ul>
	</nav>
	<div class="mobile-menu-container">
		<nav>
			<ul class="mobile-menu collapsible-mobile-submenus">
				<li><a class="template-arrow-vertical-3" href="#"> </a></li>
				<li>
					<a href="home.html" title="Home">
						HOME
					</a>
					<a href="#" class="template-arrow-menu"></a>
					<ul>
						<li>
							<a href="home.html" title="Home Style 1">
								Home Style 1
							</a>
						</li>
						<li>
							<a href="home_2.html" title="Home Style 2">
								Home Style 2
							</a>
						</li>
					</ul>
				</li>
				<li class="selected">
					<a href="about.html" title="Pages">
						PAGES
					</a>
					<a href="#" class="template-arrow-menu"></a>
					<ul>
						<li class="selected">
							<a href="about.html" title="About Us Style 1">
								About Us Style 1
							</a>
						</li>
						<li>
							<a href="about_2.html" title="About Us Style 2">
								About Us Style 2
							</a>
						</li>
						<li>
							<a href="services.html" title="Services Style 1">
								Services Style 1
							</a>
						</li>
						<li>
							<a href="services_2.html" title="Services Style 2">
								Services Style 2
							</a>
						</li>
						<li>
							<a href="service_house_cleaning.html" title="Single Service">
								Single Service
							</a>
						</li>
						<li>
							<a href="projects.html" title="Projects">
								Projects
							</a>
						</li>
						<li>
							<a href="project_apartment_cleaning.html" title="Single Project">
								Single Project
							</a>
						</li>
						<li>
							<a href="team.html" title="Our Team">
								Our Team
							</a>
						</li>
						<li>
							<a href="team_celevic_parkhill.html" title="Single Team Member">
								Single Team Member
							</a>
						</li>
						<li>
							<a href="testimonials.html" title="Testimonials">
								Testimonials
							</a>
						</li>
						<li>
							<a href="cleaning_checklist.html" title="Cleaning Checklist">
								Cleaning Checklist
							</a>
						</li>
						<li>
							<a href="404.html" title="404 Not Found">
								404 Not Found
							</a>
						</li>
					</ul>
				</li>
				<li>
					<a href="service_calculator.html" title="Calculator">
						CALCULATOR
					</a>
				</li>
				<li>
					<a href="services.html" title="Services">
						SERVICES
					</a>
					<a href="#" class="template-arrow-menu"></a>
					<ul>
						<li>
							<a href="service_house_cleaning.html" title="House Cleaning">
								House Cleaning
							</a>
						</li>
						<li>
							<a href="service_post_renovation.html" title="Post Renovation">
								Post Renovation
							</a>
						</li>
						<li>
							<a href="service_green_spaces_maintenance.html" title="Green Spaces Maintenance">
								Green Spaces Maintenance
							</a>
						</li>
						<li>
							<a href="service_move_in_out.html" title="Move In Out Service">
								Move In Out Service
							</a>
						</li>
						<li>
							<a href="service_commercial_cleaning.html" title="Commercial Cleaning">
								Commercial Cleaning
							</a>
						</li>
						<li>
							<a href="service_window_cleaning.html" title="Window Cleaning">
								Window Cleaning
							</a>
						</li>
					</ul>
				</li>
				<li>
					<a href="projects.html" title="Projects">
						PROJECTS
					</a>
					<a href="#" class="template-arrow-menu"></a>
					<ul>
						<li>
							<a href="project_apartment_cleaning.html" title="Apartment Cleaning">
								Apartment Cleaning
							</a>
						</li>
						<li>
							<a href="project_garden_maintenance.html" title="Garden Maintenance">
								Garden Maintenance
							</a>
						</li>
						<li>
							<a href="project_move_in_out.html" title="Move In Out">
								Move In Out
							</a>
						</li>
						<li>
							<a href="project_after_renovation_cleaning.html" title="After Renovation Cleaning">
								After Renovation Cleaning
							</a>
						</li>
						<li>
							<a href="project_house_cleaning.html" title="House Cleaning">
								House Cleaning
							</a>
						</li>
						<li>
							<a href="project_gutter_cleaning.html" title="Gutter Cleaning">
								Gutter Cleaning
							</a>
						</li>
					</ul>
				</li>
				<li>
					<a href="blog.html" title="Blog">
						BLOG
					</a>
					<a href="#" class="template-arrow-menu"></a>
					<ul>
						<li>
							<a href="blog.html" title="Blog">
								Blog
							</a>
						</li>
						<li>
							<a href="blog_small_image.html" title="Blog Small Image">
								Blog Small Image
							</a>
						</li>
						<li>
							<a href="blog_2_columns.html" title="Blog 2 Columns">
								Blog 2 Columns
							</a>
						</li>
						<li>
							<a href="blog_left_sidebar.html" title="Blog Left Sidebar">
								Blog Left Sidebar
							</a>
						</li>
						<li>
							<a href="post.html" title="Single Post">
								Single Post
							</a>
						</li>
						<li>
							<a href="search.html?s=ipsum" title="Search Template">
								Search Template
							</a>
						</li>
					</ul>
				</li>
				<li>
					<a href="contact.html" title="Contact">
						CONTACT
					</a>
					<a href="#" class="template-arrow-menu"></a>
					<ul>
						<li>
							<a href="contact.html" title="Contact Style 1">
								Contact Style 1
							</a>
						</li>
						<li>
							<a href="contact_2.html" title="Contact Style 2">
								Contact Style 2
							</a>
						</li>
						<li>
							<a href="contact_3.html" title="Contact Style 3">
								Contact Style 3
							</a>
						</li>
					</ul>
				</li>
			</ul>
		</nav>
	</div>
</div>