Installation

Follow the steps below to get started with your Site Template:

Open the Package/HTML Folder to find all the Templates Files
You will need to Upload these files to your Web Server using FTP in order to use it on your Website.
Make sure you upload the required files/folders listed below:
- HTML/css - Extra Stylesheets Folder plus Main Stylesheet File
- HTML/images - Images Folder
- HTML/js - Javacripts Folder
- HTML/index.html - Index File/Homepage
The other files can be used according to your preferences.
You're now good to go..! Start adding your Content and show off your Brand New Beautiful Website in style.

HTML Structure

Elen follows a simple coding structure. here is the sample:

<!DOCTYPE html>
<html lang="en">
<head>

	<!-- Your Stylesheets, Title
	============================================= -->
	...

</head>
<body>

	<!-- The Loader Before Site Load
	============================================= -->
<div  class="loader">
  ....
</div>

		<!-- Header
		============================================= -->
<header>
  <div class="container">
    ...
  </div>
</header>

		<!-- Site Content
		============================================= -->
<section>
  <div class="container">
    ...
  </div>
</section>

		<!-- Footer
		============================================= -->
<footer>
  <div class="container">
  ...
  <!-- Useful links
  ============================================= -->
    <ul class="breadcrumb">
      .....
    </ul>
  </div>
</footer>


<!-- Your All Scripts will be here
	============================================= -->
	...

</body>
</html>

Favicons & Apple Touch Icons

You can add a Favicon to your Website using the following code just bottom to the Stylesheet files links:

<link rel="icon" href="favicon.png" type="image/png" sizes="16x16">

You can add Apple Touch Icons to your Website using the following code:

<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">

Page Loading Transitions

You can show Interactive loaders to your Visitors while the Pages of your Website loads in the background & then Reveal show Interactive loaders to your Visitors while your Pages with CSS3 Transitions. Page Loading Transitions are enabled by default. To disable the Transition, you can simply remove .loader Class just after the <body> Tag.

You can also add transition effects on any section or any contantent used in the web site for the purpose of smooth loading effects and scrolling.

Logo Settings

The Logo Container can be found in the Header Container - navbar-default

<div class="navbar-header">
	<a href="index.html" class="navbar-brand"><img src="images/logo.png" alt="logo" class="logo"></a>
</div>

Changing Fonts

Change your Fonts from Google Fonts Library directly if you plan to use a Google Font You can find the Linking to the Font Files in the head tag of all the .html files.

<link href="http://fonts.googleapis.com/css?family=Lato:300,400,400italic,600,700|Raleway:300,400,500,600,700|Crete+Round:400italic" rel="stylesheet" type="text/css" />

In order to change the Fonts, you will need to Edit the Above Links with your Custom Font if you plan to use a Google Font or Remove it complete if you plan to use a Self Hosted font. Here is an Example for using Self Hosted Fonts.

By default, Elen uses 4 Fonts namely: Raleway, oswal , montserrat , Lato from the Google Fonts Library.

Website Optimization Tips

A Fast & Optimized Website has several factors which needs to be implemented in order to achieve the desired results. There are several Optimization Techniques available which will definitely affect your Website's Performance in a Positive Way & we want to share a few of them with you:

gZip Compression & Browser Caching

This is probably one of the Most Important Techniques you should definitely implement in order to bump up your Website's Loading Speed. gZip Compression is used to compress the Files that are delivered when loading a Website. It covers HTML, CSS, Javascript & Font Files along with other miscellaneous text files. Where as Browser Caching also covers Images & Videos apart from including the above files. This is used to saves the Static Data in your Browser itself so that when you open the Next Pages on the Same Website, the content does not gets Downloaded again, loading the Website fast.

gZip Compression & Browser Caching can be enabled using the .htaccess File on an Apache Web Server. You can use the Codes from here: https://github.com/h5bp/html5-boilerplate/blob/master/dist/.htaccess to enable these modules on your server.
Image Compression & Optimization

We tend to use Lots of Images on our Websites but we often do not make efforts to Compress & Optimize them. Remember, the Larger the Image, the more time it takes to download and therefore this slows your website loading times affecting User Experience. Your customer will leave your website if it does not load within 3-5 Seconds which adversely affects your Sales. Therefore, it is important to Resize, Optimize & Compress your Images before using it on your Website. Here are some Tips which might come handy in optimizing images:
- Resize your Images: Resize your Images before using it on your Website. Do not just Download an Image & place it as it is in your Website's <img> Tag without resizing it. The size/resolution of the Image matters since it is not recommended to use an Image size of 1200px x 800px in a Content Size of 300px x 200px as this is unnecessary. Resize it to 300px x 200px
- Image Formats: There are three common file types that are used for web images which are JPEG, GIF, & PNG. For images with a Flat Background use JPEG images, for images with a Transparent background use PNG images and for images with Animations use GIF images.
- Compressing Images: Images Compression is important as it considerably reduces the size without losing the quality. There are several FREE Image Optimization Tools available to Download.
  For MAC use ImageOptim
  For Windows use Riot for compressing JPEG Images & PNG Gauntlet for PNG Images.
CSS & jQuery Minifications

It is also recommended that you Combine & Minify all your CSS Files to a single CSS File & all Javascript Files to a single JS File since Minification reduces the size of the File and Combining the files helps in reducing the number of HTTP requests made to the server. This is also an Important Factor in increasing the speed of your website. There are several tools available online to Minify your CSS & JS Files. Our recommendations are:
For CSS use CSS Minifier and For Javascript use Javascript Minifier.
Content Delivery Network

You can use a CDN to further speed up your website. You can use the CDN to deliver static files of your website like CSS, JS, Images & Font Files. There are several CDN Hosting Providers available on the Internet but we would recommend MaxCDN or CloudFlare. Note: CDN setup requires Extra monthly Fees to setup, so it is completely optional & according to your needs.
Fast Web Hosting Servers

A lot depends on your Web Hosting Servers, so it is recommended that you choose a Hosting Company/Server that provides a Reliable & a Fast Hosting Service. You can check out some recommended Hosting Services here: http://themeforest.net/get_hosting.

Header

You can choose the headers while creating your Page. Default Header with a Dark Background having a menu bar right alo9gned, while turns Stickey after a little scrolling &,you can make header without stickey effect for this just remove the .navbar-sticky Class from nav tag. Simply follow the structure below:

