Installation:

Passion is HTML template so there's no really "installation" required just unzip the main file you've downloaded from wrapbootstrap and after unziping you have your all template ready to be used.

Setting Up The Grid:

Before starting to work deeper with this template, you'll need to know how to use template's grid, it's simple and easy to use. Passion is being build using one of the most popular Framwork, Twitter bootstrap, which means your site container is 12-column grids wide.To make it work without problem you be using columns for everything .

Working With Navigation:

Navbars are responsive meta components that serve as navigation headers for your application or site. They begin collapsed (and are toggleable) in mobile views and become horizontal as the available viewport width increases.

Your code should look like the following.

              
              <div class="navbar navbar-default navbar-fixed-top" id="ha-header">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
      <a class="navbar-brand logo" href="index.html">Project name</a> </div>
    <div class="navbar-collapse collapse ">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#top">home</a></li>
        <li><a href="#services ">Services</a></li>
        <li><a href="#portfolio ">portfolio</a></li>
        <li><a href="#about">about</a></li>
        <li><a href="#projects">projects</a></li>
        <li><a href="#contact">contact</a></li>
      </ul>
    </div>
  </div>
</div>
              

Menu CSS:

Your code should look like the following.

              
              .header {
background-color: #EB5055
}
.logo {
background: url("../img/passion.png") no-repeat scroll 0 0 transparent;
height: 45px;
text-indent: -9999px;
width: 112px;
}
/**bootstrap over style for menu**/
.navbar-default {
background-color: #303441;
border-bottom: 2px solid #4A4F5E;
top: 0;
left: 0;
position: fixed;
right: 0;
z-index: 1030;
margin-bottom: 20px;
min-height: 50px;
-webkit-transform: translateY(0%);
-moz-transform: translateY(0%);
transform: translateY(0%);
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
transition: all 0.5s;
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
color: #EB5055;
}
.navbar-default .navbar-nav > li > a {
color: #A3A7B9;
font-size: 1em;
text-transform: uppercase;
}
/**small menu**/
.navbar-default .navbar-toggle {
border-color: #EB5055;
border: 0 none;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #EB5055
}
.navbar-toggle .icon-bar {
border-radius: 0;
display: block;
height: 4px;
width: 30px
}
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
background-color: #EB5055;
border-radius: 0 0 0 0;
}
.navbar-default .navbar-toggle:hover .icon-bar, .navbar-default .navbar-toggle:focus .icon-bar {
background-color: #303441
}
.ha-header .navbar-toggle {
border-color: #EB5055;
border: 0 none;
}
.ha-header .navbar-toggle .icon-bar {
background-color: #EB5055
}
.ha-header .navbar-toggle .icon-bar {
border-radius: 0;
display: block;
height: 4px;
width: 30px
}
.ha-header .navbar-toggle:hover, .ha-header .navbar-toggle:focus {
background-color: #EB5055;
border-radius: 0 0 0 0;
}
.ha-header .navbar-toggle:hover .icon-bar, .ha-header .navbar-toggle:focus .icon-bar {
background-color: #303441
}
.ha-header {
background-color: #303441;
border-bottom: 2px solid #4A4F5E;
top: 0;
left: 0;
position: fixed;
right: 0;
z-index: 1030;
margin-bottom: 20px;
min-height: 50px;
-webkit-transform: translateY(0%);
-moz-transform: translateY(0%);
transform: translateY(0%);
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
transition: all 0.5s;
}
.ha-header .navbar-nav > li > a {
color: #A3A7B9;
font-size: 1em;
text-transform: uppercase;
}
.ha-header .navbar-nav > .active > a, .ha-header .navbar-nav > .active > a:hover, .ha-header .navbar-nav > .active > a:focus {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
color: #EB5055;
}
.ha-header .navbar-nav > li > a:hover, .ha-header .navbar-nav > li > a:focus {
background-color: rgba(0, 0, 0, 0);
}
/* Individual states */

.ha-header-large {
padding: 25px 0;
}
.ha-header-small {
padding: 6px 0 0;
}
.ha-header-small .navbar-nav > li > a {
padding-bottom: 10px;
padding-top: 10px;
}
.ha-header-small .logo {
background: url("../img/passion_small.png") no-repeat scroll 0 0 transparent;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
transition: all 0.5s;
}


              

Flex slider

Your code should look like the following.

              
              
              <div class="flexslider">
    <ul class="slides">
      <li><img src="img/slider/1.jpg" alt="slider" />
        <p class="flex-caption">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula.</p>
      </li>
      <li><img src="img/slider/2.jpg"  alt="slider" />
        <p class="flex-caption">Lorem ipsum dolor sit amet.</p>
      </li>
      <li> <img src="img/slider/3.jpg"  alt="slider" />
        <p class="flex-caption">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p>
      </li>
      <li> <img src="img/slider/4.jpg"  alt="slider" />
        <p class="flex-caption">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. </p>
      </li>
      <li> <img src="img/slider/5.jpg"  alt="slider" />
        <p class="flex-caption">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. </p>
      </li>
      <li> <img src="img/slider/6.jpg"  alt="slider" />
        <p class="flex-caption">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. </p>
      </li>
    </ul>
  </div>
              

