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

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

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

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

</head>
<body>

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

		<!-- Header
		============================================= -->
<header>
</header>

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

		<!-- Footer
		============================================= -->
<footer>
  <div class="container">
  ...
  <!-- Copyrights
  ============================================= -->
    <div class="copyright">
      .....
    </div>
  </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. TO use it you have to need just add the .animate and .fedeIn(transition name class which you want to use)

              <div class="animate fadeIn" data-delay="500ms">

Logo Settings

The Logo Container can be found in the Header Container

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

and for logo on sticky navbar just add the

<div class="navbar-header">
  <a class="navbar-brand" href="#brand"><img src="images/logo_black.png" alt="logo" class="img-responsive"></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, BuildingX uses roboto Font fameily: 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 Pages. Default Header with a Default website Background color while turns Stickey after a little scrolling &,you can make header without stickey effect for this just remove the .navbar-sticky Class.Simply follow the structure below:

<nav class="navbar navbar-default navbar-sticky bootsnav">
    <div class="container"> 
    <!-- Start Header Navigation -->
      <div class="navbar-header">
        <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="#brand"><img src="images/logo_black.png" alt="logo" class="img-responsive"></a>
      </div>
      <div class="collapse navbar-collapse" id="navbar-menu">
        <ul class="nav navbar-nav navbar-center" data-in="fadeInDown" data-out="fadeOut">
          <li class="active"><a href="#">Home</a></li>
           .......
        </ul>
      </div>
    </div>   
</nav>

Menu Styles

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

<nav class="navbar navbar-default">
	...
</nav>

Page Sub Menu

You can use an Additional Sub Menu on any Page for Intra Navigation purposes.

<li class="dropdown">
  <a href="#" class="dropdown-toggle" data-toggle="dropdown" >Dropdown</a>
  <ul class="dropdown-menu">
    <li><a href="services.html">Dropdown link</a></li>
    .....
  </ul>
</li>

Note: It is recommended that you place the Page Sub Menu code just below li tag in navigation.

You can also add mega menu dropdown in th e navbar, for this option code will be follow this structure as:

          <li class="dropdown megamenu-fw">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Pages</a>
            <ul class="dropdown-menu megamenu-content" role="menu">
              <li>
                <div class="row">
                  <div class="col-menu col-md-3">
                    <h6 class="title">Column title</h6>
                    <div class="content">
                      <ul class="menu-col">
                        <li><a href="#">Column 01</a></li>
                         ....
                      </ul>
                    </div>
                  </div>
                  
                  <div class="col-menu col-md-3">
                    <h6 class="title">Column title 2</h6>
                    <div class="content">
                      <ul class="menu-col">
                        <li><a href="#">Column 02</a></li>
                        ....
                      </ul>
                    </div>
                  </div><!-- end col-3 -->
                  <div class="col-menu col-md-3">
                    <h6 class="title">Column title 3</h6>
                    <div class="content">
                      <ul class="menu-col">
                        <li><a href="#">Column 03</a></li>
                        .....
                      </ul>
                    </div>
                  </div>    
                  <div class="col-menu col-md-3">
                    <h6 class="title">Column title 4</h6>
                    <div class="content">
                      <ul class="menu-col">
                        <li><a href="#">Column 04</a></li>
                        .....
                      </ul>
                    </div>
                  </div>
                </div>
              </li>
            </ul>
          </li>

Page Titles

Default Page Title style with centered align & and a smmal rounded corner div with navigation to go back home page.

<!--Page header & Title-->
<section class="page_header padding-top">
  <div class="container">
    <div class="row">
      <div class="col-md-12 text-center page-content">
        <h1>About US</h1>
        <p>We offer the most complete house renovating services in the country</p>
        <div class="page_nav">
      <span>You are here:</span> <a href="index.html">Home</a> <span><i class="fa fa-angle-double-right"></i>About Us</span>
      </div>
      </div>
    </div>
  </div>
</section>

Columns & Grid

BuildingX Grid

.col_full

.col_half

.col_half .col_last

.col_one_third

.col_two_third .col_last

.col_one_fourth

.col_three_fourth .col_last

.col_one_fifth

.col_four_fifth .col_last

.col_two_fifth

.col_three_fifth .col_last

.col_one_sixth

