# The Project - 1.2.0

## Multipurpose HTML5 Template

- created: 05/08/2015
- latest update: 04/03/2016
- by: HtmlCoder
- email: htmlcoder.me@gmail.com

Thank you for purchasing our theme. If you have any questions that are beyond the scope of this help file, please feel free to contact me http://htmlcoder.me/support I will glad to help you :-)

### Update from version 1.1.0 to 1.2.0

#### The version 1.2.0 includes:

- 5 New Home Pages
- 2 Header options
- 2 New footer option
- 1 New sticky header option
- Slider Revolution version 5
- Several plugin updates
- See detailed Changelog

Important Notice: Update your existing website only if you want to use the new pages and features. Before the update,
please backup all your files and your website.

Affected Files/Folders:

1. bootstrap folder
2. css/skins folder
3. css/style.css file
4. fonts/font-awesome folder
5. images folder (new image placeholders added)
6. js/template.js file
7. less folder
8. added new plugin fullpage to plugins folder
9. plugins folder:
   - Updated Slider Revolution to version 5
   - Updated jQuery to v1.12.2
   - Updated Charts.js to v1.1.0
   - Updated Isotope to v2.2.2
   - Updated Magnific popup to v1.1.0
   - Updated Morphext to v2.4.4
   - Updated Vide to v0.5.0
   - Updated Waypoints to 4.0.0

New HTML files:

1. index-gym.html (Gym Home Page)
2. index-logistics.html (Logistics Home Page)
3. index-corporate-4.html (Corporate 4 Home Page)
4. index-resume.html (Resume Home Page)
5. index-agency.html (Agency Home Page)
6. features-headers-gradient-dark.html (New header)
7. features-headers-gradient-light.html (New header)
8. features-headers-sticky-2.html (New sticky header)
9. features-footers-contact-form-2.html (New footer)
10. features-footers-full-width.html (New footer)

Updated HTML files:

1. features-sliders-fullscreen.html (Slider Revolution 5 version)
2. features-sliders-fullwidth.html (Slider Revolution 5 version)
3. features-sliders-fullwidth-big-height.html (Slider Revolution 5 version)
4. features-sliders-boxedwidth-light.html (Slider Revolution 5 version)
5. features-sliders-boxedwidth-dark.html (Slider Revolution 5 version)
6. features-sliders-boxedwidth-default.html (Slider Revolution 5 version)
7. features-sliders-video-background.html (Slider Revolution 5 version)
8. features-sliders-text-rotator.html (Slider Revolution 5 version)

### Files Structure

- template (The Project template)
- - bootstrap (All Bootstrap files. We keep all of them in this folder to make updates easily)
- - css (CSS files of the template)
- - - skins (CSS skin files)
- - email_templates (HTML email templates)
- - fonts (External font libraries)
- - - font-awesome
- - - fontello
- - images (All the images of the template)
- - js (Javascript files of the template)
- - less (All the less files)
- - php (PHP files of the template)
- - plugins (All external libs. We keep all of them in this folder to make updates easily.)
- - videos (All video files)

### Html Structure

The template is based on Bootstrap 3 Framework - http://getbootstrap.com

Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases.

If you need more information, please visit this site: http://getbootstrap.com/css/#grid

### CSS Structure

#### Folder bootstrap

This folder contains all the Bootstrap 3 stylesheets

- bootstrap/css/bootstrap.css (Generic styles, responsive grid styles, resets & normalization)

#### Folder css

This folder contains the stylesheets of the template

- css/style.css (This stylesheet contains all the style rules of the template, do not modify this file, place all your custom css rules into custom.css file.)
- css/animations.css (This stylesheet contains all the css rules for the animations of the template)
- css/animate.css (This stylesheet contains css rules for the animations of the template) it is imported into the animations.css
- css/print-invoice.css (This stylesheet contains all the print css rules for invoice)
- css/custom.css (In this stylesheet you should put your own custom css rules so that you can update the template without issues when new versions will be released)

