Outdoor docs

Introduction

Outdoor is a truly one page HTML template with modern, elegant, intuitive and fully responsive design. It is suitable for any type of business, built for any needs. Based on Bootstrap 3 framework, the template consists of dozens of custom HTML and CSS components and will look perfect on any size tablet or mobile screen. It comes with 5 homepage variants to choose from and owes proper step-by-step documentation for easy template customization.

Please do not forget to rate Outdoor on ThemeForest. This can be done in Downloads area. Just select Outdoor in the Download list and rate it. We really appreciate your feedback and will be grateful for your opinion.

Getting Started

This guide is targeted at people, who have at least basic knowledge of html markup language. Furthermore css and javascript knowledge is advised. If you do not feel yourself well with understanding these technologies you should consider finding someome to assist you.

This template can't be installed into any of available CMS (Wordpress, Drupal, etc.).

Preloader

Each home page of this template contains a preloader code by default. It will be disabled upon a removal of this code. For the 'parent div' you need to set position: relative;.

<div class="preloader">
  <div class="preload-img"></div>
</div>

Home page

Home page is the main one. It currently consists of 16 blocks, each with unique desing and purpose. Each block also supports various customization, which is usually done by appeding or removing variuos classes or attributes to it's container or elements. The obligatory stucture of the site:

<body>
  <!-- menu slide -->
  <div id="slide-menu" class="position-right">
    ...
  </div>
 
  <!-- Header -->
  <div class="container-fluid  position-right" id="wrapper-header">
    <div  class="container-fluid" id="header">
    ...
    </div>
  </div>
 
  <!-- Wrapper content -->
  <div class="container-fluid position-right" id="wrapper">
    <div class="home" id="home"></div>
    ...
  </div>
 
</body>

Invert Elements

To enable the inversion of the colors, you should insert the class "invert-elements" into any block or even body:

<body class="invert-elements">
  ...
</body>

"Header"

Page header consists of site logo (1) and main menu (2). Here is a code for the logo:

<div class="block-inline logo-mini">
  <a href="index.html">
    <img src="images/outdoor-logo.svg" alt="">
  </a>
</div>

Max width of the logo is 150px. The height of the logo isn't fixed. If the height is bigger than the default, the header will be streched. The menu can be represented in the right or left position of the site.

For the right position of the menu you need to add the class position-right for #wrapper-header, #slide-menu, #wrapper.

For the left position insert the class position-left for the same blocks.

Also you can customize the align of the menu. You can set class menu-align-right for #navigation-menu for right aligning or menu-align-left for left one. The full code of the menu, that is represented on the demo:

<!-- SLIDE MENU -->
<div id="slide-menu" class="position-right">
  <div id="background-slide-menu"></div>
  <button class="menu-close pull-right"><span class="glyphicon glyphicon-remove"></span></button>
 
  <div class="wrapper-slide-menu-content">
    <div id="slide-menu-content">
 
      <div class="block-inline hidden logo-mini">
        <a href="index.html">
          <img src="images/outdoor-logo.svg" alt="The Image">
        </a>
      </div>
      
      <div class="subMenu nav " id="navigation-menu">
        <!-- main menu -->
        <nav>
          <ul class="single-page-nav ">
            <li><a class="" href="#topslider">Home</a></li>
            <li><a class="" href="#about-as">About Us</a></li>
            <li><a class="" href="#our-team">Our Team</a></li>
            <li><a class="" href="#portfolio">Portfolio</a></li>
            <li><a class="" href="#contacts">Contacts</a></li>
          </ul>
        </nav>
        <!-- / main menu -->
 
        <!-- second list menu -->
        <ul>
          <li class="collapsed "><span>Pages</span>
            <ul>
              <li><a href="typography.html">Typography</a></li>
              <li><a href="elements.html">Elements</a></li>
              <li><a href="blog-list.html">Blog-list</a></li>
              <li><a href="blog-post.html">Blog-post</a></li>
              <li><a href="home-2.html">Home-2</a></li>
              <li><a href="homeStyle2.html">Header Style-2</a></li>
              <li><a href="homeStyle3.html">Header Style-3</a></li>
              <li><a href="homeStyle4.html">Header Style-Video</a></li>
            </ul>
          </li>
          <li class="collapsed "><span>Invert Pages</span>
            <ul>
              <li><a href="index-invert.html">Home</a></li>
              <li><a href="elements-invert.html">Elements</a></li>
              <li><a href="blog-list-invert.html">Blog-list</a></li>
              <li><a href="blog-post-invert.html">Blog-post</a></li>
            </ul>
          </li>
        </ul><!-- /second list menu -->
      </div><!-- /navigation-menu -->
 
      <div class="block-inline text-left soc-icon">
        <div class="wrap-button"><a href="" class="fb"><i class="fa fa-facebook"></i></a></div>
        <div class="wrap-button"><a href="" class="tw"><i class="fa fa-twitter"></i></a></div>
        <div class="wrap-button"><a href="" class="g-plus"><i class="fa fa-google-plus"></i></a></div>
        <div class="wrap-button"><a href="" class="pinterest"><i class="fa fa-pinterest"></i></a></div>
        <div class="wrap-button"><a href="" class="inst"><i class="fa fa-camera-retro"></i></a></div>
      </div>
    </div><!-- /slide-menu-content -->
  </div><!-- / wrapper-slide-menu-content -->
 
</div><!-- / SLIDE MENU -->

The menu is divided into: One Page Menu, and Multi Pages Menu.

'One Page' menu is created with the usage of 'nav' tag and a class single-page-nav for 'ul' tag. For example:

<div class="subMenu nav " id="navigation-menu">
  
  <!-- main menu -->
  <nav>
    <ul class="single-page-nav ">
      <li><a class="current" href="#home">Home</a></li>
      <li><a class="" href="#about-as">About Us</a></li>
      ...
    </ul>
  </nav>
  <!-- / main menu -->
 
  <!-- second list menu -->
  <ul>
    <li class="collapsed "><span>Invert Pages</span>
      <ul>
        <li><a href="index-invert.html">Home</a></li>
      </ul>
    </li>
  </ul>
  <!-- / second list menu -->
 
</div>

"Slider"

In our theme we use the "Royal Slider". More information you can find here.

"Social links"

Code for more than 1 social link (recommended 5 ones):

<div class="block-inline text-left soc-icon">
  <div class="wrap-button">
    <a href="" class="fb"><i class="fa fa-facebook"></i></a>
  </div>
  <div class="wrap-button">
    <a href="" class="tw"><i class="fa fa-twitter"></i></a>
  </div>
  <div class="wrap-button">
    <a href="" class="g-plus"><i class="fa fa-google-plus"></i></a>
  </div>
  <div class="wrap-button">
    <a href="" class="pinterest"><i class="fa fa-pinterest"></i></a>
  </div>
  <div class="wrap-button">
    <a href="" class="inst"><i class="fa fa-camera-retro"></i></a>
  </div>
</div>

About Us

This section is designed to hold a tiny carousel with livicons along with text blocks. Also there is a block with the text above the carousel. An example of html of 'About Us' block:

