Colek documentation

Colek - Air Conditioning Repair HTML Template

Template Features:

• 22 HTML Files
• 2 Index Multi Pages Demo
• 2 Index Single Pages Demo
• 2 Index Dark Pages Demo
• 2 Index Boxed Page Demo
• 2 Index RTL Page Demo
• Easy to customize
• HTML5 & CSS3
• Clean & Simple Design
• Fully Responsive Layout
• Crossbrowser Compatible with Edge, IE9+, Firefox, Safari, Opera, Chrome
• Revolution Slider added. you save $14.00
• Menuzord - Responsive Megamenu added. you save $7.00
• 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: November 17, 2020
• Version 1.0
• By: ThemeMascot
• Email: thememascot@gmail.com

Unzip the archive and find out the folder Colek-client-html. There are all the template files in this folder.

The file and folder structure is something like this:

1. /css — folder with css files.
2. /fonts — folder with icon fonts.
3. /images — folder with image files.
4. /includes — folder with twitter, phpmailer and different appointment, contact form php handler.
5. /js — folder with Javascript files.
6. assets/source/scss — folder containing scss files of the theme.
   
7. index-*.html, ... — Index page demos.
8. page-*.html, ... — Different inner page demos.

Upload the template files to server with the help of one of the FTP-clients like FileZilla.

These are the css files which are loaded into the template in Head Section.

<!-- Meta Tags -->
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<meta name="description" content="Colek - Air Conditioning Repair HTML Template"/>
<meta name="keywords" content="business, creative, corporate"/>
<meta name="author" content="ThemeMascot"/>

<!-- Page Title -->
<title>Colek - Air Conditioning Repair HTML Template</title>

<!-- Favicon and Touch Icons -->
<link href="images/favicon.png" rel="shortcut icon" type="image/png">
<link href="images/apple-touch-icon.png" rel="apple-touch-icon">
<link href="images/apple-touch-icon-72x72.png" rel="apple-touch-icon" sizes="72x72">
<link href="images/apple-touch-icon-114x114.png" rel="apple-touch-icon" sizes="114x114">
<link href="images/apple-touch-icon-144x144.png" rel="apple-touch-icon" sizes="144x144">

<!-- Stylesheet -->
<link href="assets/dist/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="assets/dist/css/animate.min.css" rel="stylesheet" type="text/css">
<link href="assets/dist/css/javascript-plugins-bundle.css" rel="stylesheet"/>

<!-- CSS | menuzord megamenu skins -->
<link href="assets/dist/js/menuzord/css/menuzord.css" rel="stylesheet"/>

<!-- CSS | timeline -->
<link href="assets/dist/js/timeline-cp-responsive-vertical/timeline-cp-responsive-vertical.css" rel="stylesheet" type="text/css">

<!-- CSS | Main style file -->
<link href="assets/dist/css/style-main.css" rel="stylesheet" type="text/css">
<link id="menuzord-menu-skins" href="assets/dist/js/menuzord/css/skins/menuzord-rounded-boxed.css" rel="stylesheet"/>

<!-- CSS | Responsive media queries -->
<link href="assets/dist/css/responsive.css" rel="stylesheet" type="text/css">
<!-- CSS | Style css. This is the file where you can place your own custom css code. Just uncomment it and use it. -->

<!-- CSS | Theme Color -->
<link href="assets/dist/css/colors/theme-skin-color-set1.css" rel="stylesheet" type="text/css">

<!-- external javascripts -->
<script src="assets/dist/js/jquery.js"></script>
<script src="assets/dist/js/bootstrap.min.js"></script>
<script src="assets/dist/js/javascript-plugins-bundle.js"></script>
<script src="assets/dist/js/menuzord/js/menuzord.js"></script>

<!-- REVOLUTION STYLE SHEETS -->
<link rel="stylesheet" type="text/css" href="assets/dist/js/revolution-slider/css/rs6.css">
<!-- REVOLUTION LAYERS STYLES -->
			<!-- REVOLUTION JS FILES -->