#### Folder css/skins

This folder contains all the color schemes of the template

- css/skins/blue.css (blue skin)
- css/skins/brown.css (brown skin)
- css/skins/cool_green.css (cool green skin)
- css/skins/dark_cyan.css (dark cyan skin)
- css/skins/dark_red.css (dark red skin)
- css/skins/gold.css (gold skin)
- css/skins/gray.css (gray skin)
- css/skins/green.css (green skin)
- css/skins/light_blue.css (light blue skin)
- css/skins/orange.css (orange skin)
- css/skins/pink.css (pink skin)
- css/skins/purple.css (purple skin)
- css/skins/red.css (red skin)
- css/skins/vivid_red.css (vivid red skin)

### Javascript

#### Folder js

- template.js (The initialization of the elements, libs and features is made by the this file, do not modify this file, place all your custom js code into custom.js file.)
- custom.js (You should place your custom scripts in this file, so that you can update the template without issues when new versions will be released)
- google.map.config.js (Configuration of google map in contact page see below)
- coming.soon.config.j (Configuration of coming soon page see below)

#### Folder plugins

All external js libraries are in the plugins folder. We keep all of them in this folder to make updates easily.

### Customization & Styles

#### Skins

To change the default color scheme, please replace the red.css to the following tag in your head:

    <link href="css/skins/light_blue.css" rel="stylesheet">

#### Layout Style

The template has two different layout modes, Wide and Boxed. The wide one is the default option, if you want to use the Boxed version, add the boxed class to <body> tag as below:

    <body class="boxed">

#### Background Patterns

There are 9 background patterns. Background patterns are available only in boxed layout mode. In order to apply a background pattern all you have to do is to add one of classes pattern-1 ... pattern-9 to body tag.

    <body class="pattern-1 boxed">

#### Fonts

To change the embedded fonts, please take a look in the head part of the website and you will find these tags:

    <link href="http://fonts.googleapis.com/css?family=Roboto:400,300,300italic,400italic,500,500italic,700,700italic" rel="stylesheet" type="text/css">
    <link href="http://fonts.googleapis.com/css?family=Raleway:700,400,300" rel="stylesheet" type="text/css">
    <link href="http://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet" type="text/css">
    <link href="http://fonts.googleapis.com/css?family=PT+Serif" rel="stylesheet" type="text/css">

To change the fonts, visit the http://www.google.com/webfonts choose a font and use the generated code.

#### Header Top Options

#### Dark Header Top

To make the background of header-top dark, add the class dark to .header-top.

    	<div class="header-top dark">

Example: features-headers-classic-dark.html

#### Colored Header Top

To apply the color of the current color-scheme to the background of header-top, add the class colored to .header-top.

    	<div class="header-top colored">

Example 1: features-headers-colored.html
Example 2: features-headers-colored-dark.html

#### Light Header Top

To make the background of header-top light you don't need to add any classes to .header-top.

    	<div class="header-top">

Example: features-headers-classic.html

#### Header Options

#### Fixed Header

By default the positioning of main navigation is set to fixed. To change this behavior delete the fixed class from the header.

    	<header class="header fixed clearfix">

Example of static header: features-headers-simple.html

#### Dark/Light header

By default the header is light add the dark class to .header in order to change it from light to dark version.

    	<header class="header fixed dark clearfix">

Example of Light Header: features-headers-classic.html
Example of Dark Header: features-headers-classic-dark.html

#### Transparent header

Add the transparent class to body in order to make the header transparent.

    	<body class="no-trans transparent-header">

Example of Default/Semi Transparent: features-headers-default.html
Example of Dark/Semi Transparent: features-headers-default-dark.html

#### Predifined Header Examples

