Documentation

logo

Hero Headers

How to use all Hero-Headers

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 ....
}

Hero HeadersHero_Headers.html
# Section Type Class used Extra Plugin
1 Hero Header Style 1 .hero-header-1 owl-carousel.css animate.css owl.carousel.js
2 Hero Header Style 2 .hero-header-2 magnific-popup.css jquery.magnific-popup.min.js
3 Hero Header Style 3 .hero-header-3 -
4 Hero Header Style 4 .hero-header-4 magnific-popup.css jquery.magnific-popup.min.js
5 Hero Header Style 5 .hero-header-5 magnific-popup.css jquery.magnific-popup.min.js
6 Hero Header Style 6 .hero-header-6 -
7 Hero Header Style 7 .hero-header-7 -
8 Hero Header Style 8 .hero-header-8 magnific-popup.css jquery.magnific-popup.min.js jquery.vide.min.js
9 Hero Header Style 9 .hero-header-9 magnific-popup.css jquery.magnific-popup.min.js
10 Hero Header Style 10 .hero-header-10 -
11 Hero Header Style 11 .hero-header-11 owl-carousel.css owl.carousel.js
12 Hero Header Style 12 .hero-header-12 -
13 Hero Header Style 13 .hero-header-13 jquery.countdown.min.js

For all required scripts in Hero Headers please checkout main.js where they are seperated with different functions for different Hero Headers.

Use of Countdown Plugin

For Countdowns you need to include jquery.countdown.min.js

HTML Part

<!-- days-hours-minutes-seconds -->
<span class="value" id="days">999</span>
<span class="value" id="hours">999</span>
<span class="value" id="minutes">999</span>
<span class="value" id="seconds">999</span>

Script Part

// initialize counter
$('#countdown').countdown('2016/09/12 00:00:00', function(event) {
    $('#days').html(event.strftime('%D'));
    $('#hours').html(event.strftime('%H'));
    $('#minutes').html(event.strftime('%M'));
    $('#seconds').html(event.strftime('%S'));
});