<!-- ABOUT US -->
<section class="cont-box  " id="about-as">
  <div class="containr-fluid">
    <div class="container">
      <div class="row">
 
        <div class="col-xs-12"><h1  class="title-about-as">About us</h1></div>
 
        <div class="col-xs-12 text-about-as">
          <p>Some text</p>
        </div>
 
        <div class="col-sx-12">
          <div class="clearfix"></div>
          
          <div class="wrapper-carusel carusel-4">
          <div class="row list-carousel responsive slider-foo-4">
            <div class="preloader">
              <div class="preload-img"></div>
            </div>
            <div class="carousel-box foo4" data-item-max="4">
              <div class="col-xs-12 col-sm-4 col-md-3">
                  <div class="img-block"><span class="sm-icon" style="width:64px; height:64px;" data-sm-name="goldMedal"></span></div>
                  <h6><a href="#">We Are Itembridge</a></h6>
                  <p>We make innovative<br>and measurable works</p>
              </div>
             
             ....
 
            </div>
          </div>
          <button class="prev"><i class="fa fa-angle-left"></i></button>
          <button class="next"><i class="fa fa-angle-right"></i></button>
 
        </div> <!-- /carusel-4 --> 
 
        </div>
 
      </div>
    </div>
  </div>
</section>
<!-- / ABOUT US -->

Our Team

This block is designed to describe your team, friends or collegues. It is represented as a carousel. You can add any amount of your team. It also has a block with our skills representation. Here is the code for 'Our Team' block with its 'Our skills' block:

<!-- OUR TEAM -->
<section class="cont-box  " id="our-team">
  <div class="container-fluid" >
    <div class="bg-box part-11 ">
      <div class="overlay"></div>
    </div>
 
    <div class="container">
      <div class="row">
 
        <div class="col-xs-12">
          <h1  class="title-our-team">Our team</h1>
        </div>
 
        <div class="col-sx-12">
          <div class="clearfix"></div>
          
          <div class="wrapper-carusel carusel-5">
              <div class="row list-carousel responsive slider-foo-5">
                <div class="preloader">
                  <div class="preload-img">
                  </div>
                </div>
                <div class="carousel-box foo5" data-item-max="4">
 
                  <div class="col-xs-12 col-sm-4 col-md-3">
                      <div class="img-block"><img class="replace-2x" src="images/team/team-1.jpg" alt=""></div>
                      <h6>Michael Jonson</h6>
                      <p>Expert in developing open<br>data strategies and solutions.</p>
                      <div class="block-inline soc-icon">
                        <div class="wrap-button">
                          <a href="" class="fb"><i class="fa fa-facebook"></i></a>
                        </div>
                        <div class="wrap-button">
                          <a href="" class="tw"><i class="fa fa-twitter"></i></a>
                        </div>
                        <div class="wrap-button">
                          <a href="" class="g-plus"><i class="fa fa-google-plus"></i></a>
                        </div>
                      </div>
                  </div>
 
                  ...
               
                </div>
              </div>
              <button class="prev"><i class="fa fa-angle-left"></i></button>
              <button class="next"><i class="fa fa-angle-right"></i></button>
            
            </div><!-- /carusel-5 -->
        </div>
 
        <div class="col-xs-12">
 
          <h3 class="title-skills">Our skills</h3>
          <div class="row">
 
            <div class="col-xs-12 col-sm-6">
               <div class="progress" data-appear-progress-animation="80%">
                <div class="progress-bar " >creative</div>
              </div>
 
              ...
 
            </div>
 
 
          </div>    
        </div>
 
      </div>
 
    </div>
  </div>
</section> 
<!-- / OUR TEAM -->

Clients

This block allows to add clients logos and the references to their websites. HTML code:

<!-- Clients -->
<section class="cont-box" id="clients">
  <div class="container-fluid" >
    <div class="bg-box part-14">
      <div class="overlay"></div>
    </div>
 
    <div class="container clients-gallery">
      <div class="row">
        <div class="col-xs-12 col-sm-3 col-mx-3 text-center-xs" data-appear-animation="wobble">
          <a href="#"><img src="images/logo/brewery.png" alt=""></a>
        </div>
 
        ...
        
      </div>
    </div>
 
  </div>
</section> 
<!-- / Clients -->

Works

This block is designed to hold a lot of items with a preview image, its title and a small remarque. Additionaly any classes can be specified to any item to be used as tags to filter the content of grid. Here is the full code of this block:

<!-- PORTFOLIO -->
<section class="cont-box portfolio  " id="portfolio">
  <div class="container-fluid" >
      <div class="row">
        
        <div class="col-xs-12"><h1  class="title-portfolio">Works</h1></div>
 
        <div class="col-xs-12">
 
          <div id="filters" class="button-group isotop-filters">
            <button class="button is-checked" data-filter="*">All</button>
            <button class="button" data-filter=".branding">Branding</button>
            <button class="button" data-filter=".design">Design</button>
            <button class="button" data-filter=".development">Development</button>
            <button class="button" data-filter=".photography">Photography</button>
            <span id="back-top"></span>
          </div>
          
        </div>
      </div>
      <div class="sliders">
        <div class="sliders-preloader">
          <div class="full-width">
            <div class="pre-img"></div>
          </div>    
        </div>
        <div class="row">
          <!-- Sliders -->
          <div class="container">
    
            <!-- top nav -->
            <div class="a-slider-tcontrols album-controls row">
              <a href="#filters" class="prev p-scroll">
                <i class="fa fa-angle-left"></i>
              </a>
              <a href="#portfolio" class="a-sliders-close">
                <i class="fa fa-times"></i>
              </a>
              <a href="#filters" class="next p-scroll">
                <i class="fa fa-angle-right"></i>
              </a>
            </div>
                      
            <!-- albums sliders -->
            <div id="albom" class="album-sliders-container"></div>
                      
              <!-- bottom nav -->
            <div class="a-slider-bcontrols album-controls row">
              <a href="#filters" class="prev p-scroll">
                <i class="fa fa-angle-left"></i>
              </a>
              <a href="#portfolio" class="a-sliders-close">
                <i class="fa fa-times"></i>
              </a>
              <a href="#filters" class="next p-scroll">
                <i class="fa fa-angle-right"></i>
              </a>
            </div>
          </div>
          <!-- /Slider -->
        </div>
      </div>
 
      <div class="isotope">
 
        <div data-albumid="1" class="element-item development ">
          <a class="p-scroll" href="#filters">
            <img class="replace-2x" src="images/portfolio/01/preview.jpg" width="348" height="244" alt="The Image">
            <div class="overlay">
              <img class="p-target" src="images/target.svg" alt="The Image">
              <div class="p-title">
                <h3 class="name">New Level<br><span>Development</span></h3>
              </div>
            </div>
          </a>
          
        </div>
 
        ...
 
      </div><!-- /isotope -->
 
  </div>
</section> 
<!-- / PORTFOLIO -->

There are two types of 'Portfolio' block representation:

On the full width of the screen: sets the class container-fluid (by default).
On the width of the container: sets the class container.

To change the name of the filter and its term, in the tag <button> change the class data-filter into the needed one. Also there, you can change the name of the filter. Example:

<div id="filters" class="button-group isotop-filters">
  <button class="button is-checked" data-filter="*">All</button>
  <button class="button" data-filter=".branding">Branding</button>
  <button class="button" data-filter=".design">Design</button>
  <button class="button" data-filter=".development">Development</button>
  <button class="button" data-filter=".photography">Photography</button>
