Thank you for purchasing our Template. If you have any questions that are beyond the scope of this help file, please feel free to email via my user Page Contact form here. Thank you so much!
This Template is based on Bootstrap. All of the information within the main content area divided with HTML5 section. The general template structure is the same throughout the template. Here is the general structure
<!--Slider Start--> <section class="sliderSection"> <div class="container-fluid"> <div class="row"> <div class="tp-banner"> <ul> <li data-transition="cube" data-slotamount="7" data-masterspeed="1000" > <img src="images/slider/1.jpg" alt=""> <div class="tp-caption sfb" data-x="left" data-y="center" data-hoffset="-85" data-voffset="-90" data-speed="1600" data-start="1500" data-easing="Power4.easeOut"> <div class="revCont"> <h1>A Clean home is a</h1> <h2>happy home</h2> </div> </div> <div class="tp-caption sfb" data-x="left" data-y="center" data-hoffset="-83" data-voffset="30" data-speed="2000" data-start="2500" data-easing="Power4.easeOut"> <div class="revCont"> <p> The one you see is smarter than he So join us here each week my friends you are sure to get a smile <br class="hidden-sm"> from seven stranded castaways here on Gilligans Isle well we are moving on up to the east. </p> </div> </div> <div class="tp-caption sfb text-left" data-x="left" data-y="center" data-hoffset="-83" data-voffset="112" data-speed="2000" data-start="3000" data-easing="Power4.easeOut"> <div class="revBtn"> <a class="cleanBtn_style2" href="#">Get free Estimate <i class="fa fa-angle-right"></i></a> </div> </div> </li> <li data-transition="cube" data-slotamount="7" data-masterspeed="1000" > <img src="images/slider/2.jpg" alt=""> <div class="tp-caption sfb" data-x="left" data-y="center" data-hoffset="-85" data-voffset="-90" data-speed="1600" data-start="1500" data-easing="Power4.easeOut"> <div class="revCont"> <h1>A Clean Place is a</h1> <h2>safe place</h2> </div> </div> <div class="tp-caption sfb" data-x="left" data-y="center" data-hoffset="-83" data-voffset="30" data-speed="2000" data-start="2500" data-easing="Power4.easeOut"> <div class="revCont"> <p> The one you see is smarter than he So join us here each week my friends you are sure to get a smile <br class="hidden-sm"> from seven stranded castaways here on Gilligans Isle well we are moving on up to the east. </p> </div> </div> <div class="tp-caption sfb text-left" data-x="left" data-y="center" data-hoffset="-83" data-voffset="112" data-speed="2000" data-start="3000" data-easing="Power4.easeOut"> <div class="revBtn"> <a class="cleanBtn_style2" href="#">Get free Estimate <i class="fa fa-angle-right"></i></a> </div> </div> </li> <li data-transition="cube" data-slotamount="7" data-masterspeed="1000" > <img src="images/slider/3.jpg" alt=""> <div class="tp-caption sfb" data-x="left" data-y="center" data-hoffset="-85" data-voffset="-90" data-speed="1600" data-start="1500" data-easing="Power4.easeOut"> <div class="revCont"> <h1>Cleaning makes your</h1> <h2>Environment good</h2> </div> </div> <div class="tp-caption sfb" data-x="left" data-y="center" data-hoffset="-83" data-voffset="30" data-speed="2000" data-start="2500" data-easing="Power4.easeOut"> <div class="revCont"> <p> The one you see is smarter than he So join us here each week my friends you are sure to get a smile <br class="hidden-sm"> from seven stranded castaways here on Gilligans Isle well we are moving on up to the east. </p> </div> </div> <div class="tp-caption sfb text-left" data-x="left" data-y="center" data-hoffset="-83" data-voffset="112" data-speed="2000" data-start="3000" data-easing="Power4.easeOut"> <div class="revBtn"> <a class="cleanBtn_style2" href="#">Get free Estimate <i class="fa fa-angle-right"></i></a> </div> </div> </li> </ul> </div> </div> </div> </section> <!--Slider End-->
We have using three css file in this Template.
/*
Theme Name: MyClean - Cleaning Company HTML Template.
Theme URL: http://themewar.com/html/myclean
Author: ThemeWar
Author URI: http://themewar.com
Description: will be description here.
Version: 1.0
*/
/*=======================================================================
[Table of contents]
=========================================================================
[01] Home One
1. Top Bar
2. Header
2. fixed header
3. Slider
4. Find Location
5. Welcome
6. Portfolio
8. Call to Action
9. Services
9. Team
10. Plan table
11. Video Section
12. Faq Section
13. Callto action social
14. Footer
[02] Home Two
1. Header Topbar2
2. Slider2
3. Icon box3
4. funfact
5. Awesome Services
6. Call to action2
7. Faq2 section
8. Callto action3
9. Testmonial
10. News
11. Social callto action
12. Footer2
[03] Home Three
1. Header Topbar3
2. Header3
3. Slider3
4. Welcome Section
5. Awesome Services
6. Gift Clean
7. Product
8. Call to Action
9. Contact
[04] Blog Page
[05] Blog Details
[06] Gellery Single
[07] Gellery Video
[08] Error Page
[09] Single Services
[10] Checkout Page
[11] Cart Page
[12] Single Product Page
[13] Preloader
==========================================================================*/
/*=======================================================================
// Home One
=========================================================================*/
/**==================== Top Bar ======================**/
.headertopIn{
border-bottom: 1px solid #ebebeb;
padding:24px 0 28px;
}
.headerTop{
border-top: 3px solid #01539f;
}
.rightheadtop{
margin-top: 20px;
}
.topinfo{
position: relative;
padding-left: 40px;
}
.topinfo i{
font-size: 26px;
position: absolute;
left: 0;
top: 8px;
color: #01539f;
}
.topinfo h5{
font-size: 15px;
text-transform: uppercase;
color: #333333;
font-weight: 400;
letter-spacing: .6px;
margin-bottom: 12px;
}
.topinfo h6{
font-size: 14px;
color: #666666;
line-height: .8;
text-transform: uppercase;
font-weight: 400;
letter-spacing: .3px;
}
.boright{
border-right: 1px solid #ebebeb;
}
.topbtnpos {
position: relative;
top: -4px;
}
.logo {
position: relative;
top: 8px;
}
/**==================== Header ======================**/
.header1{
padding: 24px 0;
}
.language,
.cerinfo{
display: inline-block;
line-height: .8;
font-weight: 600;
letter-spacing: .91px;
}
.language a{
font-size: 13px;
color: #666666;
}
.language i{
color: #01539f;
margin-right: 4px;
}
.language i.fa-angle-down{
color:#666666;
}
.language{
position: relative;
}
.countryList{
background: #ebebeb;
display: none;
position: absolute;
z-index: 1;
top: 20px;
}
.countryList li{}
.countryList li a {
display: block;
line-height: 0.8;
padding: 7px 25px;
text-transform: uppercase;
font-size: 11px;
}
.countryList li a:hover{
background: #085EAD;
color: #fff;
}
We using all jquery plugin active and our some custom jquery .
(function ($) {
'use strict';
//=========================
// Revolution Slider
//=========================
if ($(".sliderSection").length > 0)
{
$('.tp-banner').revolution({
delay: 9000,
startwidth: 1170,
startheight: 767,
startWithSlide: 0,
fullScreenAlignForce: "off",
navigationType: "bullet",
navigationArrows: "on",
navigationStyle: "round",
touchenabled: "on",
onHoverStop: "off",
navOffsetHorizontal: 0,
navOffsetVertical: 20,
shadow: 0,
fullWidth: "off",
fullScreen: "off",
navigationVOffset: 35
});
}
if ($(".sliderSection").length > 0)
{
$('.tp-banner2').revolution({
delay: 9000,
startwidth: 1170,
startheight: 767,
startWithSlide: 0,
fullScreenAlignForce: "off",
navigationType: "bullet",
navigationArrows: "on",
navigationStyle: "round",
touchenabled: "on",
onHoverStop: "off",
navOffsetHorizontal: 0,
navOffsetVertical: 20,
shadow: 0,
fullWidth: "off",
fullScreen: "off",
navigationVOffset: 35
});
}
if ($(".sliderSection3").length > 0)
{
$('.tp-banner3').revolution({
delay: 9000,
startwidth: 1170,
startheight: 880,
startWithSlide: 0,
fullScreenAlignForce: "off",
navigationType: "bullet",
navigationArrows: "on",
navigationStyle: "round",
touchenabled: "on",
onHoverStop: "off",
navOffsetHorizontal: 0,
navOffsetVertical: 20,
shadow: 0,
fullWidth: "on",
fullScreen: "on",
navigationVOffset: 30
});
}
//=========================
// Home1 Testmonial
//=========================
if ($('#testcarohome1').length > 0) {
$("#testcarohome1").owlCarousel({
items: 1,
dots: true
});
}
//===================================
// Bootstrap collaps pluse minuse
//===================================
if ($('.collapse').length > 0) {
$('.collapse').on('shown.bs.collapse', function () {
$(this).parent().find(".rt-plus3").removeClass("rt-plus3").addClass("rt-minus3");
}).on('hidden.bs.collapse', function () {
$(this).parent().find(".rt-minus3").removeClass("rt-minus3").addClass("rt-plus3");
});
}
$('.panelHeading, .panelHeading2, .panelHeadingSer').on('click', function () {
$('.panelHeading, .panelHeading2, .panelHeadingSer').removeClass('active');
$(this).addClass('active');
});
//=========================
// Related Portfolio Carousel
//=========================
if ($('#relaportCaro').length > 0) {
$("#relaportCaro").owlCarousel({
items: 4,
dots: false
});
var owl = $("#relaportCaro").data('owlCarousel');
$('.relportnav a.prev').on('click', function (e) {
e.preventDefault();
owl.prev();
});
$('.relportnav a.next').on('click', function (e) {
e.preventDefault();
owl.next();
});
}
We used Google fonts.
@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic);
@import url(https://fonts.googleapis.com/css?family=Raleway:400,900);
@import url(https://fonts.googleapis.com/css?family=Hind:600);
@font-face {
font-family: 'montserratlight';
src: url('../fonts/Montserrat-Light.otf') format('opentype'),
url(../fonts/Montserrat-Light.woff) format('woff'),
url('../fonts/Montserrat-Light.ttf') format('truetype'),
url('../fonts/Montserrat-Light.svg#Montserrat-Light') format('svg');
font-weight: 300;
font-style: normal;
}
We have following Jquery plugin.
Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.
ThemeWar