.col_five_sixth .col_last

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. Simply use the Code below:

<aside class="sidebar bg_grey border-radius">
  <div class="widget heading_space">
    <form class="widget_search border-radius">
      <div class="input-group">
        <input type="search" class="form-control" placeholder="Search Here" required>
        <i class="input-group-addon icon-icons185"></i>
      </div>
  </form>
  </div>
  <div class="widget heading_space">
    <h3 class="heading half_space">Categories<span class="divider-left"></span></h3>
    <ul class="category">
      <li><a href="#.">Tiling & Painting</a></li>
      .....
    </ul>
  </div>
  <div class="widget heading_space">
    <h3 class="heading half_space">Recent Posts<span class="divider-left"></span></h3>
    <div class="single_post">
      <img src="images/post1.jpg" alt="post image">
      <p>in: Tips , Advice</p>
      <a href="#.">Before Making your Dream Room</a>
    </div>
    ....
  </div>
  <div class="widget">
    <h3 class="heading half_space">Popular Tags<span class="divider-left"></span></h3>
    <ul class="tags">
      <li><a href="#." class="border-radius">Dream room</a></li>
      ......
    </ul>
  </div>
</aside>

Note: Make sure that you add the Side Panel's Code just after the #blog Starts.

Side Panel Position

A Side Panel can be revealed from either Left or Right. The Side Panel is revealed from the Right 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 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.
.margin_top - margin of 90px on the top of sections.
.margin_bottom - margin 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 45px on the bottom of sections.
.padding_half - pagdding of 45px on the top and bottom of sections.
.half_space - margin of 25px on the bottom of headings
.heading_top - margin of 25px on the top of headings
.heading - creating the border for headings in the sections.
.bg_grey - Grey background color used in web site.
.bg_blue - Blue background color used in web site.
.color -default red color used in website.
.btn-common - For commonly used links / buttons styling with rounded corners.
.button-hover - For create the hover effects on buttons and links
.button-yellow - For create the hover effects on buttons and links
.overlay - to craete overlay effects.
.tags - used tags in web site.
.category - used categories in web site.

Slider Types & their Options

BuildingX 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:

<article class="blog_item padding-bottom-half heading_space">
  <div class="row">
  <!--Blog Post Image from leftside-->
    <div class="col-md-5 col-sm-5 image">
      <img src="images/blog1.jpg" alt="blog">
    </div>
    <div class="col-md-7 col-sm-7">
      <h3>Before Making your Dream Living Room Make 3D Room Model</h3>
      <ul class="comment margin10">
       <li><a href="#.">May 10, 2016</a></li>
       <li><a href="#."><i class="icon-comment"></i> 5</a></li>
      </ul>
      <p class="margin10">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab debitis ea est illum ipsa itaque libero optio quasi voluptas! Consequuntur 
      deserunt expedita.</p>
      <p class="margin10">fugiat hic illum porro quidem quis recusandae vero? Aliquid assumenda cum delectus eaque eligendi, enim eum excepturi fugit illum impedit in 
      iste laudantium modi natus […]</p>
      <a class="btn-common button-hover margin10 border-radius" href="blog_detail.html">Read More</a>
    </div>
  </div>
</article>

Post Types

You can use different types of Post Types:

Image
Post images Left aligned
boxed with three columns
Blockquotes

Comment Types

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

Default
Wrapped in box

Wrapped in box

Code Sample for Wrapped in box Comments:

<div class="media blog-reply heading_space">
  <div class="pull-left">
    <a href="#.">
      <img src="images/commenter1.jpg" alt="Bianca Reid">
    </a>
  </div>
  <div class="media-body">
  <h4>AYMAN FIKRY</h4>
    <span>Jan 28, 2016 - 10:07 pm</span>
    <p>In sit amet mollis orci, a vehicula est. Mauris ut odio blandit, commodo est nec, finibus quam. Aliquam vel pulvinar metus. Quisque vel 
    dignissim metus, </p>
    <a class="reply" href="#.">LEAVE A REPLY</a>
  </div>
</div>

Portfolio Setup

BuildingX provides a very elegant way to showcase your work. Setting up Portfolio is simple. Please use the following codes:

Setting up Portfolio Filter:

