Documentation

Elements
For Accordions, Tabs and Alerts to work correctly you need to include bootstrap.min.js
Accordions
<!-- Accordion Wrapper -->
<div class="panel-group" id="accordion">
<!-- Accordion panel 1 -->
<div class="panel panel-default">
<!-- Accordion Panel Heading -->
<div class="panel-heading">
<div class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
.... Accordion Heading 1 ....
</a>
</div>
</div>
<!-- Accordion Panel Body Text -->
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
.... accordion 1 info/data goes here ....
</div>
</div>
</div>
<!-- Accordion panel 1 -->
<div class="panel panel-default">
<!-- Accordion Panel Heading -->
<div class="panel-heading">
<div class="panel-title">
<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
.... Accordion Heading 2 ....
</a>
</div>
</div>
<!-- Accordion Panel Body Text -->
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
.... accordion 2 info/data goes here ....
</div>
</div>
</div>
<!-- Accordion panel 1 -->
<div class="panel panel-default">
<!-- Accordion Panel Heading -->
<div class="panel-heading">
<div class="panel-title">
<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
.... Accordion Heading 3 goes here ....
</a>
</div>
</div>
<!-- Accordion Panel Body Text -->
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
.... accordion 3 info/data goes here ....
</div>
</div>
</div>
</div>
To change some CSS design aspects of Accordion look for Accordion Styles in main.style.css
Tabs
<!-- Tabs Navigation -->
<ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
<li class="active"><a href="#tab1" data-toggle="tab">Tab 1</a></li>
<li><a href="#tab2" data-toggle="tab">Tab 2</a></li>
<li><a href="#tab3" data-toggle="tab">Tab 3</a></li>
</ul>
<!-- Tabs Content -->
<div id="my-tab-content" class="tab-content">
<div class="tab-pane active" id="tab1"> .... Tab 1 Content goes here .... </div>
<div class="tab-pane" id="tab2"> .... Tab 2 content goes here .... </div>
<div class="tab-pane" id="tab3"> .... Tab 3 Content goes here .... </div>
</div>
To change some CSS design aspects of Tabs look for Tabs Styles in main.style.css
AlertsSimple Alert
<!-- Simple Success Alert -->
<div class="alert alert-success" role="alert">
<strong>Well done!</strong> Please read this important alert message.
</div>
Dismissible Alerts
<!-- Dismissible Success Alert -->
<div class="alert alert-success alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<strong>Well done!</strong> Read this important alert message.
</div>
There are other alert types like alert-info, alert-warning, alert-danger etc.
Blockquotes
<!-- Blockquote style 1 -->
<blockquote class="quote-1">.... Blockquote goes here ....</blockquote>
<!-- Blockquote style 2 -->
<blockquote class="quote-2">.... Blockquote goes here ....</blockquote>
<!-- Blockquote style 3 -->
<blockquote class="quote-3">.... Blockquote goes here ....</blockquote>
<!-- Blockquote style 4 -->
<blockquote class="quote-4">.... Blockquote goes here ....</blockquote>
Carousels
For Carousels you need to include owl-carousel.css and owl.carousel.js
HTML Part
<!-- Carousel -->
>div id="testimonial">
<div class="item"> ... Carousel slide 1/text goes here</div>
<div class="item"> ... Carousel slide 2/text goes here</div>
<div class="item"> ... Carousel slide 3/text goes here</div>
</div>
Script Part
// Carousel
var owl = $("#testimonial");
owl.owlCarousel({
singleItem:true,
autoPlay: true,
navigation: false,
slideSpeed: 300,
paginationSpeed: 300,
rewindSpeed: 400
});
For Counters you need to include jquery.waypoints.min.js first and then jquery.counterup.min.js
HTML Part
<!-- On Scroll Animated Counter -->
<span class="timer">175498</h2>
Script Part
// on scroll animated timer/counter
$('.timer').counterUp({
delay: 20,
time: 2000
});
Dividers
<!-- Divider style 1 -->
<div class="divider">><i class="fa fa-heart"></i></div>
<!-- Divider style 2 -->
<div class="divider divider-right"><i class="fa fa-heart"></i></div>
<!-- Divider style 3 -->
<div class="divider divider-center"><i class="fa fa-heart"></i></div>
<!-- Divider style 4 -->
<div class="divider divider-short divider-center"><i class="fa fa-heart"></i></div>
<!-- Divider style 5 -->
<div class="divider divider-short divider-right"><i class="fa fa-heart"></i></div>
<!-- Divider style 6 -->
<div class="divider divider-short"><i class="fa fa-heart"></i></div>
Instead of <i class="fa fa-heart"> you can use any other symbol/icon.
Simple Progress Bars
<!-- Progress Bars style 1 -->
<div class="progress-bar-base progress-bar-1">
<div class="bar">
<div class="hollow"></div>
<div class="fill" style="width:80%">
<span class="skill">HTML</span>
<span class="percent">80%</span>
</div>
</div>
</div>
<!-- Progress Bars style 2 -->
<div class="progress-bar-base progress-bar-2">
<div class="bar">
<div class="hollow"></div>
<div class="fill" style="width:80%">
<span class="skill">HTML</span>
<span class="percent">80%</span>
</div>
</div>
</div>
<!-- Progress Bars style 3 -->
<div class="progress-bar-base progress-bar-3">
<div class="bar">
<div class="hollow"></div>
<div class="fill" style="width:80%">
<span class="skill">HTML</span>
<span class="percent">80%</span>
</div>
</div>
</div>
<!-- Progress Bars style 4 -->
<div class="progress-bar-base progress-bar-4">
<div class="bar">
<div class="hollow"></div>
<div class="fill progress-bar-striped progress-bar-success" style="width:80%">
<span class="skill">HTML</span>
<span class="percent">80%</span>
</div>
</div>
</div>
<!-- Progress Bars style 4 with animation -->
<div class="progress-bar-base progress-bar-5">
<div class="bar">
<div class="hollow"></div>
<div class="fill progress-bar-striped progress-bar-success animate-stripes" style="width:80%">
<span class="skill">HTML</span>
<span class="percent">80%</span>
</div>
</div>
</div>
Modal Popup & Image Gallery
For Modal Popup and Image Gallery you need to include magnific-popup.css and jquery.magnific-popup.min.js
1. Simple Lightbox with single image
<!-- Simple Lightbox with single image -->
<div class="multi-lightbox">
<a title="first image" href="..path to image../placeholder1.jpg">
<img class="img-responsive" src="..path to thumbnail../placeholder1.jpg" alt="">
</a>
<a title="second image" href="..path to image../placeholder4.jpg">
<img class="img-responsive" src="..path to thumbnail../placeholder4.jpg" alt="">
</a>
<a title="third image" href="..path to image../placeholder6.jpg">
<img class="img-responsive" src="..path to thumbnail../placeholder6.jpg" alt="">
</a>
</div>
Script for Simple Lightbox with single image
// simple lightbox
$('.multi-lightbox').magnificPopup({
delegate: 'a',
type: 'image',
mainClass: 'mfp-fade'
});
2. Lightbox Gallery
<!-- Simple Lightbox Gallery -->
<div class="lightbox-gallery">
<a title="first image" href="..path to image../placeholder1.jpg">
<img class="img-responsive" src="..path to thumbnail../placeholder1.jpg" alt="">
</a>
<a title="second image" href="..path to image../placeholder4.jpg">
<img class="img-responsive" src="..path to thumbnail../placeholder4.jpg" alt="">
</a>
<a title="third image" href="..path to image../placeholder6.jpg">
<img class="img-responsive" src="..path to thumbnail../placeholder6.jpg" alt="">
</a>
</div>
Script for Simple Lightbox Gallery
// lightbox gallery
$('.lightbox-gallery').magnificPopup({
delegate: 'a',
type: 'image',
mainClass: 'mfp-fade',
gallery: { enabled:true }
});
3. Zoom Image Gallery
<!-- Zoom Image Gallery -->
<div class="zoom-gallery">
<a title="first image" href="..path to image../placeholder1.jpg">
<img class="img-responsive" src="..path to thumbnail../placeholder1.jpg" alt="">
</a>
<a title="second image" href="..path to image../placeholder4.jpg">
<img class="img-responsive" src="..path to thumbnail../placeholder4.jpg" alt="">
</a>
<a title="third image" href="..path to image../placeholder6.jpg">
<img class="img-responsive" src="..path to thumbnail../placeholder6.jpg" alt="">
</a>
</div>
Script for Zoom Image Gallery
// zoom gallery
$('.zoom-gallery').magnificPopup({
delegate: 'a',
type: 'image',
closeOnContentClick: false,
closeBtnInside: false,
mainClass: 'mfp-with-zoom mfp-img-mobile',
image: { verticalFit: true },
gallery: { enabled: true },
zoom: {
enabled: true,
duration: 300,
opener: function(element) {
return element.find('img');
}
}
});
4. Simple Modal Popup
<!-- Simple Modal Link -->
<a href="#simple-popup" class="simple-modal simple-popup-link">Open Popup</a>
<!-- Simple Modal Popup -->
<div id="simple-popup" class="just-center mfp-hide modal-block">
.... text goes here ....
</div>
Script for Simple Modal Popup
// simple modal
$('.simple-popup-link').magnificPopup({
type:'inline',
mainClass: 'my-simple mfp-fade'
});
5. Zoom Modal Popup
<!-- Zoom Modal Link -->
<a href="#zoom-popup" class="zoom-popup-link simple-modal">Open Popup</a>
<!-- Zoom Modal Popup -->
<div id="zoom-popup" class="just-center mfp-hide zoom-anim-dialog modal-block">
.... text goes here ....
</div>
Script for Zoom Modal Popup
// zoom modal
$('.zoom-popup-link').magnificPopup({
type:'inline',
preloader: false,
removalDelay: 300,
mainClass: 'my-mfp-zoom-in'
});
6. Slide Modal Popup
<!-- Slide Modal Link -->
<a href="#slide-popup" class="simple-modal slide-popup-link">Open Popup</a>
<!-- Slide Modal Popup -->
<div id="slide-popup" class="just-center mfp-hide zoom-anim-dialog modal-block">
.... text goes here ....
</div>
Script for Slide Modal Popup
// slide modal
$('.slide-popup-link').magnificPopup({
type:'inline',
preloader: false,
removalDelay: 300,
mainClass: 'my-mfp-slide-bottom'
});
7. Modal Popup with dismiss button
<!-- Modal with dismiss button link -->
<a href="#zoom-dismiss-popup" class="simple-modal dismiss-popup-link">Open Popup</a>
<!-- Modal with dismiss button -->
<div id="zoom-dismiss-popup" class="just-center mfp-hide zoom-anim-dialog modal-block">
.... text goes here ....
<a class="popup-modal-dismiss" href="#">Dismiss</a>
</div>
Script for Modal Popup with dismiss button
// poup with dismiss button
$('.dismiss-popup-link').magnificPopup({
type:'inline',
preloader: false,
midClick: true,
removalDelay: 300,
modal: true,
mainClass: 'my-mfp-zoom-in'
});
// prevent closing dismiss on overlay
$(document).on('click', '.popup-modal-dismiss', function (e) {
e.preventDefault();
$.magnificPopup.close();
});
8. Video on popup
<!-- YouTube Video Popup -->
<a class="simple-modal popup-youtube" href="http://www.youtube.com/watch?v=videoID">YouTube Video</a>
Script for video on popup
$('.popup-youtube').magnificPopup({
disableOn: 700,
type: 'iframe',
mainClass: 'mfp-fade my-video',
preloader: false
});
For Video Background you need to include jquery.vide.min.js
1. Simple Video Background
<!-- Simple Video Background -->
<div data-vide-bg="assets/video/winter">
.... content goes here ....
</div>
Here you just need to provide a link to a video with initials only (without extension)
2. Video Background with Play/Pause on hover
<!-- Play-Pause Background Video ON mouse hover -->
<div class="mouse-hover" data-vide-bg="assets/video/winter">
.... content goes here ....
</div>
// play-pause video on hover
$(document).ready(function() {
'use strict';
var video = $(".mouse-hover").data("vide").getVideoObject();
video && video.pause();
var figure = $(".mouse-hover").hover( hoverVideo, hideVideo );
function hoverVideo(e) { video.play(); }
function hideVideo(e) { video.pause(); }
});
3. Video Background with Play/Pause on hover
<!-- Play-Pause video background using button -->
<div class="play-pause" data-vide-bg="assets/video/winter">
<button id="playbttn"><i class="ti-control-play"></i></button>
</div>
/* playbutton */
#playbttn {
background:none;
padding:0px
}
#playbttn i {
margin-left:0px;
display:block;
width:35px;
height:35px;
background:#FFFFFF;
font-size:25px;
text-align:center;
padding-top:5px;
color:#111111
}
.change-icon:before {
content:"\e6ae"
}
// play-pause video on button click
$(document).ready(function() {
var video = $(".play-pause").data("vide").getVideoObject();
video && video.pause();
var trackvid=0;
$('#playbttn').on('click', function() {
if(trackvid==0) {
video.play();
trackvid=1;
$("#playbttn i").addClass("change-icon");
}
else {
video.pause();
trackvid=0;
$("#playbttn i").removeClass("change-icon");
}
});
});
Paginations
<!-- Pagination style 1 -->
<nav role="navigation">
<ul class="mod-pagination">
<li class="button"><a class="disabled" href="#0">Prev</a></li>
<li><a class="current" href="#0">1</a></li>
<li><a href="#0">2</a></li>
<li><a href="#0">3</a></li>
<li><a href="#0">4</a></li>
<li><span>...</span></li>
<li><a href="#0">20</a></li>
<li class="button"><a href="#0">Next</a></li>
</ul>
</nav>
<!-- Pagination style 2 -->
<nav role="navigation">
<ul class="mod-pagination no-space">
<li class="button"><a href="#0">Prev</a></li>
<li><a href="#0">1</a></li>
<li><a href="#0">2</a></li>
<li><a class="current" href="#0">3</a></li>
<li><a href="#0">4</a></li>
<li><span>...</span></li>
<li><a href="#0">20</a></li>
<li class="button"><a href="#0">Next</a></li>
</ul>
</nav>
<!-- Pagination style 3 -->
<nav role="navigation">
<ul class="mod-pagination move-buttons custom-icons">
<li class="button"><a class="disabled" href="#0">Prev</a></li>
<li><a class="current" href="#0">1</a></li>
<li><a href="#0">2</a></li>
<li><a href="#0">3</a></li>
<li><a href="#0">4</a></li>
<li><span>...</span></li>
<li><a href="#0">20</a></li>
<li class="button"><a href="#0">Next</a></li>
</ul>
</nav>
<!-- Pagination style 4 -->
<nav role="navigation">
<ul class="mod-pagination no-space move-buttons custom-icons">
<li class="button"><a href="#0">Prev</a></li>
<li><a href="#0">1</a></li>
<li><a href="#0">2</a></li>
<li><a class="current" href="#0">3</a></li>
<li><a href="#0">4</a></li>
<li><span>...</span></li>
<li><a href="#0">20</a></li>
<li class="button"><a href="#0">Next</a></li>
</ul>
</nav>
Use of Parallax
For Parallax you need to include stellar.js
HTML PartFirst of all, apply .bg-cover class to the <section>...</section> tag and then use data-stellar-background-ratio="0.5".
For Example,
<section class="bg-cover" data-stellar-background-ratio="0.5">
.... content goes here ....
</section>
Then initialize stellar.js for non-touch devices as,
if(!Modernizr.touch){
$(function(){
$.stellar({
horizontalScrolling: false,
verticalOffset: 40
});
});
}
You may view this effect in home_parallax.html
<!-- form input -->
<input type="text" placeholder="this is input field">
<!-- textarea input -->
<textarea placeholder="Your Message Goes Here"></textarea>
<!-- checkbox -->
<div class="checkbox">
<input id="checkbox" type="checkbox" name="check" value="check1" checked>
<label for="checkbox">Remember Me</label>
</div>
<!-- Radio button -->
<div class="radio">
<input id="male" type="radio" name="gender" value="male">
<label for="male">Male</label>
<input id="female" type="radio" name="gender" value="female">
<label for="female">Female</label>
</div>
For form validations we have used parsley.min.js.
<!-- Very Small Button -->
<a class="bttn bttn-very-small bttn-blue">Button</a>
<!-- small sized button -->
<a class="bttn bttn-small bttn-blue">Button</a>
<!-- medium sized button -->
<a class="bttn bttn-med bttn-blue">Button</a>
<!-- large sized button -->
<a class="bttn bttn-large bttn-blue">Button</a>
<!-- black button -->
<a class="bttn bttn-large bttn-black">Button</a>
<!-- green button -->
<a class="bttn bttn-large bttn-green">Button</a>
<!-- light button -->
<a class="bttn bttn-large bttn-light">Button</a>
<!-- light -alternate button -->
<a class="bttn bttn-large bttn-light-alt">Button</a>
<!-- shadow on button hover -->
<a class="bttn bttn-med bttn-blue bttn-hovr-shadow">Button</a>
<!-- dark shadow on button hover -->
<a class="bttn bttn-med bttn-blue bttn-hovr-shadow-dark">Button</a>
<!-- button shadow -->
<a class="bttn bttn-med bttn-blue bttn-shadow">Button</a>
<!-- disabled button -->
<a class="bttn bttn-med bttn-disable">Button</a>
<!-- button with radius 5px -->
<a class="bttn bttn-med bttn-blue bttn5">Button</a>
<!-- button with radius 75px -->
<a class="bttn bttn-med bttn-blue bttn75">Button</a>
<!-- button-scale on-click -->
<a class="bttn bttn-med bttn-blue bttn-scale">Button</a>
<!-- button with right side icon -->
<a class="bttn bttn-med bttn-blue">Button<i class="ti-alarm-clock right-icon"></i></a>
<!-- button with left side icon -->
<a class="bttn bttn-med bttn-blue"><i class="ti-alarm-clock left-icon"></i>Button</a>
For another variants, please refer main.style.css