<script type="text/javascript" src="assets/dist/js/revolution-slider/js/revolution.tools.min.js"></script>
<script type="text/javascript" src="assets/dist/js/revolution-slider/js/rs6.min.js"></script>

We have used premium "Menuzord - Responsive Megamenu" for this theme. From here you can get idea of the menu: http://codecanyon.net/item/menuzord-responsive-megamenu/8536398
This is the basic structure of Top Nav Menu:

<div class="header-nav">
	<div class="header-nav-wrapper navbar-scrolltofixed green">
		<div class="menuzord-container header-nav-container green ">
			<div class="container position-relative">
				<div class="row">
					<div class="col">
						<div class="row header-nav-col-row">
							<div class="col-sm-auto align-self-center">
								<a class="menuzord-brand site-brand" href="index-mp-layout1.html">
									<img class="logo-default logo-1x" src="images/logo-wide.png" alt="Logo">
									<img class="logo-default logo-2x retina" src="images/logo-wide@2x.png" alt="Logo">
								</a>
							</div>
							<div class="col-sm-auto ml-auto pr-0 align-self-center">
								<nav id="top-primary-nav" class="menuzord red" data-effect="fade" data-animation="none" data-align="right">
									<ul id="main-nav" class="menuzord-menu">
										<li class="active"><a href="index-mp-layout1.html">Home</a></li>
										<li><a href="#">Pages</a>
											<ul class="dropdown">
												<li><a href="page-about.html">About</a></li>
												<li><a href="page-team.html">Our Team</a></li>
												<li><a href="page-team-details.html">Team Details</a></li>
												<li><a href="page-faqs.html">FAQs</a></li>
											</ul>
										</li>
										<li><a href="page-symptoms.html">Symptoms</a></li>
										<li><a href="page-prevention.html">Prevention</a></li>
										<li><a href="#">Blog</a>
											<ul class="dropdown">
												<li><a href="news-grid.html">News Grid</a></li>
												<li><a href="news-details.html">News Details</a></li>
											</ul>
										</li>
										<li><a href="page-contact.html">Contact</a></li>
									</ul>
								</nav>
							</div>
						</div>
						<div class="row d-block d-xl-none">
							<div class="col-12">
								<nav id="top-primary-nav-clone" class="menuzord d-block d-xl-none default menuzord-color-default menuzord-border-boxed menuzord-responsive" data-effect="slide" data-animation="none" data-align="right">
									<ul id="main-nav-clone" class="menuzord-menu menuzord-right menuzord-indented scrollable">
									</ul>
								</nav>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<!-- CSS | Dark Layout -->
		<link href="css/style-main-dark.css" rel="stylesheet" type="text/css" id="link-bg-color">
	</head>
	<body class="dark">
		body content here ......
	</body>
</html>

By default every layout is appeared in white version. If you want to change it into dark layout from white then simply add dark class in the body tag like this
<body class="dark">
Finally include this style-main-dark.css css file in the head tag as follows as <link href="css/style-main-dark.css" rel="stylesheet" type="text/css">

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
	</head>
	<body class="boxed-layout pt-40 pb-40 pt-sm-0" data-bg-img="images/pattern/p1.png">
		body content here ......
	</body>
</html>

By default every layout is appeared in fullwidth mode. If you want to change it into boxed layout from fullwidth mode then simply add boxed-layout lightgray pt-40 pb-40 classes into the body tag like this <body class="boxed-layout pt-40 pb-40 pt-sm-0" data-bg-img="images/pattern/p1.png">

<!DOCTYPE html>
<html dir="ltr" lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<!-- CSS | RTL Layout -->
		<link href="css/bootstrap-rtl.min.css" rel="stylesheet" type="text/css">
		<link href="css/style-main-rtl.css" rel="stylesheet" type="text/css">
		<link href="css/style-main-rtl-extra.css" rel="stylesheet" type="text/css">
	</head>
	<body>
		body content here ......
	</body>
</html>