Default/Semi Transparent: features-headers-default.html
Dark/Semi Transparent: features-headers-default-dark.html
Classic Light: features-headers-classic.html
Classic Dark: features-headers-classic-dark.html
Colored Light: features-headers-colored.html
Colored Dark: features-headers-colored-dark.html
Full Width: features-headers-full-width.html
Offcanvas Left: features-headers-offcanvas-left.html
Offcanvas Right: features-headers-offcanvas-right.html
Logo Centered: features-headers-logo-centered.html
Slider Top: features-headers-slider-top.html
Simple Static: features-headers-simple.html

#### Menu Options

In Order to disable the animations of main menu remove the class animated from the .main-navigation div.

    <div class="main-navigation with-dropdown-buttons">

Example: features-menus-onhover-no-animations.html

In Order to make the submenus open with click event instead of hover add the class onclick to the .main-navigation div.

    <div class="main-navigation onclick with-dropdown-buttons">

Example 1: features-menus-onclick.html
Example 2 (Animations Disabled): features-menus-onclick-no-animations.html

#### Dark/Light footer

By default the footer is Light add the dark class to #footer in order to change it from light to dark version.

    <footer id="footer" class="dark">

Example of Light Footer: features-footers-default.html
Example of Dark Footer: index-corporate-1.html

#### Page Loaders

We are using pace plugin in order to create amazing page loaders, for more info about pace plugin please visit http://github.hubspot.com/pace/docs/welcome/.

In order to apply a page loader to a page, add the following script to your html file, right before the closing body tag.

    <!-- Pace javascript -->
    <script type="text/javascript" src="plugins/pace/pace.min.js"></script>

see here how

Then add one of classes page-loader-1 ... page-loader-6 to body tag.

    <body class="page-loader-1">

Take a look to the following examples:

Option 1: components-page-loaders.html
Option 2: components-page-loaders-2.html
Option 3: components-page-loaders-3.html
Option 4: components-page-loaders-4.html
Option 5: components-page-loaders-5.html
Option 6: components-page-loaders-6.html

### Icons

We are using three iconic font libraries in The Project Template checkout all available icons:

- Fontawesome
- Fontello
- Glyphicons

### Sliders

#### 1. Home Page Slider

Home page slider is implemented with Slider Revolution. Slider Revolution is an all-purpose slide displaying solution that allows for showing almost any kind of content with highly customizable, transitions, effects and custom animations. Due to its visual oriented interface and countless options, Slider Revolution is suited for beginners and pro’s alike!

More info here http://themes.themepunch.com/?theme=revolution_jq. See the detailed documentation of Slider Revolution plugin here.

#### Basic HTML markup of Full Screen Slideshow:

    <div class="slider-banner-container">
      <div class="slider-banner-fullscreen">
        <ul class="slides">
          <!-- slide 1 -->
          <li> ... </li>
          <!-- slide 2 -->
          <li> ... </li>
          <!-- slide 3 -->
          <li> ... </li>
        </ul>
      </div>
    </div>

Example: features-sliders-fullscreen.html

#### Basic HTML markup of Full Width Slideshow:

    <div class="slider-banner-container">
      <div class="slider-banner-fullwidth">
        <ul class="slides">
          <!-- slide 1 -->
          <li> ... </li>
          <!-- slide 2 -->
          <li> ... </li>
          <!-- slide 3 -->
          <li> ... </li>
        </ul>
      </div>
    </div>

Example: features-sliders-fullwidth.html

#### Basic HTML markup of Full Width Big Height Slideshow:

    <div class="slider-banner-container">
      <div class="slider-banner-fullwidth-big-height">
        <ul class="slides">
          <!-- slide 1 -->
          <li> ... </li>
          <!-- slide 2 -->
          <li> ... </li>
          <!-- slide 3 -->
          <li> ... </li>
        </ul>
      </div>
    </div>

Example: features-sliders-fullwidth-big-height.html