</div>

According to the value of data-filter, change the classes of the filtering elements. In this example we use the filter 'branding':

<div data-albumid="10" class="element-item branding ">
  <a class="p-scroll" href="#filters"> 
    <img src="images/portfolio/10/preview.jpg" alt="The Image">
    <div class="overlay">
      <img class="p-target" src="images/target.svg" alt="The Image">
      <div class="p-title">
        <h3 class="name">Magazine<br> <span>Branding</span></h3>
      </div>
    </div>
  </a>
</div>

The internal carousel and its content are written in a separate file data.json which is in the root of the site.

"1" : {
    "title" : "New Level",
    "description" : "<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid at, ducimus, officiis qui iste non?</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid at, ducimus, officiis qui iste non?</p>",
    "category" : "Development",
    "client" : "New Level",
    "url" : "",
    "photos" : ["images/portfolio/01/p1.jpg","images/portfolio/01/p2.jpg","images/portfolio/01/p3.jpg"]
  },

"1" means to which element the information is shown on the slider. So, block "1" reffers to the element data-albumid="1"

"title" - title of the element
"description" - its description
"category" - sets the category of the element

"client" - sets the name of the company
"url" - the link to the element
"photos" - the path to the images

Blockquote

"Blockquote" block is designed to represent a short message to your customers. It may be a slogan of your company or any quote from famous person. The code of this block is:

<!--  blockquote -->
<section class="cont-box  " id="blockquote">
  <div class="container-fluid invert-elements" >
 
    <div class="bg-box part-8">
      <div class="overlay"></div>
    </div>
 
    <div class="container">
    <div class="row">
      <h1  class="box-title">blockquote</h1>
      <!-- CaruFredSel foo7 -->
      <div class="row elements-blockquote">
        <div class="col-xs-12">
 
            <!-- carousel -->
              <div class="wrapper-carusel blockquote-slider">
                <div class="carusel-7">
                  <div class="row list-carousel responsive slider-foo-7 ">
                 
                    <div class="preloader">
                        <div class="preload-img"></div>
                    </div>
 
                    <div class="carousel-box foo7" data-item-max="1" data-item-width="780">
                      <div class="col-xs-12">
                        <blockquote>
                          <span>Some text</span>
                          <footer><cite title="Mike Green, Google Company">Mike Green, Google Company</cite></footer>
                        </blockquote>
                      </div> 
 
                      ...
 
                    </div>
                    
                  </div>
                </div>
                <button class="prev"><i class="fa fa-angle-left"></i></button>
                <button class="next"><i class="fa fa-angle-right"></i></button>
              </div><!-- /carousel -->
          </div>
        </div>
      </div><!-- /CaruFredSel FOO7 -->
    </div>
  </div>
</section> 
<!-- /blockquote -->

Last Posts

This block has a content carousel, with items resembling a WordPress-compliant post structure. It is designed to scroll some latest posts from a blog or any other similar content.

<!-- / Last Posts -->
<section class="cont-box  " id="last-posts">
  <div class="container-fluid" >
    <div class="container">
      <h1  class="box-title">Last Posts</h1>
      
      <!-- CaruFredSel foo1 -->
    <div class="row">
      <div class="col-xs-12">
        <div class="post-slider">
          <div class="row list-carousel responsive slider-foo-1">
 
              <div class="preloader">
                <div class="preload-img"></div>
              </div>
 
              <div class="carousel-box" data-item-max="3" data-item-width="350">
                <div class="col-xs-12 col-sm-4 col-md-3">
                    <div class="img-block text-center-sm text-center-xs"><img class="replace-2x" src="images/portfolio/08/01.jpg" width="300" height="210" alt=""></div>
                      <h6><a href="#">Petit Greef</a></h6>
                      <p class="data-post">Posted 
                        <a href="#">1 June</a> by 
                        <a href="#">John Doe</a>
                      </p>
                      <p class="text-post">Some text</p>
                      <button class="btn-default">Read More <i class="fa fa-angle-right"></i></button>
                </div>
 
                 ...
             
              </div>
              <div class="clearfix"></div>
            </div>
            <button class="prev"><i class="fa fa-angle-left"></i></button>
            <button class="next"><i class="fa fa-angle-right"></i></button>
          </div><!-- /post-slider -->
      </div>
    </div><!-- /CaruFredSel -->
    </div>
  </div>
</section>
<!-- / Last Posts -->

Pricing

This block provides a good way of describing business services, with various features included.