By default every layout is appeared in ltr direction. If you want to change it into rtl direction from ltr then simply add dir="rtl" attribute in the html tag like this
<html lang="en" dir="rtl">
Finally include this style-main-rtl.css and style-main-rtl-extra.css file in the head tag as follows:
<link href="css/bootstrap-rtl.min.css" rel="stylesheet" type="text/css">
<link href="css/style-main-rtl.css" rel="stylesheet" type="text/css">
<link href="css/style-main-rtl-extra.css" rel="stylesheet" type="text/css">

We have used premium "Menuzord - Responsive Megamenu" from here:
http://codecanyon.net/item/menuzord-responsive-megamenu/8536398

It's documentation is here: http://www.webpulse.com.br/menuzord/index.html

It has 15 predefined Skins loaded into the "assets/dist/js/menuzord/css/skins" folder as shown below:

Here is the HTML coding structure on how to link any of them:

<!-- CSS | Theme Color -->
<link href="css/menuzord-skins/menuzord-border-bottom.css" rel="stylesheet" type="text/css">
<link href="css/menuzord-skins/menuzord-border-boxed.css" rel="stylesheet" type="text/css">
<link href="css/menuzord-skins/menuzord-border-left.css" rel="stylesheet" type="text/css">
<link href="css/menuzord-skins/menuzord-border-left.css" rel="stylesheet" type="text/css">
<link href="css/menuzord-skins/menuzord-border-top-bottom.css" rel="stylesheet" type="text/css">
<link href="css/menuzord-skins/menuzord-bottom-trace.css" rel="stylesheet" type="text/css">
<link href="css/menuzord-skins/menuzord-boxed.css" rel="stylesheet" type="text/css">
<link href="css/menuzord-skins/menuzord-colored.css" rel="stylesheet" type="text/css">
<link href="css/menuzord-skins/menuzord-dark.css" rel="stylesheet" type="text/css">
<link href="css/menuzord-skins/menuzord-gradient.css" rel="stylesheet" type="text/css">
<link href="css/menuzord-skins/menuzord-rounded-boxed.css" rel="stylesheet" type="text/css">
<link href="css/menuzord-skins/menuzord-shadow.css" rel="stylesheet" type="text/css">
<link href="css/menuzord-skins/menuzord-strip.css" rel="stylesheet" type="text/css">
<link href="css/menuzord-skins/menuzord-subcolored.css" rel="stylesheet" type="text/css">
<link href="css/menuzord-skins/menuzord-top-bottom-boxed-border.css" rel="stylesheet" type="text/css">

You can use any of them easily or modify any of them. Just link any of the Menu Skin CSS file before the "</head>" tag as shown below:

Menuzord provides 8 color schemes per each skin. The table below shows the color schemes and correspondent CSS classes:

To use a color scheme, just use the proper CSS class. Examples:

a) Red Menuzord

<div id="menuzord" class="menuzord red">
	<ul class="menuzord-menu">
		<li class="active"><a href="#">Item 1</a></li>
		<li><a href="#">Item 2</a></li>
		<li><a href="#">Item 3</a></li>
		<li><a href="#">Item 4</a></li>
	</ul>
</div>

b) Orange Menuzord

<div id="menuzord" class="menuzord orange">
	<ul class="menuzord-menu">
		<li class="active"><a href="#">Item 1</a></li>
		<li><a href="#">Item 2</a></li>
		<li><a href="#">Item 3</a></li>
		<li><a href="#">Item 4</a></li>
	</ul>
</div>

These are the JS files which are loaded into the template before the end of the HEAD and BODY Section.

<!-- external javascripts -->
<script src="js/jquery.js - v1.12.4"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- JS | jquery plugin collection for this theme -->
<script src="js/jquery-plugin-collection.js"></script>

<!-- Revolution Slider 5.x SCRIPTS -->
<script src="js/revolution-slider/js/jquery.themepunch.tools.min.js"></script>
<script src="js/revolution-slider/js/jquery.themepunch.revolution.min.js"></script>

The general template structure is the same throughout the template. Here is the general structure:

<section id="sectionID_if_Needed">
	<div class="container">
		<div class="row">
			<!-- Section Title -->
			<div class="section-title">
				<div class="col-md-12">
					...          ...          ...
				</div>
			</div>
			<!-- Section Content -->
			<div class="section-content">
				<div class="col-md-12">
					...          ...          ...
				</div>
			</div>
		</div>
	</div>
