| Current Path : /home/webyoo/www/backup/allback/kanity.com/save0807bh/ |
| Current File : /home/webyoo/www/backup/allback/kanity.com/save0807bh/shortcodes.html |
<!DOCTYPE html>
<html class="sticky_menu">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="shortcut icon" href="img/favico.ico" type="image/x-icon">
<link rel="apple-touch-icon" href="img/apple_icons_57x57.png">
<link rel="apple-touch-icon" sizes="72x72" href="img/apple_icons_72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="img/apple_icons_114x114.png">
<title>Oyster | Html Photo Template</title>
<link href="http://fonts.googleapis.com/css?family=PT+Sans" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Roboto:400,300,500,900" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="css/theme.css" type="text/css" media="all" />
<link rel="stylesheet" href="css/responsive.css" type="text/css" media="all" />
<link rel="stylesheet" href="css/custom.css" type="text/css" media="all" />
<script type="text/javascript" src="js/jquery.min.js"></script>
</head>
<body>
<header class="main_header">
<div class="header_wrapper">
<div class="logo_sect">
<a href="index.html" class="logo"><img src="img/logo.png" alt="" class="logo_def"><img src="img/retina/logo.png" alt="" class="logo_retina"></a>
<div class="slogan">html photo template</div>
</div>
<div class="header_rp">
<nav>
<div class="menu-main-menu-container">
<ul id="menu-main-menu" class="menu">
<li class="menu-item-has-children">
<a href="#"><span>Home</span></a>
<ul class="sub-menu">
<li><a href="index.html"><span>Slider</span></a></li>
<li><a href="portfolio_masonry.html"><span>Masonry Portfolio</span></a></li>
<li><a href="horizontal_striped.html"><span>Horizontal Striped</span></a></li>
<li><a href="vertical_striped.html"><span>Vertical Striped</span></a></li>
<li><a href="revolution_slider.html"><span>Revolution Slider</span></a></li>
<li><a href="bg_image.html"><span>Image BG</span></a></li>
<li><a href="bg_video.html"><span>Vimeo BG</span></a></li>
<li><a href="bg_youtube_video.html"><span>Youtube BG</span></a></li>
</ul>
</li>
<li class="menu-item-has-children">
<a href="#"><span>Gallery</span></a>
<ul class="sub-menu">
<li><a href="gallery_kenburns.html"><span>Kenburns</span></a></li>
<li><a href="gallery_flow.html"><span>Flow</span></a></li>
<li><a href="gallery_ribbon.html"><span>Ribbon</span></a></li>
<li><a href="gallery_photo_listing.html"><span>Photo Listing</span></a></li>
<li><a href="gallery_grid.html"><span>Grid</span></a></li>
<li><a href="gallery_grid_with_margin.html"><span>Grid 2</span></a></li>
<li><a href="gallery_masonry.html"><span>Masonry</span></a></li>
<li><a href="gallery_masonry_with_margin.html"><span>Masonry 2</span></a></li>
</ul>
</li>
<li class="menu-item-has-children">
<a href="#"><span>Portfolio</span></a>
<ul class="sub-menu">
<li><a href="portfolio_grid1.html"><span>Grid Style 1</span></a></li>
<li><a href="portfolio_grid2.html"><span>Grid Style 2</span></a></li>
<li><a href="portfolio_masonry_listing.html"><span>Masonry Style</span></a></li>
<li><a href="portfolio_standard.html"><span>Isotope</span></a></li>
<li class="menu-item-has-children">
<a href="#"><span>Columns</span></a>
<ul class="sub-menu">
<li><a href="portfolio_1col.html"><span>1 Column</span></a></li>
<li><a href="portfolio_2col.html"><span>2 Columns</span></a></li>
<li><a href="portfolio_3col.html"><span>3 Columns</span></a></li>
<li><a href="portfolio_4col.html"><span>4 Columns</span></a></li>
</ul>
</li>
<li class="menu-item-has-children">
<a href="#"><span>Fullscreen Posts</span></a>
<ul class="sub-menu">
<li><a href="fullscreen_ribbon_post.html"><span>Ribbon</span></a></li>
<li><a href="fullscreen_post_without_info.html"><span>Without Info</span></a></li>
<li><a href="fullscreen_post_with_info.html"><span>With Info</span></a></li>
<li><a href="fullscreen_video_post_without_info.html"><span>Video Post</span></a></li>
<li><a href="fullscreen_post_sidebar.html"><span>With Sidebar</span></a></li>
</ul>
</li>
<li class="menu-item-has-children">
<a href="#"><span>Simple Posts</span></a>
<ul class="sub-menu">
<li><a href="simple_fullwidth_image_post.html"><span>Image</span></a></li>
<li><a href="video_post_with_gallery.html"><span>Video</span></a></li>
<li><a href="simple_image_post.html"><span>With Sidebar</span></a></li>
</ul>
</li>
</ul>
</li>
<li class="menu-item-has-children">
<a href="#"><span>Blog</span></a>
<ul class="sub-menu">
<li><a href="fullscreen_blog.html"><span>Fullscreen</span></a></li>
<li class="menu-item-has-children">
<a href="#"><span>Standard</span></a>
<ul class="sub-menu">
<li><a href="blog_with_right_sidebar.html"><span>Right Sidebar</span></a></li>
<li><a href="blog_with_left_sidebar.html"><span>Left Sidebar</span></a></li>
<li><a href="fullwidth_blog.html"><span>Fullwidth</span></a></li>
</ul>
</li>
<li class="menu-item-has-children">
<a href="#"><span>Posts Variants</span></a>
<ul class="sub-menu">
<li><a href="fullwidth_image_post.html"><span>Fullwidth Post</span></a></li>
<li><a href="vimeo_video_post.html"><span>Right Sidebar</span></a></li>
<li><a href="post_with_left_sidebar.html"><span>Left Sidebar</span></a></li>
</ul>
</li>
</ul>
</li>
<li class="menu-item-has-children">
<a href="#"><span>Pages</span></a>
<ul class="sub-menu">
<li><a href="about.html"><span>About</span></a></li>
<li><a href="full_width.html"><span>Full Width</span></a></li>
<li><a href="before_after.html"><span>Before/After</span></a></li>
<li><a href="coming_soon.html"><span>Coming Soon</span></a></li>
<li><a href="404.html"><span>404 Error</span></a></li>
</ul>
</li>
<li class="current-menu-parent menu-item-has-children">
<a href="#"><span>Features</span></a>
<ul class="sub-menu">
<li class="current-menu-item"><a href="shortcodes.html"><span>Shortcodes</span></a></li>
<li><a href="typography.html"><span>Typography</span></a></li>
</ul>
</li>
<li class="menu-item-has-children">
<a href="#"><span>Contact</span></a>
<ul class="sub-menu">
<li><a href="contacts_fullscreen.html"><span>Fullscreen</span></a></li>
<li><a href="contact_with_sidebar.html"><span>With Sidebar</span></a></li>
<li><a href="contact_fullwidth.html"><span>Fullwidth</span></a></li>
</ul>
</li>
</ul>
</div>
<div class="search_fadder"></div>
<div class="header_search">
<form name="search_form" method="get" action="#" class="search_form">
<input type="text" name="s" value="" placeholder="Search the site..." class="field_search">
</form>
</div>
</nav>
<a class="search_toggler" href="#"></a>
</div>
<div class="clear"></div>
</div>
</header>
<div class="main_wrapper">
<div class="bg_sidebar is_right-sidebar"></div>
<div class="content_wrapper">
<div class="container">
<div class="content_block row right-sidebar">
<div class="fl-container hasRS">
<div class="row">
<div class="posts-block ">
<div class="page_title_block">
<h1 class="title">Shortcodes</h1>
</div>
<div class="contentarea">
<div class="row">
<div class="span12 first-module module_number_1 module_cont pb20 module_text_area">
<div class="module_content">
<p>Consectetur adipiscing elit. Morbi facilisis, arcu eget malesuada malesuada, sodio sem lobortis ac diam, gravida feugiat a nulla nisl ut eros lorem phasellus ut nisl aliquet, eleifend ante quis, cursus elit, сurabitur pulvinar, dolor vel euismod condimentum, tortor dolor suscipit est.</p>
</div>
</div><!-- .module_cont -->
</div>
<div class="row">
<div class="span12 module_number_2 module_cont pb40 module_accordion">
<div class="bg_title"><h3 class="headInModule">Accordion</h3></div>
<div class="shortcode_accordion_shortcode accordion">
<h5 data-count="1" class="shortcode_accordion_item_title expanded_yes">Exclusive and user-friendly design<span class="ico"></span></h5>
<div class="shortcode_accordion_item_body">
<div class="ip">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce lacinia sed purus at molestie duis pulvinar ac vehicula felis, non aliquet arcu apibus eget maecenas nibh enim vulputate a malesuada eu tincidunt non nec neque proin ut vulputate dui. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis eget.</p>
</div>
</div>
<h5 data-count="2" class="shortcode_accordion_item_title expanded_no">Compatibility with popular screen resolutions<span class="ico"></span></h5>
<div class="shortcode_accordion_item_body">
<div class="ip">
<p>Fusce lacinia sed purus at molestie duis pulvinar ac vehicula felis, non aliquet arcu apibus eget maecenas nibh enim vulputate a malesuada eu tincidunt non nec neque proin ut vulputate dui. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis eget. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<h5 data-count="3" class="shortcode_accordion_item_title expanded_no">Color Management<span class="ico"></span></h5>
<div class="shortcode_accordion_item_body">
<div class="ip">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis eget. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce lacinia sed purus at molestie duis pulvinar ac vehicula felis, non aliquet arcu apibus eget maecenas nibh enim vulputate a malesuada eu tincidunt non nec neque proin ut vulputate dui.</p>
</div>
</div>
</div>
</div><!-- .module_cont -->
</div>
<div class="row">
<div class="span12 module_number_3 module_cont pb30 module_toggle">
<div class="bg_title"><h3 class="headInModule">Toggle</h3></div>
<div class="shortcode_toggles_shortcode toggles">
<h5 data-count="1" class="shortcode_toggles_item_title expanded_no">Color Management<span class="ico"></span></h5>
<div class="shortcode_toggles_item_body">
<div class="ip">
<p>Arcu apibus eget maecenas nibh enim vulputate a malesuada eu tincidunt non nec neque proin ut vulputate dui. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis eget. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce lacinia sed purus at molestie duis pulvinar ac vehicula felis, non aliquet.</p>
</div>
</div>
<h5 data-count="2" class="shortcode_toggles_item_title expanded_yes">Exclusive and user-friendly design<span class="ico"></span></h5>
<div class="shortcode_toggles_item_body">
<div class="ip">
<p>Fusce lacinia sed purus at molestie duis pulvinar ac vehicula felis, non aliquet arcu apibus eget maecenas nibh enim vulputate a malesuada eu tincidunt non nec neque proin ut vulputate dui. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis eget. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<h5 data-count="3" class="shortcode_toggles_item_title expanded_yes">Compatibility with popular screen resolutions<span class="ico"></span></h5>
<div class="shortcode_toggles_item_body">
<div class="ip">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce lacinia sed purus at molestie duis pulvinar ac vehicula felis, non aliquet arcu apibus eget maecenas nibh enim vulputate a malesuada eu tincidunt non nec neque proin ut vulputate dui. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis eget.</p>
</div>
</div>
</div>
</div><!-- .module_cont -->
</div>
<div class="row">
<div class="span12 module_number_4 module_cont pb5 module_text_area">
<div class="bg_title"><h3 class="headInModule">Counter</h3></div>
</div><!-- .module_cont -->
</div>
<div class="row">
<div class="span4 module_number_5 module_cont pb40 module_counter">
<div class="module_content shortcode_counter">
<div class="counter_wrapper">
<div class="ico_wrapper">
<span class="ico"><i class=icon-thumbs-up></i></span>
</div>
<div class="counter_content">
<div class="stat_count_wrapper">
<h1 class="stat_count" data-count="1309">0</h1>
</div>
<div class="counter_body">
<h4 class="counter_title">Happy Customers</h4>
<div class="counter_text">Consectetur adipiscing elit morbi facilisis, arcu eget malesuada malesuada sodio.</div>
<div class="stat_temp"></div>
</div>
</div>
</div>
</div>
</div><!-- .module_cont -->
<div class="span4 module_number_6 module_cont pb40 module_counter">
<div class="module_content shortcode_counter">
<div class="counter_wrapper">
<div class="ico_wrapper">
<span class="ico"><i class=icon-heart></i></span>
</div>
<div class="counter_content">
<div class="stat_count_wrapper">
<h1 class="stat_count" data-count="3018">0</h1>
</div>
<div class="counter_body">
<h4 class="counter_title">Amazing Projects</h4>
<div class="counter_text">Consectetur adipiscing elit morbi facilisis, arcu eget malesuada malesuada sodio. </div>
<div class="stat_temp"></div>
</div>
</div>
</div>
</div>
</div><!-- .module_cont -->
<div class="span4 module_number_7 module_cont pb40 module_counter">
<div class="module_content shortcode_counter">
<div class="counter_wrapper">
<div class="ico_wrapper">
<span class="ico"><i class=icon-users></i></span>
</div>
<div class="counter_content">
<div class="stat_count_wrapper">
<h1 class="stat_count" data-count="15243">0</h1>
</div>
<div class="counter_body">
<h4 class="counter_title">Followers</h4>
<div class="counter_text">Consectetur adipiscing elit morbi facilisis, arcu eget malesuada malesuada sodio. </div>
<div class="stat_temp"></div>
</div>
</div>
</div>
</div>
</div><!-- .module_cont -->
</div>
<div class="row">
<div class="span12 module_number_8 module_cont pb0 module_text_area">
<div class="bg_title"><h3 class="headInModule">Icon Box</h3></div>
</div><!-- .module_cont -->
</div>
<div class="row">
<div class="span4 module_number_9 module_cont pb20 module_iconboxes">
<div class="module_content shortcode_iconbox">
<a href="javascript:void(0);">
<div class="iconbox_wrapper">
<span class="ico"><i class=icon-heart></i></span>
<h4 class="iconbox_title">FRESH & CLEAN DESIGN</h4>
<div class="iconbox_body">
<p>Consectetur adipiscing elit morbi facilisis, arcu eget malesuada malesuada sodio.</p>
</div>
</div>
</a>
</div>
</div><!-- .module_cont -->
<div class="span4 module_number_10 module_cont pb20 module_iconboxes">
<div class="module_content shortcode_iconbox">
<a href="javascript:void(0);">
<div class="iconbox_wrapper">
<span class="ico"><i class=icon-tablet></i></span>
<h4 class="iconbox_title">Fully Responsive</h4>
<div class="iconbox_body">
<p>Consectetur adipiscing elit morbi facilisis, arcu eget malesuada malesuada sodio.</p>
</div>
</div>
</a>
</div>
</div><!-- .module_cont -->
<div class="span4 module_number_11 module_cont pb38 module_iconboxes">
<div class="module_content shortcode_iconbox">
<a href="javascript:void(0);">
<div class="iconbox_wrapper">
<span class="ico"><i class=icon-gear></i></span>
<h4 class="iconbox_title">Very Flexible</h4>
<div class="iconbox_body">
<p>Consectetur adipiscing elit morbi facilisis, arcu eget malesuada malesuada sodio.</p>
</div>
</div>
</a>
</div>
</div><!-- .module_cont -->
</div>
<div class="row">
<div class="span12 module_number_12 module_cont pb40 module_feature_posts">
<div class="bg_title"><h3 class="headInModule">Blog Posts</h3></div>
<div class="featured_items">
<div class="items3 featured_posts">
<ul class="item_list">
<li>
<div class="item">
<div class="item_wrapper">
<div class="img_block wrapped_img">
<a href="fullwidth_image_post.html">
<img alt="" src="img/blog/540_368/1.jpg" />
<div class="featured_item_fadder"></div>
<span class="gallery_ico"><i class="stand_icon icon-eye"></i></span>
</a>
</div>
<div class="featured_items_body featured_posts_body">
<div class="featured_items_title">
<h6><a href="fullwidth_image_post.html">Feugiat a nulla nisl</a></h6>
</div>
<div class="featured_item_content">
Lobortis diam, gravida feugiat a nulla nisl a eros phasellus consectetur
<a class="morelink" href="fullwidth_image_post.html">Read more</a>
<div class="featured_items_meta">
<div class="preview_categ">
<span class="preview_meta_data">in <a href="javascript:void(0);">Nature</a></span>
<span class="preview_meta_comments"><a href="javascript:void(0);">3 comments</a></span>
</div>
<div class="gallery_likes gallery_likes_add already_liked">
<i class="stand_icon icon-heart"></i>
<span>31</span>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li>
<div class="item">
<div class="item_wrapper">
<div class="img_block wrapped_img">
<a href="fullwidth_image_post.html">
<img alt="" src="img/blog/540_368/2.jpg" />
<div class="featured_item_fadder"></div>
<span class="gallery_ico"><i class="stand_icon icon-eye"></i></span>
</a>
</div>
<div class="featured_items_body featured_posts_body">
<div class="featured_items_title">
<h6><a href="fullwidth_image_post.html">Adipiscing elit morbi</a></h6>
</div>
<div class="featured_item_content">
Consectetur adipiscing elit. Morbi facilisis, arcu ac eget malesuada malesuada,
<a class="morelink" href="fullwidth_image_post.html">Read more</a>
<div class="featured_items_meta">
<div class="preview_categ">
<span class="preview_meta_data">in <a href="javascript:void(0);">Cities</a>, <a href="javascript:void(0);">Stuff</a></span>
<span class="preview_meta_comments"><a href="javascript:void(0);">3 comments</a></span>
</div>
<div class="gallery_likes gallery_likes_add ">
<i class="stand_icon icon-heart-o"></i>
<span>30</span>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li>
<div class="item">
<div class="item_wrapper">
<div class="img_block wrapped_img">
<a href="fullwidth_image_post.html">
<img alt="" src="img/blog/540_368/3.jpg" />
<div class="featured_item_fadder"></div>
<span class="gallery_ico"><i class="stand_icon icon-eye"></i></span>
</a>
</div>
<div class="featured_items_body featured_posts_body">
<div class="featured_items_title">
<h6><a href="fullwidth_image_post.html">Lobortis diam gravida</a></h6>
</div>
<div class="featured_item_content">
Morbi facilisis, arcu ac eget malesuada malesuada sodio. Lobortis diam, gravida
<a class="morelink" href="fullwidth_image_post.html">Read more</a>
<div class="featured_items_meta">
<div class="preview_categ">
<span class="preview_meta_data">in <a href="javascript:void(0);">Cities</a></span>
<span class="preview_meta_comments"><a href="javascript:void(0);">3 comments</a></span>
</div>
<div class="gallery_likes gallery_likes_add ">
<i class="stand_icon icon-heart-o"></i>
<span>16</span>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div><!-- .module_cont -->
</div>
<div class="row">
<div class="span12 module_number_13 module_cont pb40 module_feature_portfolio">
<div class="bg_title"><h3 class="headInModule">Portfolio Posts</h3></div>
<div class="featured_items">
<div class="items3 featured_portfolio">
<ul class="item_list">
<li>
<div class="item">
<div class="item_wrapper">
<div class="img_block wrapped_img">
<a class="featured_ico_link" href="simple_fullwidth_image_post.html">
<img alt="" src="img/portfolio/540_368/1.jpg" />
<div class="featured_item_fadder"></div>
<span class="gallery_ico"><i class="stand_icon icon-eye"></i></span>
</a>
</div>
<div class="featured_items_body">
<div class="featured_items_title">
<h6><a href="simple_fullwidth_image_post.html">Adipiscing elit aenean</a></h6>
</div>
<div class="featured_item_content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean placerat...
<a class="morelink" href="simple_fullwidth_image_post.html">Read more</a>
<div class="featured_items_meta">
<div class="preview_categ">in Stuff</div>
<div class="gallery_likes gallery_likes_add already_liked">
<i class="stand_icon icon-heart"></i>
<span>143</span>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li>
<div class="item">
<div class="item_wrapper">
<div class="img_block wrapped_img">
<a class="featured_ico_link" href="simple_fullwidth_image_post.html">
<img alt="" src="img/portfolio/540_368/2.jpg" />
<div class="featured_item_fadder"></div>
<span class="gallery_ico"><i class="stand_icon icon-eye"></i></span>
</a>
</div>
<div class="featured_items_body">
<div class="featured_items_title">
<h6><a href="simple_fullwidth_image_post.html">Pretium orci quisque</a></h6>
</div>
<div class="featured_item_content">
Pellentesque pretium orci quisque ut ante nunc. Suspendisse vulputate...
<a class="morelink" href="simple_fullwidth_image_post.html">Read more</a>
<div class="featured_items_meta">
<div class="preview_categ">in Advertisement</div>
<div class="gallery_likes gallery_likes_add ">
<i class="stand_icon icon-heart-o"></i>
<span>155</span>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li>
<div class="item">
<div class="item_wrapper">
<div class="img_block wrapped_img">
<a class="featured_ico_link" href="simple_fullwidth_image_post.html">
<img alt="" src="img/portfolio/540_368/3.jpg" />
<div class="featured_item_fadder"></div>
<span class="gallery_ico"><i class="stand_icon icon-eye"></i></span>
</a>
</div>
<div class="featured_items_body">
<div class="featured_items_title">
<h6><a href="simple_fullwidth_image_post.html">Quisque luctus tellus</a></h6>
</div>
<div class="featured_item_content">
Proin egestas ullamcorper ornare. Quisque luctus pellentesque tellus, vel...
<a class="morelink" href="simple_fullwidth_image_post.html">Read more</a>
<div class="featured_items_meta">
<div class="preview_categ">in Stuff</div>
<div class="gallery_likes gallery_likes_add ">
<i class="stand_icon icon-heart-o"></i>
<span>138</span>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div><!-- .module_cont -->
</div>
<div class="row">
<div class="span12 module_number_14 module_cont pb40 module_gallery">
<div class="bg_title"><h3 class="headInModule">Gallery</h3></div>
<div class="list-of-images images_in_a_row_3">
<div class="gallery_item">
<div class="gallery_item_padding">
<div class="gallery_item_wrapper">
<a href="img/gallery/grid/zoom/1.jpg" class="prettyPhoto" data-rel="prettyPhoto[gallery1]" title="Caption goes here">
<img class="gallery-stand-img" src="img/gallery/grid/1.jpg" alt="Walking Man">
<span class="gallery_fadder"></span>
<span class="gallery_ico"><i class="stand_icon icon-eye"></i></span>
</a>
</div>
</div>
</div>
<div class="gallery_item">
<div class="gallery_item_padding">
<div class="gallery_item_wrapper">
<a href="http://vimeo.com/81487125" class="prettyPhoto" data-rel="prettyPhoto[gallery1]" title="">
<img class="gallery-stand-img" src="img/gallery/grid/7.jpg" alt="Cras Vitae Sodales">
<span class="gallery_fadder"></span>
<span class="gallery_ico"><i class="stand_icon icon-eye"></i></span>
</a>
</div>
</div>
</div>
<div class="gallery_item">
<div class="gallery_item_padding">
<div class="gallery_item_wrapper">
<a href="img/gallery/grid/zoom/2.jpg" class="prettyPhoto" data-rel="prettyPhoto[gallery1]" title="">
<img class="gallery-stand-img" src="img/gallery/grid/2.jpg" alt="">
<span class="gallery_fadder"></span>
<span class="gallery_ico"><i class="stand_icon icon-eye"></i></span>
</a>
</div>
</div>
</div>
<div class="gallery_item">
<div class="gallery_item_padding">
<div class="gallery_item_wrapper">
<a href="http://www.youtube.com/watch?v=iAJncW1Qj9w" class="prettyPhoto" data-rel="prettyPhoto[gallery1]" title="">
<img class="gallery-stand-img" src="img/gallery/grid/4.jpg" alt="Lorem Ipsum Dolor">
<span class="gallery_fadder"></span>
<span class="gallery_ico"><i class="stand_icon icon-eye"></i></span>
</a>
</div>
</div>
</div>
<div class="gallery_item">
<div class="gallery_item_padding">
<div class="gallery_item_wrapper">
<a href="img/gallery/grid/zoom/6.jpg" class="prettyPhoto" data-rel="prettyPhoto[gallery1]" title="">
<img class="gallery-stand-img" src="img/gallery/grid/6.jpg" alt="">
<span class="gallery_fadder"></span>
<span class="gallery_ico"><i class="stand_icon icon-eye"></i></span>
</a>
</div>
</div>
</div>
<div class="gallery_item">
<div class="gallery_item_padding">
<div class="gallery_item_wrapper">
<a href="img/gallery/grid/zoom/10.jpg" class="prettyPhoto" data-rel="prettyPhoto[gallery1]" title="">
<img class="gallery-stand-img" src="img/gallery/grid/10.jpg" alt="">
<span class="gallery_fadder"></span>
<span class="gallery_ico"><i class="stand_icon icon-eye"></i></span>
</a>
</div>
</div>
</div>
<div class="clear"></div>
</div>
</div><!-- .module_cont -->
</div>
<div class="row">
<div class="span12 module_number_15 module_cont pb20 module_promo_text">
<div class="bg_title"><h3 class="headInModule">Promo Text</h3></div>
<div class="shortcode_promoblock">
<div class="promoblock_wrapper">
<div class="promo_text_block">
<div class="promo_text_block_wrapper">
<h1>Discover Elegant Solution for Your Portfolio</h1>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit in at mollis nibh donec pulvin.</span>
</div>
</div>
<div class="promo_button_block"><a href="javascript:void(0);" class="promo_button shortcode_button btn_large btn_type5">Purchase Theme</a></div>
</div>
</div>
<div class="clear"></div>
</div><!-- .module_cont -->
</div>
<div class="row">
<div class="span12 module_number_16 module_cont pb50 module_promo_text">
<div class="shortcode_promoblock no_button_text no_button_link ">
<div class="promoblock_wrapper">
<div class="promo_text_block">
<div class="promo_text_block_wrapper">
<h1>Discover Elegant Solution for Your Online Photography Portfolio</h1>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit in at mollis nibh donec vel pulvinar nec ligula vel varius libero gravida.</span>
</div>
</div>
</div>
</div>
<div class="clear"></div>
</div><!-- .module_cont -->
</div>
<div class="row">
<div class="span12 module_number_17 module_cont pb45 module_team">
<div class="bg_title"><h3 class="headInModule">Team</h3></div>
<div class="team_slider">
<div class="carouselslider teamslider items3">
<ul class="item_list">
<li>
<div class="item_wrapper">
<div class="item">
<div class="img_block"><img src="img/imgs/team1.jpg" alt="Adam Sawyer" /></div>
<div class="carousel_body">
<div class="team_title">
<h6>Adam Sawyer</h6>
<div class="op">Photographer</div>
</div>
<div class="team_desc">Consectetur adipiscing elit morbi facilisis, arcu eget anec malesuada malesuada sodio am nec lobortis.</div><div class="team_icons_wrapper"><a href="#" class="teamlink team_fb" title="Facebook"><span><i class="icon-facebook-square"></i></span></a><a href="#" class="teamlink team_pinterest" title="Pinterest"><span><i class="icon-pinterest"></i></span></a><a href="#" class="teamlink team_twitter" title="Twitter"><span><i class="icon-twitter"></i></span></a><a href="#" class="teamlink team_google" title="Google+"><span><i class="icon-google-plus-square"></i></span></a></div></div>
</div>
</div>
</li>
<li>
<div class="item_wrapper">
<div class="item">
<div class="img_block"><img src="img/imgs/team2.jpg" alt="Sarah White" /></div>
<div class="carousel_body">
<div class="team_title">
<h6>Sarah White</h6>
<div class="op">Assistant</div>
</div>
<div class="team_desc">Consectetur adipiscing elit morbi facilisis, arcu eget anec malesuada malesuada sodio am nec lobortis.</div><div class="team_icons_wrapper"><a href="#" class="teamlink team_fb" title="Facebook"><span><i class="icon-facebook-square"></i></span></a><a href="#" class="teamlink team_twitter" title="Twitter"><span><i class="icon-twitter"></i></span></a><a href="#" class="teamlink team_flickr" title="Flickr"><span><i class="icon-flickr"></i></span></a><a href="#" class="teamlink team_tumblr" title="Tumblr"><span><i class="icon-tumblr-square"></i></span></a></div></div>
</div>
</div>
</li>
<li>
<div class="item_wrapper">
<div class="item">
<div class="img_block"><img src="img/imgs/team3.jpg" alt="John Doe" /></div>
<div class="carousel_body">
<div class="team_title">
<h6>John Doe</h6>
<div class="op">Photographer</div>
</div>
<div class="team_desc">Consectetur adipiscing elit morbi facilisis, arcu eget anec malesuada malesuada sodio am nec lobortis. </div><div class="team_icons_wrapper"><a href="#" class="teamlink team_fb" title="Facebook"><span><i class="icon-facebook-square"></i></span></a><a href="#" class="teamlink team_pinterest" title="Pinterest"><span><i class="icon-pinterest"></i></span></a><a href="#" class="teamlink team_tumblr" title="Tumblr"><span><i class="icon-tumblr-square"></i></span></a><a href="#" class="teamlink team_instagram" title="Instagram"><span><i class="icon-instagram"></i></span></a></div></div>
</div>
</div>
</li>
</ul>
</div>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div><!-- .module_cont -->
</div>
<div class="row">
<div class="span12 module_number_18 module_cont pb7 module_text_area">
<div class="bg_title"><h3 class="headInModule">Divider</h3></div>
</div><!-- .module_cont -->
</div>
<div class="row">
<div class="span12 module_number_19 module_cont pb0 module_divider">
<hr>
</div><!-- .module_cont -->
</div>
<div class="row">
<div class="span12 module_number_20 module_cont pb0 module_divider">
<hr class="type1">
</div><!-- .module_cont -->
</div>
<div class="row">
<div class="span12 module_number_21 module_cont pb0 module_divider">
<hr class="type2">
</div><!-- .module_cont -->
</div>
<div class="row">
<div class="span12 module_number_22 module_cont pb20 module_divider">
<hr class="type3">
</div><!-- .module_cont -->
</div>
<div class="row">
<div class="span12 module_number_23 module_cont pb25 module_tabs">
<div class="bg_title"><h3 class="headInModule">Tabs</h3></div>
<div class="shortcode_tabs type1">
<div class="all_head_sizer"><div class="all_heads_cont"></div></div>
<div class="all_body_sizer"><div class="all_body_cont"></div></div>
<div class="shortcode_tab_item_title expand_yes">Portraits</div>
<div class="shortcode_tab_item_body tab-content clearfix">
<div class="ip">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce lacinia sed purus at molestie duis pulvinar ac vehicula felis, non aliquet arcu apibus eget maecenas nibh enim vulputate a malesuada eu tincidunt non nec neque proin ut vulputate dui. Pellentesque habitant morbi tristique senectus et netus et malesuada fames.</p>
</div>
</div>
<div class="shortcode_tab_item_title expand_no">Nature</div>
<div class="shortcode_tab_item_body tab-content clearfix">
<div class="ip">
<p>Fusce lacinia sed purus at molestie duis pulvinar ac vehicula felis, non aliquet arcu apibus eget maecenas nibh enim vulputate a malesuada eu tincidunt non nec neque proin ut vulputate dui. Pellentesque habitant morbi tristique senectus et netus et malesuada fames. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="shortcode_tab_item_title expand_no">Fashion</div>
<div class="shortcode_tab_item_body tab-content clearfix">
<div class="ip">
<p>Apibus eget maecenas nibh enim vulputate a malesuada eu tincidunt non nec neque proin ut vulputate dui. Pellentesque habitant morbi tristique senectus et netus et malesuada fames. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce lacinia sed purus at molestie duis pulvinar ac vehicula felis, non aliquet arcu.</p>
</div>
</div>
</div>
</div><!-- .module_cont -->
</div>
<div class="row">
<div class="span12 module_number_24 module_cont pb50 module_tabs">
<div class="shortcode_tabs type2">
<div class="all_head_sizer"><div class="all_heads_cont"></div></div>
<div class="all_body_sizer"><div class="all_body_cont"></div></div>
<div class="shortcode_tab_item_title expand_yes">Fashion</div>
<div class="shortcode_tab_item_body tab-content clearfix">
<div class="ip">
<p>Mauris eget accumsan est. In ullamcorper arcu eget sem accumsan, non condimentum est condimentum. Quisque venenatis pulvinar dolor, porta accumsan odio laoreet vitae. Nunc laoreet non nisi vel mollis. Donec non aliquam tortor, sed viverra turpis. Nunc nec tortor cursus, congue leo a, luctus sem. Praesent id lacus at urna semper egets. Etiam nec dignissim lectus, eu tempor neque. Aliquam eu porta neque. Nulla commodo laoreet felis. Interdum et malesuada fames ac ante ipsum primis.</p>
</div>
</div>
<div class="shortcode_tab_item_title expand_no">Portraits</div>
<div class="shortcode_tab_item_body tab-content clearfix">
<div class="ip">
<p>Nunc nec tortor cursus, congue leo a, luctus sem. Praesent id lacus at urna semper egets. Etiam nec dignissim lectus, eu tempor neque. Aliquam eu porta neque. Nulla commodo laoreet felis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris eget accumsan est. In ullamcorper arcu eget sem accumsan, non condimentum est condimentum. Quisque venenatis pulvinar dolor, porta accumsan odio laoreet vitae. Nunc laoreet non nisi vel mollis. Donec non aliquam tortor, sed viverra turpis.</p>
</div>
</div>
<div class="shortcode_tab_item_title expand_no">Nature</div>
<div class="shortcode_tab_item_body tab-content clearfix">
<div class="ip">
<p>Nulla commodo laoreet felis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris eget accumsan est. In ullamcorper arcu eget sem accumsan, non condimentum est condimentum. Quisque venenatis pulvinar dolor, porta accumsan odio laoreet vitae. Nunc laoreet non nisi vel mollis. Donec non aliquam tortor, sed viverra turpis. Nunc nec tortor cursus, congue leo a, luctus sem. Praesent id lacus at urna semper egets. Etiam nec dignissim lectus, eu tempor neque aliquam eu porta.</p>
</div>
</div>
</div>
</div><!-- .module_cont -->
</div>
<div class="row">
<div class="span12 module_number_25 module_cont pb40 module_testimonial">
<div class="bg_title"><h3 class="headInModule">Testimonials</h3></div>
<div class="module_content testimonials_list">
<ul class="double">
<li>
<div class="item">
<div class="testimonial_item_wrapper">
<div class="testimonials_photo">
<img alt="" src="img/imgs/testim1.jpg" class="testimonials_ava">
</div>
<div class="testimonials_text">
<h6 class="testimonials_title">Tom Brown, Company Inc.</h6>
<p>Egesta sapien adipiscing neque sit amet lacinia velit neque vel metus cras ac sapien ante nullam arcu felis sagittis sollicitudin urna non rhoncus.</p>
</div>
</div>
</div>
</li>
<li>
<div class="item">
<div class="testimonial_item_wrapper">
<div class="testimonials_photo">
<img alt="" src="img/imgs/testim2.jpg" class="testimonials_ava">
</div>
<div class="testimonials_text">
<h6 class="testimonials_title">John Doe, Company Inc.</h6>
<p>Sit amet lacinia velit neque vel metus cras ac sapien ante nullam arcu felis sagittis sollicitudin urna non, rhoncus scelerisque metus aenean posuere sit amet.</p>
</div>
</div>
</div>
</li>
<li>
<div class="item">
<div class="testimonial_item_wrapper">
<div class="testimonials_photo">
<img alt="" src="img/imgs/testim3.jpg" class="testimonials_ava">
</div>
<div class="testimonials_text">
<h6 class="testimonials_title">Sarah White, Company Inc.</h6>
<p>Aenean posuere sit amet nisl rhoncus laoreet ut adipiscing ornare tortor id tincidunt. Ut molestie, justo eget volutpat sagittis lectus egesta sapien.</p>
</div>
</div>
</div>
</li>
<li>
<div class="item">
<div class="testimonial_item_wrapper">
<div class="testimonials_photo">
<img alt="" src="img/imgs/testim4.jpg" class="testimonials_ava">
</div>
<div class="testimonials_text">
<h6 class="testimonials_title">Anna Smith, Company Inc.</h6>
<p>Ut adipiscing ornare tortor id tincidunt. Ut molestie, justo eget volutpat sagittis lectus egesta nec sapien adipiscing neque sit amet lacinia velit neque vel.</p>
</div>
</div>
</div>
</li>
</ul>
</div>
</div><!-- .module_cont -->
</div>
<div class="row">
<div class="span12 module_number_26 module_cont pb40 module_testimonial">
<div class="module_content testimonials_list">
<ul class="single">
<li>
<div class="item">
<div class="testimonial_item_wrapper">
<div class="testimonials_photo">
<img alt="" src="img/imgs/testim4.jpg" class="testimonials_ava">
</div>
<div class="testimonials_text">
<h6 class="testimonials_title">Anna Smith, Company Inc.</h6>
<p>Ut adipiscing ornare tortor id tincidunt. Ut molestie, justo eget volutpat sagittis lectus egesta nec sapien adipiscing neque sit amet lacinia velit neque vel.</p>
</div>
</div>
</div>
</li>
<li>
<div class="item">
<div class="testimonial_item_wrapper">
<div class="testimonials_photo">
<img alt="" src="img/imgs/testim2.jpg" class="testimonials_ava">
</div>
<div class="testimonials_text">
<h6 class="testimonials_title">John White, Company Inc.</h6>
<p>Molestie, justo eget volutpat sagittis lectus egesta sapien adipiscing neque, sit amet lacinia velit neque vel metus cras ac sapien ante nullam arcu felis sagittis sollicitudin urna non rhoncus egestas scelerisque metus. Aenean posuere sit amet nisl rhoncus laoreet. Fusce urna ante, lobortis nec rutrum eu, tincidunt quis dui. Praesent luctus fringilla gravida. In faucibus venenatis tortor sit amet lobortis. Sagittis lectus egesta sapien adipiscing neque, sit amet lacinia velit neque vel metus cras.</p>
</div>
</div>
</div>
</li>
</ul>
</div>
</div><!-- .module_cont -->
</div>
<div class="row">
<div class="span12 module_number_27 module_cont pb55 module_partners">
<div class="bg_title"><h3 class="headInModule">Partners</h3></div>
<div class="module_content sponsors_works items5">
<ul>
<li>
<div class="item_wrapper">
<div class="item">
<a href="http://themeforest.net/item/frame-photography-minimalistic-wp-theme-/5358164?ref=mad_dog" target="_blank"></a><img src="img/partners/frame1.png" alt="Frame" title="Frame" />
</div>
</div>
</li>
<li>
<div class="item_wrapper">
<div class="item">
<a href="http://themeforest.net/item/eclipse-photo-portfolio-wordpress-theme/7181755?ref=mad_dog" target="_blank"></a><img src="img/partners/eclipse1.png" alt="Eclipse" title="Eclipse" />
</div>
</div>
</li>
<li>
<div class="item_wrapper">
<div class="item">
<a href="http://www.gt3themes.com/" target="_blank"></a><img src="img/partners/gt3themes.png" alt="GT3Themes" title="GT3Themes" />
</div>
</div>
</li>
<li>
<div class="item_wrapper">
<div class="item">
<a href="http://themeforest.net/" target="_blank"></a><img src="img/partners/themeforest.png" alt="ThemeForest" title="ThemeForest" />
</div>
</div>
</li>
<li>
<div class="item_wrapper">
<div class="item">
<a href="http://www.pixeden.com/" target="_blank"></a><img src="img/partners/pixeden.png" alt="Pixeden" title="Pixeden" />
</div>
</div>
</li>
<li>
<div class="item_wrapper">
<div class="item">
<a href="http://mailchimp.com/" target="_blank"></a><img src="img/partners/mailchimp.png" alt="MailChimp" title="MailChimp" />
</div>
</div>
</li>
<li>
<div class="item_wrapper">
<div class="item">
<a href="http://www.envato.com/" target="_blank"></a><img src="img/partners/envato.png" alt="Envato" title="Envato" />
</div>
</div>
</li>
<li>
<div class="item_wrapper">
<div class="item">
<a href="http://wordpress.com/" target="_blank"></a><img src="img/partners/wp.png" alt="WordPress" title="WordPress" />
</div>
</div>
</li>
<li>
<div class="item_wrapper">
<div class="item">
<a href="http://themeforest.net/item/hq-photography-responsive-wp-theme/3200962?ref=mad_dog" target="_blank"></a><img src="img/partners/hq1.png" alt="HQ" title="HQ" />
</div>
</div>
</li>
<li>
<div class="item_wrapper">
<div class="item">
<a href="http://themeforest.net/item/marvel-creative-portfolio-wordpress-theme/7571407?ref=mad_dog" target="_blank"></a><img src="img/partners/marvel.png" alt="Marvel" title="Marvel" />
</div>
</div>
</li>
</ul>
</div>
</div><!-- .module_cont -->
</div>
<div class="row">
<div class="span12 module_cont pb0 module_text_area">
<div class="bg_title"><h3 class="headInModule">Message Boxes</h3></div>
</div><!-- .module_cont -->
</div>
<div class="row">
<div class="span12 module_number_28 module_cont pb10 module_messageboxes">
<div class="module_content shortcode_messagebox box_type1">
<span class="box_icon"><i class=icon-exclamation-circle></i></span>
<div class="box_content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit in at mollis nibh donec vel pulvinar ligula, vel varius libero.</p>
</div>
<a class="box_close" href="javascript:void(0)"></a>
<div class="clear"></div>
</div>
</div><!-- .module_cont -->
</div>
<div class="row">
<div class="span12 module_number_29 module_cont pb10 module_messageboxes">
<div class="module_content shortcode_messagebox box_type2">
<span class="box_icon"><i class=icon-info-circle></i></span>
<div class="box_content">
<p>In at mollis nibh donec vel pulvinar ligula, vel varius libero. Sed gravida sapien ut vulputate ultricies.</p>
</div>
<a class="box_close" href="javascript:void(0)"></a>
<div class="clear"></div>
</div>
</div><!-- .module_cont -->
</div>
<div class="row">
<div class="span12 module_number_30 module_cont pb10 module_messageboxes">
<div class="module_content shortcode_messagebox box_type3">
<span class="box_icon"><i class=icon-check-circle></i></span>
<div class="box_content">
<p>Donec vel pulvinar ligula, vel varius libero. Sed gravida sapien ut vulputate ultricies vestibulum ornare eget erat.</p>
</div>
<a class="box_close" href="javascript:void(0)"></a>
<div class="clear"></div>
</div>
</div><!-- .module_cont -->
</div>
<div class="row">
<div class="span12 module_number_31 module_cont pb10 module_messageboxes">
<div class="module_content shortcode_messagebox box_type4">
<span class="box_icon"><i class=icon-exclamation-triangle></i></span>
<div class="box_content">
<p>Sed gravida sapien ut vulputate ultricies vestibulum ornare eget erat non feugiat proin a ligula tristique magna tincidunt.</p>
</div>
<a class="box_close" href="javascript:void(0)"></a>
<div class="clear"></div>
</div>
</div><!-- .module_cont -->
</div>
<div class="row">
<div class="span12 module_number_32 module_cont pb55 module_messageboxes">
<div class="module_content shortcode_messagebox box_type5">
<span class="box_icon"><i class=icon-times-circle></i></span>
<div class="box_content">
<p>Vestibulum ornare eget erat non feugiat. Proin a ligula tristique magna tincidunt imperdiet.</p>
</div>
<a class="box_close" href="javascript:void(0)"></a>
<div class="clear"></div>
</div>
</div><!-- .module_cont -->
</div>
<div class="row">
<div class="span12 module_number_33 module_cont pb50 module_diagramm">
<div class="bg_title"><h3 class="headInModule">Progress Bar</h3></div>
<div class="shortcode_diagramm_shortcode diagramm items3">
<ul class="skills_list" data-bg="#cfd1d1" data-color="#40b7b8" data-width="2px" data-size="62px" data-fontsize="16px">
<li class="skill_li">
<div class="skill_wrapper">
<div class="skill_item">
<div class="chart_wrapper">
<div class="chart" data-percent="86">86<span>%</span></div>
</div>
<div class="skill_content">
<h4>HTML5</h4>
<div class="skill_descr">Consectetur adipiscing elit morbi facilisis, arcu eget malesuada malesuada sodio.</div>
</div>
</div>
</div>
</li>
<li class="skill_li">
<div class="skill_wrapper">
<div class="skill_item">
<div class="chart_wrapper">
<div class="chart" data-percent="45">45<span>%</span></div>
</div>
<div class="skill_content">
<h4>Photoshop</h4>
<div class="skill_descr">Consectetur adipiscing elit morbi facilisis, arcu eget malesuada malesuada sodio.</div>
</div>
</div>
</div>
</li>
<li class="skill_li">
<div class="skill_wrapper">
<div class="skill_item">
<div class="chart_wrapper">
<div class="chart" data-percent="61">61<span>%</span></div>
</div>
<div class="skill_content">
<h4>CSS3</h4>
<div class="skill_descr">Consectetur adipiscing elit morbi facilisis, arcu eget malesuada malesuada sodio.</div>
</div>
</div>
</div>
</li>
</ul>
<div class="clear"></div>
</div>
</div><!-- .module_cont -->
</div>
<div class="row">
<div class="span12 module_number_34 module_cont pb45 module_price_table">
<div class="bg_title"><h3 class="headInModule">Price Table</h3></div>
<div class="module_price_table price_table_wrapper items4">
<div class="price_item ">
<div class="price_item_wrapper">
<div class="price_item_title"><h4>Basic</h4></div>
<div class="price_item_body">
<div class="item_cost_wrapper">
<div class="price_item_cost">
<h1>$20</h1>
<h4>/2H</h4>
</div>
<div class="price_ico_default"></div>
</div><!-- .item_cost_wrapper -->
<div class="price_item_text">Consectetur adipiscing</div>
<div class="price_item_text">Morbi facilisis arcu egets</div>
<div class="price_item_text">Anec sem malesuada</div>
<div class="price_item_text">Malesuada sodio lorem</div>
<div class="price_item_text">Lobortis gravida feugiat</div>
<div class="price_item_btn"><a href="#" class="shortcode_button btn_small btn_type1">Purchase</a></div>
</div>
</div>
</div>
<div class="price_item most_popular">
<div class="price_item_wrapper">
<div class="price_item_title"><h4>Business</h4></div>
<div class="price_item_body">
<div class="item_cost_wrapper">
<div class="price_item_cost">
<h1>$40</h1>
<h4>/2H</h4>
</div>
<div class="price_ico_default"></div>
</div><!-- .item_cost_wrapper -->
<div class="price_item_text">Consectetur adipiscing</div>
<div class="price_item_text">Morbi facilisis arcu egets</div>
<div class="price_item_text">Anec sem malesuada</div>
<div class="price_item_text">Malesuada sodio lorem</div>
<div class="price_item_text">Lobortis gravida feugiat</div>
<div class="price_item_btn"><a href="#" class="shortcode_button btn_small btn_type5">Purchase</a></div>
</div>
</div>
</div>
<div class="price_item ">
<div class="price_item_wrapper">
<div class="price_item_title"><h4>Professional</h4></div>
<div class="price_item_body">
<div class="item_cost_wrapper">
<div class="price_item_cost">
<h1>$60</h1>
<h4>/4H</h4>
</div>
<div class="price_ico_default"></div>
</div><!-- .item_cost_wrapper -->
<div class="price_item_text">Consectetur adipiscing</div>
<div class="price_item_text">Morbi facilisis arcu egets</div>
<div class="price_item_text">Anec sem malesuada</div>
<div class="price_item_text">Malesuada sodio lorem</div>
<div class="price_item_text">Lobortis gravida feugiat</div>
<div class="price_item_btn"><a href="#" class="shortcode_button btn_small btn_type1">Purchase</a></div>
</div>
</div>
</div>
<div class="price_item ">
<div class="price_item_wrapper">
<div class="price_item_title"><h4>Unlimited</h4></div>
<div class="price_item_body">
<div class="item_cost_wrapper">
<div class="price_item_cost">
<h1>$80</h1>
<h4>/MO</h4>
</div>
<div class="price_ico_default"></div>
</div><!-- .item_cost_wrapper -->
<div class="price_item_text">Consectetur adipiscing</div>
<div class="price_item_text">Morbi facilisis arcu egets</div>
<div class="price_item_text">Anec sem malesuada</div>
<div class="price_item_text">Malesuada sodio lorem</div>
<div class="price_item_text">Lobortis gravida feugiat</div>
<div class="price_item_btn"><a href="#" class="shortcode_button btn_small btn_type1">Purchase</a></div>
</div>
</div>
</div>
</div>
</div><!-- .module_cont -->
</div>
<div class="row">
<div class="span12 module_number_35 module_cont pb40 module_before_after">
<div class="bg_title"><h3 class="headInModule">Before/After</h3></div>
<div class="before-after">
<div class="beforeAfter_wrapper after_img">
<img src="img/imgs/before.jpg" class="img_before" alt="">
<div class="after_wrapper before_img"></div>
<div class="result_line"></div>
</div>
</div>
</div><!-- .module_cont -->
</div>
<div class="row">
<div class="span12 module_number_36 module_cont pb20 module_text_area">
<div class="bg_title"><h3 class="headInModule">Custom Buttons</h3></div>
<div class="module_content">
<p>
<a href="#" class="hasIcon shortcode_button btn_small btn_type1"><i class="icon-star"></i>Medium Dark</a>
<a href="#" class="hasIcon shortcode_button btn_small btn_type2"><i class="icon-puzzle-piece"></i>Gray</a>
<a href="#" class="hasIcon shortcode_button btn_small btn_type3"><i class="icon-comment"></i>Light Gray</a>
<a href="#" class="hasIcon shortcode_button btn_small btn_type4"><i class="icon-info"></i>Light</a>
<a href="#" class="hasIcon shortcode_button btn_small btn_type5"><i class="icon-cog"></i>Colored</a>
<a href="#" class="hasIcon shortcode_button btn_small btn_type6"><i class="icon-anchor"></i>Sea Blue</a>
<a href="#" class="hasIcon shortcode_button btn_small btn_type7"><i class="icon-leaf"></i>Green</a>
<a href="#" class="hasIcon shortcode_button btn_small btn_type8"><i class="icon-lemon-o"></i>Lime</a>
<a href="#" class="hasIcon shortcode_button btn_small btn_type9"><i class="icon-sun-o"></i>Yellow</a>
<a href="#" class="hasIcon shortcode_button btn_small btn_type10"><i class="icon-lightbulb-o"></i>Orange</a>
<a href="#" class="hasIcon shortcode_button btn_small btn_type11"><i class="icon-heart"></i>Red</a>
<a href="#" class="hasIcon shortcode_button btn_small btn_type12"><i class="icon-camera"></i>Pink</a>
<a href="#" class="hasIcon shortcode_button btn_small btn_type13"><i class="icon-umbrella"></i>Magenta</a>
<a href="#" class="hasIcon shortcode_button btn_small btn_type14"><i class="icon-apple"></i>Purple</a>
<a href="#" class="hasIcon shortcode_button btn_small btn_type15"><i class="icon-key"></i>Violet</a>
<a href="#" class="hasIcon shortcode_button btn_small btn_type16"><i class="icon-cloud"></i>Blue</a>
<a href="#" class="hasIcon shortcode_button btn_small btn_type17"><i class="icon-tint"></i>Light Blue</a>
</p>
<p>
<a href="#" class="hasIcon shortcode_button btn_large btn_type1"><i class="icon-paperclip"></i>Large Dark</a>
<a href="#" class="hasIcon shortcode_button btn_normal btn_type2"><i class="icon-envelope"></i>Small Dark Gray</a>
</p>
</div>
</div><!-- .module_cont -->
</div>
<div class="row">
<div class="span12 module_number_37 module_cont pb30 module_text_area">
<div class="bg_title"><h3 class="headInModule">Icons</h3></div>
<div class="module_content">
<p>
<a href="#" class="shortcode_social_icon type1 icon1"><span><i class="icon-instagram"></i></span></a>
<a href="#" class="shortcode_social_icon type3 icon2"><span><i class="icon-bell"></i></span></a>
<a href="#" class="shortcode_social_icon type2 icon3"><span><i class="icon-map-marker"></i></span></a>
<a href="#" class="shortcode_social_icon type4 icon4"><span><i class="icon-cog"></i></span></a>
</p>
</div>
</div><!-- .module_cont -->
</div>
<div class="row">
<div class="span3 module_number_38 module_cont pb0 module_contact_info">
<ul class="contact_info_list">
<li class="contact_info_item">
<div class="contact_info_wrapper">
<span class="contact_info_icon icon5"><i class="icon-star"></i></span>
<div class="contact_info_text">Star</div>
</div>
</li>
<li class="contact_info_item">
<div class="contact_info_wrapper">
<span class="contact_info_icon icon6"><i class="icon-heart"></i></span>
<div class="contact_info_text">Heart</div>
</div>
</li>
<li class="contact_info_item">
<div class="contact_info_wrapper">
<span class="contact_info_icon icon7"><i class="icon-bolt"></i></span>
<div class="contact_info_text">Bolt</div>
</div>
</li>
</ul>
</div><!-- .module_cont -->
<div class="span3 module_number_39 module_cont pb0 module_contact_info">
<ul class="contact_info_list">
<li class="contact_info_item">
<div class="contact_info_wrapper">
<span class="contact_info_icon icon8"><i class="icon-envelope"></i></span>
<div class="contact_info_text"><a href="#">Mail</a></div>
</div>
</li>
<li class="contact_info_item">
<div class="contact_info_wrapper">
<span class="contact_info_icon icon9"><i class="icon-comment"></i></span>
<div class="contact_info_text"><a href="#">Comment</a></div>
</div>
</li>
<li class="contact_info_item">
<div class="contact_info_wrapper">
<span class="contact_info_icon icon10"><i class="icon-gear"></i></span>
<div class="contact_info_text"><a href="#">Settings</a></div>
</div>
</li>
</ul>
</div><!-- .module_cont -->
<div class="span3 module_number_40 module_cont pb0 module_contact_info">
<ul class="contact_info_list">
<li class="contact_info_item">
<div class="contact_info_wrapper">
<span class="contact_info_icon icon11"><i class="icon-instagram"></i></span>
<div class="contact_info_text">Instagram</div>
</div>
</li>
<li class="contact_info_item">
<div class="contact_info_wrapper">
<span class="contact_info_icon icon12"><i class="icon-google-plus-square"></i></span>
<div class="contact_info_text">Google+</div>
</div>
</li>
<li class="contact_info_item">
<div class="contact_info_wrapper">
<span class="contact_info_icon icon13"><i class="icon-facebook-square"></i></span>
<div class="contact_info_text">Facebook</div>
</div>
</li>
</ul>
</div><!-- .module_cont -->
<div class="span3 module_number_41 module_cont pb0 module_contact_info">
<ul class="contact_info_list">
<li class="contact_info_item">
<div class="contact_info_wrapper">
<span class="contact_info_icon icon14"><i class="icon-flickr"></i></span>
<div class="contact_info_text"><a href="#">Flickr</a></div>
</div>
</li>
<li class="contact_info_item">
<div class="contact_info_wrapper">
<span class="contact_info_icon icon15"><i class="icon-thumbs-up"></i></span>
<div class="contact_info_text"><a href="#">Like</a></div>
</div>
</li>
<li class="contact_info_item">
<div class="contact_info_wrapper">
<span class="contact_info_icon icon16"><i class="icon-pinterest"></i></span>
<div class="contact_info_text"><a href="#">Pinterest</a></div>
</div>
</li>
</ul>
</div><!-- .module_cont -->
</div>
</div>
</div>
</div>
</div>
<div class="right-sidebar-block">
<div class="sidepanel widget_categories">
<h6 class="sidebar_header">Elements</h6>
<ul>
<li><a href="typography.html">Typography</a></li>
<li class="current-menu-item"><a href="shortcodes.html">Shortcodes</a></li>
</ul>
</div>
<div class="sidepanel widget_posts">
<h6 class="sidebar_header">Featured Posts</h6>
<ul class="recent_posts">
<li>
<div class="recent_posts_img"><img src="img/blog/thumbs/1.jpg" alt=""></div>
<div class="recent_posts_content">
<a class="post_title read_more" href="simple_fullwidth_image_post.html">Sed libero augue</a>
<span class="recent_posts_date">March 04, 2014</span>
</div>
<div class="clear"></div>
</li>
<li>
<div class="recent_posts_img"><img src="img/blog/thumbs/2.jpg" alt=""></div>
<div class="recent_posts_content">
<a class="post_title read_more" href="simple_fullwidth_image_post.html">Praesent iaculis eget</a>
<span class="recent_posts_date">March 04, 2014</span>
</div>
<div class="clear"></div>
</li>
<li>
<div class="recent_posts_img"><img src="img/blog/thumbs/3.jpg" alt=""></div>
<div class="recent_posts_content">
<a class="post_title read_more" href="simple_fullwidth_image_post.html">Morbi eleifend purus</a>
<span class="recent_posts_date">March 04, 2014</span>
</div>
<div class="clear"></div>
</li>
</ul>
</div>
<div class="sidepanel widget_mailchimpsf_widget">
<h6 class="sidebar_header">Subscribe to Our News</h6>
<div id="mc_signup">
<form method="post" action="javascript:void(0)" id="mc_signup_form">
<div id="mc_subheader">Eleifend ante quis, cursus elit, сomos condimentum, tortor dolor suscipit. </div>
<div class="mc_form_inside">
<div class="updated" id="mc_message"></div><!-- /mc_message -->
<div class="mc_merge_var">
<label for="mc_mv_EMAIL" class="mc_var_label mc_header mc_header_email">Email Address</label>
<input type="text" size="18" placeholder="" name="mc_mv_EMAIL" id="mc_mv_EMAIL" class="mc_input"/>
</div><!-- /mc_merge_var -->
<div class="mc_signup_submit">
<input type="submit" name="mc_signup_submit" id="mc_signup_submit" value="Submit" class="button" />
</div><!-- /mc_signup_submit -->
</div><!-- /mc_form_inside -->
</form>
</div>
</div>
<div class="sidepanel widget_tag_cloud">
<h6 class="sidebar_header">Tags</h6>
<div class="tagcloud">
<a href="javascript:void(0)">advertisement</a>
<a href="javascript:void(0)">cities</a>
<a href="javascript:void(0)">fashion</a>
<a href="javascript:void(0)">forest</a>
<a href="javascript:void(0)">html5</a>
<a href="javascript:void(0)">man</a>
<a href="javascript:void(0)">nature</a>
<a href="javascript:void(0)">photo</a>
<a href="javascript:void(0)">portrait</a>
<a href="javascript:void(0)">sea</a>
<a href="javascript:void(0)">sky</a>
<a href="javascript:void(0)">stuff</a>
<a href="javascript:void(0)">woman</a>
<a href="javascript:void(0)">wordpress</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div><!-- .main_wrapper -->
<footer>
<div class="footer_wrapper container">
<div class="copyright">Copyright © 2014 Oyster HTML Template. All Rights Reserved.</div>
<div class="socials_wrapper">
<ul class="socials_list">
<li><a class="ico_social_dribbble" target="_blank" href="http://dribbble.com/" title="Dribbble"></a></li>
<li><a class="ico_social_gplus" target="_blank" href="https://plus.google.com/" title="Google+"></a></li>
<li><a class="ico_social_vimeo" target="_blank" href="https://vimeo.com/" title="Vimeo"></a></li>
<li><a class="ico_social_pinterest" target="_blank" href="http://pinterest.com" title="Pinterest"></a></li>
<li><a class="ico_social_facebook" target="_blank" href="http://facebook.com" title="Facebook"></a></li>
<li><a class="ico_social_twitter" target="_blank" href="http://twitter.com" title="Twitter"></a></li>
<li><a class="ico_social_instagram" target="_blank" href="http://instagram.com" title="Instagram"></a></li>
</ul>
</div>
<div class="clear"></div>
</div>
</footer>
<div class="content_bg"></div>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/modules.js"></script>
<script type="text/javascript" src="js/theme.js"></script>
<script>
jQuery(document).ready(function($) {
"use strict";
jQuery('.beforeAfter_wrapper').each(function(){
var after_wrapper = jQuery(this).find('.after_wrapper');
var before_wrapper = jQuery(this);
var result_line = jQuery(this).find('.result_line');
after_wrapper.width(before_wrapper.width()/2);
result_line.css('left', (before_wrapper.width()/2)+'px');
});
jQuery('.beforeAfter_wrapper').mousemove(function(e){
var correction = jQuery(this).offset().left,
page_x = e.pageX-correction,
after_wrapper = jQuery(this).find('.after_wrapper'),
result_line = jQuery(this).find('.result_line');
after_wrapper.width(page_x);
result_line.css('left', page_x+'px');
});
// Init touch on iPad, iPhone, iPod, Android
jQuery('.beforeAfter_wrapper').FingerScroll();
});
jQuery(window).load(function() {
"use strict";
jQuery('.beforeAfter_wrapper').each(function(){
var after_wrapper = jQuery(this).find('.after_wrapper');
var before_wrapper = jQuery(this);
var result_line = jQuery(this).find('.result_line');
after_wrapper.width(before_wrapper.width()/2);
result_line.css('left', (before_wrapper.width()/2)+'px');
});
});
jQuery.fn.FingerScroll = function() {
"use strict";
var scrollStartPos = 0,
correction = jQuery(this).offset().left,
page_x = 0,
after_wrapper = jQuery(this).find('.after_wrapper'),
result_line = jQuery(this).find('.result_line');
jQuery(this).bind('touchstart', function(event) {
var e = event.originalEvent;
scrollStartPos = jQuery(this).scrollTop() + e.touches[0].pageY;
});
jQuery(this).bind('touchmove', function(event) {
var e = event.originalEvent;
correction = jQuery(this).offset().left;
page_x = e.touches[0].pageX-correction;
after_wrapper.width(page_x);
result_line.css('left', page_x+'px');
e.preventDefault();
});
return this;
};
</script>
</body>
</html>