#### Basic HTML markup of Boxed Width Slideshow:

    <div class="slider-banner-container">
      <div class="slider-banner-boxedwidth">
        <ul class="slides">
          <!-- slide 1 -->
          <li> ... </li>
          <!-- slide 2 -->
          <li> ... </li>
          <!-- slide 3 -->
          <li> ... </li>
        </ul>
      </div>
    </div>

Example 1 Light Background: features-sliders-boxedwidth-light.html
Example 2 Dark Background: features-sliders-boxedwidth-dark.html
Example 3 Default Background: features-sliders-boxedwidth-default.html

#### Slideshow with Video Background:

The video of slideshow is located into the videos folder. The filename of the video is background-video-banner. Just replace this file with your video file.
Example: features-sliders-video-background.html

#### Text Rotator:

Morphext plugin is used to create simple text rotators. A simple, high-performance and cross-browser jQuery rotating / carousel plugin for text phrases powered by Animate.css. Please check the website of the plugin for more info http://morphext.fyianlai.com/

Example 1: features-sliders-text-rotator.html
Examples: components-text-rotators.html

#### 2. Content Sliders

OWL Carousel is used to create simple content sliders or carousels, please see components-content-sliders.html

OWL Carousel is touch enabled jQuery plugin that lets you create beautiful responsive carousel sliders. Please check the website of the plugin for more info http://owlgraphic.com/owlcarousel/

Variations of content slider:

1. Content Slider with Controls (Autoplay off)

    <div class="owl-carousel content-slider-with-controls">
      <!-- first slide start -->
      <div>
      ...
      </div>
      .....
    </div>

2. Content Slider with Controls 2 (Autoplay off)

    <div class="owl-carousel content-slider-with-large-controls">
      <!-- first slide start -->
      <div>
      ...
      </div>
      .....
    </div>

3. Content Slider without controls (Autoplay on)

    <div class="owl-carousel content-slider">
      <!-- first slide start -->
      <div>
      ...
      </div>
      .....
    </div>

4. Content Slider with Controls (Autoplay on)

    <div class="owl-carousel content-slider-with-controls-autoplay">
      <!-- first slide start -->
      <div>
      ...
      </div>
      .....
    </div>

5. Content Slider with Controls 2 (Autoplay On)

    <div class="owl-carousel content-slider-with-large-controls-autoplay">
      <!-- first slide start -->
      <div>
      ...
      </div>
      .....
    </div>

Variations of carousels:

1. Carousel (Autoplay off)

    <div class="owl-carousel carousel">
      <!-- first slide start -->
      <div>
      ...
      </div>
      .....
    </div>

2. Carousel (Autoplay on)

    <div class="owl-carousel carousel-autoplay">
      <!-- first slide start -->
      <div>
      ...
      </div>
      .....
    </div>

3. Clients

    <div class="owl-carousel clients">
      <!-- first slide start -->
      <div>
      ...
      </div>
      .....
    </div>

### Lightbox

Magnific Popup is a responsive lightbox & dialog script with focus on performance and providing best experience for user with any device.
Please check the Magnific Popup documentation here http://dimsemenov.com/plugins/magnific-popup/documentation.html.

See lightbox examples in components-lightbox.html page.

### Isotope Filtering

For the Filtering, The Project is using the Isotope plugin http://isotope.metafizzy.co/

Here is an example:

#### Filters Options HTML markup:

    <div class="filters">
      <ul class="nav nav-pills">
        <li class="active"><a href="#" data-filter="*">All</a></li>
        <li><a href="#" data-filter=".web-design">Web design</a></li>
        <li><a href="#" data-filter=".app-development">App development</a></li>
        <li><a href="#" data-filter=".site-building">Site building</a></li>
      </ul>
    </div>

#### Filters Data HTML markup:

    <div class="isotope-container row">
      <div class="col-md-4 col-sm-6 isotope-item web-design">
    	....
    	content
    	....
      </div>
      <div class="col-md-4 col-sm-6 isotope-item site-building">
    	....
    	content
    	....
      </div>
    ...
    </div>