Each item is a link with customized icon and active color. Active color and the icon are defined in adding the class to the element (e.g. <div class="cont-pricing green">, where 'green' is a class of color, <div class="lollipop green""> 'lollipop' is an icon. Example of the block:

<!-- / Pricing -->
<section  class="part-7 vertical-parallax cont-box" data-speed="6" data-type="background" data-offsetY="700" id="pricing">
  <div class="overlay"></div>
  
  <div class="container-fluid invert-elements" >
 
    <div class="container">
      <h1 class="box-title">Pricing</h1>
      
      <div class="row text-center" id="block-pricing">
        <div class="clearfix"></div>
 
        <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
          <div class="cont-pricing green">
            <div class="lollipop green"></div>
            <a href="#">Start</a>
            <ul>
              <li>Responsive Design</li>
              <li>Color Customizator</li>
              <li>HTML5 & CSS3</li>
              <li>Styled elements</li>
              <li>
                <span class="price">$199</span>
                <span class="permonth">permonth</span>
              </li>
              <li><button class="">join now</button></li>
            </ul>
          </div>
        </div>
        <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
          <div class="cont-pricing red">
            <div class="lollipop"></div>
            <a href="#">Standard</a>
            <ul>
              <li>Responsive Design</li>
              <li>Color Customizator</li>
              <li>HTML5 & CSS3</li>
              <li>Styled elements</li>
              <li>
                <span class="price">$299</span>
                <span class="permonth">permonth</span>
              </li>
              <li><button class="">join now</button></li>
            </ul>
          </div>
        </div>
        
        <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
          <div class="cont-pricing blue">
            <div class="lollipop"></div>
            <a href="#">Platinum</a>
            <ul>
              <li>Responsive Design</li>
              <li>Color Customizator</li>
              <li>HTML5 & CSS3</li>
              <li>Styled elements</li>
              <li>
                <span class="price">$399</span>
                <span class="permonth">permonth</span>
              </li>
              <li><button class="">join now</button></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
<!-- / Pricing -->

How it works?

The video can be added in this block. It will be opened fullscreen in new window.

<!--  video -->
<section class="cont-box" id="video">
  <div class="container-fluid" >
    <div class="bg-box part-12">
      <div class="overlay"></div>
    </div>
    <div class="row">
      <div class="col-xs-12">
        
        <div class="video-box">
          <h1 class="box-title">How it Works?</h1>
          <button class="play-video" id="play-button"><i class="fa fa-play-circle-o"></i></button>
          
          <div style="display:none;" class="video-block">
            <button class="close-video"><i class="fa fa-times"></i></button>
            <div class="video-body"> </div>
          </div>
        </div>
 
      </div>
    </div>
  </div>
</section>
<!-- / video -->

Be sure to insert the code js-code

It is necessary to insert JS Code into the file main.js. The video link must be inserted using iframe.

jQuery('.play-video').on('click', function (e) {
    var videoContainer = jQuery('.video-block');
    videoContainer.prepend('<iframe src="http://player.vimeo.com/video/22439234" width="500" height="281" class="stretch-both" frameborder="0" webkitallowfullscreen="webkitallowfullscreen" mozallowfullscreen="mozallowfullscreen" allowfullscreen="allowfullscreen"></iframe>');
    videoContainer.fadeIn(300);
    e.preventDefault();
});
// Close Video
jQuery('.close-video').on('click', function (e) {
    jQuery('.video-block').fadeOut(400, function () {
        jQuery("iframe", this).remove().fadeOut(300);
    });
});
 
 
// insert video in "iframe":
 
<iframe src="http://player.vimeo.com/video/22439234" width="500" height="281" class="stretch-both" frameborder="0" webkitallowfullscreen="webkitallowfullscreen" mozallowfullscreen="mozallowfullscreen" allowfullscreen="allowfullscreen"></iframe>

Services

<!-- Services -->
<section class="cont-box" id="services">
  <div class="container-fluid" >
    <div class="bg-box  ">
      <div class="overlay"></div>
    </div>
    <div class="container">
      <div class="row">
        <div class="col-xs-12"><h1 class="box-title">Services</h1></div>
      </div>
      <div class="row text-center margin-top-40">
 
        <div class="col-xs-12 col-sm-4">
          <span class="sm-icon" style="width:80px; height:80px;" data-sm-name="image" data-appear-animation="wobble"></span>
          <h6 data-appear-animation="bounceInUp">Web Design</h6>
          <p data-appear-animation="bounceInUp">We are an expert at creating<br>designed websites to fit your needs</p>
        </div>
 
        <div class="col-xs-12 col-sm-4">
          <span class="sm-icon" style="width:80px; height:80px;" data-sm-name="settings2" data-appear-animation="wobble"></span>
          <h6 data-appear-animation="bounceInUp">Web Development</h6>
          <p data-appear-animation="bounceInUp">Development of complex applications<br>for various types of tasks</p>
        </div>
 
        <div class="col-xs-12 col-sm-4">
          <span class="sm-icon" style="width:80px; height:80px;" data-sm-name="diamond" data-appear-animation="wobble"></span>
          <h6 data-appear-animation="bounceInUp">Branding</h6>
          <p data-appear-animation="bounceInUp">We have all resources needed<br>to make your brand better known</p>
        </div>
 
      </div>
 
      ...
      
    </div>
  </div>
</section>
<!-- / Services -->

Video Tour

This block is designed to hold a video of your choice. You may embed it from vimeo, youtube or using an html5 video tag. Consider using iframe embed codes for a better responsive behaviour. Various content and video itself can be placed in any of blocks.

<!-- /Bg Video Banner -->
<section class="cont-box" id="banner">
  <div class="container-fluid invert-elements" >
 
    <div class="bg-box bg-video part-3">
      <video autoplay="autoplay" loop="loop" muted="muted"> 
        <source src="media/video.mp4" type="video/mp4">
      </video>
    </div>
 
    <div class="container">
      <div class="banner text-center">
        <div class="row"><h1 class="box-title">Video Background</h1></div>
        <div class="row">
          <div class="col-md-2 hidden-xs hidden-sm"></div>
          <div class="col-xs-12 col-sm-12 col-md-8">
            <p>
              Is it a Creative, Modern, Clean & Responsive Template, that you were waiting for?
            </p>
          </div>
          <div class="col-md-2 hidden-xs hidden-sm"></div>
        </div>
        <div class="clearfix"></div>
        <button>PURCHASE NOW!</button>
      </div>
    </div>
  </div>
</section>
<!-- /Bg Video Banner -->

Newsletter

This code snippet corresponds Newsletter block:

<!-- Newsletters -->
<section class="cont-box" id="newsletters">
  <div class="container-fluid" >
    <div class="bg-box part-13">
      <div class="overlay"></div>
    </div>
 
    <div class="container">
 
      <div class="row">
        <div class="col-xs-12 text-center">
          <h3>Sing up for <span>Newsletter</span></h3>
        </div>
        <div class="xs-hidden col-sm-4"></div>
        <div class="col-xs-12 col-sm-4">
 
          <form id="newsletters-form" method="POST" >
            <div class="success"></div>
            <div class="row">
              <div class="col-xs-12 col-sm-9 fix-left">
                <input type="email" name="newsletters-email" class="form-control" id="newsletters-email" placeholder="Your e-mail">
              </div>
              <div class="col-xs-12 col-sm-3 fix-right">
                <button id="newsletters-submit" type="submit" class="btn-default">SUBSCRIBE</button>
              </div>
            </div>
 
          </form>
        </div>
        <div class="xs-hidden col-sm-4"></div>
 
      </div>
    </div>
  </div>
</section> 
<!-- / Newsletters -->

Contacts

This block consists of contact links, as well as feedback form. It has google-map background enabled by default.

<!-- CONTACTS -->
<section id="contacts">
  <div class="container-fluid" >
    <div id="mapa">
      <div id="map-canvas"></div>
    </div>
 
    <div class="container">
      <div class="row">
        <div class="col-md-6 col-sm-6 col-xs-12" id="cont-info">
 
          <h2 class="title-contacts">Contacts</h2>
 
          <div id="text-contact">
            <p>Some txt</p>
          </div>
 
          <div class="row" id="info-cotact">
 
            <div class="col-md-6 col-sm-6 col-xs-12">
              <h6>Address</h6>
              <p>49 Archdale, 2B Charleston,</p>
              <p>New York City, USA</p>
              <p class="tel-contact"><strong>P:</strong> +1(234) 567 891</p>
            </div>
            <div class="col-md-6 col-sm-6 col-xs-12">
              <h6>Email</h6>
              <p><a href="mailto:[email protected]">[email protected]</a></p>
              <p><a href="mailto:[email protected]">[email protected]</a></p>
            </div>
 
          </div>
 
          <h5>Say Hello</h5>
 
          <form id="contactform" method="POST" >
            <div id="success"></div>
            <div class="row">
              <div class="col-md-6 col-sm-6 col-xs-12 fix-left">
                <div class="form-group">
                  <input type="text" name="forename" class="form-control" id="name" placeholder="Name">
                </div>
              </div>
 
              <div class="col-md-6 col-sm-6 col-xs-12 fix-right">
                <div class="form-group">
                  <input type="email" name="email" class="form-control" id="email" placeholder="Email">
                </div>
              </div>
            </div>
 
            <div class="form-group">
              <textarea class="form-control" name="comment" rows="4" placeholder="Message"></textarea>
            </div>
 
            <button id="submit" type="submit" class="btn btn-default">SEND</button>
 
          </form>
 
        </div>
      </div>
    </div>
 
  </div>
</section>
<!-- / CONTACTS -->

The option for the google-map:

<div id="mapa">
  <div id="map-canvas-lg" class=""></div>  - for monitors
  <div id="map-canvas-sm" class=""></div>  - for tablets
  <div id="map-canvas-xs" class=""></div>  - for phones
</div>

The customization of the google-map background is located in the file "js/main.js". Code:

$(document).ready(function() {  
 
    function initialize() {
      var mapOptions = {
        zoom: 10,
        draggable: false,
        scrollwheel: false,
        center: new google.maps.LatLng(40.8, -74.5)   // - coordinates
      }
      map = new google.maps.Map(document.getElementById('map-canvas-lg'),
                                    mapOptions);
 
      var image = 'images/marker.png';                                // - marker image
      var myLatLng = new google.maps.LatLng(40.756168, -73.978705);  // - marker coordinates
      var beachMarker = new google.maps.Marker({
          position: myLatLng,
          map: map,
          icon: image,
          title: 'Manhattan'
 
      });
    }
 
    google.maps.event.addDomListener(window, 'load', initialize);
 
    google.maps.event.addDomListener(window, 'resize', initialize);
 
  });

Footer

Block 'Footer' contains four elements: 'Go-Up button', Credits text, Social links, Copyright.

<!-- FOOTER -->
<section id="footer">
  <div class="containet-fluid footer" >
    <div class="row">
 
      <div class="col-xs-12"> 
        <a class="go-up my-scroll" href="#wrapper">
          <i class="fa fa-angle-up"></i>
        </a>
      </div>
      <div class="col-xs-12"> 
        <span class="thanks-forvisit">Thanks for your visit!</span>
        <p class="share-us">Share us with social media:</p>
      </div>
 
      <div class="col-xs-12">
        <div class="social-inp">
          <a href="#" class="gt-fb"></a>
          <a href="#" class="gt-tw"></a>
          <a href="#" class="gt-gp"></a>
          <a href="#" class="gt-pt"></a>
        </div>
      </div>
      <div class="col-xs-12"><span class="corp">© ItemBridge llc, Outdoor Template on Themeforest, 2014</span></div>
 
    </div> 
  </div>
</section>
<!-- / FOOTER -->

Blog Post

Blog Post page contains image carousel, text block, social sharing block, comments block, widgets.

<!-- WRAPPER -->
    <div class="container-fluid position-right" id="wrapper">
 
      <div class="home" id="home"></div> 
 
      <!-- nav-posts -->
      <div class="container" id="nav-posts">
        ...
      </div>  <!-- / nav-posts -->
 
      <!-- BLOG -->
      <div class="container" id="blog">
        <div class="row" >
 
          <div class="col-sm-12 col-md-8" id="block-posts">
            
            <div class="row">
              <div class="col-xs-12 posts">
                ....
              </div><!-- ///////////////////posts -->
 
              <!-- COMMENTS -->
              <div class="col-xs-12 " id="comments">
                ...
              </div><!-- /////////////////comments -->
 
            </div> <!-- /row -->
          </div><!-- / block-posts -->
 
          <div class="col-sm-hidden col-md-1"></div>
 
          <div class="col-sm-12 col-md-3" id="right-sidebar">
           ...
          </div><!-- / right-sidebar -->
 
        </div><!-- /row -->
      </div><!-- /BLOG -->
 
      <!-- FOOTER -->
      <div class="containet-fluid footer" id="footer">
        ...
      </div>
      <!-- / FOOTER -->
    
    </div> <!-- / WRAPPER -->

Blog List

Blog List page has various combinations of colors. To change the color of the page, you must write a class of color (white, green, etc.) to the block #topslider.

<!--  BLOG SLIDER -->
<div class="container-fluid inside-pages white" id="topslider">
  <div class="row">
 
    <!-- title-blogtop -->
    <div class="col-xs-12" id="info-topslider">
      <div class="inner-info-block">
        <div class="block-center">
          <h1><span class="title">BLOG</span><br>
 
            <span class="mym">
              <div class="block-inline text-center soc-icon">
                <div class="wrap-button"><a href="" class="fb"><i class="fa fa-facebook"></i></a></div>
                <div class="wrap-button"><a href="" class="tw"><i class="fa fa-twitter"></i></a></div>
                <div class="wrap-button"><a href="" class="g-plus"><i class="fa fa-google-plus"></i></a></div>
                <div class="wrap-button"><a href="" class="pinterest"><i class="fa fa-pinterest"></i></a></div>
                <div class="wrap-button"><a href="" class="inst"><i class="fa fa-camera-retro"></i></a></div>
              </div>
            </span>
 
          </h1>
        </div>
      </div>
    </div>
    <!-- / title-blogtop -->
 
    <!-- background-topslider -->
    <div class="bg-box part-10">
      <div class="overlay"></div>
    </div>
    <!-- / background-topslider -->
 
  </div>
</div>
<!--  / BLOG SLIDER -->

Elements

Our theme provides over 15 different html elements, which you can use in any way with any customization.

Accordion & Toggles
Tabs
Charts
Progress Bar
Royal Slider
Testimonials Carousel
Vertical Posts Carousel
Horizontal Posts Carousel

Persons Carousel
Person Carousel
Services Carousel
Image Carousel With Lightbox
Images with Lightbox
Pricing
Notification

To see all these elements, click on this link.

Accordion & Toggles

Accordion elements are used to represent the information, that can be hidden. Code for the accordion:

<div class="panel-group accordion" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" class="">
            First Item
          </a><i class="indicator glyphicon glyphicon-minus  pull-right"></i>
        </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in" style="height: auto;">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" class="collapsed">
            Second Item
          </a><i class="indicator glyphicon glyphicon-plus  pull-right"></i>
        </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse" style="height: 0px;">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree" class="collapsed">
            Third Item
          </a><i class="indicator glyphicon glyphicon-plus  pull-right"></i>
        </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse" style="height: 0px;">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapseFourth" class="collapsed">
            Fourth Item
          </a><i class="indicator glyphicon glyphicon-plus  pull-right"></i>
        </h4>
    </div>
    <div id="collapseFourth" class="panel-collapse collapse" style="height: 0px;">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapseFifth" class="collapsed">
            Fifth Item
          </a><i class="indicator glyphicon glyphicon-plus  pull-right"></i>
        </h4>
    </div>
    <div id="collapseFifth" class="panel-collapse collapse" style="height: 0px;">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa.
      </div>
    </div>
  </div>
</div>

To have the white accordion, add class white-accordion to the first div. Code for the toggle:

<div class="panel-group accordion">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a class="" data-toggle="collapse" data-parent="#accordion3" href="#collapseOne-s3">
          First Item
        </a><i class="indicator glyphicon glyphicon-minus  pull-right"></i>
      </h4>
    </div>
    <div id="collapseOne-s3" class="panel-collapse collapse in">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a class="collapsed" data-toggle="collapse" data-parent="#accordion3" href="#collapseTwo-s3">
           Second Item 
        </a><i class="indicator glyphicon glyphicon-plus  pull-right"></i>
      </h4>
    </div>
    <div id="collapseTwo-s3" class="panel-collapse collapse">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa. 
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a class="collapsed" data-toggle="collapse" data-parent="#accordion3" href="#collapseThree-s3">
          Third Item 
        </a><i class="indicator glyphicon glyphicon-plus pull-right"></i>
      </h4>
    </div>
    <div id="collapseThree-s3" class="panel-collapse collapse">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a class="collapsed" data-toggle="collapse" data-parent="#accordion3" href="#collapseFourth-s3">
          Fourth Item
        </a><i class="indicator glyphicon glyphicon-plus pull-right"></i>
      </h4>
    </div>
    <div id="collapseFourth-s3" class="panel-collapse collapse">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a class="collapsed" data-toggle="collapse" data-parent="#accordion3" href="#collapseFifth-s3">
          Fifth Item
        </a><i class="indicator glyphicon glyphicon-plus pull-right"></i>
      </h4>
    </div>
    <div id="collapseFifth-s3" class="panel-collapse collapse">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa.
      </div>
    </div>
  </div>
</div>

To make the toggle white, add the same class as it was for the accordion.

Tabs

There are two types of tabs in our theme:

"vertical tabs" - for this type of tab you should use the class vertical-tabs in the first div
"horizontal tabs" - for this type of tab you should use the class horizontal-tabs

To make the tabs with white background, add the class white-tab to the block. Code for example:

<div class="vertical-tabs">
  <div class="col-xs-12 col-sm-4">
    <!-- Nav tabs -->
    <ul class="nav nav-tabs tabs-left myTab">
      <li class="active"><a href="#first-tab2" data-toggle="tab">First Item</a></li>
      <li><a href="#second-tab2" data-toggle="tab">Second Item</a></li>
      <li><a href="#third-tab2" data-toggle="tab">Third Item</a></li>
    </ul>
  </div>
 
  <div class="hidden-xs col-sm-8">
    <!-- Tab panes -->
    <div class="tab-content">
      <div class="tab-pane active" id="first-tab2">
        <p>Food truck quinoa nesciunt laborum eiusmod. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus, enim eiusmod high life accusamus. </p></div>
      <div class="tab-pane" id="second-tab2">
        <p>Food truck quinoa nesciunt laborum eiusmod. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus, enim eiusmod high life accusamus. </p></div>
      <div class="tab-pane" id="third-tab2">
        <p>Food truck quinoa nesciunt laborum eiusmod. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus, enim eiusmod high life accusamus. </p></div>
    </div>
  </div>
</div>

Charts

Chart elements are created for those, who want to display their information with lines, bars, pies.

Line Chart

The HTML code for this type of chart:

<div class="wrapper-diagrams">
  <h6>The qualntity of transactions on our site</h6>
  <div id="graph"></div>
</div>

You must add a class graph to enable this chart. The customization of this chart is in main.js code:

new Morris.Line({
  // ID of the element in which to draw the chart.
  element: 'graph',
  // Chart data records -- each entry in this array corresponds to a point on
  // the chart.
  data: [
    {"month": "2012-10", "sales": 4000, "rents": 5000},
    {"month": "2012-09", "sales": 4000, "rents": 5500},
    {"month": "2012-08", "sales": 3300, "rents": 5100},
    {"month": "2012-07", "sales": 3300, "rents": 5150},
    {"month": "2012-06", "sales": 3100, "rents": 4800},
    {"month": "2012-05", "sales": 2900, "rents": 4100},
    {"month": "2012-04", "sales": 2300, "rents": 4600},
    {"month": "2012-03", "sales": 2300, "rents": 3500},
    {"month": "2012-02", "sales": 2700, "rents": 1700},
    {"month": "2012-01", "sales": 2000, "rents": 1000}
  ],
  // The name of the data record attribute that contains x-values.
  xkey: 'month',
  // A list of names of data record attributes that contain y-values.
  ykeys: ['sales', 'rents'],
  // Labels for the ykeys -- will be displayed when you hover over the
  // chart.
  labels: ['sales', 'rents'],
  barRatio: 0.4,
  xLabelAngle: 35,
  hideHover: 'auto',
  smooth: false,
  resize: true,
  lineColors: ['#98b025','#d45050', '#000099']
});

All customization settings are described in the code with the usage of comments.

Hero-bar Chart

The chart 'Hero-bar' enables with the usage of the class hero-bar. Example of the code:

<div class="wrapper-diagrams">
  <h6>The qualntity of transactions on our site</h6>
  <div id="hero-bar"></div>
</div>

You can customize this type of chart in the file 'main.js':

Morris.Bar({
  element: 'hero-bar',
  data: [
    {month: 'Jan.', sales: 2000, rents:2400},
    {month: 'Feb.', sales: 3000, rents:3100},
    {month: 'Mar.', sales: 3600, rents:3000},
    {month: 'Apr.', sales: 4300, rents:4100},
    {month: 'May.', sales: 3300, rents:3500},
    {month: 'Jun.', sales: 3000, rents:3800},
    {month: 'Jul.', sales: 3400, rents:2900},
    {month: 'Aug.', sales: 2900, rents:3500},
    {month: 'Sep.', sales: 4000, rents:3500},
    {month: 'Oct.', sales: 3900, rents:3400}
  ],
  xkey: 'month',
  ykeys: ['sales', 'rents'],
  labels: ['sales', 'rents'],
  barRatio: 0.4,
  xLabelAngle: 35,
  hideHover: 'auto',
  resize: true,
  lineColors: ['#98b025','#d45050', '#000099']
});

Progress Bar

<div class="progress" data-appear-progress-animation="80%">
    <div class="progress-bar " >creative</div>
</div>

Attributes of Progress Bar:
data-percent="..." - percentage value;
data-color="..." - end color of progress indicator line;
data-start-color="#..." - start color of progress indicator line;
Example of the code:

<div class="skill-wrap text-center">
  <canvas class="skill-item" width="150" height="150" data-percent="85" data-color="#9eb533" data-start-color="#f2f1ef">Design</canvas>
</div>

Testimonials Carousel

<!-- CaruFredSel foo7 -->
<div class="row elements-blockquote">
  <div class="col-xs-12">
 
    <div class="wrapper-carusel blockquote-slider">
      <div class="carusel-7">
        <div class="row list-carousel responsive slider-foo-7 ">
       
          <div class="preloader">
              <div class="preload-img"></div>
          </div>
 
          <div class="carousel-box foo7" data-item-max="1" data-item-width="780">
 
            <div class="col-xs-12">
              <blockquote>
                <span>Some text</span>
                  <footer>
                    <cite title="Mike Green, Google Company">
                      Mike Green, Google Company
                    </cite>
                  </footer>
              </blockquote>
            </div> 
 
            ...
 
          </div>
          
        </div>
      </div>
      <button class="prev"><i class="fa fa-angle-left"></i></button>
      <button class="next"><i class="fa fa-angle-right"></i></button>
    </div>
 
  </div>
</div><!-- /CaruFredSel FOO7 -->

Vertical Carousel

<!-- CaruFredSel foo1 -->
<div class="row">
  <div class="col-xs-12">
    <div class="post-slider">
      <div class="row list-carousel responsive slider-foo-1">
 
          <div class="preloader">
            <div class="preload-img"></div>
          </div>
 
          <div class="carousel-box" data-item-max="3" data-item-width="350">
            <div class="col-xs-12 col-sm-4 col-md-3">
                <div class="img-block text-center-sm text-center-xs">
                  <img class="replace-2x" src="images/portfolio/08/01.jpg" width="300" height="210" alt="">
                </div>
                  <h6><a href="#">Petit Greef</a></h6>
                  <p class="data-post">Posted <a href="#">1 June</a> by <a href="#">John Doe</a></p>
                  <p class="text-post">Some text</p>
                  <button class="btn-default">
                    Read More <i class="fa fa-angle-right"></i>
                  </button>
            </div>
 
            ...
             
          </div>
          <div class="clearfix"></div>
      </div>
      <button class="prev"><i class="fa fa-angle-left"></i></button>
      <button class="next"><i class="fa fa-angle-right"></i></button>
    </div>
  </div>
</div><!-- /CaruFredSel -->

Horizontal Carousel

<!-- CaruFredSel foo2 -->
<div class="row posted-slider">
    <div class="col-xs-12">
      <div class="row list-carousel responsive slider-foo-2">
 
        <div class="preloader">
            <div class="preload-img"></div>
        </div>
 
        <div class="carousel-box foo2">
 
          <div class="col-xs-12 col-sm-4 col-md-3">
            <div class="row">
              <div class="col-sm-5 col-xs-12 text-center-sm text-center-xs">
                <div class="img-block">
                  <img class="replace-2x" src="images/portfolio/10/01.jpg" width="380" height="250" alt="">
                </div>
              </div>
              <div class="col-sm-7 col-xs-12">
                <h2><a href="#">Single post slider</a></h2>
                <div class="post-info">
                  <div class="entry-meta">
                    Posted <a href="" title="#">1 June</a> by 
                    <a href="#" title="John Doe">John Doe 
                    </a>  —  Design, Branding        
                  </div>
                  <div class="comments-link">
                    <a href="#" title="#">  —  1 comment</a>
                  </div>
                </div>
                <p class="text-post">Some text</p>
                <button class="btn-default">Read More <i class="fa fa-angle-right"></i></button>
              </div>
            </div>
          </div>
 
          ...
          
        </div>
        <div class="clearfix"></div>
        <div class="slider-nav">
          <button class="prev"><i class="fa fa-angle-left"></i></button>
          <button class="next"><i class="fa fa-angle-right"></i></button>
        </div>
      </div>
    </div>
  </div><!-- /CaruFredSel FOO 2-->

Persons Carousel

<!-- CaruFredsel F005 -->
<div class="row">
  <div class="col-sx-12 ">
        <div class="clearfix"></div>
        
        <div class="wrapper-carusel carusel-5">
          <div class="row list-carousel responsive slider-foo-5">
            <div class="preloader">
              <div class="preload-img">
              </div>
            </div>
            <div class="carousel-box foo5" data-item-max="4">
 
              <div class="col-xs-12 col-sm-4 col-md-3">
                  <div class="img-block">
                  <img class="replace-2x" src="images/team/team-1.jpg" alt="">
                  </div>
                  <h6>Michael Jonson</h6>
                  <p>Expert in developing open<br>data strategies and solutions.</p>
                  <div class="block-inline soc-icon">
                    <div class="wrap-button">
                      <a href="" class="fb"><i class="fa fa-facebook"></i></a>
                    </div>
                    <div class="wrap-button">
                      <a href="" class="tw"><i class="fa fa-twitter"></i></a>
                    </div>
                    <div class="wrap-button">
                      <a href="" class="g-plus"><i class="fa fa-google-plus"></i></a>
                    </div>
                  </div>
              </div>
 
              ...
 
           
            </div>
          </div>
          <button class="prev"><i class="fa fa-angle-left"></i></button>
          <button class="next"><i class="fa fa-angle-right"></i></button>       
        </div>
  </div>
</div> <!-- / CaruFredsel F005 -->

Person Carousel

<!-- CaruFredSel foo8 -->
<div class="row slider-people margin-bottom">
  <div class="col-xs-12">
    <div class="row list-carousel responsive slider-foo-8">
 
        <div class="preloader">
            <div class="preload-img"></div>
        </div>
 
        <div class="carousel-box foo8">
          <div class="col-xs-12 col-sm-4 col-md-3">
            <div class="row">
              <div class="col-sm-4 col-xs-12 text-center-xs text-left-md text-left-lg">
                <div class="img-block">
                <img class="replace-2x" src="images/team/size-second/team-2.jpg" width="300" height="330" alt="">
                </div>
              </div>
              <div class="col-sm-8 col-xs-12 text-left-sm text-left-md text-left-lg">
                <h4>Alex Bruun</h4>
                <p class="profession">Senior Developer</p>
                <p class="text-post">Some text</p>
                <div class="clearfix"></div>
                <div class="info-contacts mail">
                  <span>Email: </span>[email protected]
                </div>
                <div class="info-contacts phone">
                  <span>Phone: </span>+1151247532
                </div>
                <div class="info-contacts skype">
                  <span>Skype: </span>dansmith
                </div>
                <div class="block-inline text-center soc-icon">
                  <div class="wrap-button">
                    <a href="" class="fb"><i class="fa fa-facebook"></i></a>
                  </div>
                  <div class="wrap-button">
                    <a href="" class="tw"><i class="fa fa-twitter"></i></a>
                  </div>
                  <div class="wrap-button">
                    <a href="" class="g-plus"><i class="fa fa-google-plus"></i></a>
                  </div>
                  <div class="wrap-button">
                    <a href="" class="pinterest"><i class="fa fa-pinterest"></i></a>
                  </div>
                  <div class="wrap-button">
                    <a href="" class="inst"><i class="fa fa-camera-retro"></i></a>
                  </div>
                </div>
              </div>
            </div>
          </div>
 
          ...
          
          
        </div>
        <div class="clearfix"></div>
        <div class="slider-nav">
          <button class="prev"><i class="fa fa-angle-left"></i></button>
          <button class="next"><i class="fa fa-angle-right"></i></button>
        </div>
      </div>
  </div>
</div><!-- /CaruFredSel -->

Services Carousel

<!--  CaruFredsel F004 -->
<div class="row" >
  <div class="col-sx-12">
    <div class="clearfix"></div>
 
        <div class="wrapper-carusel carusel-4">
          <div class="row list-carousel responsive slider-foo-4">
            <div class="preloader">
              <div class="preload-img"></div>
            </div>
            <div class="carousel-box foo4" data-item-max="4">
              <div class="col-xs-12 col-sm-4 col-md-3">
                  <div class="img-block"><span class="sm-icon" style="width:64px; height:64px;" data-sm-name="goldMedal"></span></div>
                  <h6><a href="#">We Are Itembridge</a></h6>
                  <p>We make innovative<br>and measurable works</p>
              </div>
              
              ...
              
            </div>
          </div>
          <button class="prev"><i class="fa fa-angle-left"></i></button>
          <button class="next"><i class="fa fa-angle-right"></i></button>
      </div>
  </div> 
</div><!-- / CaruFredsel F004-->

Image Carousel with Lightbox

<!-- inpost-slider -->
<div class="row"> 
  <div class="col-sx-12 ">
    <!-- carousel -->
        <div class="wrapper-carusel inpost-slider">
          <div class="carusel-3">
            <div class="row list-carousel responsive slider-foo-3 ">
           
              <div class="preloader">
                  <div class="preload-img"></div>
              </div>
 
              <div class="carousel-box foo3">
                <div class="col-xs-12">
                  <div class="row">
                    <div class="col-xs-12">
                      <div class="img-block">
                        <a class="fancybox replace-2x" rel="group-1" href="images/portfolio/02/01.jpg" title="Img Title!">
                          <img class="replace-2x" src="images/portfolio/02/01.jpg" width="940" height="630" alt="">
                        </a>
                      </div>
                      <div class="clearfix"></div>
                    </div>
                    
                  </div>
                </div>
 
                ...
                   
              </div>
              
            </div>
          </div>
          <button class="prev"><i class="fa fa-angle-left"></i></button>
          <button class="next"><i class="fa fa-angle-right"></i></button>
        </div><!-- /carousel -->
  </div>
</div><!-- inpost-slider -->

Images with Lightbox

<a class="fancybox replace-2x" rel="group5" href="images/...jpg" title="Title">
  <img class="replace-2x" src="images/...jpg" class="img-rounded" alt="">
</a>

Notification

The color change depends on class. Such variants are possible: alert-black, alert-success, alert-danger, alert-info, alert-gray, alert-warning.

<div class="col-xs-12 col-sm-6">
  <div class="alert alert-black fade in">
    <i class="fa fa-times-circle alert-icon"></i>
    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
    <strong>Information!</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
      Dolorem ducimus quam magni ex ut dolorum doloremque rem porro, 
      officia autem culpa alias.
  </div>
</div>

Backgrounds

Our template supports different types of background. It may be just an image, the image with color overlay, paralax image, blur image and video background. So, how we can insert our background into the html code? Have a look:

<div class="bg-box part-10">
  <div class="overlay"></div>
</div>

This is the code html for background, for class part-10 you insert an image. For each block you create a separate class, e.g. part-1, part-2, part-3...

For the class overlay you may set the overlay color and its opacity. Example of CSS code:

.part-10{
    background: url(../images/slider/slide-2.jpg) no-repeat center center;
}
 
.part-10 .overlay{
    background-color: rgba(31, 31, 31, 0.61);
}

where 31, 31, 31, RGBA code for the color and 0.61 its opacity. This is where we insert the code for background:

<div class="container-fluid cont-box" id="our-team">
 
  <!-- background -->  
  <div class="bg-box part-10">
    <div class="overlay"></div>
  </div>
  <!-- / background -->  
 
  <!-- content -->  
  <div class="container">
    <div class="row">
        ....    
    </div>
  </div>
  <!-- content -->  
 
</div>

Paralax Background

For the paralax effect of the image you should add the class vertical-parallax and a parameter data-speed="6". You can use data-offsetY for adjusting position of background. Don't forget to customize the classes part-7, overlay as it was mentioned before.

 <section  class="part-7 vertical-parallax cont-box" data-speed="6" data-type="background" data-offsetY="700" id="">
  <div class="overlay"></div>
 
  <div class="container-fluid invert-elements" >
    
    ....
 
  </div>
  
</section>

Blur Background

Blur effect enables inserting the class blur into the background block.

<div class="bg-box blur part-10">
	<div class="overlay"></div>
</div>

Video Background

Video background effect doesn't work on tablets and phones. To enable the video background you should insert the class bg-video into the background block and write the path for the videos. For different web-browsers we need to upload different types of video. .mp4, .ogg, .webm are the needed ones.

<div class="bg-box bg-video part-3">
  <video autoplay="autoplay" loop="loop" muted="muted"> 
    <source src="media/cloud.mp4" type="video/mp4">
    <source src="media/cloud.ogg" type="video/ogg">
    <source src="media/cloud.webm" type="video/webm">
  </video>
</div>

"part-3" - the picture for the tablets and phones
"muted" - you can delete this class and the video will be played with the sound
"volume" - volume of the video

Retina

Retina Ready is a feature for displaying the high resolution images on the modern devices. It is created to show the true view of the HD images.

In our theme to enable the Retina for images you should have two images:

first one has the standart size and a standart name (slide-2.jpg)
second one must be twice bigger then the origin and have additional annex @2x ([email protected]

Both images must be in the same folder!

So, how we can enable it in our html template? You should insert a class replace-2x into the 'img' tag. Example:

<img class="replace-2x" src="images/slide-2.jpg" alt="">

This is an example of CSS code that displays how we can connect our Retina image to the original image of the background:

.part-2 {
  background-image: url('../images/slider/slide-2.jpg');
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .part-2 { background-image: url('../images/slider/[email protected]'); 
  background-size: cover; }
}

Animation Elements

Animation of the elements reached by scrolling. You can put the classes listed below to change the effects in code "data-appear-animation=" ... ".

<div data-appear-animation="bounceInUp">
   <img src="image.png" alt="">
</div>

Effects classes:

flash
shake
bounce
tada
swing
swing
wobble
wiggle
pulse
fadeIn
fadeInUp
fadeInDown
fadeInLeft
fadeInRight
fadeInUpBig
fadeInDownBig
fadeInLeftBig
fadeInRightBig
bounceIn
bounceInUp
bounceInDown
bounceInLeft
bounceInRight
rotateIn
rotateInUpLeft
rotateInDownLeft
rotateInUpRight
rotateInDownRight

Social icons GetShar

Icons are needed to insert into a column with the post after .title

								<div class="post-soc-icon">
  <div class="count-shared text-center">
    <div class="quantity">0</div>
    <span>Shares</span>
  </div>
  
  <div class="social-inp">
    <a href="#" class="shared-btn gt-fb" data-network="facebook"></a>
    <a href="#" class="shared-btn gt-tw" data-network="twitter"></a>
    <a href="#" class="shared-btn gt-gp" data-network="googleplus"></a>
    <a href="#" class="shared-btn gt-pt" data-network="pinterest"></a>
  </div>
  
</div>

							

List of social sharing buttons

Social network	Code	Data network
Facebook	`class="gt-fb"`	`data-network="facebook"`
Twitter	`class="gt-tw"`	`data-network="twitter"`
Google+	`class="gt-gp"`	`data-network="googleplus"`
Pinterest	`class="gt-pt"`	`data-network="pinterest"`
LinkedIn	`class="gt-in"`	`data-network="linkedin"`
VKontakte	`class="gt-vk"`	`data-network="vk"`
StumbleUpon	`class="gt-st"`	`data-network="stumbleupon"`

"SCSS"

All SCSS files are located in the folder /sass/. SCSS is a CSS preprocessor that adds many features like variables, mixins, imports, color manipulation, functions, and tons of other powerful features.

The entire compiler comes in a single class file ready for including in any kind of project in addition to a command line tool for running the compiler from the terminal.

The configuration of the paths for compilation is located in the file config.rb. The structure:

/bootstrap/ - folder with bootstrap variables
bootstrap.scss - file that imports all variables from all files
style.scss - imports all styles
_typography.scss - the customization of fonts
_vertical-tabs.scss - styles for tabs
_morris.scss - styles for diagrams
_responsive.scss - styles for responsive

SmallIcons

"SmallIcons"are payed SVG-icons, "Retina-ready". Official website: smallicons.net/.

“Smallicons” can be used in two ways. You can attach *.svg files or use any HTML element (e.g. span, i, div). In the second variant you need to add .sm-icon class for its initialization and data-attributes with icon's name and color. For example:

<span class="sm-icon" data-sm-name="twitter"></span>
<i class="sm-icon" data-sm-name="twitter" data-sm-color="cyan"></i>
<div class="sm-icon" data-sm-name="twitter" data-sm-color="tomato"></div>

Result:

Icons Color

Not every icon allows to change its color. It must be single-color or with clearly defined main color, so that its change won't spoil the author's idea of the icon. If you don't specify the color, the default color will be used.

playBack