Your CSS code.

           
.flex-container a:active, .flexslider a:active, .flex-container a:focus, .flexslider a:focus {
outline: none;
}
.slides, .flex-control-nav, .flex-direction-nav {
margin: 0;
padding: 0;
list-style: none;
}
.flexslider .slides > li {
display: none;
-webkit-backface-visibility: hidden;
} /* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides img {
width: 100%;
display: block;
}
.flex-pauseplay span {
text-transform: capitalize;
}
.slides:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
html[xmlns] .slides {
display: block;
}
* html .slides {
height: 1%;
}
/* No JavaScript Fallback */
/* If you are not using another script, such as Modernizr, make sure you
 * include js that eliminates this class on page load */
.no-js .slides > li:first-child {
display: block;
}
/* FlexSlider Default Theme
*********************************/
.flexslider {
margin: 0;
position: relative;
-webkit-border-radius: 4px;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
zoom: 1;
}
.flex-viewport {
max-height: 2000px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
transition: all 1s ease;
}
.loading .flex-viewport {
max-height: 300px;
}
.flexslider .slides {
zoom: 1;
}
.carousel li {
margin-right: 5px
}
.flex-caption {
background: transparent;
color: #FFF;
font-size: 2.8em;
font-weight: bold;
left: 5%;
margin-bottom: 0;
max-width: 50%;
padding: 20px;
position: absolute;
text-transform: uppercase;
top: 35%;
z-index: 500;
text-shadow: 3px 2px 0 rgba(0, 0, 0, 0.3)
}
/* Direction Nav */
.flex-direction-nav a {
background: url("../img/bg_direction_nav.png") no-repeat scroll 0 0 #303441;
cursor: pointer;
display: block;
height: 47px;
margin: -20px 0 0;
opacity: 0;
position: absolute;
text-indent: -9999px;
top: 50%;
width: 44px;
}
.flex-direction-nav .flex-next {
background-position: 100% 0;
right: 0;
}
.flex-direction-nav .flex-prev {
left: 0;
}
.flexslider:hover .flex-next {
opacity: 0.8;
right: 0;
}
.flexslider:hover .flex-prev {
opacity: 0.8;
left: 0;
}
.flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover {
opacity: 1;
}
.flex-direction-nav .disabled {
opacity: .3!important;
filter:alpha(opacity=30);
cursor: default;
}
/* Control Nav */
.flex-control-nav {
width: 100%;
position: absolute;
bottom: -40px;
text-align: center;
display: none;
}
.flex-control-nav li {
margin: 0 6px;
display: inline-block;
zoom: 1;
*display: inline;
}
.flex-control-paging li a {
width: 11px;
height: 11px;
display: block;
background: #666;
background: rgba(0, 0, 0, 0.5);
cursor: pointer;
text-indent: -9999px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
-o-border-radius: 20px;
border-radius: 20px;
box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
}
.flex-control-paging li a:hover {
background: #333;
background: rgba(0, 0, 0, 0.7);
}
.flex-control-paging li a.flex-active {
background: #000;
background: rgba(0, 0, 0, 0.9);
cursor: default;
}
.flex-control-thumbs {
margin: 5px 0 0;
position: static;
overflow: hidden;
}
.flex-control-thumbs li {
width: 25%;
float: left;
margin: 0;
}
.flex-control-thumbs img {
width: 100%;
display: block;
opacity: .7;
cursor: pointer;
}
.flex-control-thumbs img:hover {
opacity: 1;
}
.flex-control-thumbs .active {
opacity: 1;
cursor: default;
}
@media (min-width: 768px) {
.flex-caption {
font-size:1.5em;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3)
}
}
@media (min-width: 320px) and (max-width: 769px) {
.flex-caption {
font-size:.9em;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3)
}
}
 @media screen and (max-width: 860px) {
.flex-direction-nav .flex-prev {
opacity: 1;
left: 0;
}
.flex-direction-nav .flex-next {
opacity: 1;
right: 0;
}
}

         
              

Portfolio Filter