<header>
	...
</header>

Menu Styles

Default Menu Style which aligns to the right, You can use the Menu just as

<nav class="nav class="navbar navbar-default bootsnav">
  <ul class="nav navbar-nav navbar-right">
    <li><a href="#.">about us</a></li>
    <li><a href="contact.html">contact us</a></li>
  </ul>
</nav>

Push Menu

You can add another menu style that can be pushed from any side, here is default push menu from right. The structure for create this menu is below as :

<!-- To Open push menu button -->
<li class="side-menu"><a href="#."><i class="fa fa-bars"></i></a></li>

<!-- Start Push Menu -->
<div class="side">
  <a href="#." class="close-side"><i class="fa fa-times"></i></a>
  <div class="widget">
    <h6 class="title">Some Title</h6>
    <ul class="link">
      <li><a href="#.">About</a></li>
      <li><a href="#.">Services</a></li>
      <li><a href="#.">Blog</a></li>
      <li><a href="#.">Portfolio</a></li>
      <li><a href="#.">Contact</a></li>
    </ul>
  </div>
</div>
<!-- End Push Menu -->

Full Page Overlay Menu

You can add another menu style that will covers the full page in overlay style, for this you just need to add .navbar-full class in nav Tag. The structure for create this menu is below as :

<nav class="navbar navbar-default navbar-full bootsnav">
<!-- Start Header Navigation -->
  <div class="navbar-header">
  <!-- To open Overlay menu button -->
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-menu">
    <i class="fa fa-bars"></i>
    </button>
    <a class="navbar-brand" href="index2.html"><img src="images/logo-black.png" class="logo" alt=""></a>
  </div>

  <div class="collapse navbar-collapse" id="navbar-menu">
    <ul class="nav navbar-nav" >
      <li><a href="#.">Home</a></li>
      .....
    </ul>
  </div> 
</nav>

Page Titles

We have added page titles within background styled layout for inner pages of website. for this the Page title heading and a small caption line under the headein as below:

<!--Page header & Title-->
<section class="page_header">
  <div class="container header_content">
    <div class="row">
      <div class="col-md-12">
        <h2>Blog</h2>
        <p>classsic news posts</p>
      </div>
    </div>
  </div>
</section>

For navigate between the inner pages to home page, we made bread crumb menu as below

<section class="page_menu">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <ul class="breadcrumb">
          <li><a href="index.html">Home</a></li>
          <li class="active">Page Name</li>
        </ul>
      </div>
    </div>
  </div>
</section>

Columns & Grid

Bootstrap Grid

.col-md-1

.col-md-2

.col-md-3

.col-md-4

.col-md-5

.col-md-2

.col-md-6

.col-md-1

.col-md-11

.col-md-2

.col-md-10

.col-md-3

.col-md-9

.col-md-4

.col-md-8

.col-md-5

.col-md-7

Side Panel

You can add a revealable Side Panel on your Website with Additional Information about your Website. Here is sample of side panel with all possible information about website, Simply use the Code below:

<aside class="sidebar">
  <div class="widget">
    <h4 class="heading uppercase">Title</h4>
    <ul class="category">
      <li><a href="#.">Adidas <span>(10)</span></a></li>
      <li><a href="#.">Nike <span>(09)</span></a></li>
      .....
    </ul>
  </div>
  <div class="widget">
    <h4 class="heading uppercase">Price</h4>
    <div class="range">
      <div id="slider-3"></div>
      <p><input type="text" id="price" style="border:0; color:#333333; font-weight:bold; font-size:12px;"></p>
      <button type="submit">Search</button>
    </div>
  </div>
</aside>

Note: Make sure that you add the Side Panel's Code just after the .blog-item ends.

Side Panel Position

A Side Panel can be revealed from either Left or Right. The Side Panel is revealed from the Right and also Left by default. If you would like to change the Reveal Position of the Side Panel to Left, then you can simply add the .pull-left/ right Class to the <aside> Tag.

<aside class="pull-left">

Helper Classes

We have created some really useful helper classes for you. Here are a few of them:

.padding_top - pagdding of 90px on top of sections.
.padding - pagdding of 90px on the top and bottom of sections.
.padding_bottom - pagdding of 90px on the bottom of sections.
.padding-_half - pagdding of 45px on the top and bottom of sections.
.no-margin - to remove padding or margin on any element.
.heading_space - margin of 20px on the bottom of sections.
.content_space - margin of 40px on the bottom of headings
.margintop40 - margin of 40px on the top of section
.bottom30 - margin of 30px on the bottom of element
.heading - creating the border for headings in the sections.
.btn-common - For commonly used links / buttons styling.
.btn-light - For commonly used links / buttons styling.
.btn-dark - For commonly used links / buttons styling.
.border_radius - For create the border rounder of 4px on elements used in website
.uppercase - to make text transform in Uppercase.
.tags - used tags in web site.

Slider Types & their Options

Elen includes 2 Unique Sliders for you to be used on any Page with 100s of Options. The List of all the Sliders included are mentioned as follows:

Revolution Slider
Owl Slider

Revolution Slider

You can find the Revolution Slider related Documentation here.

Read Revolution Slider Docs

You can find the Owl Slider related Documentation here.

Read Owl Slider Docs

Blog Setup

Posts use Simple Markup. Use the Code Sample below in the .container Class:

<!-- Blogs -->
<section id="blog">
  <div class="container">
    <article class="blog_item">
      <div class="blog_image">
        <!-- Blog featured image -->
        <img src="images/blog-1.jpg" alt="blog">
        <a href="blog_post.html"><i class="fa fa-link"></i></a>
      </div>
      <div class="blog_text">
        <ul class="meta margintop15 marginbottom15">
          <li class="uppercase">POSTED IN NEWS</li>
          <li class="uppercase">BY: <a href="#.">Erentheme</a></li>
          <li class="uppercase time pull-right">Date: 16 June, 2016</li>
        </ul>
        <h5 class="uppercase marginbottom15">How To Wear Prints In Winter</h5> 
        <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan...</p>
      </div>
    </article>
  </div>
</section>

Comment

You can different types of Comments System on Post Single Pages like as:

<div class="media blog-reply">
  <div class="media-left"> <a href="#."><img class="media-object" src="images/author.png" alt="..."></a> </div>
  <div class="media-body">
    <h5 class="marginbottom10">Artice by <a href="#.">Erentheme</a></h5>
    <p>It is a long established fact that a reader will be distracted ....</p>
  </div>
</div>

Portfolio Setup

Elen provides a very elegant way to showcase your work that filter with two different6 layout. Setting up Portfolio is simple. Please use the following codes:

Setting up Portfolio Filter:

<div class="shop-grid-controls">
    <a class="side-button bottom30" href="#."> Show Sidebar</a>
    <div class="view-button grid active bottom30">
      <i class="fa fa-th-large"></i>
    </div>
    <div class="view-button list bottom30">
      <i class="fa fa-align-justify"></i>
    </div>
    <div class="entry bottom30">
      <form class="grid-form">
        <div class="form-group">
          <div class="select form-control">
            <select name="country" id="city">
            <option selected>Defaul sorting</option>
            ....
            </select>
          </div>
        </div>
      </form>
    </div>
  </div>

Setting up Portfolio Items:

<div class="grid">
  <div class="shop-grid grid-view">
    <div class="product_wrap heading_space">
      <div class="image">
        <div class="tag-btn"><span class="uppercase text-center">New</span></div>
        <img src="images/product5.jpg" alt="Product" class="img-responsive">
      </div>
      <div class="product_desc">
       <p class="title">Sacrificial Chair Design </p>
       <div class="list_content">
         <h4 class="bottom30">Sacrificial Chair Design </h4>
         <p>Duis autem vel eum iriure dolor ........ </p>
          <ul class="review_list bottomtop30">
            <li><img alt="star" src="images/star.png"></li>
            <li><a href="#.">10 review(s) </a></li>
            <li><a href="#.">Add your review</a></li>
          </ul>
          <h4 class="price bottom30"><i class="fa fa-gbp"></i>170.00  <span class="discount"><i class="fa fa-gbp"></i>170.00</span></h4>
          <div class="cart-buttons">
            <a class="uppercase border-radius btn-dark" href="cart.html"><i class="fa fa-shopping-basket"></i>   Add to cart</a>
            <a class="icons" href="#.">
            <i class="fa fa-heart-o"></i>
            </a>
            <a class="icons" href="#.">
            <i class="fa fa-exchange"></i>
            </a>
          </div>
      </div>
      <span class="price"><i class="fa fa-gbp"></i>170.00</span>
      <i class="fa fa-shopping-basket open"></i>
      </div>
    </div>
  </div>
</div>

Setting up Portfolio Scripts for Filter Functions:

<script type="text/javascript">

	// portfolio filtering
     $('.view-button.grid').on('click', function(){
    	if($(this).hasClass('active')) return false;
    	$('.shop-grid').fadeOut(function(){
    		$('.shop-grid').removeClass('list-view').addClass('grid-view');
    		$(this).fadeIn();
    	});
    	$(this).parent().find('.active').removeClass('active');
    	$(this).addClass('active');
    });

    $('.view-button.list').on('click', function(){
    	if($(this).hasClass('active')) return false;
    	$('.shop-grid').fadeOut(function(){
    		$('.shop-grid').removeClass('grid-view').addClass('list-view');
    		$(this).fadeIn();
    	});
    	$(this).parent().find('.active').removeClass('active');
    	$(this).addClass('active');
    });

</script>

Introduction

Elen boasts of a huge number of handy Shortcodes which are quite powerful, flexible, functional & easy to use. Setting up shortcodes is very easy & Self Explanatory. Here is the List of Shortcodes included with Elen :

Animations
Buttons
Carousels
Columns
Counters
Dividers
Icon Boxes
Galleries
Heading Styles
Icon Lists
Labels
Lightboxs
Lists & Panels
Media Embeds
Modal Boxes
Navigations
Pricing Boxes
Blockquotes
Responsive
Sections
Social Icons
Alert Boxes
Styled Icons
Testimonials

Each of the above mentioned Shortcodes are easily extendable, flexible & easy to use. You can find the sample codes in their respective files. We are explaining a few of them for your Reference.

Animations

Scroll to reveal Animations are latest in the Trends. You can do them too with Elen . You can use animations on any element you want. Here is the Sample Code:

<div data-animate="fadeInLeft"></div>

You can also use delays for your Animations:

<div data-animate="fadeInLeft" data-delay="500"></div>

Note: Delay Duration is in milliseconds.

Here is the list of the Animation Types you can use:

bounce
flash
pulse
rubberBand
shake
swing
tada
wobble
bounceIn
bounceInDown
bounceInLeft
bounceInRight
bounceInUp
bounceOut
bounceOutDown
bounceOutLeft
bounceOutRight
bounceOutUp
fadeIn
fadeInDown
fadeInDownBig
fadeInLeft
fadeInLeftBig
fadeInRight
fadeInRightBig
fadeInUp
fadeInUpBig
fadeOut
fadeOutDown
fadeOutDownBig
fadeOutLeft
fadeOutLeftBig
fadeOutRight
fadeOutRightBig
fadeOutUp
fadeOutUpBig
flip
flipInX
flipInY
flipOutX
flipOutY
lightSpeedIn
lightSpeedOut
rotateIn
rotateInDownLeft
rotateInDownRight
rotateInUpLeft
rotateInUpRight
rotateOut
rotateOutDownLeft
rotateOutDownRight
rotateOutUpLeft
rotateOutUpRight
hinge
rollIn
rollOut
zoomIn
zoomInDown
zoomInLeft
zoomInRight
zoomInUp
zoomOut
zoomOutDown
zoomOutLeft
zoomOutRight
zoomOutUp

Sections & Parallax

Setup content you want to stand out, give an id to the section and setting background-attachment:fixed;.

<section id "parallax">
	<div class="container">
		...
	</div>
</section>

Setup JQuery function

$('#parallax').parallax("50%", 0.3);

Make sure your Parallax Images are of enough Width & Height, preferably 1920x1280 or above.

Accordions

