Documentation

Use of Sections
Here onwards we assume that, you have included all necessary .css(Stylesheets) and .js(Scripts) files.
bootstrap.cssused as a framework
main.style.cssall basic styles
font-awesome.min.cssfonts used in navigation menu
themify-icons.cssUsed for Go to top arrow and some icons in different sections
style.cssall sections styles
modernizr.jsNavigation and some browser detection stuff
Necessary scripts that goes before </body> (closing body tag).jquery-2.1.1.jsGlobal Jquery
scripts.jsSome important Scripts
Note:
In most of the sections we have used scrollreveal.js for on-scroll reveal animations. Its guide regarding intialization and its uses is documented in ScrollReveal section.
We have designed all sections/cards with different responsive layouts so that you can modify them seperately according to your need without affecting responsiveness of other sections.
Basic Principle behind all sections is that, copy and paste the code. That's it!
You will find all sections in following basic structure,
<!-- Section style # -->
<section class="...here goes necessary style class...">
.... Here goes all required coding/tags ....
</section>
And relative CSS structure will be like,
/* Section style # */
.section-# {
background:#333333 url(../img/bg/bg3.jpg); / background if required */
min-height:300px
}
/* Retina background support - use x2 size image background */
@media only screen and (-Webkit-min-device-pixel-ratio: 1.5),
only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5) {
.section-# {
/* here goes high resolution background */
background:#333333 url(../img/bg/bg3.jpg)
}
}
.section-# .child-class {
.... necessary style goes here ....
}
Sections and their relative classes
Clients Sectionsclients.html# | Section Type | Class used |
---|---|---|
1 | Clients Style 1 | .clients-1 |
2 | Clients Style 2 | .clients-2 |
3 | Clients Style 3 | .clients-3 |
4 | Clients Style 4 | .clients-4 |
For .clients-4 we have used Owl Carousel, so you need to include owl-carousel.css and owl.carousel.js
Script for .clients-4
// Clients carousel
var owl = $("#clients-4");
owl.owlCarousel({
items: 4,
autoPlay: true,
pagination: false,
slideSpeed: 300,
paginationSpeed: 300,
rewindSpeed: 400,
itemsDesktop: [1199,4],
itemsDesktopSmall: [979,3],
itemsTablet: [768,3],
itemsMobile: [540,3],
itemsMobile: [380,2]
});
$('.next-client').on('click', function (event) {
owl.trigger('owl.next');
});
$('.prev-client').on('click', function (event) {
owl.trigger('owl.prev');
});
# | Section Type | Class used |
---|---|---|
1 | Contact Style 1 | .contact-1 |
2 | Contact Style 2 | .contact-2 |
3 | Contact Style 3 | .contact-3 |
4 | Contact Style 4 | .contact-4 |
For .contact-2 .contact-3 .contact-4 you need to include parsley.min.js for form validations and for .contact-2 and .contact-4 you need to include jquery.matchHeight-min.js for equal height columns.
Script for Contacts Style
// initialize email form validations
$('#contact-2,#contact-3,#contact-4').parsley();
// match height
$('.contact-2 .part,#contact-2 .col-md-6,.contact-4 .wrapper').matchHeight();
# | Section Type | Class used |
---|---|---|
1 | Content Block Style 1 | .content-block-1 |
2 | Content Block Style 2 | .content-block-2 |
3 | Content Block Style 3 | .content-block-3 |
4 | Content Block Style 4 | .content-block-4 |
5 | Content Block Style 5 | .content-block-5 |
6 | Content Block Style 6 | .content-block-6 |
7 | Content Block Style 7 | .content-block-7 |
8 | Content Block Style 8 | .content-block-8 |
9 | Content Block Style 9 | .content-block-9 |
10 | Content Block Style 10 | .content-block-10 |
11 | Content Block Style 11 | .content-block-11 |
12 | Content Block Style 12 | .content-block-12 |
13 | Content Block Style 13 | .content-block-13 |
14 | Content Block Style 14 | .content-block-14 |
15 | Content Block Style 15 | .content-block-15 |
16 | Content Block Style 16 | .content-block-16 |
17 | Content Block Style 17 | .content-block-17 |
For different Content Blocks we have used equal-height-columns, so for that purpose you need to include jquery.matchHeight-min.js
Script for Content Blocks
// match height
$('.feature,.part').matchHeight();
Counters Sectionscounters.html
# | Section Type | Class used |
---|---|---|
1 | Counters Style 1 | .counters-1 |
2 | Counters Style 2 | .counters-2 |
For Counters to work you need to include jquery.waypoints.min.js first and then jquery.counterup.min.js
Script for Counters
// Counters
$('.counter').counterUp({
delay:50,
time: 2000
});
Footer Sectionsfooters.html
# | Section Type | Class used |
---|---|---|
1 | Footer Style 1 | .footer-1 |
2 | Footer Style 2 | .footer-2 |
3 | Footer Style 3 | .footer-3 |
4 | Footer Style 4 | .footer-4 |
In .footer-4 for euqal height columns you need to include jquery.matchHeight-min.js and for google map, you need to include...
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initialize" async defer></script>
To get Google-Map API KEY Click Here.
// match height plugin for .footer-4
$('.footer-4 .col-md-3').matchHeight();
Script for custom google map,
// google map initialization
var marker;
function initialize()
{
// change map styles
var styles = [
{ stylers: [ { hue: '#2d313f' },{ saturation: '-20'},{ lightness: '5'} ] },
{
featureType: 'transit',
elementType: 'geometry.fill',
stylers: [ { hue: '#2d313f' },{ saturation: '-20'},{ lightness: '5'} ]
},
{
featureType: 'poi',
elementType: 'geometry.fill',
stylers: [ { hue: '#2d313f' },{ saturation: '-20'},{ lightness: '5'} ]
},
{
featureType: 'poi.government',
elementType: 'geometry.fill',
stylers: [ { hue: '#2d313f' },{ saturation: '-20'},{ lightness: '5'} ]
},
{
featureType: 'poi.sport_complex',
elementType: 'geometry.fill',
stylers: [ { hue: '#2d313f' },{ saturation: '-20'},{ lightness: '5'} ]
},
{
featureType: 'poi.attraction',
elementType: 'geometry.fill',
stylers: [ { hue: '#2d313f' },{ saturation: '-20'},{ lightness: '5'} ]
},
{
featureType: 'poi.business',
elementType: 'geometry.fill',
stylers: [ { hue: '#2d313f' },{ saturation: '-20'},{ lightness: '5'} ]
},
{
featureType: 'transit',
elementType: 'geometry.fill',
stylers: [ { hue: '#2d313f' },{ saturation: '-20'},{ lightness: '5'} ]
},
{
featureType: 'transit.station',
elementType: 'geometry.fill',
stylers: [ { hue: '#2d313f' },{ saturation: '-20'},{ lightness: '5'} ]
},
{
featureType: 'landscape',
elementType: 'geometry.fill',
stylers: [ { hue: '#2d313f' },{ saturation: '-20'},{ lightness: '5'} ]
},
{
featureType: 'road',
elementType: 'geometry.fill',
stylers: [ { hue: '#2d313f' },{ saturation: '-20'},{ lightness: '5'} ]
},
{
featureType: 'road.highway',
elementType: 'geometry.fill',
stylers: [ { hue: '#2d313f' },{ saturation: '-20'},{ lightness: '5'} ]
},
{
featureType: 'water',
elementType: 'geometry.fill',
stylers: [ { hue: '#2d313f' },{ saturation: '-20'},{ lightness: '5'} ]
}
];
//lat long position goes here
var my_position={lat:-37.817214,lng:144.955923}
var mapProp = {
zoom:14,
center:my_position,
mapTypeId:google.maps.MapTypeId.ROADMAP,
streetViewControl: false,
mapTypeControl: false,
scrollwheel: false
};
// change in icon/pin
var iconBase = 'assets/img/other/';
// map goes here
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
// set new map style here
map.setOptions({styles: styles});
marker = new google.maps.Marker({
position: my_position,
icon: iconBase + 'icon-location.png'
});
// set map
marker.setMap(map);
// info window
var contentString = 'Envato Inc.';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
marker.addListener('click', function() {
infowindow.open(map, marker);
map.setCenter(marker.getPosition());
map.setZoom(16);
});
// to center the marker always on zoom-in-out
google.maps.event.addListener(map,'center_changed',function() {
window.setTimeout(function() {
map.panTo(marker.getPosition());
},0);
});
}
Page Titlespage_titles.html
# | Section Type | Class used |
---|---|---|
1 | Simple Page Title Style 1 | .page-title-simple .page-title-1 |
2 | Simple Page Title Style 2 | .page-title-simple .page-title-2 |
3 | Simple Page Title Style 3 | .page-title-simple .page-title-3 |
4 | Simple Page Title Style 4 | .page-title-simple .page-title-4 |
5 | Modern Page Title Style 1 | .page-title-modern .page-title-md-1 |
6 | Modern Page Title Style 2 | .page-title-modern .page-title-md-2 |
7 | Modern Page Title Style 3 | .page-title-modern .page-title-md-3 |
8 | Modern Page Title Style 4 | .page-title-modern .page-title-md-4 |
# | Section Type | Class used |
---|---|---|
1 | Portfolio Style 1 | .portfolio-1 with .grid-type-1 and .grid-4 |
2 | Portfolio Style 2 | .portfolio-1 with .grid-type-1 and .grid-3 |
3 | Portfolio Style 3 | .portfolio-2 with .grid-type-2 and .grid-4 (without gutter) |
4 | Portfolio Style 4 | .portfolio-1 with .grid-type-2 and .grid-3 (with gutter) |
In Portfolio Style 1 and Portfolio Style 2, for different filters you need to include shuffle.min.js
In Portfolio Style 3 and Portfolio Style 4, for masonry layout you need to include imagesloaded.pkgd.min.js and masonry.pkgd.min.js
var $grid = $('.portfolio-2 .grid').masonry({
itemSelector: '.grid-item'
});
$grid.imagesLoaded().progress( function() {
$grid.masonry('layout');
});
# | Section Type | Class used |
---|---|---|
1 | Price Table Style 1 | .price-1 |
2 | Price Table Style 2 | .price-2 |
3 | Price Table Style 3 | .price-3 |
4 | Price Table Style 4 | .price-4 |
In .price-2 for equal height table you need to include jquery.matchHeight-min.js
Script for .price-2
// match height for .price-2 table
$('.price-2 .table-wrapper .features').matchHeight();
Promo Stylespromo.html
# | Section Type | Class used |
---|---|---|
1 | Promo Style 1 | .promo-1 |
2 | Promo Style 2 | .promo-2 |
3 | Promo Style 3 | .promo-3 |
4 | Promo Style 4 | .promo-4 |
5 | Promo Style 5 | .promo-5 |
6 | Promo Style 6 | .promo-6 |
In .promo-4 for background video you need to include jquery.vide.min.js and for Popup Video in same section, you need to include magnific-popup.css and jquery.magnific-popup.min.js
Initialize background video in .promo-4
<!-- Promo Style 4 -->
<section class="section-padding-small promo-4 bg-cover-simple" data-vide-bg="path to video/winter">
.... remaining content goes here ....
</section>
HTML for Popup video in .promo-4
<!-- Promo Style 4 -->
<section class="section-padding-small promo-4 bg-cover-simple" data-vide-bg="path to video/winter">
.... remaining content goes here ....
<!-- play button -->
<div class="foo">
<a class="popup-video" href="path to Youtube/vimeo video">
<span class="fa fa-play-circle play-button bttn-scale"></span>
</a>
</div>
.... remaining content goes here ....
</section>
Script for Popup video in .promo-4
// video popup
$('.popup-video').magnificPopup({
type: 'iframe',
mainClass: 'mfp-fade my-video',
});
Sign In Sectionssign_in.html
# | Section Type | Class used |
---|---|---|
1 | Sign In Style 1 | .sign-in-1 |
1 | Sign In Style 2 | .sign-in-2 |
1 | Sign In Style 3 | .sign-in-3 |
In .sign-in-2 for equal height columns you need to include jquery.matchHeight-min.js and in .sign-in-3 for video background you need to include jquery.vide.min.js
Script for .sign-in-2
//match height
$('.eq-ht').matchHeight();
For video background in .sign-in-3 please refer .promo-4
Team Sectionsteam.html
# | Section Type | Class used |
---|---|---|
1 | Team Style 1 | .team-1 |
2 | Team Style 2 | .team-2 |
3 | Team Style 3 | .team-3 |
4 | Team Style 4 | .team-4 |
For ie-9 fallback of CSS in .team-2 and .team-4 include ie.css and for carousel in .team-3 include owl-carousel.css, owl.carousel.js and jquery.matchHeight-min.js
CSS Fallback for .team-2 and .team-4 used in ie.css
/* team style 2 for ie */
.team-2 img {
display:block;
border-radius:5px 5px 0px 0px;
}
.team-2 figcaption {
background:rgba(17, 17, 17,1);
border-radius:0px 0px 5px 5px;
position:relative;
}
.team-2 figcaption .position {
opacity:1;
}
/* team style 4 for ie */
.team-4 .img-wrapper img {
border-radius:5px 5px 0px 0px;
}
.team-4 figure figcaption {
position:relative;
background:rgba(46, 113, 242,1);
border-radius:0px 0px 5px 5px;
}
Script for .team-3
// equal height
$('.part').matchHeight();
// team-3 slider/carousel
var owl = $("#team-3");
owl.owlCarousel({
singleItem: true,
autoPlay: true,
navigation: false,
slideSpeed: 300,
paginationSpeed: 500,
rewindSpeed: 400
});
Testimonials SectionsTestimonials.html
# | Section Type | Class used |
---|---|---|
1 | Testimonial Style 1 | .testimonial-1 |
2 | Testimonial Style 2 | .testimonial-2 |
3 | Testimonial Style 3 | .testimonial-3 |
4 | Testimonial Style 4 | .testimonial-4 |
5 | Testimonial Style 5 | .testimonial-5 |
For .testimonial-2, .testimonial-3 and .testimonial-5 you need to include owl-carousel.css and owl.carousel.js. For .testimonial-4 you need to include masonry.pkgd.min.js
Scripts for Testimonials
// testimonial style 2
var owl = $("#testimonial2");
owl.owlCarousel({
items: 3,
autoPlay: true,
navigation: false,
slideSpeed: 300,
paginationSpeed: 300,
rewindSpeed: 400,
itemsDesktop: [1199,3],
itemsDesktopSmall: [979,2],
itemsTablet: [768,2],
itemsMobile: [540,1]
});
// next slide
$('.next-feature').on('click', function (event) {
owl.trigger('owl.next');
});
// prev slide
$('.prev-feature').on('click', function (event) {
owl.trigger('owl.prev');
});
// testimonial style 3
var owl2 = $("#testimonial3");
owl2.owlCarousel({
items: 1,
autoPlay: true,
navigation: false,
slideSpeed: 300,
paginationSpeed: 300,
rewindSpeed: 400,
itemsDesktop: [1199,1],
itemsDesktopSmall: [979,1],
itemsTablet: [768,1],
itemsMobile: [540,1]
});
// next slide
$('.next-feature2').on('click', function (event) {
owl2.trigger('owl.next');
});
// prev slide
$('.prev-feature2').on('click', function (event) {
owl2.trigger('owl.prev');
});
// testimonial style 5
var owl3 = $("#testimonial-5");
owl3.owlCarousel({
items: 3,
autoPlay: true,
navigation: false,
slideSpeed: 300,
paginationSpeed: 300,
rewindSpeed: 400,
itemsDesktop: [1199,3],
itemsDesktopSmall: [979,2],
itemsTablet: [768,2],
itemsMobile: [540,1]
});
// masonry layout
$('.testimonial-4 .all-details-wrapper').masonry({
itemSelector: '.col-xs-4'
});