<section id="gallery">
  <div class="work-filter">
    <ul class="text-center">
      <li><a href="javascript:;" data-filter="all" class="active filter">All</a></li>
      <li><a href="javascript:;" data-filter=".brand" class="filter">Plumbing</a></li>
      <li><a href="javascript:;" data-filter=".design" class="filter">Green Building</a></li>
      <li><a href="javascript:;" data-filter=".graphic" class="filter">Interior Design</a></li>
      <li><a href="javascript:;" data-filter=".video" class="filter">Tiling</a></li>
    </ul>
  </div>

  <div class="zerogrid">
    <div class="wrap-col">
      <div class="item-container">
      ....
      </div>
    </div>
  </div>;
</section>

Setting up Portfolio Items:

<div class="zerogrid">
  <div class="wrap-col">
    <div class="wrap-content">
      <div class="item-container">
        <div class="image">
          <img src="images/workimg1.jpg" alt="work"/>
          <a class="overlay" href="#">
            <div class="overlay-inner">
            .....
            </div>
          </a> 
        </div>
      </div>
    </div>
  </div>
</div>

Setting up Portfolio Scripts for Filter Functions:

<script type="text/javascript">

	// portfolio filtering
    $(".zerogrid").mixItUp();

</script>

Introduction

BuildingX 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 BuildingX:

Animations
Buttons
Carousels
Charts
Clients
Columns
Counters
Dividers
Icon Boxes
Galleries
Heading Styles
Icon Lists
Labels
Lightboxs
Lists & Panels
Maps
Media Embeds
Modal Boxes
Navigations
Paginations
Pies & Skills
Pricing Boxes
Process Steps
Promo Boxes
Blockquotes
Responsive
Sections
Social Icons
Alert Boxes
Styled Icons
Tables
Tabs
Testimonials
Thumbnails
Toggles

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 BuildingX. 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. You can use Light & Dark Sections or Parallax Images.

Setting up Sections:

Setup your Sections outside the .container element.

Light Section:

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

Dark Section:

<section class="section dark">
	<div class="container">
		...
	</div>
</section>

Setting up Parallax Sections:

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

<section class="paralax" >
	<div class="container">
		...
	</div>
</section>

Tabs, & Accordions

You can use Tabs, & Accordions in Various Styles and with Different Options to display Below the Fold content.

Tabs

Use the below code to display Tabs:

<div class="widget">
  <ul class="tabs">
    <li class="active" rel="tab1">Tab 1 </li>
    <li rel="tab2">Tab 2</li>
    <li rel="tab3">Tab 3</li>
  </ul>
  <div class="tab_container">
      <!--Its optional just used whemn you want these tabs truns into accordions on small screens-->
    <h3 class="d_active tab_drawer_heading" rel="tab1">Tab 1</h3>
    <div id="tab1" class="tab_content">
      <!--Tab content any thing you want to fold-->
    </div>
    <div class="clearfix"></div>
    <h3 class="tab_drawer_heading" rel="tab2">Tab 2</h3>
    <div id="tab2" class="tab_content">
      .....
    </div>
    <h3 class="tab_drawer_heading" rel="tab3">Tab 2</h3>
    <div id="tab3" class="tab_content">
       ....
    </div> 
  </div>
</div>

Note: Make sure you add unique IDs for each Tab Container Items.

Initializing Tabs using Javascript

Tabs are initialized using the Standard Minimal Functionality by default, but there might instances you would have to Create the Tabs using the most simple & lightweight jQuery script function


<script>
jQuery(document).ready( function($){
		 // Tabs truns into Accordions 
	  $(".tab_content").hide();
    $(".tab_content:first").show();

  /* if in tab mode */
    $("ul.tabs li").on('click', function() {
		  $(".tab_content").hide();
		  var activeTab = $(this).attr("rel"); 
		  $("#"+activeTab).fadeIn();		
		  
		  $("ul.tabs li").removeClass("active");
		  $(this).addClass("active");

		  $(".tab_drawer_heading").removeClass("d_active");
		  $(".tab_drawer_heading[rel^='"+activeTab+"']").addClass("d_active");
	  
    });
	 
	/* if in drawer mode on Mobile Version*/
	$(".tab_drawer_heading").on('click', function() {
       $(".tab_content").hide();
       var d_activeTab = $(this).attr("rel"); 
       $("#"+d_activeTab).fadeIn(1200);
	  
	    $(".tab_drawer_heading").removeClass("d_active");
       $(this).addClass("d_active");
	  
	    $("ul.tabs li").removeClass("active");
	    $("ul.tabs li[rel^='"+d_activeTab+"']").addClass("active");
    });
	 
});