Setup accordion content you want to stand out by wrapping with .accordion-container Class. You can use it any where in pages and any type of content in .set div that expended on click. Complete structure of Accordions here below:

 <!--Accordions-->
  <div class="widget">
    <div class="accordion-container">
    <div class="set">
      <a href="#." class="active uppercase">Chair<i class="fa fa-plus"></i></a>
      <div class="content">
        <ul>
        <li><a href="#.">Bag & Luggage</a></li>
        . . . 
        </ul>
      </div>
    </div>
    <div class="set">
      <a href="#." class="uppercase">Collepse <i class="fa fa-plus"></i></a>
      <div class="content">
         ....
      </div>
    </div>
    . . . .
  </div>
  </div>

Tabs

Setup tabbed content you want to stand out. For this you have to use .tabs Class for tab filters and wrapping the content in .tab_container Class

<div class="shop_tab">
  <!-- Tabs Filter -->
  <ul class="tabs">
    <li class="active" rel="tab1"><h4 class="heading uppercase">Description</h4></li>
    <li rel="tab2"><h4 class="heading uppercase">Customer Review</h4></li>
    <li rel="tab3"><h4 class="heading uppercase">Product Tags</h4></li>
  </ul>
  <div class="tab_container">
    <div id="tab1" class="tab_content">
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry'....</p>
    </div>
    <div id="tab2" class="tab_content">
    . . . . . 
    </div>
    . . . .  
  </div>
</div>

Pagination

Setup Pagination for navigate the purpose, use the code setup below here

<ul class="pager">
  <li><a href="#."><i class="fa fa-angle-left"></i></a></li>
  <li class="active"><a href="#.">01</a></li>
  <li><a href="#.">02</a></li>
  ....
  <li><a href="#."><i class="fa fa-angle-right"></i></a></li>
</ul>

Lightbox & Notifications

Setting up Lightboxes:

Adding a data-fancybox attribute and class .fancyboxto any Link or Button will turn it into a Lightbox Element. You can use different Types of Lightbox with an Easy Setup:

Single Image:

<a class="fancybox" href="link-to-lightbox-image.jpg" data-fancybox="image"><img src="link-to-small-thumb.jpg" alt="Lightbox Image"></a>

Iframe:

<a class="fancybox fancybox.iframe" href="iframe.html">ifram</a>

Video:

<a fancybox-media href="http://www.youtube.com/watch?v=kuceVNBTJio" data-lightbox="iframe">Lightbox Video</a>

Note: It is recommended that you use only this Format http://www.youtube.com/watch?v=kuceVNBTJio for Youtube Videos.

AJAX:

<a class="fancybox fancybox.ajax" href="ajax.txt">AJAX Content in a Lightbox</a>

Note: It is recommended that you use the .fancybox.ajax Class to wrap your AJAX Content to get it displayed properly. You can also design your AJAX Content in any way using your own Custom CSS.

Gallery:

	<a class="fancybox" href="link-to-lightbox-image.jpg" data-fancybox-group="gallery"><img src="link-to-small-thumb.jpg" alt="Lightbox Image"></a>
	<a class="fancybox" href="link-to-lightbox-image.jpg" data-fancybox-group="gallery"><img src="link-to-small-thumb.jpg" alt="Lightbox Image"></a>
   <a class="fancybox" href="link-to-lightbox-image.jpg" data-fancybox-group="gallery"><img src="link-to-small-thumb.jpg" alt="Lightbox Image"></a>
   <a class="fancybox" href="link-to-lightbox-image.jpg" data-fancybox-group="gallery"><img src="link-to-small-thumb.jpg" alt="Lightbox Image"></a>

Showing Lightbox Captions:

To show Captions for your Lightbox/Fancybox Images you will need to add the data-title Attribute for your Lightbox Links:

<a class="fancybox" href="link-to-lightbox-image.jpg" data-lightbox="image" data-title="Lightbox Image"><img src="link-to-small-thumb.jpg" alt="Lightbox Image"></a>

Icons

