Cleaning Master- HTML5 Template
Firstly, a huge thanks for purchasing this theme, your support is truly appreciated!
Template Features:
- Multi Page Demos
- 25+ HTML Files
- 3 Index Multipage demos
- Easy to customize
- HTML5 & CSS3
- Clean & Simple Design
- Fully Responsive Layout
- Crossbrowser Compatible with Edge, IE9+, Firefox, Safari, Opera, Chrome
- Retina ready
- Font Awesome 400+ icons
- 7 Stroke 200+ icons
- Elegant Icon Font 360+ icons
- Powered with Bootstrap
- Smooth animation
- Parallax sections
- Working Ajax contact form with validation
- Google Maps easy to setup via data attributes
- Powerful shortcodes
- Responsive video
- Well documented
- Created: October 20, 2016
- Last Update: Octobr 30, 2016
- Version 2.1
- By: Wpthemeshaper
- Email: wpthemeshaper@gmail.com
Getting Started
Unzip the archive and find out the folder wpthemeshaper-client-html. There are all the template files in this folder.
The file and folder structure is something like this:
- /css — folder with css files.
- /fonts — folder with icon fonts.
- /images — folder with image files.
- /includes — folder with twitter, phpmailer and different appointment, contact form php handler.
- /js — folder with Javascript files.
- /video — folder containing HTML5 background video files.
- blog-*.html, ... — Blog page demos.
- features-*.html, ... — Different features page demos.
- form-*.html, ... — Different form demos.
- home-*.html, ... — Different Home Variations.
- page-*.html, ... — Different inner page demos.
Upload the template files to server with the help of one of the FTP-clients like FileZilla.
HEAD CSS Structure
These are the css files which are loaded into the template in Head Section.
<!-- Stylesheets -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/revolution-slider.css" rel="stylesheet">
<!-- Animation -->
<link rel="stylesheet" type="text/css" href="css/animations.css">
<link href="css/style.css" rel="stylesheet">
<!-- Responsive -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link href="css/responsive.css" rel="stylesheet">
<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<!--[if lt IE 9]><script src="js/respond.js"></script><![endif]-->
Javascript Structure
These are the JS files which are loaded into the template before the end of the HEAD and BODY Section.
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/revolution.min.js"></script>
<script src="js/jquery.fancybox.pack.js"></script>
<script src="js/jquery.fancybox-media.js"></script>
<script src="js/jquery.mixitup.min.js"></script>
<script src="js/featherlight.min.js"></script>
<script src="js/featherlight.gallery.min.js"></script>
<script src="js/css3-animate-it.js"></script>
<script src="js/validate.js"></script>
<script src="js/custom.js"></script>
HTML Structure
The general template structure is the same throughout the template. Here is the general structure:
<section class="Your_Section_Name">
<div class="container">
<div class="row">
<div class="col-md-12">
</div>
</div>
</div>
</section>
Contact Form
The Contact form html code example is as follows :
<!-- Contact Form -->
<form id="contact_form" name="contact_form" class="" action="content-form/contact.php" method="post">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<input name="form_name" class="form-control" type="text" placeholder="Name *" required="">
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<input name="form_phone" class="form-control" type="text" placeholder="Phone *">
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<input name="form_email" class="form-control required" type="email" placeholder="Email *">
</div>
</div>
</div>
<div class="form-group">
<textarea name="form_message" class="form-control required" rows="7" placeholder="Details Here *"></textarea>
</div>
<div class="form-group cs-mar-0">
<input name="form_botcheck" class="form-control" type="hidden" value="">
<button class="btn btn-default cs-my-btn" type="submit" data-loading-text="Please wait...">Send Us</button>
</div>
</form>
For placing your email address, just go to form action location action="content-form/contact.php" and open the contact.php.php file in includes folder. In that php file at line 4 + 5, you will see $from = 'wpthemeshaper@gmail.com'; Now just replace that email address by your own email address. Now your contact form is ready!
Javascript Links
These are the scripts used in the template with their related links for documentation.
Fonts used
By default, the template loads Roboto, Open Sans, Titillium Web and Raleway font from Google Web Font Services, you can change the font with the one that suits you best.
You will find the font code in the "style-main.css" file in the "css" folder:
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,700');
@import url('https://fonts.googleapis.com/css?family=Open+Sans');
Credits
Note: All images are used for preview purpose only and not included in the final purchase files.
Images from:
https://www.flickr.com/
http://pixabay.com/
http://www.pixeden.com/free-graphics
http://dribbble.com/
https://wallpaperscraft.com/
http://behance.net/
http://pinterest.com/
Video from:
http://youtube.com/
https://vimeo.com/
Google Fonts:
Open Sans
Roboto
Playfair Display
Raleway
Droid Sans
Icon Fonts:
Font Awesome Icon Font
Pe-icon-7-stroke
Elegant Icon Font
Support
Again, thank you for purchasing this Template!
If you have any questions, please use our profile contact form on Envato ( http://themeforest.net/user/wpthemeshaper ).
We aim to answer all questions within 24 hours . In some cases the waiting time can be extended to 48 hours.
Email: wpthemeshaper@gmail.com