<!DOCTYPE html>
<!--[if IE 8 ]><html class="ie ie8" class="no-js" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Electrify Responsive Multipurpose Template</title>
<meta name="description" content="">
<!-- CSS FILES -->
<link rel="stylesheet" href="css/bootstrap.min.css"/>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen" data-name="skins">
<link rel="stylesheet" href="css/layout/wide.css" data-name="layout">
<link rel="stylesheet" type="text/css" href="css/switcher.css" media="screen" />
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!--Start Header-->
<header id="header">
<div id="top-bar">
<div class="container">
<div class="row">
<div class="col-sm-8 top-info hidden-xs">
<span><i class="fa fa-phone"></i>Phone: (123) 456-7890</span>
<span><i class="fa fa-envelope"></i>Email: mail@example.com</span>
</div>
<div class="col-sm-4 top-info">
<ul>
<li><a href="" class="my-tweet"><i class="fa fa-twitter"></i></a></li>
<li><a href="" class="my-facebook"><i class="fa fa-facebook"></i></a></li>
<li><a href="" class="my-skype"><i class="fa fa-skype"></i></a></li>
<li><a href="" class="my-pint"><i class="fa fa-pinterest"></i></a></li>
<li><a href="" class="my-rss"><i class="fa fa-rss"></i></a></li>
<li><a href="" class="my-google"><i class="fa fa-google-plus"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
<div id="logo-bar">
<div class="container">
<div class="row">
<!-- Logo / Mobile Menu -->
<div class="col-lg-3 col-sm-3 ">
<div id="logo">
<h1><a href="index.html"><img alt="logo" src="images/logo.png"/></a></h1>
</div>
</div>
<!-- Navigation
================================================== -->
<div class="col-lg-9 col-sm-9">
<div class="navbar navbar-default navbar-static-top" role="navigation">
<!-- <div class="container">-->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="#">Home</a>
<ul class="dropdown-menu">
<li><a href="index.html">Home 1</a></li>
<li><a href="index_2.html">Home 2</a></li>
<li><a href="index_3.html">Home 3</a></li>
<li><a href="index_4.html">Home 4</a></li>
<li><a href="index_5.html">Home 5</a></li>
<li><a href="index_6.html">Home 6</a></li>
<li><a href="index_7.html">Home 7</a></li>
</ul>
</li>
<li class="active"><a href="#">Shortcodes</a>
<ul class="dropdown-menu">
<li class="active"><a href="elements.html">Elements</a></li>
<li><a href="form-elements.html">Form Elements</a></li>
<li><a href="columns.html">Columns</a></li>
<li><a href="typography.html">Typography</a></li>
<li><a href="pricing-tables.html">Pricing Tables</a></li>
<li><a href="animation.html">Animation</a></li>
<li><a href="icons.html">Icons</a></li>
</ul>
</li>
<li><a href="#" >Pages</a>
<ul class="dropdown-menu">
<li>
<a href="about.html">About</a>
<ul class="dropdown-menu">
<li><a href="about.html">About Us 1</a></li>
<li><a href="about-2.html">About Us 2</a></li>
</ul>
</li>
<li><a href="services.html">Services</a></li>
<li><a href="faq.html">FAQ</a></li>
<li><a href="sidebar-right.html">Right Sidebar</a></li>
<li><a href="sidebar-left.html">Left Sidebar</a></li>
<li><a href="404-page.html">404 Page</a></li>
</ul>
</li>
<li><a href="#">Portfolio</a>
<ul class="dropdown-menu">
<li>
<a href="#">Portfolio Classic</a>
<ul class="dropdown-menu">
<li><a href="portfolio_2.html">Portfolio 2</a></li>
<li><a href="portfolio_3.html">Portfolio 3</a></li>
<li><a href="portfolio_4.html">Portfolio 4</a></li>
</ul>
</li>
<li>
<a href="portfolio_masonry_3.html">Portfolio Masnory</a>
<ul class="dropdown-menu">
<li><a href="portfolio_masonry_2.html">Masonry portfolio 2</a></li>
<li><a href="portfolio_masonry_3.html">Masonry portfolio 3</a></li>
<li><a href="portfolio_masonry_4.html">Masonry portfolio 4</a></li>
</ul>
</li>
<li>
<a href="portfolio_single.html">Portfolio Single</a>
<ul class="dropdown-menu">
<li><a href="portfolio_single.html">Portfolio Single 1</a></li>
<li><a href="portfolio_single_2.html">Portfolio Single 2</a></li>
<li><a href="portfolio_single_3.html">Portfolio Single 3</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Blog</a>
<ul class="dropdown-menu">
<li>
<a href="portfolio_masonry_3.html">Masnory Blog Style</a>
<ul class="dropdown-menu">
<li><a href="blog-masonry-two.html">Blog Masonry 2</a></li>
<li><a href="blog-masonry-three.html">Blog Masonry 3</a></li>
<li><a href="blog-masonry-four.html">Blog Masonry 4</a></li>
</ul>
</li>
<li>
<a href="portfolio_masonry_3.html">Classic Blog Style</a>
<ul class="dropdown-menu">
<li><a href="blog-large-image.html">Large Image</a></li>
<li><a href="blog-medium-image.html">Medium Image</a></li>
</ul>
</li>
<li><a href="blog-post.html">Single Post</a></li>
</ul>
</li>
<li><a href="#">Contact</a>
<ul class="dropdown-menu">
<li><a href="contact_1.html">Contact 1</a></li>
<li><a href="contact_2.html">Contact 2</a></li>
<li><a href="contact_3.html">Contact 3</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
<!--End Header-->
<!--start wrapper-->
<section class="wrapper">
<section class="page_head">
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12">
<div class="page_title">
<h2>Elements</h2>
</div>
<nav id="breadcrumbs">
<ul>
<li><a href="index.html">Home</a>/</li>
<li>Shortcodes</li>
</ul>
</nav>
</div>
</div>
</div>
</section>
<section class="content elements">
<div class="container">
<div class="row sub_content">
<div class="col-lg-12 col-md-12 col-sm-12">
<div class="dividerHeading">
<h4><span>Buttons</span></h4>
</div>
</div>
<div class="col-lg-2 col-md-2 col-xs-12">
<!-- Standard button -->
<button class="btn btn-default btn-lg btn-block" type="button"> <i class="fa fa-rocket"></i> Large Button</button>
</div>
<div class="col-lg-2 col-md-2 col-xs-12">
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button class="btn btn-primary btn-lg btn-block" type="button">Large Button</button>
</div>
<div class="col-lg-2 col-md-2 col-xs-12">
<!-- Indicates a successful or positive action -->
<button class="btn btn-success btn-lg btn-block" type="button"> <i class="fa fa-check-circle"></i> Large Button</button>
</div>
<div class="col-lg-2 col-md-2 col-xs-12">
<!-- Contextual button for informational alert messages -->
<button class="btn btn-info btn-lg btn-block" type="button">Large Button</button>
</div>
<div class="col-lg-2 col-md-2 col-xs-12">
<!-- Indicates caution should be taken with this action -->
<button class="btn btn-warning btn-lg btn-block" type="button"><i class="fa fa-exclamation-circle"></i> Large Button</button>
</div>
<div class="col-lg-2 col-md-2 col-xs-12">
<!-- Indicates a dangerous or potentially negative action -->
<button class="btn btn-danger btn-lg btn-block" type="button">Large Button</button>
</div>
</div> <!--./row-->
<div class="row sub_content">
<div class="col-lg-2 col-md-2 col-xs-12">
<!-- Standard button -->
<button class="btn btn-default btn-block" type="button">Standard Button</button>
</div>
<div class="col-lg-2 col-md-2 col-xs-12">
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button class="btn btn-primary btn-block" type="button"> <i class="fa fa-bookmark"></i> Standard Button</button>
</div>
<div class="col-lg-2 col-md-2 col-xs-12">
<!-- Indicates a successful or positive action -->
<button class="btn btn-success btn-block" type="button">Standard Button</button>
</div>
<div class="col-lg-2 col-md-2 col-xs-12">
<!-- Contextual button for informational alert messages -->
<button class="btn btn-info btn-block" type="button"> <i class="fa fa-info-circle"></i> Standard Button</button>
</div>
<div class="col-lg-2 col-md-2 col-xs-12">
<!-- Indicates caution should be taken with this action -->
<button class="btn btn-warning btn-block" type="button">Standard Button</button>
</div>
<div class="col-lg-2 col-md-2 col-xs-12">
<!-- Indicates a dangerous or potentially negative action -->
<button class="btn btn-danger btn-block" type="button"> <i class="fa fa-exclamation-triangle"></i> Standard Button</button>
</div>
</div> <!--./row-->
<div class="row sub_content">
<div class="col-lg-2 col-md-2 col-xs-12">
<!-- Standard button -->
<button class="btn btn-default btn-sm btn-block" type="button">Small Button</button>
</div>
<div class="col-lg-2 col-md-2 col-xs-12">
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button class="btn btn-primary btn-sm btn-block" type="button">Small Button</button>
</div>
<div class="col-lg-2 col-md-2 col-xs-12">
<!-- Indicates a successful or positive action -->
<button class="btn btn-success btn-sm btn-block" type="button">Small Button</button>
</div>
<div class="col-lg-2 col-md-2 col-xs-12">
<!-- Contextual button for informational alert messages -->
<button class="btn btn-info btn-sm btn-block" type="button">Small Button</button>
</div>
<div class="col-lg-2 col-md-2 col-xs-12">
<!-- Indicates caution should be taken with this action -->
<button class="btn btn-warning btn-sm btn-block" type="button">Small Button</button>
</div>
<div class="col-lg-2 col-md-2 col-xs-12">
<!-- Indicates a dangerous or potentially negative action -->
<button class="btn btn-danger btn-sm btn-block" type="button">Small Button</button>
</div>
</div> <!--./row-->
<div class="row sub_content">
<div class="col-lg-2 col-md-2 col-xs-12">
<!-- Standard button -->
<button class="btn btn-default btn-xs btn-block" type="button">Xtra-Small Button</button>
</div>
<div class="col-lg-2 col-md-2 col-xs-12">
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button class="btn btn-primary btn-xs btn-block" type="button">Xtra-Small Button</button>
</div>
<div class="col-lg-2 col-md-2 col-xs-12">
<!-- Indicates a successful or positive action -->
<button class="btn btn-success btn-xs btn-block" type="button">Xtra-Small Button</button>
</div>
<div class="col-lg-2 col-md-2 col-xs-12">
<!-- Contextual button for informational alert messages -->
<button class="btn btn-info btn-xs btn-block" type="button">Xtra-Small Button</button>
</div>
<div class="col-lg-2 col-md-2 col-xs-12">
<!-- Indicates caution should be taken with this action -->
<button class="btn btn-warning btn-xs btn-block" type="button">Xtra-Small Button</button>
</div>
<div class="col-lg-2 col-md-2 col-xs-12">
<!-- Indicates a dangerous or potentially negative action -->
<button class="btn btn-danger btn-xs btn-block" type="button">Xtra-Small Button</button>
</div>
</div> <!--./row-->
<div class="row sub_content">
<div class="col-lg-12 col-md-12 col-sm-12">
<div class="dividerHeading">
<h4><span>Social Button</span></h4>
</div>
</div>
<div class="col-sm-4 mrgb-30">
<a href="#fakelink" class="btn btn-sm btn-social-googleplus">
<i class="fa fa-google-plus"></i>
Connect with Google
</a>
</div>
<div class="col-sm-4 mrgb-30">
<a href="#fakelink" class="btn btn-sm btn-social-facebook">
<i class="fa fa-facebook"></i>
Connect with Facebook
</a>
</div>
<div class="col-sm-4 mrgb-30">
<a href="#fakelink" class="btn btn-sm btn-social-twitter">
<i class="fa fa-twitter"></i>
Connect with Twitter
</a>
</div>
<div class="col-sm-4 mrgb-30">
<a href="#fakelink" class="btn btn-sm btn-social-pinterest">
<i class="fa fa-pinterest"></i>
Pin It
<span class="btn-tip">100</span>
</a>
</div>
<div class="col-sm-4 mrgb-30">
<a href="#fakelink" class="btn btn-sm btn-social-linkedin">
<i class="fa fa-linkedin-square"></i>
Share
<span class="btn-tip">120</span>
</a>
</div>
<div class="col-sm-4 mrgb-30">
<a href="#fakelink" class="btn btn-sm btn-social-stumbleupon">
<i class="fa fa-rss"></i>
Subscribe
<span class="btn-tip">96</span>
</a>
</div>
</div> <!--./row-->
<div class="row sub_content">
<div class="col-lg-12 col-md-12 col-sm-12">
<div class="dividerHeading">
<h4><span>Alert Messages</span></h4>
</div>
</div>
<div class="col-lg-6 col-sm-6">
<div class="alert alert-success alert-dismissable">
<strong>Well done!</strong> You message goes here.
</div>
<div class="alert alert-info alert-dismissable">
<strong>Heads up! </strong>You message goes here.
</div>
<div class="alert alert-warning alert-dismissable">
<strong>Warning!</strong> You message goes here.
</div>
<div class="alert alert-danger alert-dismissable">
<strong>Oh snap! </strong> You message goes here.
</div>
</div>
<div class="col-lg-6 col-sm-6">
<div class="alert alert-success alert-dismissable">
<button aria-hidden="true" data-dismiss="alert" class="close" type="button">×</button>
<strong>Well done!</strong> You message goes here.
</div>
<div class="alert alert-info alert-dismissable">
<button aria-hidden="true" data-dismiss="alert" class="close" type="button">×</button>
<strong>Heads up! </strong>You message goes here.
</div>
<div class="alert alert-warning alert-dismissable">
<button aria-hidden="true" data-dismiss="alert" class="close" type="button">×</button>
<strong>Warning!</strong> You message goes here.
</div>
<div class="alert alert-danger alert-dismissable">
<button aria-hidden="true" data-dismiss="alert" class="close" type="button">×</button>
<strong>Oh snap! </strong> You message goes here.
</div>
</div>
</div> <!--./row-->
<div class="row sub_content">
<div class="col-lg-12 col-md-12 col-sm-12">
<div class="dividerHeading">
<h4><span>Promo Box</span></h4>
</div>
</div>
<div class="col-lg-12 col-md-12 col-sm-12">
<div class="promo_box">
<div class="col-lg-9 col-sm-9">
<div class="promo_content">
<h3>Electrify is awesome responsive template, with refreshingly clean design.</h3>
<p>Lorem ipsum dolor sit amet, cons adipiscing elit. Aenean commodo ligula eget dolor. </p>
</div>
</div>
<div class="col-lg-3 col-sm-3">
<div class="pb_action">
<a href="#fakelink" class="btn btn-default btn-lg">
<i class="fa fa-shopping-cart"></i>
Download Now
</a>
</div>
</div>
</div>
</div>
</div>
<div class="row sub_content">
<div class="col-lg-12 col-md-12 col-sm-12">
<div class="dividerHeading">
<h4><span>Tables</span></h4>
</div>
</div>
<div class="col-lg-12 col-md-12 col-sm-12">
<div class="table-responsive">
<table class="table table-striped table-hover">
<thead>
<tr>
<th>Rank</th>
<th>Name</th>
<th>Year</th>
<th>Rating</th>
<th>Votes</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>The Shawshank Redemption</td>
<td>1994</td>
<td>9.2</td>
<td>923,629</td>
</tr>
<tr>
<td>2</td>
<td>The Godfather</td>
<td>1972</td>
<td>9.2</td>
<td>663,133</td>
</tr>
<tr>
<td>3</td>
<td>The Godfather: Part II</td>
<td>1974</td>
<td>9.0</td>
<td>427,132</td>
</tr>
<tr>
<td>4</td>
<td>Pulp Fiction</td>
<td>1994</td>
<td>8.9</td>
<td>719,280</td>
</tr>
<tr>
<td>5</td>
<td>The Good, the Bad and the Ugly</td>
<td>1966</td>
<td>8.9</td>
<td>218,887</td>
</tr>
</tbody>
</table>
</div>
</div>
</div> <!--./row-->
<!--row-->
<div class="row sub_content">
<div class="col-lg-6 ">
<div class="dividerHeading">
<h4><span>Image Containers</span></h4>
</div>
<div class="images-style">
<div class="row">
<div class="col-sm-4 images-style-inner"><img class="img-rounded img-responsive" src="images/img-style.png" alt=""/></div>
<div class="col-sm-4 images-style-inner"><img class="img-circle img-responsive" src="images/img-style.png" alt=""/></div>
<div class="col-sm-4 images-style-inner"><img class="img-thumbnail img-responsive" src="images/img-style.png" alt=""/></div>
</div>
</div>
</div>
<div class="col-lg-6 ">
<div class="dividerHeading">
<h4><span>Wells</span></h4>
</div>
<div class="row">
<div class="col-lg-12">
<div class="well well-lg">Look, I'm in a large well! </div>
</div>
<div class="col-lg-12">
<div class="well">Look, I'm in a well! </div>
</div>
<div class="col-lg-12">
<div class="well well-sm">Look, I'm in a small well! </div>
</div>
</div>
</div>
</div>
<!--./row-->
<div class="row sub_content">
<div class="col-sm-6">
<div class="dividerHeading">
<h4><span>Tabs Content</span></h4>
</div>
<ul class="nav nav-tabs" >
<li class="active"><a data-toggle="tab" href="#Popular">Popular</a></li>
<li class=""><a data-toggle="tab" href="#Recent">Recent</a></li>
<li class=""><a data-toggle="tab" href="#Recent-Comment">Comment</a></li>
</ul>
<div class="tab-content clearfix" >
<div id="Popular" class="tab-pane fade active in">
<ul class="recent_tab_list">
<li>
<span><a href="#"><img alt="" src="images/content/recent_1.png"></a></span>
<a href="#">Publishing packag esanse web page editos</a>
<i>June 03, 2015</i>
</li>
<li>
<span><a href="#"><img alt="" src="images/content/recent_2.png"></a></span>
<a href="#">Sublishing packag esanse web page editos</a>
<i>June 02, 2015</i>
</li>
<li class="last">
<span><a href="#"><img alt="" src="images/content/recent_3.png"></a></span>
<a href="#">Mublishing packag esanse web page editos</a>
<i>June 01, 2015</i>
</li>
</ul>
</div>
<div id="Recent" class="tab-pane fade">
<ul class="recent_tab_list">
<li>
<span><a href="#"><img alt="" src="images/content/recent_4.png"></a></span>
<a href="#">Various versions has evolved over the years</a>
<i>July 03, 2015</i>
</li>
<li>
<span><a href="#"><img alt="" src="images/content/recent_5.png"></a></span>
<a href="#">Rarious versions has evolve over the years</a>
<i>July 02, 2015</i>
</li>
<li class="last">
<span><a href="#"><img alt="" src="images/content/recent_6.png"></a></span>
<a href="#">Marious versions has evolven over the years</a>
<i>July 01, 2015</i>
</li>
</ul>
</div>
<div id="Recent-Comment" class="tab-pane fade">
<ul class="comments">
<li class="comments_list clearfix">
<a href="#" class="post-thumbnail"><img width="60" height="60" alt="#" src="images/content/recent_3.png"></a>
<p><strong><a href="#">LaraDut</a> <i>says: </i> </strong> Morbi augue velit, tempus mattis dignissim nec, porta sed risus. Donec eget magna eu lorem tristique pellentesque eget eu dui. Fusce lacinia tempor malesuada.</p>
</li>
<li class="comments_list clearfix">
<a href="#" class="post-thumbnail"><img width="60" height="60" alt="#" src="images/content/recent_1.png"></a>
<p><strong><a href="#">Ronny</a> <i>says: </i> </strong> Tempus mattis dignissim nec, porta sed risus. Donec eget magna eu lorem tristique pellentesque eget eu dui. Fusce lacinia tempor malesuada.</p>
</li>
<li class="comments_list clearfix">
<a href="#" class="post-thumbnail"><img width="60" height="60" alt="#" src="images/content/recent_2.png"></a>
<p><strong><a href="#">Steve</a> <i>says: </i> </strong> Donec convallis, metus nec tempus aliquet, nunc metus adipiscing leo, a lobortis nisi dui ut odio. Nullam ultrices, eros accumsan vulputate faucibus, turpis tortor.</p>
</li>
</ul>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="dividerHeading">
<h4><span>Testimonials</span></h4>
</div>
<div class="testimonial carousel slide" id="testimonial-carousel">
<div class="carousel-inner">
<div class="active item">
<div class="testimonial-item">
<div class="icon"><i class="fa fa-quote-right"></i></div>
<blockquote>
<p>Donec convallis, metus nec tempus aliquet, nunc metus adipiscing leo, a lobortis nisi dui ut odio. Nullam ultrices, eros accumsan vulputate faucibus, turpis tortor dictum.</p>
</blockquote>
<div class="icon-tr"></div>
<div class="testimonial-review">
<img alt="testimoni" src="images/testimonials/1.png">
<h1>Tom Jobs,<small>Company Inc.</small></h1>
</div>
</div>
</div>
<div class="item">
<div class="testimonial-item">
<div class="icon"><i class="fa fa-quote-right"></i></div>
<blockquote>
<p>Nunc aliquet tincidunt metus, sit amet mattis lectus sodales ac. Suspendisse rhoncus dictum eros, ut egestas eros luctus eget. Nam nibh sem, mattis et feugiat ut, porttitor nec risus.</p>
</blockquote>
<div class="icon-tr"></div>
<div class="testimonial-review">
<img alt="testimoni" src="images/testimonials/2.png">
<h1>Tom Jobs<small>Leopard</small></h1>
</div>
</div>
</div>
</div>
<div class="testimonial-buttons"><a data-slide="prev" href="#testimonial-carousel"><i class="fa fa-chevron-left"></i></a>
<a data-slide="next" href="#testimonial-carousel"><i class="fa fa-chevron-right"></i></a></div>
</div>
</div><!-- TESTIMONIALS END -->
</div> <!--./row-->
<div class="row sub_content">
<div class="col-lg-12 col-md-12 col-sm-12">
<div class="dividerHeading">
<h4><span>Accordion & Toggles</span></h4>
</div>
</div>
<div class="col-lg-6 col-sm-6 ">
<div class="panel-group accordion" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse02">
Morbi Congue Turpis Sollicitudin
</a>
</h4>
</div>
<div id="collapse02" class="panel-collapse collapse">
<div class="panel-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse03">
Nisi Massa Pretium Mauris Nec Tincidunt Tortor
</a>
</h4>
</div>
<div id="collapse03" class="panel-collapse collapse">
<div class="panel-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.</div>
<div class="panel-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse04">
Exercitationem Interdum Porttitor
</a>
</h4>
</div>
<div id="collapse04" class="panel-collapse collapse">
<div class="panel-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.</div>
<div class="panel-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6 col-sm-6 ">
<div class="panel-group accordion" id="toggle">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse06">
This is an awesome template
</a>
</h4>
</div>
<div id="collapse06" class="panel-collapse collapse">
<div class="panel-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.</div>
<div class="panel-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse00">
Click me to display content
</a>
</h4>
</div>
<div id="collapse00" class="panel-collapse collapse">
<div class="panel-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.</div>
<div class="panel-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse10">
Visual Composer
</a>
</h4>
</div>
<div id="collapse10" class="panel-collapse collapse">
<div class="panel-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.</div>
<div class="panel-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.</div>
</div>
</div>
</div>
</div>
</div><!-- /Accordians -->
<div class="row sub_content">
<div class="col-lg-12 col-md-12 col-sm-12">
<div class="dividerHeading">
<h4><span>Bullets & Lists</span></h4>
</div>
</div>
<!----------list style 1---------->
<div class="col-lg-4 col-sm-4">
<ul class="list_style">
<li><a href="#"> Donec convallis, metus nec tempus aliquet</a></li>
<li><a href="#"> Aenean commodo ligula eget dolor</a></li>
<li><a href="#"> Lorem ipsum dolor sit amet cons adipiscing</a></li>
<li><a href="#"> Nunc aliquet tincidunt metus sit amet</a></li>
<li><a href="#"> Lorem ipsum dolor sit amet cons adipiscing</a></li>
</ul>
</div>
<!----------list style 2---------->
<div class="col-lg-4 col-sm-4">
<ul class="list_style circle">
<li><a href="#">Donec convallis, metus nec tempus aliquet</a></li>
<li><a href="#">Aenean commodo ligula eget dolor</a></li>
<li><a href="#">Cum sociis natoque penatibus mag ipsum</a></li>
<li><a href="#">Lorem ipsum dolor sit amet cons adipiscing</a></li>
<li><a href="#"> Accumsan vulputate faucibus turpis dictum</a></li>
</ul>
</div>
<!----------list style 3---------->
<div class="col-lg-4 col-sm-4">
<ul class="list_style square">
<li><a href="#">Donec convallis, metus nec tempus aliquet</a></li>
<li><a href="#">Aenean commodo ligula eget dolor</a></li>
<li><a href="#">Lorem ipsum dolor sit amet cons adipiscing</a></li>
<li><a href="#">Nunc aliquet tincidunt metus sit amet</a></li>
<li><a href="#">Accumsan vulputate faucibus turpis dictum</a></li>
</ul>
</div>
</div> <!--./row-->
<div class="row sub_content">
<!----------list style 4---------->
<div class="col-lg-4 col-sm-4">
<ul class="list_style dubble-right-arrow">
<li><a href="#"> Donec convallis, metus nec tempus aliquet</a></li>
<li><a href="#"> Aenean commodo ligula eget dolor</a></li>
<li><a href="#"> Lorem ipsum dolor sit amet cons adipiscing</a></li>
<li><a href="#"> Nunc aliquet tincidunt metus sit amet</a></li>
<li><a href="#"> Aenean commodo ligula eget dolor</a></li>
</ul>
</div>
<!----------list style 5---------->
<div class="col-lg-4 col-sm-4">
<ul class="list_style star">
<li><a href="#"> Donec convallis, metus nec tempus aliquet</a></li>
<li><a href="#"> Aenean commodo ligula eget dolor</a></li>
<li><a href="#"> Lorem ipsum dolor sit amet cons adipiscing</a></li>
<li><a href="#"> Nunc aliquet tincidunt metus sit amet</a></li>
<li><a href="#"> Donec convallis, metus nec tempus aliquet</a></li>
</ul>
</div>
<!----------list style 6---------->
<div class="col-lg-4 col-sm-4">
<ul class="list_style right-arrow">
<li><a href="#"> Donec convallis, metus nec tempus aliquet</a></li>
<li><a href="#"> Aenean commodo ligula eget dolor</a></li>
<li><a href="#"> Lorem ipsum dolor sit amet cons adipiscing</a></li>
<li><a href="#"> Donec convallis, metus nec tempus aliquet</a></li>
<li><a href="#"> Nunc aliquet tincidunt metus sit amet</a></li>
</ul>
</div>
</div>
<div class="row sub_content">
<!----------list style 7---------->
<div class="col-lg-4 col-sm-4">
<ul class="list_style hand">
<li><a href="#"> Donec convallis, metus nec tempus aliquet</a></li>
<li><a href="#"> Aenean commodo ligula eget dolor</a></li>
<li><a href="#"> Lorem ipsum dolor sit amet cons adipiscing</a></li>
<li><a href="#"> Nunc aliquet tincidunt metus sit amet</a></li>
<li><a href="#"> Aenean commodo ligula eget dolor</a></li>
</ul>
</div>
<!----------list style 8---------->
<div class="col-lg-4 col-sm-4">
<ul class="list_style play">
<li><a href="#"> Donec convallis, metus nec tempus aliquet</a></li>
<li><a href="#"> Aenean commodo ligula eget dolor</a></li>
<li><a href="#"> Lorem ipsum dolor sit amet cons adipiscing</a></li>
<li><a href="#"> Nunc aliquet tincidunt metus sit amet</a></li>
<li><a href="#"> Aenean commodo ligula eget dolor</a></li>
</ul>
</div>
<!----------list style 9---------->
<div class="col-lg-4 col-sm-4">
<ul class="multi-icon">
<li><i class="fa fa-android"></i>
Hurriedly editorially more because
</li>
<li>
<i class="fa fa-bitbucket-square"></i>
Regardless less savage reminantly iguana
</li>
<li>
<i class="fa fa-bell"></i>
This revealed more facetious darn broadcast
</li>
<li>
<i class="fa fa-anchor"></i>
Alas capybara goldfish tireless inaudible one
</li>
<li>
<i class="fa fa-align-justify"></i>
Hence chaste during owl the proved
</li>
</ul>
</div>
</div>
<div class="row sub_content">
<div class="col-lg-12 col-md-12 col-sm-12">
<div class="dividerHeading">
<h4><span>Progress Bars</span></h4>
</div>
</div>
<div class="col-lg-6 ">
<div class="progress">
<div style="width: 40%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="40" role="progressbar" class="progress-bar progress-bar-success">
<span class="sr-only">40% Complete (success)</span>
</div>
</div>
<div class="progress">
<div style="width: 20%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="20" role="progressbar" class="progress-bar progress-bar-info">
<span class="sr-only">20% Complete</span>
</div>
</div>
<div class="progress">
<div style="width: 60%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="60" role="progressbar" class="progress-bar progress-bar-warning">
<span class="sr-only">60% Complete (warning)</span>
</div>
</div>
<div class="progress">
<div style="width: 80%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="80" role="progressbar" class="progress-bar progress-bar-danger">
<span class="sr-only">80% Complete</span>
</div>
</div>
<div class="progress progress-striped active">
<div style="width: 40%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="40" role="progressbar" class="progress-bar progress-bar-success">
<span class="sr-only">40% Complete (success)</span>
</div>
</div>
<div class="progress progress-striped">
<div style="width: 20%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="20" role="progressbar" class="progress-bar progress-bar-info">
<span class="sr-only">20% Complete</span>
</div>
</div>
<div class="progress progress-striped active">
<div style="width: 60%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="60" role="progressbar" class="progress-bar progress-bar-warning">
<span class="sr-only">60% Complete (warning)</span>
</div>
</div>
<div class="progress progress-striped">
<div style="width: 80%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="80" role="progressbar" class="progress-bar progress-bar-danger">
<span class="sr-only">80% Complete (danger)</span>
</div>
</div>
</div> <!--./ col-lg-6 -->
<div class="col-lg-6 ">
<ul class="progress-skill-bar mrg-0">
<li>
<span class="lable">70%</span>
<div class="progress_skill">
<div data-height="100" role="progressbar" data-value="70" class="bar" style="width: 0px; height: 0px;">
HTML
</div>
</div>
</li>
<li>
<span class="lable">80%</span>
<div class="progress_skill">
<div data-height="100" role="progressbar" data-value="80" class="bar" style="width: 0px; height: 0px;">
CSS
</div>
</div>
</li>
<li>
<span class="lable">90%</span>
<div class="progress_skill">
<div data-height="100" role="progressbar" data-value="90" class="bar" style="width: 0px; height: 0px;">
JavaScript
</div>
</div>
</li>
<li>
<span class="lable">80%</span>
<div class="progress_skill">
<div data-height="100" role="progressbar" data-value="80" class="bar" style="width: 0px; height: 0px;">
MySQL
</div>
</div>
</li>
<li>
<span class="lable">70%</span>
<div class="progress_skill">
<div data-height="100" role="progressbar" data-value="70" class="bar" style="width: 0px; height: 0px;">
PHP
</div>
</div>
</li>
</ul>
</div> <!--./ col-lg-6 -->
</div> <!--./row-->
<div class="row sub_content">
<div class="col-lg-12 col-md-12 col-sm-12">
<div class="dividerHeading">
<h4><span>Circular Progress Bar</span></h4>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 text-center">
<span class="circular-chart" data-percent="94">
<span class="percent"></span>
</span>
<h5 class="circular-title">WebDesign</h5>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 text-center">
<span class="circular-chart" data-percent="87">
<span class="percent"></span>
</span>
<h5 class="circular-title">Graphic Design</h5>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 text-center">
<span class="circular-chart" data-percent="77">
<span class="percent"></span>
</span>
<h5 class="circular-title">Mobile Applications</h5>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 text-center">
<span class="circular-chart" data-percent="82">
<span class="percent"></span>
</span>
<h5 class="circular-title">Search Engine Optimization</h5>
</div>
</div>
</div>
<div class="row sub_content">
<div class="col-lg-12 col-md-12 col-sm-12">
<div class="dividerHeading">
<h4><span>Our Clients</span></h4>
</div>
<div class="our_clients">
<ul class="client_items clearfix">
<li class="col-sm-3 col-md-3 col-lg-3"><a href="services.html" data-placement="bottom" data-toggle="tooltip" title="Client 1" ><img src="images/clients/1.png" alt="" /></a></li>
<li class="col-sm-3 col-md-3 col-lg-3"><a href="services.html" data-placement="bottom" data-toggle="tooltip" title="Client 2" ><img src="images/clients/2.png" alt="" /></a></li>
<li class="col-sm-3 col-md-3 col-lg-3"><a href="services.html" data-placement="bottom" data-toggle="tooltip" title="Client 3" ><img src="images/clients/3.png" alt="" /></a></li>
<li class="col-sm-3 col-md-3 col-lg-3"><a href="services.html" data-placement="bottom" data-toggle="tooltip" title="Client 4" ><img src="images/clients/4.png" alt="" /></a></li>
</ul><!--/ .client_items-->
</div>
</div>
</div> <!--./row-->
</div> <!--./Container-->
</section>
</section>
<!--end wrapper-->
<!--start footer-->
<footer class="footer">
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-3 col-lg-3">
<div class="widget_title">
<h4><span>About Us</span></h4>
</div>
<div class="widget_content">
<p>Donec earum rerum hic tenetur ans sapiente delectus, ut aut reiciendise voluptat maiores alias consequaturs aut perferendis doloribus asperiores.</p>
<ul class="contact-details-alt">
<li><i class="fa fa-map-marker"></i> <p><strong>Address</strong>: #2021 Lorem Ipsum</p></li>
<li><i class="fa fa-user"></i> <p><strong>Phone</strong>:(+91) 9000-12345</p></li>
<li><i class="fa fa-envelope"></i> <p><strong>Email</strong>: <a href="#">mail@example.com</a></p></li>
</ul>
</div>
</div>
<div class="col-sm-6 col-md-3 col-lg-3">
<div class="widget_title">
<h4><span>Recent Posts</span></h4>
</div>
<div class="widget_content">
<ul class="links">
<li><a href="#">Aenean commodo ligula eget dolor<span>November 07, 2015</span></a></li>
<li><a href="#">Temporibus autem quibusdam <span>November 05, 2015</span></a></li>
<li><a href="#">Debitis aut rerum saepe <span>November 03, 2015</span></a></li>
<li><a href="#">Et voluptates repudiandae <span>November 02, 2015</span></a></li>
</ul>
</div>
</div>
<div class="col-sm-6 col-md-3 col-lg-3">
<div class="widget_title">
<h4><span>Twitter</span></h4>
</div>
<div class="widget_content">
<ul class="tweet_list">
<li class="tweet_content item">
<p class="tweet_link"><a href="#">@jquery_rain </a> Lorem ipsum dolor et, consectetur adipiscing eli</p>
<span class="time">29 September 2015</span>
</li>
<li class="tweet_content item">
<p class="tweet_link"><a href="#">@jquery_rain </a> Lorem ipsum dolor et, consectetur adipiscing eli</p>
<span class="time">29 September 2015</span>
</li>
<li class="tweet_content item">
<p class="tweet_link"><a href="#">@jquery_rain </a> Lorem ipsum dolor et, consectetur adipiscing eli</p>
<span class="time">29 September 2015</span>
</li>
</ul>
</div>
<div class="widget_content">
<div class="tweet_go"></div>
</div>
</div>
<div class="col-sm-6 col-md-3 col-lg-3">
<div class="widget_title">
<h4><span>Flickr Gallery</span></h4>
</div>
<div class="widget_content">
<div class="flickr">
<ul id="flickrFeed" class="flickr-feed"></ul>
</div>
</div>
</div>
</div>
</div>
</footer>
<!--end footer-->
<section class="footer_bottom">
<div class="container">
<div class="row">
<div class="col-sm-6">
<p class="copyright">© Copyright 2015 Electrify | Powered by <a href="http://www.jqueryrain.com/">jQuery Rain</a></p>
</div>
<div class="col-sm-6 ">
<div class="footer_social">
<ul class="footbot_social">
<li><a class="fb" href="#." data-placement="top" data-toggle="tooltip" title="Facebook"><i class="fa fa-facebook"></i></a></li>
<li><a class="twtr" href="#." data-placement="top" data-toggle="tooltip" title="Twitter"><i class="fa fa-twitter"></i></a></li>
<li><a class="dribbble" href="#." data-placement="top" data-toggle="tooltip" title="Dribbble"><i class="fa fa-dribbble"></i></a></li>
<li><a class="skype" href="#." data-placement="top" data-toggle="tooltip" title="Skype"><i class="fa fa-skype"></i></a></li>
<li><a class="rss" href="#." data-placement="top" data-toggle="tooltip" title="RSS"><i class="fa fa-rss"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
</section>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/retina-1.1.0.min.js"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script> <!-- jQuery cookie -->
<script type="text/javascript" src="js/styleswitch.js"></script> <!-- Style Colors Switcher -->
<script type="text/javascript" src="js/jquery.smartmenus.min.js"></script>
<script type="text/javascript" src="js/jquery.smartmenus.bootstrap.min.js"></script>
<script type="text/javascript" src="js/jflickrfeed.js"></script>
<script type="text/javascript" src="js/jquery.magnific-popup.min.js"></script>
<script type="text/javascript" src="js/jquery.isotope.min.js"></script>
<script type="text/javascript" src="js/jquery.easypiechart.min.js"></script>
<script type="text/javascript" src="js/swipe.js"></script>
<script type="text/javascript" src="js/jquery-scrolltofixed-min.js"></script>
<script src="js/main.js"></script>
<script>
// Chart Effects;
$('.circular-chart').easyPieChart({
animate : 2000,
lineCap : 'square',
barColor: "#727CB6",
trackColor : '#f9f9f9',
scaleColor: false,
lineWidth: 11,
size: 180,
onStep: function(from, to, percent) {
$(this.el).find('.percent').text(Math.round(percent)+'%');
}
});
</script>
<!-- Start Style Switcher -->
<div class="switcher"></div>
<!-- End Style Switcher -->
</body>
</html>