See more examples of isotope filtering into following files:

- index-portfolio.html
- portfolio-grid-1-2-col.html
- portfolio-grid-1-3-col.html
- portfolio-grid-1-4-col.html
- portfolio-grid-1-sidebar.html
- portfolio-grid-2-2-col.html
- portfolio-grid-2-3-col.html
- portfolio-grid-2-4-col.html
- portfolio-grid-2-sidebar.html
- portfolio-grid-3-2-col.html
- portfolio-grid-3-3-col.html
- portfolio-grid-3-4-col.html
- portfolio-grid-3-sidebar.html
- portfolio-fullwidth-2-col.html
- portfolio-fullwidth-3-col.html
- portfolio-fullwidth-4-col.html

### Contact form

In order to setup the contact form of the template the only thing you need to do is to set your email address.
To do this, please open "php/email-sender.php" file and change this line:

    $Recipient = 'set_your_email_here@domain.com';

The contact form is functional only on a live server with php support not localy on your pc.

### Coming Soon Page

Regarding coming soon page only thing you need to do is to set the time at which the countdown expires.
To do this, please open "js/coming.soon.config.js" file and change this line:

    		// var untilDate new Date(Year, Month - 1, Day)
    		//-----------------------------------------------
    		var untilDate = new Date(2016, 2 - 1, 1);

### Social Media

#### Social Media HTML Markup

    <ul class="social-links">
      <li><a target="_blank" href="http://www.facebook.com"><i class="fa fa-facebook"></i></a></li>
      <li><a target="_blank" href="http://www.twitter.com"><i class="fa fa-twitter"></i></a></li>
      <li><a target="_blank" href="http://plus.google.com"><i class="fa fa-google-plus"></i></a></li>
      <li><a target="_blank" href="http://www.skype.com"><i class="fa fa-skype"></i></a></li>
      <li><a target="_blank" href="http://www.instagram.com"><i class="fa fa-instagram"></i></a></li>
      <li><a target="_blank" href="http://www.linkedin.com"><i class="fa fa-linkedin"></i></a></li>
      <li><a target="_blank" href="http://www.pinterest.com"><i class="fa fa-pinterest"></i></a></li>
      <li><a target="_blank" href="http://www.flickr.com"><i class="fa fa-flickr"></i></a></li>
      <li><a target="_blank" href="https://foursquare.com"><i class="fa fa-foursquare"></i></a></li>
      <li><a target="_blank" href="https://soundcloud.com"><i class="fa fa-soundcloud"></i></a></li>
      <li><a target="_blank" href="https://www.tumblr.com"><i class="fa fa-tumblr"></i></a></li>
      <li><a target="_blank" href="https://www.vimeo.com"><i class="fa fa-vimeo-square"></i></a></li>
      <li><a target="_blank" href="https://www.behance.net"><i class="fa fa-behance"></i></a></li>
      <li><a target="_blank" href="http://www.reddit.com"><i class="fa fa-reddit"></i></a></li>
      <li><a target="_blank" href="http://www.drupal.org"><i class="fa fa-drupal"></i></a></li>
      <li><a target="_blank" href="#"><i class="fa fa-share-alt"></i></a></li>
      <li><a target="_blank" href="https://vine.co"><i class="fa fa-vine"></i></a></li>
    </ul>