Your code should look like the following.

			<div class="col-xs-12 col-md-12 col-sm-12">
        <section id="filter_header" class="clearfix portfolioFilter">
          <ul id="filters" class="option-set clearfix" data-option-key="filter">
            <li><a href="#filter" data-option-value="*" class="selected">all</a></li>
            <li><a href="#filter" data-option-value=".Logo_design">Logo Design</a></li>
            <li><a href="#filter" data-option-value=".branding">Branding</a></li>
            <li><a href="#filter" data-option-value=".copywriting">Copywriting</a></li>
            <li><a href="#filter" data-option-value=".print">Print</a></li>
          </ul>
        </section>
        <div id="filter_container" class="clearfix portfolioContainer">
          <div class="element Logo_design copywriting" data-category="Logo_design">
            <div class="hexagon"> <a href="#"> <span class="mask"></span> <img src="img/2.jpg" alt="filter" /> </a>
              <div class="portfolio-title">
                <h4>John Doe<span>Art-Director</span></h4>
              </div>
            </div>
          </div>
          <div class="element branding copywriting" data-category="branding">
            <div class="hexagon"> <a href="#"> <span class="mask"></span> <img src="img/1.jpg"  alt="filter"/> </a>
              <div class="portfolio-title">
                <h4>John Doe<span>Art-Director</span></h4>
              </div>
            </div>
          </div>
          <div class="element Logo_design copywriting" data-category="Logo_design">
            <div class="hexagon"> <a href="#"> <span class="mask"></span> <img src="img/3.jpg"  alt="filter"/> </a>
              <div class="portfolio-title">
                <h4>John Doe<span>Art-Director</span></h4>
              </div>
            </div>
          </div>
          <div class="element Logo_design copywriting" data-category="Logo_design">
            <div class="hexagon"> <a href="#"> <span class="mask"></span> <img src="img/2.jpg"  alt="filter"/> </a>
              <div class="portfolio-title">
                <h4>John Doe<span>Art-Director</span></h4>
              </div>
            </div>
          </div>
          <div class="element branding copywriting" data-category="branding">
            <div class="hexagon"> <a href="#"> <span class="mask"></span> <img src="img/1.jpg"  alt="filter"/> </a>
              <div class="portfolio-title">
                <h4>John Doe<span>Art-Director</span></h4>
              </div>
            </div>
          </div>
          <div class="element Logo_design copywriting" data-category="Logo_design">
            <div class="hexagon"> <a href="#"> <span class="mask"></span> <img src="img/3.jpg"  alt="filter"/> </a>
              <div class="portfolio-title">
                <h4>John Doe<span>Art-Director</span></h4>
              </div>
            </div>
          </div>
          <div class="element other print" data-category="other">
            <div class="hexagon"> <a href="#"> <span class="mask"></span> <img src="img/2.jpg"  alt="filter"/> </a>
              <div class="portfolio-title">
                <h4>John Doe<span>Art-Director</span></h4>
              </div>
            </div>
          </div>
          <div class="element copywriting" data-category="copywriting">
            <div class="hexagon"> <a href="#"> <span class="mask"></span> <img src="img/3.jpg"  alt="filter"/> </a>
              <div class="portfolio-title">
                <h4>John Doe<span>Art-Director</span></h4>
              </div>
            </div>
          </div>
          <div class="element copywriting" data-category="copywriting">
            <div class="hexagon"> <a href="#"> <span class="mask"></span> <img src="img/1.jpg"  alt="filter"/> </a>
              <div class="portfolio-title">
                <h4>John Doe<span>Art-Director</span></h4>
              </div>
            </div>
          </div>
          <div class="element Logo_design copywriting" data-category="Logo_design">
            <div class="hexagon"> <a href="#"> <span class="mask"></span> <img src="img/3.jpg" alt="filter" /> </a>
              <div class="portfolio-title">
                <h4>John Doe<span>Art-Director</span></h4>
              </div>
            </div>
          </div>
          <div class="element branding copywriting" data-category="branding">
            <div class="hexagon"> <a href="#"> <span class="mask"></span> <img src="img/1.jpg"  alt="filter"/> </a>
              <div class="portfolio-title">
                <h4>John Doe<span>Art-Director</span></h4>
              </div>
            </div>
          </div>
          <div class="element Logo_design copywriting" data-category="Logo_design">
            <div class="hexagon"> <a href="#"> <span class="mask"></span> <img src="img/2.jpg"  alt="filter"/> </a>
              <div class="portfolio-title">
                <h4>John Doe<span>Art-Director</span></h4>
              </div>
            </div>
          </div>
          <div class="element Logo_design copywriting" data-category="Logo_design">
            <div class="hexagon"> <a href="#"> <span class="mask"></span> <img src="img/1.jpg"  alt="filter"/> </a>
              <div class="portfolio-title">
                <h4>John Doe<span>Art-Director</span></h4>
              </div>
            </div>
          </div>
          <div class="element branding copywriting" data-category="branding">
            <div class="hexagon"> <a href="#"> <span class="mask"></span> <img src="img/2.jpg"  alt="filter"/> </a>
              <div class="portfolio-title">
                <h4>John Doe<span>Art-Director</span></h4>
              </div>
            </div>
          </div>
        </div>
      </div>
              