</section>

We have added some utility classes with media queries for different screen sizes. Those are given below:

/* Here is the css code for max-width : 991px: */

/* Small Devices, Tablets */
@media only screen and (max-width: 991px) {
	.sm-display-block {
		display: block !important;
	}
	.sm-text-center {
		text-align: center !important;
	}
	.sm-text-right {
		text-align: right !important;
	}
	.sm-text-left {
		text-align: left !important;
	}
	.sm-pull-none {
		float: none !important;
	}
	.sm-pull-left {
		float: left !important;
	}
	.sm-pull-right {
		float: right !important;
	}
	.sm-fullwidth {
		width: 100%;
	}
	.sm-height-auto {
		min-height: auto !important;
	}
	.sm-hide-bg-img {
		background: none !important;
	}
	.maxwidth400 {
		margin-left: auto;
		margin-right: auto;
		max-width: 400px;
	}
	.maxwidth500 {
		margin-left: auto;
		margin-right: auto;
		max-width: 500px;
	}
	.maxwidth600 {
		margin-left: auto;
		margin-right: auto;
		max-width: 600px;
	}
}

/* Here is the css code for max-width : 767px: */

/* Small Devices, Tablets */
@media only screen and (max-width: 767px) {
	.xs-display-block {
		display: block;
	}
	.xs-text-center {
		text-align: center !important;
	}
	.xs-text-right {
		text-align: right !important;
	}
	.xs-text-left {
		text-align: left !important;
	}
	.xs-fullwidth {
		width: 100%;
	}
	.xs-height-auto {
		min-height: auto !important;
	}
	.xs-hide-bg-img {
		background: none !important;
	}
	.xs-pull-none {
		float: none !important;
	}
	.xs-pull-left {
		float: left !important;
	}
	.xs-pull-right {
		float: right !important;
	}
	.xs-pull-center {
		display: table;
		float: none !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}
	.xs-list-inline-none li {
		display: table;
		margin-left: auto !important;
		margin-right: auto !important;
		margin-top: 20px !important;
		padding-left: 0 !important;
	}
}