#### Colored social icons

    <ul class="social-links colored">
    	<li class="facebook"><a target="_blank" href="http://www.facebook.com"><i class="fa fa-facebook"></i></a></li>
    	<li class="twitter"><a target="_blank" href="http://www.twitter.com"><i class="fa fa-twitter"></i></a></li>
    	<li class="googleplus"><a target="_blank" href="http://plus.google.com"><i class="fa fa-google-plus"></i></a></li>
    	<li class="skype"><a target="_blank" href="http://www.skype.com"><i class="fa fa-skype"></i></a></li>
    	<li class="instagram"><a target="_blank" href="http://www.instagram.com"><i class="fa fa-instagram"></i></a></li>
    	<li class="linkedin"><a target="_blank" href="http://www.linkedin.com"><i class="fa fa-linkedin"></i></a></li>
    	<li class="pinterest"><a target="_blank" href="http://www.pinterest.com"><i class="fa fa-pinterest"></i></a></li>
    	<li class="flickr"><a target="_blank" href="http://www.flickr.com"><i class="fa fa-flickr"></i></a></li>
    	<li class="youtube"><a target="_blank" href="https://www.youtube.com"><i class="fa fa-youtube"></i></a></li>
    	<li class="foursquare"><a target="_blank" href="https://foursquare.com"><i class="fa fa-foursquare"></i></a></li>
    	<li class="soundcloud"><a target="_blank" href="https://soundcloud.com"><i class="fa fa-soundcloud"></i></a></li>
    	<li class="tumblr"><a target="_blank" href="https://www.tumblr.com"><i class="fa fa-tumblr"></i></a></li>
    	<li class="vimeo"><a target="_blank" href="https://www.vimeo.com"><i class="fa fa-vimeo-square"></i></a></li>
    	<li class="dribbble"><a target="_blank" href="https://dribbble.com/"><i class="fa fa-dribbble"></i></a></li>
    	<li class="behance"><a target="_blank" href="https://www.behance.net/"><i class="fa fa-behance"></i></a></li>
    	<li class="vine"><a target="_blank" href="https://vine.co"><i class="fa fa-vine"></i></a></li>
    	<li class="stumbleupon"><a target="_blank" href="https://www.stumbleupon.com/"><i class="fa fa-stumbleupon"></i></a></li>
    </ul>

#### Large icons

Add the class large to <ul> tag as below:

    <ul class="social-links large">
    ...
    </ul>

#### Square Icons

Add the class square to <ul> tag as below:

    <ul class="social-links square">
    ...
    </ul>

#### Circural icons

Add the class circle to <ul> tag as below:

    <ul class="social-links circle">
    ...
    </ul>

#### Dark icons

Add the class dark to <ul> tag as below:

    <ul class="social-links dark">
    ...
    </ul>

#### Default icons

Add the class default to <ul> tag as below:

    <ul class="social-links default">
    ...
    </ul>

#### Social Buttons

    <a target="_blank" href="https://www.twitter.com" class="btn btn-animated twitter">Twitter<i class="pl-10 fa fa-twitter"></i></a>
    <a target="_blank" href="https://www.facebook.com" class="btn btn-animated facebook">Facebook<i class="pl-10 fa fa-facebook-square"></i></a>
    <a target="_blank" href="https://plus.google.com" class="btn btn-animated googleplus">Google+<i class="pl-10 fa fa-google-plus"></i></a>
    <a target="_blank" href="https://www.skype.com" class="btn btn-animated skype">Skype<i class="pl-10 fa fa-skype"></i></a>
    <a target="_blank" href="https://www.instagram.com" class="btn btn-animated instagram">Instagram<i class="pl-10 fa fa-instagram"></i></a>
    <a target="_blank" href="https://www.linkedin.com" class="btn btn-animated linkedin">Linkedin<i class="pl-10 fa fa-linkedin"></i></a>
    <a target="_blank" href="http://www.pinterest.com" class="btn btn-animated pinterest">Pinterest<i class="fa fa-pinterest"></i></a>
    <a target="_blank" href="http://www.flickr.com" class="btn btn-animated flickr">Flickr<i class="fa fa-flickr"></i></a>
    <a target="_blank" href="https://foursquare.com" class="btn btn-animated foursquare">Foursquare<i class="fa fa-foursquare"></i></a>
    <a target="_blank" href="https://soundcloud.com" class="btn btn-animated soundcloud">Soundcloud<i class="fa fa-soundcloud"></i></a>
    <a target="_blank" href="https://www.tumblr.com" class="btn btn-animated tumblr">Tumblr<i class="fa fa-tumblr-square"></i></a>
    <a target="_blank" href="https://www.vimeo.com" class="btn btn-animated vimeo">Vimeo<i class="fa fa-vimeo-square"></i></a>
    <a target="_blank" href="https://www.youtube.com" class="btn btn-animated youtube">Youtube<i class="fa fa-youtube"></i></a>
    <a target="_blank" href="https://dribbble.com/" class="btn btn-animated dribbble">Dribbble<i class="fa fa-dribbble"></i></a>
    <a target="_blank" href="https://www.behance.net/" class="btn btn-animated behance">Behance<i class="fa fa-behance"></i></a>
    <a target="_blank" href="https://vine.co" class="btn btn-animated vine">Vine<i class="fa fa-vine"></i></a>
    <a target="_blank" href="https://www.stumbleupon.com/" class="btn btn-animated stumbleupon">Stumbleupon<i class="fa fa-stumbleupon"></i></a>
    <a target="_blank" href="https://www.xing.com/" class="btn btn-animated xing">Xing<i class="fa fa-xing"></i></a>