</script>

Accordions

You can add a Accordion using the Code below:

<div id="faq">
  <div class='faq_wrapper'>
    <ul class='items'>
      <li>
        <a href='#'> Lorem ipsum dolor sit amet, an eripuit laboramus sententiae duo lorem sio?</a>
        <ul class='sub-items'>
          <li>
            <p class="half_space">Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look 
            like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search 
            for 'lorem ipsum' will uncover many web sites still in their infancy.</p>
          </li>
        </ul>
      </li>
       .........
    </ul>
  </div>
</div>

Initializing Accordions using Javascript

You would have to Create the Accordions using the most simple & lightweight jQuery script function


<script>
jQuery(document).ready( function($){
		 // Accordions 
		$(".items > li > a").on('click', function(e) {
		  e.preventDefault();
		  var $this = $(this);
		  if ($this.hasClass("expanded")) {
			 $this.removeClass("expanded");
		  } 
		  else {
		  $(".items a.expanded").removeClass("expanded");
		  $this.addClass("expanded");
		  $(".sub-items").filter(":visible").slideUp("normal");
		}
		  $this.parent().children("ul").stop(true, true).slideToggle("normal");
		});
  
	 
});

</script>

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>

Google Maps

You can add Embedded Google Maps to any Page using the following setup:

Step 1:

Add the Google Maps Specific Scripts before end the <body> Tag

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="js/jquery.mapit.js"></script>

Step 2:

Add a div by giving an ID map which will contain your Google Map:
```
<div id="map_canvas" </div>
```

Step 3:

Add the Google Maps script with your Specific Options to initialize your Google Maps:

<script type="text/javascript">

	// Initialize Map
	$("#map_canvas").mapit();

</script>

Pricing Tables

You can add the Pricing tables to any Page using the following setup:

              <section id="pricing">
  <div class="container">
    <div class="row">
      <div class="col-md-3 col-sm-6">
        <div class="price_table border-radius text-center heading_space">
          <div class="plan half_space"><h4>Starter Plan</h4></div>
          <div class="price"><p><span class="dollor">$</span>26<span class="month">/monthly</span></p></div>
          <p>Consectetur adipisicing elit, sed eiusmod that incididunt.</p>
          <ul>
            <li>widely</li>
            .......
          </ul>
          <a href="#." class="btn-light border-radius button-hover">Get a quote</a>
        </div>
      </div>
    </div>
  </div>
</section>

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 Setup

Widgets are simple & easy to setup, completely flexible & can be used anywhere on a page. Here's a sample code:

 <!--Setting up links categories and tags also by follow this widget structure--<
<div class="widget">
  <h4>Widget Title</h4>
  <ul class="widget_links">
    <li><a href="">some content</a></li>
  </ul<
</div>

Info: Most widgets are easy to use & understand and can be checked on the Sidebar Pages.

Images

jQuery

CSS & Fonts

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

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

Page Sub Menu

Page Titles

Columns & Grid

BuildingX Grid

Bootstrap Grid

Side Panel

Side Panel Position

Helper Classes

Slider Types & their Options

Revolution Slider

Blog Setup

Post Types

Comment Types

Wrapped in box

Code Sample for Wrapped in box Comments:

Portfolio Setup

Setting up Portfolio Filter:

Setting up Portfolio Items:

Setting up Portfolio Scripts for Filter Functions:

Introduction

Animations

Sections & Parallax

Setting up Sections:

Light Section:

Dark Section:

Setting up Parallax Sections:

Tabs, & Accordions

Tabs

Initializing Tabs using Javascript

Accordions

Initializing Accordions using Javascript

Lightbox & Notifications

Setting up Lightboxes:

Single Image:

Iframe:

Video:

AJAX:

Gallery:

Showing Lightbox Captions:

Google Maps

Step 1:

Step 2:

Step 3:

Pricing Tables

Icons

Widgets Setup

Images

jQuery

CSS & Fonts