Your CSS code.

              
              #portfolio .page-head:before, #projects .page-head:before {
background:  #AFB6D1
}
#portfolio .page-head small, #projects .page-head small {
color: #AFB6D1
}
#portfolio .page-head, #projects .page-head {
border-bottom: 1px solid #767E9E
}
.portfolio, .projects {
background-color: #303441;
border-bottom: 5px solid #4A4F5E;
color: #767E9E;
padding: 50px 0
}
.portfolioFilter {
margin: 25px 0 10px;
padding: 10px 0;
}
.portfolioContainer .hexagon a span.mask {
background: url("../img/hexagon_mask_2.png") no-repeat;
}
.portfolioContainer .hexagon {
margin:0 25px 25px 0
}
.hexagon h4 {
font-family: aller_lightregular;
font-size: 15px;
text-transform: uppercase;
}
.isotope-item {
z-index: 2;
}
.isotope-hidden.isotope-item {
pointer-events: none;
z-index: 1;
}
.isotope, .isotope .isotope-item { /* change duration value to whatever you like */
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
transition-duration: 0.8s;
}
.isotope {
-webkit-transition-property: height, width;
-moz-transition-property: height, width;
transition-property: height, width;
}
.isotope .isotope-item {
-webkit-transition-property: -webkit-transform, opacity;
-moz-transition-property: -moz-transform, opacity;
transition-property: transform, opacity;
}
.isotope.no-transition, .isotope.no-transition .isotope-item, .isotope .isotope-item.no-transition {
-webkit-transition-duration: 0s;
-moz-transition-duration: 0s;
-ms-transition-duration: 0s;
-o-transition-duration: 0s;
transition-duration: 0s;
}
.isotope.infinite-scrolling {
-webkit-transition: none;
-moz-transition: none;
-ms-transition: none;
-o-transition: none;
transition: none;
}
#filter_container {
padding: 5px;
margin-bottom: 20px;
}
#filter_header {
padding-bottom: 1.0em;
}
#filter_header h3 {
margin-bottom: 0.2em;
font-size: 15px;
}
#filter_header h4 {
font-weight: bold;
}
#filter_header ul {
margin: 0;
list-style: none;
padding:0
}
#filter_header ul ul {
margin-left: 1.5em;
}
#filter_header li {
float: left;
margin:0 0.5em 0 0;
}
#filter_header li a {
color: #AFB6D1;
padding: 0.4em 0.5em;
text-transform:uppercase;
}
#filter_header li a.selected {
color: #AFB6D1;
font-weight: bold;
text-shadow: none;
background-color:#4A4E5C
}

              

Flex slider

 $(document).ready(function(){
    $('.flexslider').flexslider({
		        animation: "fade",
		        start: function(slider){
		          $('body').removeClass('loading');
		        }
			});
});


              

Portfolio Filter

           $(function(){      
      var $container = $('#filter_container');
      $container.isotope({
        itemSelector : '.element'
      });  
      var $optionSets = $('#filter_header .option-set'),
          $optionLinks = $optionSets.find('a');
      $optionLinks.click(function(){
        var $this = $(this);
        // don't proceed if already selected
        if ( $this.hasClass('selected') ) {
          return false;
        }
        var $optionSet = $this.parents('.option-set');
        $optionSet.find('.selected').removeClass('selected');
        $this.addClass('selected');
        // make option object dynamically, i.e. { filter: '.my-filter-class' }
        var options = {},
            key = $optionSet.attr('data-option-key'),
            value = $this.attr('data-option-value');
        // parse 'false' as false boolean
        value = value === 'false' ? false : value;
        options[ key ] = value;
        if ( key === 'layoutMode' && typeof changeLayoutMode === 'function' ) {
          // changes in layout modes need extra logic
          changeLayoutMode( $this, options )
        } else {
          // otherwise, apply new options
          $container.isotope( options );
        }        
        return false;
      });      
    });
              

Google Map

            $(document).ready(function() {	
		 var map;
      map = new GMaps({
        el: '#map',
        lat: -12.043333,
        lng: -77.028333,
        zoomControl : true,
        zoomControlOpt: {
            style : 'SMALL',
            position: 'TOP_LEFT'
        },
        panControl : true,
        streetViewControl : false,
        mapTypeControl: true,
        overviewMapControl: false
      });
});
              

contact page validator

             $(document).ready(function() { 
	$("#passion_form").validate();	
    });
              

Nice Scroll Plugin

               $(document).ready(function() { 
$("html").niceScroll();  // The document page (body)
		$(".scroller").getNiceScroll().resize()    });