See more examples of social icons into components-social-icons.html page.

### Google Maps

The Project comes with a great Google maps integration. Making it easy for your visitor to locate your business on the map plays an ever-growing role nowadays.

To change the default Latitude, Longitude and Zoom of the Google map, please replace the following values to your js/google.map.config.js file:

    // Set the coordinates of your location
    myLatlng = new google.maps.LatLng(41.38791700, 2.16991870);
    myZoom = 12;

### Animations Effect

animate.css http://daneden.github.io/animate.css/

You can add some Animations / Transitions to the elements which fires when an element scrolls into view. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness.

#### Usage:

    <div class="object-non-visible" data-animation-effect="fadeInLeft" data-effect-delay="0">
    ...
    </div>

The Attribute data-effect-delay is Optional and is set in Miliseconds.

The animation can be set to:

- bounce
- flash
- pulse
- rubberBand
- shake
- swing
- tada
- wobble
- bounceIn
- bounceInDown
- bounceInLeft
- bounceInRight
- bounceInUp
- fadeIn
- fadeInDown
- fadeInDownBig
- fadeInLeft
- fadeInLeftBig
- fadeInRight
- fadeInRightBig
- fadeInUp
- fadeInUpBig
- flip
- flipInX
- flipInY
- lightSpeedIn
- rotateIn
- rotateInDownLeft
- rotateInDownRight
- rotateInUpLeft
- rotateInUpRight
- slideInUp
- slideInDown
- slideInLeft
- slideInRight
- zoomIn
- zoomInDown
- zoomInLeft
- zoomInRight
- zoomInUp
- hinge
- rollIn

Custom The Project animations

- fadeInUpSmall
- fadeInDownSmall
- fadeInLeftSmall
- fadeInRightSmall

### Credits

#### Demo images

- Unsplash by Crew - http://unsplash.com/ - License
- Gratisography by Ryan McGuire - http://www.gratisography.com/ - License
- Raumrot by Markus Spiske - http://raumrot.com/ - License
- Jeshoots by Jan Vasek - http://jeshoots.com/ - License
- Pexels by Ingo Joseph, Bruno Joseph and Tizian Lengemann - http://www.pexels.com/ - License
- Pixabay by Braxmeier & Steinberger GbR - http://pixabay.com/ - License
- Lorempixel by Felix Holler - http://lorempixel.com/ - License
- Nick Nguyen - https://www.flickr.com/photos/nicktakespics/
- Christian Kadluba - https://www.flickr.com/photos/pokpok/
- Ruocaled - https://www.flickr.com/photos/ruocaled/
- Martin Cathrae - https://www.flickr.com/photos/suckamc/
- Robin - https://www.flickr.com/photos/fotoosvanrobin/
- Pink Sherbet Photography - https://www.flickr.com/photos/pinksherbet/
- Fotolia - http://eu.fotolia.com/
- Perfect Pixels - http://p-px.com/