icon-line-eye
icon-line-paper-clip
icon-line-mail
icon-line-toggle
icon-line-layout
icon-line-link
icon-line-bell
icon-line-lock
icon-line-unlock
icon-line-ribbon
icon-line-image
icon-line-signal
icon-line-target
icon-line-clipboard
icon-line-clock
icon-line-watch
icon-line-air-play
icon-line-camera
icon-line-video
icon-line-disc
icon-line-printer
icon-line-monitor
icon-line-server
icon-line-cog
icon-line-heart
icon-line-paragraph
icon-line-align-justify
icon-line-align-left
icon-line-align-center
icon-line-align-right
icon-line-book
icon-line-layers
icon-line-stack
icon-line-stack-2
icon-line-paper
icon-line-paper-stack
icon-line-search
icon-line-zoom-in
icon-line-zoom-out
icon-line-reply
icon-line-circle-plus
icon-line-circle-minus
icon-line-circle-check
icon-line-circle-cross
icon-line-square-plus
icon-line-square-minus
icon-line-square-check
icon-line-square-cross
icon-line-microphone
icon-line-record
icon-line-skip-back
icon-line-rewind
icon-line-play
icon-line-pause
icon-line-stop
icon-line-fast-forward
icon-line-skip-forward
icon-line-shuffle
icon-line-repeat
icon-line-folder
icon-line-umbrella
icon-line-moon
icon-line-thermometer
icon-line-drop
icon-line-sun
icon-line-cloud
icon-line-cloud-upload
icon-line-cloud-download
icon-line-upload
icon-line-download
icon-line-location
icon-line-location-2
icon-line-map
icon-line-battery
icon-line-head
icon-line-briefcase
icon-line-speech-bubble
icon-line-anchor
icon-line-globe
icon-line-box
icon-line-reload
icon-line-share
icon-line-marquee
icon-line-marquee-plus
icon-line-marquee-minus
icon-line-tag
icon-line-power
icon-line-command
icon-line-alt
icon-line-esc
icon-line-bar-graph
icon-line-bar-graph-2
icon-line-pie-graph
icon-line-star
icon-line-arrow-left
icon-line-arrow-right
icon-line-arrow-up
icon-line-arrow-down
icon-line-volume
icon-line-mute
icon-line-content-right
icon-line-content-left
icon-line-grid
icon-line-grid-2
icon-line-columns
icon-line-loader
icon-line-bag
icon-line-ban
icon-line-flag
icon-line-trash
icon-line-expand
icon-line-contract
icon-line-maximize
icon-line-minimize
icon-line-plus
icon-line-minus
icon-line-check
icon-line-cross
icon-line-move
icon-line-delete
icon-line-menu
icon-line-archive
icon-line-inbox
icon-line-outbox
icon-line-file
icon-line-file-add
icon-line-file-subtract
icon-line-help
icon-line-open
icon-line-ellipsis
icon-type
icon-box
icon-archive
icon-envelope
icon-email
icon-files
icon-printer2
icon-folder-add
icon-folder-settings
icon-folder-check
icon-wifi-low
icon-wifi-mid
icon-wifi-full
icon-connection-empty
icon-battery-full
icon-settings
icon-arrow-left
icon-arrow-up
icon-arrow-down
icon-arrow-right
icon-reload
icon-download
icon-tag
icon-trashcan
icon-search
icon-zoom-in
icon-zoom-out
icon-chat
icon-clock
icon-printer
icon-home
icon-flag
icon-meter
icon-switch
icon-forbidden
icon-phone-landscape
icon-tablet
icon-tablet-landscape
icon-laptop
icon-camera
icon-microwave-oven
icon-credit-cards
icon-map-marker
icon-map
icon-support
icon-newspaper2
icon-barbell
icon-stopwatch
icon-atom
icon-image
icon-cube
icon-bars
icon-chart
icon-pencil
icon-measure
icon-eyedropper
icon-file-settings
icon-file-add
icon-file
icon-align-left
icon-align-right
icon-align-center
icon-align-justify
icon-file-broken
icon-browser
icon-windows
icon-window
icon-folder
icon-connection-25
icon-connection-50
icon-connection-75
icon-connection-full
icon-list
icon-grid
icon-stack3
icon-battery-charging
icon-battery-empty
icon-battery-25
icon-battery-50
icon-battery-75
icon-refresh
icon-volume
icon-volume-increase
icon-volume-decrease
icon-mute
icon-microphone
icon-microphone-off
icon-book
icon-checkmark
icon-checkbox-checked
icon-checkbox
icon-paperclip
icon-chat-1
icon-chat-2
icon-chat-3
icon-comment
icon-calendar
icon-bookmark
icon-email2
icon-heart
icon-enter
icon-cloud
icon-book2
icon-star
icon-lock
icon-unlocked
icon-unlocked2
icon-users
icon-user
icon-users2
icon-user2
icon-bullhorn
icon-share
icon-screen
icon-phone
icon-phone-portrait
icon-calculator
icon-bag
icon-diamond
icon-drink
icon-shorts
icon-vcard
icon-sun
icon-bill
icon-coffee
icon-tv2
icon-newspaper
icon-stack
icon-syringe
icon-health
icon-bolt
icon-pill
icon-bones
icon-lab
icon-clipboard
icon-mug
icon-bucket
icon-select
icon-graph
icon-crop
icon-heart2
icon-cloud2
icon-star2
icon-pen
icon-diamond2
icon-display
icon-paperplane
icon-params
icon-banknote
icon-vynil
icon-truck
icon-world
icon-tv
icon-sound
icon-video
icon-trash
icon-user3
icon-key
icon-search2
icon-settings2
icon-camera2
icon-tag2
icon-lock2
icon-bulb
icon-location
icon-eye
icon-bubble
icon-stack2
icon-cup
icon-phone2
icon-news
icon-mail
icon-like
icon-photo
icon-note
icon-clock2
icon-data
icon-music
icon-megaphone
icon-study
icon-lab2
icon-food
icon-t-shirt
icon-fire
icon-clip
icon-shop
icon-calendar2
icon-wallet
icon-duckduckgo
icon-lkdto
icon-delicious
icon-paypal
icon-flattr
icon-android
icon-eventful
icon-smashmag
icon-gplus
icon-wikipedia
icon-lanyrd
icon-calendar-1
icon-stumbleupon
icon-bitcoin
icon-w3c
icon-foursquare
icon-html5
icon-ie
icon-call
icon-grooveshark
icon-ninetyninedesigns
icon-forrst
icon-digg
icon-spotify
icon-reddit
icon-guest
icon-blogger
icon-cc
icon-dribbble
icon-evernote
icon-flickr
icon-google
icon-viadeo
icon-instapaper
icon-weibo
icon-klout
icon-linkedin
icon-meetup
icon-vk
icon-rss
icon-skype
icon-twitter
icon-youtube
icon-vimeo
icon-windows2
icon-aim
icon-yahoo
icon-chrome
icon-email3
icon-macstore
icon-myspace
icon-podcast
icon-cloudapp
icon-dropbox
icon-ebay
icon-facebook
icon-github
icon-github-circled
icon-googleplay
icon-itunes
icon-plurk
icon-songkick
icon-lastfm
icon-gmail
icon-pinboard
icon-soundcloud
icon-tumblr
icon-eventasaurus
icon-wordpress
icon-yelp
icon-intensedebate
icon-eventbrite
icon-scribd
icon-posterous
icon-stripe
icon-opentable
icon-cart
icon-print
icon-dwolla
icon-appnet
icon-statusnet
icon-acrobat
icon-drupal
icon-buffer
icon-pocket
icon-bitbucket
icon-lego
icon-login
icon-stackoverflow
icon-hackernews
icon-xing
icon-instagram
icon-angellist
icon-quora
icon-openid
icon-steam
icon-amazon
icon-disqus
icon-plancast
icon-appstore
icon-gowalla
icon-pinterest
icon-fivehundredpx
icon-glass
icon-music2
icon-search3
icon-envelope2
icon-heart3
icon-star3
icon-star-empty
icon-user4
icon-film
icon-th-large
icon-th
icon-th-list
icon-ok
icon-remove
icon-zoom-in2
icon-zoom-out2
icon-off
icon-signal
icon-cog
icon-trash2
icon-home2
icon-file2
icon-time
icon-road
icon-download-alt
icon-download2
icon-upload
icon-inbox
icon-play-circle
icon-repeat
icon-refresh2
icon-list-alt
icon-lock3
icon-flag2
icon-headphones
icon-volume-off
icon-volume-down
icon-volume-up
icon-qrcode
icon-barcode
icon-tag3
icon-tags
icon-book3
icon-bookmark2
icon-print2
icon-camera3
icon-font
icon-bold
icon-italic
icon-text-height
icon-text-width
icon-align-left2
icon-align-center2
icon-align-right2
icon-align-justify2
icon-list2
icon-indent-left
icon-indent-right
icon-facetime-video
icon-picture
icon-pencil2
icon-map-marker2
icon-adjust
icon-tint
icon-edit
icon-share2
icon-check
icon-move
icon-step-backward
icon-fast-backward
icon-backward
icon-play
icon-pause
icon-stop
icon-forward
icon-fast-forward
icon-step-forward
icon-eject
icon-chevron-left
icon-chevron-right
icon-plus-sign
icon-minus-sign
icon-remove-sign
icon-ok-sign
icon-question-sign
icon-info-sign
icon-screenshot
icon-remove-circle
icon-ok-circle
icon-ban-circle
icon-arrow-left2
icon-arrow-right2
icon-arrow-up2
icon-arrow-down2
icon-share-alt
icon-resize-full
icon-resize-small
icon-plus
icon-minus
icon-asterisk
icon-exclamation-sign
icon-gift
icon-leaf
icon-fire2
icon-eye-open
icon-eye-close
icon-warning-sign
icon-plane
icon-calendar3
icon-random
icon-comment2
icon-magnet
icon-chevron-up
icon-chevron-down
icon-retweet
icon-shopping-cart
icon-folder-close
icon-folder-open
icon-resize-vertical
icon-resize-horizontal
icon-bar-chart
icon-twitter-sign
icon-facebook-sign
icon-camera-retro
icon-key2
icon-cogs
icon-comments
icon-thumbs-up
icon-thumbs-down
icon-star-half
icon-heart-empty
icon-signout
icon-linkedin-sign
icon-pushpin
icon-external-link
icon-signin
icon-trophy
icon-github-sign
icon-upload-alt
icon-lemon
icon-phone3
icon-check-empty
icon-bookmark-empty
icon-phone-sign
icon-twitter2
icon-facebook2
icon-github2
icon-unlock
icon-credit
icon-rss2
icon-hdd
icon-bullhorn2
icon-bell
icon-certificate
icon-hand-right
icon-hand-left
icon-hand-up
icon-hand-down
icon-circle-arrow-left
icon-circle-arrow-right
icon-circle-arrow-up
icon-circle-arrow-down
icon-globe
icon-wrench
icon-tasks
icon-filter
icon-briefcase
icon-fullscreen
icon-group
icon-link
icon-cloud3
icon-beaker
icon-cut
icon-copy
icon-paper-clip
icon-save
icon-sign-blank
icon-reorder
icon-list-ul
icon-list-ol
icon-strikethrough
icon-underline
icon-table
icon-magic
icon-truck2
icon-pinterest2
icon-pinterest-sign
icon-google-plus-sign
icon-google-plus
icon-money
icon-caret-down
icon-caret-up
icon-caret-left
icon-caret-right
icon-columns
icon-sort
icon-sort-down
icon-sort-up
icon-envelope-alt
icon-linkedin2
icon-undo
icon-legal
icon-dashboard
icon-comment-alt
icon-comments-alt
icon-bolt2
icon-sitemap
icon-umbrella
icon-paste
icon-lightbulb
icon-exchange
icon-cloud-download
icon-cloud-upload
icon-user-md
icon-stethoscope
icon-suitcase
icon-bell-alt
icon-coffee2
icon-food2
icon-file-alt
icon-building
icon-hospital
icon-ambulance
icon-medkit
icon-fighter-jet
icon-beer
icon-h-sign
icon-plus-sign2
icon-double-angle-left
icon-double-angle-right
icon-double-angle-up
icon-double-angle-down
icon-angle-left
icon-angle-right
icon-angle-up
icon-angle-down
icon-desktop
icon-laptop2
icon-tablet2
icon-mobile
icon-circle-blank
icon-quote-left
icon-quote-right
icon-spinner
icon-circle
icon-reply
icon-github-alt
icon-folder-close-alt
icon-folder-open-alt
icon-expand-alt
icon-collapse-alt
icon-smile
icon-frown
icon-meh
icon-gamepad
icon-keyboard
icon-flag-alt
icon-flag-checkered
icon-terminal
icon-code
icon-reply-all
icon-star-half-full
icon-location-arrow
icon-crop2
icon-code-fork
icon-unlink
icon-question
icon-info
icon-exclamation
icon-superscript
icon-subscript
icon-eraser
icon-puzzle
icon-microphone2
icon-microphone-off2
icon-shield
icon-calendar-empty
icon-fire-extinguisher
icon-rocket
icon-maxcdn
icon-chevron-sign-left
icon-chevron-sign-right
icon-chevron-sign-up
icon-chevron-sign-down
icon-html52
icon-css3
icon-anchor
icon-unlock-alt
icon-bullseye
icon-ellipsis-horizontal
icon-ellipsis-vertical
icon-rss-sign
icon-play-sign
icon-ticket
icon-minus-sign-alt
icon-check-minus
icon-level-up
icon-level-down
icon-check-sign
icon-edit-sign
icon-external-link-sign
icon-share-sign
icon-compass
icon-collapse
icon-collapse-top
icon-expand
icon-euro
icon-gbp
icon-dollar
icon-rupee
icon-yen
icon-renminbi
icon-won
icon-bitcoin2
icon-file3
icon-file-text
icon-sort-by-alphabet
icon-sort-by-alphabet-alt
icon-sort-by-attributes
icon-sort-by-attributes-alt
icon-sort-by-order
icon-sort-by-order-alt
icon-thumbs-up2
icon-thumbs-down2
icon-youtube-sign
icon-youtube2
icon-xing2
icon-xing-sign
icon-youtube-play
icon-dropbox2
icon-stackexchange
icon-instagram2
icon-flickr2
icon-adn
icon-bitbucket2
icon-bitbucket-sign
icon-tumblr2
icon-tumblr-sign
icon-long-arrow-down
icon-long-arrow-up
icon-long-arrow-left
icon-long-arrow-right
icon-apple
icon-windows3
icon-android2
icon-linux
icon-dribbble2
icon-skype2
icon-foursquare2
icon-trello
icon-female
icon-male
icon-gittip
icon-sun2
icon-moon
icon-archive2
icon-bug
icon-renren
icon-weibo2
icon-vk2
icon-line2-user-female
icon-line2-user-follow
icon-line2-user-following
icon-line2-user-unfollow
icon-line2-trophy
icon-line2-screen-smartphone
icon-line2-screen-desktop
icon-line2-plane
icon-line2-notebook
icon-line2-moustache
icon-line2-mouse
icon-line2-magnet
icon-line2-energy
icon-line2-emoticon-smile
icon-line2-disc
icon-line2-cursor-move
icon-line2-crop
icon-line2-credit-card
icon-line2-chemistry
icon-line2-user
icon-line2-speedometer
icon-line2-social-youtube
icon-line2-social-twitter
icon-line2-social-tumblr
icon-line2-social-facebook
icon-line2-social-dropbox
icon-line2-social-dribbble
icon-line2-shield
icon-line2-screen-tablet
icon-line2-magic-wand
icon-line2-hourglass
icon-line2-graduation
icon-line2-ghost
icon-line2-game-controller
icon-line2-fire
icon-line2-eyeglasses
icon-line2-envelope-open
icon-line2-envelope-letter
icon-line2-bell
icon-line2-badge
icon-line2-anchor
icon-line2-wallet
icon-line2-vector
icon-line2-speech
icon-line2-puzzle
icon-line2-printer
icon-line2-present
icon-line2-playlist
icon-line2-pin
icon-line2-picture
icon-line2-map
icon-line2-layers
icon-line2-handbag
icon-line2-globe-alt
icon-line2-globe
icon-line2-frame
icon-line2-folder-alt
icon-line2-film
icon-line2-feed
icon-line2-earphones-alt
icon-line2-earphones
icon-line2-drop
icon-line2-drawer
icon-line2-docs
icon-line2-directions
icon-line2-direction
icon-line2-diamond
icon-line2-cup
icon-line2-compass
icon-line2-call-out
icon-line2-call-in
icon-line2-call-end
icon-line2-calculator
icon-line2-bubbles
icon-line2-briefcase
icon-line2-book-open
icon-line2-basket-loaded
icon-line2-basket
icon-line2-bag
icon-line2-action-undo
icon-line2-action-redo
icon-line2-wrench
icon-line2-umbrella
icon-line2-trash
icon-line2-tag
icon-line2-support
icon-line2-size-fullscreen
icon-line2-size-actual
icon-line2-shuffle
icon-line2-share-alt
icon-line2-share
icon-line2-rocket
icon-line2-question
icon-line2-pie-chart
icon-line2-pencil
icon-line2-note
icon-line2-music-tone-alt
icon-line2-music-tone
icon-line2-microphone
icon-line2-loop
icon-line2-logout
icon-line2-login
icon-line2-list
icon-line2-like
icon-line2-home
icon-line2-grid
icon-line2-graph
icon-line2-equalizer
icon-line2-dislike
icon-line2-cursor
icon-line2-control-start
icon-line2-control-rewind
icon-line2-control-play
icon-line2-control-pause
icon-line2-control-forward
icon-line2-control-end
icon-line2-calendar
icon-line2-bulb
icon-line2-bar-chart
icon-line2-arrow-up
icon-line2-arrow-right
icon-line2-arrow-left
icon-line2-arrow-down
icon-line2-ban
icon-line2-bubble
icon-line2-camcorder
icon-line2-camera
icon-line2-check
icon-line2-clock
icon-line2-close
icon-line2-cloud-download
icon-line2-cloud-upload
icon-line2-doc
icon-line2-envelope
icon-line2-eye
icon-line2-flag
icon-line2-folder
icon-line2-heart
icon-line2-info
icon-line2-key
icon-line2-link
icon-line2-lock
icon-line2-lock-open
icon-line2-magnifier
icon-line2-magnifier-add
icon-line2-magnifier-remove
icon-line2-paper-clip
icon-line2-paper-plane
icon-line2-plus
icon-line2-pointer
icon-line2-power
icon-line2-refresh
icon-line2-reload
icon-line2-settings
icon-line2-star
icon-line2-symbol-female
icon-line2-symbol-male
icon-line2-target
icon-line2-volume-1
icon-line2-volume-2
icon-line2-volume-off
icon-line2-users
icon-et-mobile
icon-et-laptop
icon-et-desktop
icon-et-tablet
icon-et-phone
icon-et-document
icon-et-documents
icon-et-search
icon-et-clipboard
icon-et-newspaper
icon-et-notebook
icon-et-book-open
icon-et-browser
icon-et-calendar
icon-et-presentation
icon-et-picture
icon-et-pictures
icon-et-video
icon-et-camera
icon-et-printer
icon-et-toolbox
icon-et-briefcase
icon-et-wallet
icon-et-gift
icon-et-bargraph
icon-et-grid
icon-et-expand
icon-et-focus
icon-et-edit
icon-et-adjustments
icon-et-ribbon
icon-et-hourglass
icon-et-lock
icon-et-megaphone
icon-et-shield
icon-et-trophy
icon-et-flag
icon-et-map
icon-et-puzzle
icon-et-basket
icon-et-envelope
icon-et-streetsign
icon-et-telescope
icon-et-gears
icon-et-key
icon-et-paperclip
icon-et-attachment
icon-et-pricetags
icon-et-lightbulb
icon-et-layers
icon-et-pencil
icon-et-tools
icon-et-tools-2
icon-et-scissors
icon-et-paintbrush
icon-et-magnifying-glass
icon-et-circle-compass
icon-et-linegraph
icon-et-mic
icon-et-strategy
icon-et-beaker
icon-et-caution
icon-et-recycle
icon-et-anchor
icon-et-profile-male
icon-et-profile-female
icon-et-bike
icon-et-wine
icon-et-hotairballoon
icon-et-globe
icon-et-genius
icon-et-map-pin
icon-et-dial
icon-et-chat
icon-et-heart
icon-et-cloud
icon-et-upload
icon-et-download
icon-et-target
icon-et-hazardous
icon-et-piechart
icon-et-speedometer
icon-et-global
icon-et-compass
icon-et-lifesaver
icon-et-clock
icon-et-aperture
icon-et-quote
icon-et-scope
icon-et-alarmclock
icon-et-refresh
icon-et-happy
icon-et-sad
icon-et-facebook
icon-et-twitter
icon-et-googleplus
icon-et-rss
icon-et-tumblr
icon-et-linkedin
icon-et-dribbble
icon-medical-i-womens-health
icon-medical-i-waiting-area
icon-medical-i-volume-control
icon-medical-i-ultrasound
icon-medical-i-text-telephone
icon-medical-i-surgery
icon-medical-i-stairs
icon-medical-i-radiology
icon-medical-i-physical-therapy
icon-medical-i-pharmacy
icon-medical-i-pediatrics
icon-medical-i-pathology
icon-medical-i-outpatient
icon-medical-i-mental-health
icon-medical-i-medical-records
icon-medical-i-medical-library
icon-medical-i-mammography
icon-medical-i-laboratory
icon-medical-i-labor-delivery
icon-medical-i-immunizations
icon-medical-i-imaging-root-category
icon-medical-i-imaging-alternative-pet
icon-medical-i-imaging-alternative-mri
icon-medical-i-imaging-alternative-mri-two
icon-medical-i-imaging-alternative-ct
icon-medical-i-fire-extinguisher
icon-medical-i-family-practice
icon-medical-i-emergency
icon-medical-i-elevators
icon-medical-i-ear-nose-throat
icon-medical-i-drinking-fountain
icon-medical-i-cardiology
icon-medical-i-billing
icon-medical-i-anesthesia
icon-medical-i-ambulance
icon-medical-i-alternative-complementary
icon-medical-i-administration
icon-medical-i-social-services
icon-medical-i-smoking
icon-medical-i-restrooms
icon-medical-i-restaurant
icon-medical-i-respiratory
icon-medical-i-registration
icon-medical-i-oncology
icon-medical-i-nutrition
icon-medical-i-nursery
icon-medical-i-no-smoking
icon-medical-i-neurology
icon-medical-i-mri-pet
icon-medical-i-interpreter-services
icon-medical-i-internal-medicine
icon-medical-i-intensive-care
icon-medical-i-inpatient
icon-medical-i-information-us
icon-medical-i-infectious-diseases
icon-medical-i-hearing-assistance
icon-medical-i-health-services
icon-medical-i-health-education
icon-medical-i-gift-shop
icon-medical-i-genetics
icon-medical-i-first-aid
icon-medical-i-dermatology
icon-medical-i-dental
icon-medical-i-coffee-shop
icon-medical-i-chapel
icon-medical-i-cath-lab
icon-medical-i-care-staff-area
icon-medical-i-accessibility
icon-medical-i-diabetes-education
icon-medical-i-hospital
icon-medical-i-kidney
icon-medical-i-ophthalmology
icon-medical-womens-health
icon-medical-waiting-area
icon-medical-volume-control
icon-medical-ultrasound
icon-medical-text-telephone
icon-medical-surgery
icon-medical-stairs
icon-medical-radiology
icon-medical-physical-therapy
icon-medical-pharmacy
icon-medical-pediatrics
icon-medical-pathology
icon-medical-outpatient
icon-medical-ophthalmology
icon-medical-mental-health
icon-medical-medical-records
icon-medical-medical-library
icon-medical-mammography
icon-medical-laboratory
icon-medical-labor-delivery
icon-medical-kidney
icon-medical-immunizations
icon-medical-imaging-root-category
icon-medical-imaging-alternative-pet
icon-medical-imaging-alternative-mri
icon-medical-imaging-alternative-mri-two
icon-medical-imaging-alternative-ct
icon-medical-hospital
icon-medical-fire-extinguisher
icon-medical-family-practice
icon-medical-emergency
icon-medical-elevators
icon-medical-ear-nose-throat
icon-medical-drinking-fountain
icon-medical-diabetes-education
icon-medical-cardiology
icon-medical-billing
icon-medical-anesthesia
icon-medical-ambulance
icon-medical-alternative-complementary
icon-medical-administration
icon-medical-accessibility
icon-medical-social-services
icon-medical-smoking
icon-medical-restrooms
icon-medical-restaurant
icon-medical-respiratory
icon-medical-oncology
icon-medical-nutrition
icon-medical-nursery
icon-medical-no-smoking
icon-medical-neurology
icon-medical-mri-pet
icon-medical-interpreter-services
icon-medical-internal-medicine
icon-medical-intensive-care
icon-medical-inpatient
icon-medical-information-us
icon-medical-infectious-diseases
icon-medical-hearing-assistance
icon-medical-health-services
icon-medical-health-education
icon-medical-gift-shop
icon-medical-genetics
icon-medical-first-aid
icon-medical-dental
icon-medical-coffee-shop
icon-medical-chapel
icon-medical-cath-lab
icon-medical-care-staff-area
icon-medical-registration
icon-medical-dermatology