/* Here is the css code for max-width : 479px: *
@media only screen and (max-width: 479px) {
	.xxs-text-center {
		text-align: center;
	}
	.xxs-height-auto {
		min-height: auto !important;
	}
}

In "custom-bootstrap-margin-padding.css", we have added some custom margin and padding for different screen sizes. Those are given below:

There are 7 different classes for owl carosel to make different column carousels. Those are:

• owl-carousel-1col
• owl-carousel-2col
• owl-carousel-3col
• owl-carousel-4col
• owl-carousel-5col
• owl-carousel-6col
• owl-carousel-7col

• data-nav="true"
• data-dots="true"
• data-duration="4000"

<div class="owl-carousel-1col" data-nav="false" data-dots="false" data-duration="4000">
	<div class="item">
		<img src="https://placehold.it/900x500" alt="">
	</div>
	<div class="item">
		<img src="https://placehold.it/900x500" alt="">
	</div>
	<div class="item">
		<img src="https://placehold.it/900x500" alt="">
	</div>
</div>

<div class="owl-carousel-2col" data-nav="false" data-dots="false" data-duration="4000">
	<div class="item">
		<img src="https://placehold.it/900x500" alt="">
	</div>
	<div class="item">
		<img src="https://placehold.it/900x500" alt="">
	</div>
	<div class="item">
		<img src="https://placehold.it/900x500" alt="">
	</div>
</div>

<div class="owl-carousel-3col" data-nav="false" data-dots="false" data-duration="4000">
	<div class="item">
		<img src="https://placehold.it/900x500" alt="">
	</div>
	<div class="item">
		<img src="https://placehold.it/900x500" alt="">
	</div>
	<div class="item">
		<img src="https://placehold.it/900x500" alt="">
	</div>
</div>

<div class="owl-carousel-4col" data-nav="false" data-dots="false" data-duration="4000">
	<div class="item">
		<img src="https://placehold.it/900x500" alt="">
	</div>
	<div class="item">
		<img src="https://placehold.it/900x500" alt="">
	</div>
	<div class="item">
		<img src="https://placehold.it/900x500" alt="">
	</div>
</div>

<div class="owl-carousel-5col" data-nav="false" data-dots="false" data-duration="4000">
	<div class="item">
		<img src="https://placehold.it/900x500" alt="">
	</div>
	<div class="item">
		<img src="https://placehold.it/900x500" alt="">
	</div>
	<div class="item">
		<img src="https://placehold.it/900x500" alt="">
	</div>
</div>

<div class="owl-carousel-6col" data-nav="false" data-dots="false" data-duration="4000">
	<div class="item">
		<img src="https://placehold.it/900x500" alt="">
	</div>
	<div class="item">
		<img src="https://placehold.it/900x500" alt="">
	</div>
	<div class="item">
		<img src="https://placehold.it/900x500" alt="">
	</div>
</div>

<div class="owl-carousel-7col" data-nav="false" data-dots="false" data-duration="4000">
	<div class="item">
		<img src="https://placehold.it/900x500" alt="">
	</div>
	<div class="item">
		<img src="https://placehold.it/900x500" alt="">
	</div>
	<div class="item">
		<img src="https://placehold.it/900x500" alt="">
	</div>
</div>

1. Basic Divider

Just place a class "divider" to a section to make it divider as like below

<section id="sectionID_if_Needed" class="divider">
	<div class="container">
		<div class="row">
			<div class="col-md-12">
				-------   Content here  -------
			</div>
		</div>
	</div>
</section>

2. Fullscreen Divider as like Home section

Just place a class "fullscreen" beside "divider" to make it fullscreen divider

<section id="sectionID_if_Needed" class="divider fullscreen">
	<div class="container">
		<div class="row">
			<div class="col-md-12">
				-------   Content here  -------
			</div>
		</div>
	</div>
</section>

3. Divider with Image Background

Just place your image location "images/bg1.jpg" inside data-bg-img to place an image in the background of the divider

<section id="sectionID_if_Needed" class="divider" data-bg-img="images/bg1.jpg">
	<div class="container">
		<div class="row">
			<div class="col-md-12">
				-------   Content here    -------
			</div>
		</div>
	</div>
</section>

3. Divider with Color Background

You can also add background color by using predefined attributes like "data-bg-color"

<section data-bg-color="#1A1A1A">
	<div class="container">
		<div class="row">
			<div class="col-md-12">
				-------   Content here  -------
			</div>
		</div>
	</div>
</section>

4. Divider with Parallax Image Background

Just place a class "parallax" beside "divider" to make it Parallax Background

<section id="sectionID_if_Needed" class="divider parallax" data-stellar-background-ratio="0.5" data-bg-img="images/bg1.jpg">
	<div class="container">
		<div class="row">
			<div class="col-md-12">
				------- Content here -------
			</div>
		</div>
	</div>
</section>

5. Divider with Black Overlay

Just place a class "layer-overlay" beside "divider" to make a black layer overlay

<section id="sectionID_if_Needed" class="divider layer-overlay overlay-dark">

	<div class="container">
		<div class="row">
			<div class="col-md-12">
				-------    Content here   -------
			</div>
		</div>
	</div>
</section>

6. Divider with White Overlay

Just place a class "overlay-white" beside "layer-overlay" to make a white layer overlay

<section id="sectionID_if_Needed" class="divider layer-overlay overlay-white">
	<div class="container">
		<div class="row">
			<div class="col-md-12">
				-------    Content here   -------
			</div>
		</div>
	</div>
</section>

Layer Overlay Utility Classes:

.layer-overlay {
	position: relative;
}
.layer-overlay::before {
	background: rgba(17, 17, 17, 0.65) none repeat scroll 0 0;
	content: " ";
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 0;
}
.layer-overlay.overlay-light::before {
	background-color: rgba(255, 255, 255, 0.8);
}
.layer-overlay.overlay-lighter::before {
	background-color: rgba(255, 255, 255, 0.7);
}
.layer-overlay.overlay-deep::before {
	background-color: rgba(255, 255, 255, 0.9);
}
.layer-overlay.overlay-dark::before {
	background-color: rgba(17, 17, 17, 0.85);
}
.layer-overlay.overlay-dark-deep::before {
	background-color: rgba(17, 17, 17, 0.9);
}
.layer-overlay.overlay-dark-light::before {
	background-color: rgba(17, 17, 17, 0.8);
}
.layer-overlay.overlay-white::before {
	background-color: rgba(255, 255, 255, 0.9);
}
.layer-overlay.overlay-white-deep::before {
	background-color: rgba(255, 255, 255, 0.92);
}
.layer-overlay.overlay-white-light::before {
	background-color: rgba(255, 255, 255, 0.85);
}
.layer-overlay.layer-pattern::before {
	background-image: url(../images/pattern1.png);
	background-color: rgba(0, 0, 0, 0.6);
}
.layer-overlay.layer-pattern2::before {
	background-image: url(../images/pattern2.png);
	background-color: rgba(0, 0, 0, 0.8);
}
.layer-overlay.layer-pattern3::before {
	background-image: url(../images/pattern3.png);
	background-color: rgba(0, 0, 0, 0.8);
}
.layer-overlay.maximage-layer-overlay::before {
	z-index: 1;
}
.layer-overlay.overlay-blue::before {
	background-color: rgba(1, 162, 208, 0.9);
}
.layer-overlay.overlay-blue-light::before {
	background-color: rgba(1, 162, 208, 0.45);
}
.layer-overlay.overlay-pink::before {
	background-color: rgba(235, 110, 142, 0.9);
}
.layer-overlay.overlay-pink-light::before {
	background-color: rgba(235, 110, 142, 0.45);
}
.layer-overlay.overlay-brown::before {
	background-color: rgba(60, 171, 111, 0.9);
}
.layer-overlay.overlay-brown-light::before {
	background-color: rgba(60, 171, 111, 0.45);
}
.layer-overlay.overlay-yellow::before {
	background-color: rgba(255, 187, 34, 0.9);
}
.layer-overlay.overlay-yellow-light::before {
	background-color: rgba(255, 187, 34, 0.45);
}
.layer-overlay.overlay-green::before {
	background-color: rgba(16, 196, 92, 0.9);
}
.layer-overlay.overlay-green-light::before {
	background-color: rgba(16, 196, 92, 0.45);
}

There are two types of preloader we used
1. gif animated images
and
2. CSS animated preloader
It's very easy to use. Here are some examples:

Gif Image preloader example:

<div id="preloader">
	<div id="spinner">
		<img src="images/preloaders/1.gif" alt="">
	</div>
</div>

For changing Gif preloader you have to just replace image name in line number 3 instead of (1.gif) to 2,3,4... up to 12.gif. For more details, just open features-preloader.html file.

CSS animated preloader example:

<div id="preloader">
	<div id="spinner">
		<div class="cssload-container-whirlpool">
			<div class="cssload-whirlpool"></div>
		</div>
	</div>
</div>

For changing CSS preloader you have to just copy those html code and replace your existing preloader in index files. For more details, just open features-preloader.html file.

The Contact form html code example is as follows :

<!-- Contact Form -->
<form id="contact_form" name="contact_form" class="" action="includes/sendmail.php" method="post">

	<div class="row">
		<div class="col-sm-6">
			<div class="form-group">
				<label for="form_name">Name <small>*</small></label>
				<input id="form_name" name="form_name" class="form-control" type="text" placeholder="Enter Name" required="">
			</div>
		</div>
		<div class="col-sm-6">
			<div class="form-group">
				<label for="form_email">Email <small>*</small></label>
				<input id="form_email" name="form_email" class="form-control required email" type="email" placeholder="Enter Email">
			</div>
		</div>
	</div>

	<div class="row">
		<div class="col-sm-6">
			<div class="form-group">
				<label for="form_name">Subject <small>*</small></label>
				<input id="form_subject" name="form_subject" class="form-control required" type="text" placeholder="Enter Subject">
			</div>
		</div>
		<div class="col-sm-6">
			<div class="form-group">
				<label for="form_phone">Phone</label>
				<input id="form_phone" name="form_phone" class="form-control" type="text" placeholder="Enter Phone">
			</div>
		</div>
	</div>

	<div class="form-group">
		<label for="form_name">Message</label>
		<textarea id="form_message" name="form_message" class="form-control required" rows="5" placeholder="Enter Message"></textarea>
	</div>
	<div class="form-group">
		<input id="form_botcheck" name="form_botcheck" class="form-control" type="hidden" value="" />
		<button type="submit" class="btn btn-dark btn-theme-colored btn-flat mr-5" data-loading-text="Please wait...">Send your message</button>
		<button type="reset" class="btn btn-default btn-flat btn-theme-colored">Reset</button>
	</div>
</form>

<!-- Contact Form Validation-->
<script type="text/javascript">
	$("#contact_form").validate({
		submitHandler: function(form) {
			var form_btn = $(form).find('button[type="submit"]');
			var form_result_div = '#form-result';
			$(form_result_div).remove();
			form_btn.before('<div id="form-result" class="alert alert-success" role="alert" style="display: none;"></div>');
			var form_btn_old_msg = form_btn.html();
			form_btn.html(form_btn.prop('disabled', true).data("loading-text"));
			$(form).ajaxSubmit({
				dataType:  'json',
				success: function(data) {
					if( data.status == 'true' ) {
						$(form).find('.form-control').val('');
					}
					form_btn.prop('disabled', false).html(form_btn_old_msg);
					$(form_result_div).html(data.message).fadeIn('slow');
					setTimeout(function(){ $(form_result_div).fadeOut('slow') }, 6000);
				}
			});
		}
	});
</script>

For placing your email address, just go to form action location action="includes/sendmail.php" and open the sendmail.php file in includes folder. In that php file at line 32, you will see $toemail = 'spam.thememascot@gmail.com'; Now just replace that email address by your own email address. Now your contact form is ready!

The Mailchimp subscribe form html code example is as follows :

<!-- Mailchimp Subscription Form-->
<form id="mailchimp-subscription-form1" class="newsletter-form mt-40">
	<label for="mce-EMAIL"></label>
	<div class="input-group">
		<input type="email" id="mce-EMAIL" data-height="45px" class="form-control input-lg" placeholder="Your Email" name="EMAIL" value="">
		<span class="input-group-btn">
			<button type="submit" class="btn btn-colored btn-dark btn-lg m-0" data-height="45px">Subscribe</button>
		</span>
	</div>
</form>

<!-- Mailchimp Subscription Form Validation-->
<script type="text/javascript">
	$('#mailchimp-subscription-form1').ajaxChimp({
			callback: mailChimpCallBack,
			url: '//thememascot.us9.list-manage.com/subscribe/post?u=a01f440178e35febc8cf4e51f&amp;id=49d6d30e1e'
	});

	function mailChimpCallBack(resp) {
			// Hide any previous response text
			var $mailchimpform = $('#mailchimp-subscription-form1'),
					$response = '';
			$mailchimpform.children(".alert").remove();
			console.log(resp);
			if (resp.result === 'success') {
					$response = '<div class="alert alert-success"><button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>' + resp.msg + '</div>';
			} else if (resp.result === 'error') {
					$response = '<div class="alert alert-danger"><button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>' + resp.msg + '</div>';
			}
			$mailchimpform.prepend($response);
	}
</script>

Now you just have to replace the existing Mailchimp List URL by your own Mailchimp List URL which is shown in line 16 . Now your mailchimp subscribe form is ready!

The Map Default code looks like this:

<!-- Google Map HTML Codes -->
<div
	data-address="121 King Street, Melbourne Victoria 3000 Australia"
	data-popupstring-id="#popupstring1"
	class="map-canvas autoload-map"
	data-mapstyle="default"
	data-height="400"
	data-latlng="22.798835,89.534401"
	data-title="sample title"
	data-zoom="12"
	data-marker="images/map-icon-blue.png">
</div>
<div class="map-popupstring hidden" id="popupstring1">
	<div class="text-center">
		<h3>LegalFirm Office</h3>
		<p>121 King Street, Melbourne Victoria 3000 Australia</p>
	</div>
</div>
<!-- Google Map Javascript Codes -->
<script src="http://maps.google.com/maps/api/js?key=AIzaSyAYWE4mHmR9GyPsHSOVZrSCOOljk8DU9B4"></script>
<script src="js/google-map-init.js"></script>

There are 13 pre-made map styles. You can use any of them.

All the map styles are:

• data-mapstyle="default"
• data-mapstyle="style1"
• data-mapstyle="style2"
• data-mapstyle="style3"
• data-mapstyle="style4"
• data-mapstyle="style5"
• data-mapstyle="style6"
• data-mapstyle="style7"
• data-mapstyle="style8"
• data-mapstyle="style9"
• data-mapstyle="dark"
• data-mapstyle="greyscale1"
• data-mapstyle="greyscale2"

To add Flickr feed, just place the following code:

<div id="flickr-feed" class="clearfix"> 

	<!-- Flickr Link --> 

	<script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?count=8&amp;display=latest&amp;size=s&amp;layout=x&amp;source=user&amp;user=52617155@N08"></script> 

</div>

Replace the value of attribute count=8, user=52617155@N08

To add Twitter feed Carousel, just place the following code:

			
				<div class="twitter-feed twitter-carousel text-center pt-60 pb-60" data-username="Envato"></div>
			
		

To add Twitter feed List, just place the following code:

			
			<div class="widget">
				<div class="twitter-feed clearfix" data-username="Envato"></div>
			</div>
			
		

And then change the Twitter username.

Instagram Feed - List

To add Instagram feed List, just place the following code:

			
			<div id="instafeed1" class="instagram-feed" data-userid="3450544574" data-accesstoken="3450544574.1677ed0.7d0725a565914415b40a4953c17bcdc9" data-limit="12" data-resolution="low_resolution"></div>
			
		

Here the main important things are userid and accesstoken. To collect userid and accesstoken, just follow the below steps:

1. Login to your instagram account from here instagram.com
2. Then goto http://instagram.pixelunion.net/ and press "Generate Access Token" button.
3. Copy the generated access token from there and put it into the code

See screenshot:

Instagram Feed - Carousel

To add Instagram feed Carousel, just place the following code:

			
				<div id="instafeed2" class="instagram-feed-carousel" data-userid="3450544574" data-accesstoken="3450544574.1677ed0.7d0725a565914415b40a4953c17bcdc9" data-limit="12" data-resolution="low_resolution"></div>
			
		

These are the scripts used in the template with their related links for documentation.

• jQuery
• Bootstrap Framework
• Smoothscroll
• Infinite Scroll
• scrollTo
• jQuery Easing
• SmoothScroll
• jQuery appear plugin
• jQuery Cookie Plugin
• Isotope
• jquery Stellar parallax
• Menuzord Mega Menu
• jQuery Cycle Plugin
• Maximage Slider
• Jquery Parallax
• Owl Carousel
• FlexSlider
• Magnific Popup
• Nivo Lightbox
• PrettyPhoto Lightbox
• FullCalendar
• WOW
• YTPlayer
• FitVids
• Vide
• Jflickrfeed
• JQuery Knob
• Typed Animation
• Pretty Maps
• Retinajs
• Ajaxchimp
• Pagination
• Tweetie Twitter Feed
• Instafeed
• animateNumbers
• CountDown

By default, the template loads Roboto, and Merriweather 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=Merriweather:300,400,700,900);
@import url(https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900);

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:
Roboto
Merriweather

Icon Fonts:
Font Awesome Icon Font
Pe-icon-7-stroke
Elegant Icon Font

Again, thank you for purchasing this Template!

If you have any questions, please use our profile contact form on Envato ( http://themeforest.net/user/ThemeMascot ).
We aim to answer all questions within 24 hours . In some cases the waiting time can be extended to 48 hours.

Email: thememascot@gmail.com