##### The images used on the live demo website are for demonstration purposes only and are not included in the file for download.

#### Videos

- Life of Vids by Leeroy - http://www.lifeofvids.com/ - License
- Beachfront B-Roll - http://www.beachfrontbroll.com/ - License

#### Patterns

- Subtle Patterns by Atle Mo - http://subtlepatterns.com/ - License

#### Fonts

- Font Awesome by Dave Gandy - http://fortawesome.github.io/Font-Awesome/ - License
- Fontello Authors - http://fontello.com/ - License
- Entypo by Daniel Bruce and Andreas Blombäck - http://www.entypo.com/ - License
- Typicons by Stephen Hutchings - http://typicons.com/ - License
- Google Fonts - http://www.google.com/fonts

#### Resources

- Bootstrap Framework by @mdo and @fat - http://getbootstrap.com/ - License
- Jasny Bootstrap by Arnold Daniels - http://jasny.github.io/bootstrap/ - License
- Bootstrap Notify by Mouse0270 aka Robert McIntosh - https://github.com/mouse0270/bootstrap-growl - License
- jQuery - https://jquery.org/ - License
- Chart.js - by Nick Downie - http://chartjs.org/ - License
- Morphext - by Ian Lai - http://morphext.fyianlai.com/ - License
- jQuery Countdown to by Keith Wood - http://keith-wood.name/countdown.html - License
- jQuery Count to by Matt Huggins - https://github.com/mhuggins/jquery-countTo - License
- jQuery Knob to by Anthony Terrien - https://github.com/aterrien/jQuery-Knob - License
- jQuery Validate by Jörn Zaefferer - http://jqueryvalidation.org/ - License
- jQuery Magnific popup by Dmitry Semenov - http://dimsemenov.com/plugins/magnific-popup/ - License
- Vide by Ilya Makarov - http://vodkabears.github.io/vide/ - License
- Slider Revolution by Themepunch - http://themes.themepunch.com/?theme=revolution_jq
- Owl carousel by Bartosz Wojciechowski - http://owlgraphic.com/owlcarousel/ - License
- jQuery Parallax by Ian Lunn - http://www.ianlunn.co.uk/plugins/jquery-parallax/ - License
- Waypoints by Caleb Troughton - http://imakewebthings.com/waypoints/ - License
- jQuery Browser by Gabriel Cebrian - https://github.com/gabceb/jquery-browser-plugin - License
- SmoothScroll.js by Balazs Galambosi - https://gist.github.com/galambalazs/6477177 - License
- Modernizr - http://modernizr.com/ - License
- Pace by Hubspot - http://github.hubspot.com/pace/docs/welcome/ - License
- Fullpage by Alvaro Trigo - https://github.com/alvarotrigo/fullPage.js - License
- Animate CSS by Daniel T. Eden - http://daneden.github.io/animate.css/ - License
- Hover CSS by Ian Lunn - https://github.com/IanLunn/Hover - License
- Isotope Jquery plugin by metafizzy.co - http://isotope.metafizzy.co - License A license to use the included Isotope v2 Library is provided, as part of our Developer License scheme for the plugin. As clarified in the license scheme possessed by htmlcoder.me: "Users do not need to purchase their own commercial license for the software, so long as they are not acting as Developers, developing their own commercial applications with the Software."

### License

License of The Project (HTML files, css folder (except animate.css file), css/skins folder, js folder, php folder etc)

Third party code, that contained into plugins folder or into other folders, is licensed under its own license.

### End of Documentation

Thank you very much for purchasing the Project template and for reading this documentation :-)