Widgets

Widgets are simple & easy to setup, completely flexible & can be used anywhere on a page.all possible widgets are used in Short Code & Side Panel

Images

jQuery

CSS & Fonts

Bootstrap
Animation
Font-Awesome (Font Icons)
Icomoon (Font Icons)
Linecons (Font Icons)
Google Fonts
Raleway
Opensans

Installation

HTML Structure

Favicons & Apple Touch Icons

Page Loading Transitions

Logo Settings

Changing Fonts

Website Optimization Tips

gZip Compression & Browser Caching

Image Compression & Optimization

CSS & jQuery Minifications

Content Delivery Network

Fast Web Hosting Servers

Header

Menu Styles

Push Menu

Full Page Overlay Menu

Page Titles

Columns & Grid

Bootstrap Grid

Side Panel

Side Panel Position

Helper Classes

Slider Types & their Options

Revolution Slider

Blog Setup

Comment

Portfolio Setup

Setting up Portfolio Filter:

Setting up Portfolio Items:

Setting up Portfolio Scripts for Filter Functions:

Introduction

Animations

Sections & Parallax

Setup JQuery function

Accordions

Tabs

Pagination

Lightbox & Notifications

Setting up Lightboxes:

Single Image:

Iframe:

Video:

AJAX:

Gallery:

Showing Lightbox Captions:

Icons

Widgets

Images

jQuery

CSS & Fonts