File: /home/vmasmheia229/domains/nslpguide.com/html/portfolio_sort_two.html
<!DOCTYPE html>
<!--[if lt IE 7]><html dir="ltr" lang="en-US" class="ie6"><![endif]-->
<!--[if IE 7]><html dir="ltr" lang="en-US" class="ie7"><![endif]-->
<!--[if IE 8]><html dir="ltr" lang="en-US" class="ie8"><![endif]-->
<!--[if gt IE 8]><!--><html dir="ltr" lang="en-US"><!--<![endif]-->
<head>
<meta content="text/html;charset=utf-8" http-equiv="content-type" />
<meta name="description" content="cmsmasters responsive html5 website template" />
<meta name="keywords" content="html5, css3, template, responsive, adaptive" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/styles/fonts.css" type="text/css" media="screen" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,400italic,600' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/styles/jquery.prettyPhoto.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/styles/jquery.jPlayer.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/styles/jquery.isotope.css" type="text/css" media="screen" />
<!--[if lt IE 9]>
<link rel="stylesheet" href="css/styles/ie.css" type="text/css" />
<link rel="stylesheet" href="css/styles/ieCss3.css" type="text/css" media="screen" />
<![endif]-->
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/modernizr.custom.all.js" type="text/javascript"></script>
<script src="js/respond.min.js" type="text/javascript"></script>
<script src="js/jquery.easing.js" type="text/javascript"></script>
<title>Halsey</title>
</head>
<body>
<!-- __________________________________________________ Start Page -->
<section id="page">
<a href="#" id="slide_top"></a>
<div class="container">
<!-- __________________________________________________ Start Header -->
<header id="header">
<div class="header_inner">
<a class="logo" href="index.html"><img src="images/logo.png" alt="" /></a>
<a class="resp_navigation" href="javascript:void(0);"></a>
<nav>
<ul id="navigation">
<li class="drop">
<a href="javascript:void(0);"><span>Home</span></a>
<ul>
<li><a href="index.html"><span>Responsive Slider</span></a></li>
<li><a href="index-2.html"><span>Revolution Slider</span></a></li>
</ul>
</li>
<li class="drop"><a href="javascript:void(0);"><span>Features</span></a>
<ul>
<li class="drop"><a href="javascript:void(0);"><span>Shortcodes</span></a>
<ul>
<li><a href="buttons.html"><span>Buttons</span></a></li>
<li><a href="boxes.html"><span>InfoBoxes</span></a></li>
<li><a href="columns.html"><span>Columns</span></a></li>
<li><a href="tabs.html"><span>Tabs & Toggle</span></a></li>
<li><a href="shortcodes.html"><span>Post type shortcode</span></a></li>
<li><a href="media.html"><span>Media</span></a></li>
<li><a href="player.html"><span>Audio & Video Players</span></a></li>
<li><a href="pricing.html"><span>Pricing Tables</span></a></li>
<li><a href="lightboxes.html"><span>Lightboxes</span></a></li>
<li><a href="tour.html"><span>Site Tour</span></a></li>
<li><a href="googlemaps.html"><span>Google Maps</span></a></li>
</ul>
</li>
<li><a href="widgets.html"><span>Widgets</span></a></li>
<li><a href="typography.html"><span>Typography</span></a></li>
<li class="drop"><a href="javascript:void(0);"><span>Layouts</span></a>
<ul>
<li><a href="about.html"><span>About</span></a></li>
<li><a href="services.html"><span>Services</span></a></li>
<li><a href="error.html"><span>404 Error Page</span></a></li>
<li><a href="sitemap.html"><span>Sitemap</span></a></li>
<li><a href="lsidebar.html"><span>Left Sidebar</span></a></li>
<li><a href="rsidebar.html"><span>Right Sidebar</span></a></li>
</ul>
</li>
<li class="drop"><a href="javascript:void(0);"><span>Heading Templates</span></a>
<ul>
<li><a href="heading.html"><span>Standard Heading</span></a></li>
<li><a href="heading_icon.html"><span>With Icon</span></a></li>
<li><a href="heading_text.html"><span>With Text</span></a></li>
<li><a href="heading_icon_text.html"><span>Heading With Icon & Text</span></a></li>
</ul>
</li>
</ul>
</li>
<li class="current_page_item drop">
<a href="javascript:void(0);"><span>Portfolio</span></a>
<ul>
<li class="current_page_item drop"><a href="javascript:void(0);"><span>Sortable Portfolio</span></a>
<ul>
<li><a href="portfolio_sort_four.html"><span>Four Columns</span></a></li>
<li><a href="portfolio_sort_three.html"><span>Three Columns</span></a></li>
<li class="current_page_item"><a href="portfolio_sort_two.html"><span>Two Columns</span></a></li>
<li><a href="portfolio_sort_one.html"><span>One Column</span></a></li>
</ul>
</li>
<li class="drop"><a href="javascript:void(0);"><span>Portfolio</span></a>
<ul>
<li><a href="portfolio_four.html"><span>Four Columns</span></a></li>
<li><a href="portfolio_three.html"><span>Three Columns</span></a></li>
<li><a href="portfolio_two.html"><span>Two Columns</span></a></li>
<li><a href="portfolio_one.html"><span>One Column</span></a></li>
</ul>
</li>
<li class="drop"><a href="javascript:void(0);"><span>Project layouts</span></a>
<ul>
<li><a href="project_slider.html"><span>Image Slider</span></a></li>
<li><a href="project_video.html"><span>Video</span></a></li>
<li><a href="album_four.html"><span>Album Four Columns</span></a></li>
<li><a href="album_three.html"><span>Album Three Columns</span></a></li>
<li><a href="album_two.html"><span>Album Two Columns</span></a></li>
<li><a href="album_one.html"><span>Album One Column</span></a></li>
</ul>
</li>
</ul>
</li>
<li class="drop">
<a href="javascript:void(0);"><span>Blogs</span></a>
<ul>
<li><a href="blog_sidebar.html"><span>Blog with Sidebar</span></a></li>
<li><a href="blog_fwidth.html"><span>Full width Blog</span></a></li>
<li><a href="openpost.html"><span>Blog Post</span></a></li>
</ul>
</li>
<li>
<a href="contacts.html"><span>Contacts</span></a>
</li>
</ul>
</nav>
<div class="cl"></div>
</div>
</header>
<!-- __________________________________________________ Finish Header -->
<!-- __________________________________________________ Start Middle -->
<section id="middle">
<div class="headline">
<h2>Sortable Portfolio</h2>
</div>
<div class="cont_nav"><a href="index.html">Home</a> / <a href="portfolio_sort_four.html">Portfolio</a> / <a href="portfolio_sort_four.html">Sortable Portfolio</a> / <span>Two Columns</span></div>
<div class="pj_sort">
<div class="p_options_loader"></div>
<div class="p_options_block">
<div class="p_sort">
<a name="p_name" title="Name" class="button_small" href="#"><span>Name</span></a>
<a name="p_date" title="Date" class="button_small" href="#"><span>Date</span></a>
</div>
<div class="p_filter">
<div class="p_filter_container">
<a class="p_cat_filter button_small" data-filter="article.portfolio" title="All Categories" href="#"><span>All Categories</span></a>
<ul class="p_filter">
<li class="current"><a data-filter="article.portfolio" title="All Categories" href="#">All Categories</a></li>
<li><a data-filter="article.portfolio[data-category~='business']" title="Business" href="#">Business</a></li>
<li><a data-filter="article.portfolio[data-category~='success']" title="Success" href="#">Success</a></li>
<li><a data-filter="article.portfolio[data-category~='corporate']" title="Corporate" href="#">Corporate</a></li>
<li><a data-filter="article.portfolio[data-category~='web-design']" title="Web design" href="#">Web design</a></li>
</ul>
</div>
<div class="cl"></div>
</div>
<div class="cl"></div>
</div>
</div>
<div class="content_wrap nobg">
<!-- __________________________________________________ Start Content -->
<section id="middle_content">
<div class="entry-summary">
<section class="portfolio_container two_blocks">
<article class="portfolio format-album hentry" data-category="business corporate">
<header class="entry-header">
<h4 class="entry-title"><a href="album_four.html">Unlimited Possibilities</a></h4>
</header>
<div class="media_box">
<figure>
<a href="album_four.html" class="preloader"><img src="images/img/falbum_4_1.jpg" alt="" class="fullwidth" /></a>
</figure>
</div>
<footer class="entry-meta">
<div class="post_category">
<a href="#">Business</a> | <a href="#">Corporate</a>
</div>
<span class="meta-date" style="display:none;">20120123133821</span>
</footer>
<div class="entry-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam consectetur est quis mauris accumsan eleifend</p>
</div>
</article>
<article class="portfolio format-slider hentry" data-category="success web-design">
<header class="entry-header">
<h4 class="entry-title"><a href="project_slider.html">Career & Education</a></h4>
</header>
<div class="media_box">
<div class="shortcode_slideshow" id="slideshow_1">
<div class="shortcode_slideshow_body">
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery('#slideshow_1 .shortcode_slideshow_slides').cmsmsResponsiveContentSlider( {
sliderWidth : '100%',
sliderHeight : 'auto',
animationSpeed : 500,
animationEffect : 'slide',
animationEasing : 'easeInOutExpo',
pauseTime : 0,
activeSlide : 1,
touchControls : true,
pauseOnHover : false,
arrowNavigation : false,
slidesNavigation : true
} );
} );
</script>
<div class="shortcode_slideshow_container">
<ul class="shortcode_slideshow_slides responsiveContentSlider">
<li>
<figure>
<img src="images/img/falbum_4_7.jpg" alt="Slide 1" class="fullwidth" />
</figure>
</li>
<li>
<figure>
<img src="images/img/falbum_4_2.jpg" alt="Slide 2" class="fullwidth" />
</figure>
</li>
<li>
<figure>
<img src="images/img/falbum_4_3.jpg" alt="Slide 3" class="fullwidth" />
</figure>
</li>
</ul>
</div>
</div>
</div>
</div>
<footer class="entry-meta">
<div class="post_category">
<a href="#">Web-design</a> | <a href="#">Success</a>
</div>
<span class="meta-date" style="display:none;">20120123143825</span>
</footer>
<div class="entry-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam consectetur est quis mauris accumsan eleifend</p>
</div>
</article>
<article class="portfolio format-video hentry" data-category="success web-design">
<header class="entry-header">
<h4 class="entry-title"><a href="project_video.html">Real Estate</a></h4>
</header>
<div class="media_box">
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery('#jquery_jplayer_1').jPlayer( {
ready : function () {
jQuery(this).jPlayer('setMedia', {
m4v : 'http://www.jplayer.org/video/m4v/Big_Buck_Bunny_Trailer_480x270_h264aac.m4v',
ogv : 'http://www.jplayer.org/video/ogv/Big_Buck_Bunny_Trailer_480x270.ogv',
poster : 'http://www.jplayer.org/video/poster/Big_Buck_Bunny_Trailer_480x270.png'
} );
},
cssSelectorAncestor : '#jp_container_1',
swfPath : 'css/styles',
supplied : 'mp4, m4v, ogg, ogv, webm, webmv',
size : {
width : '100%',
height : '100%'
}
} );
} );
</script>
<div id="jp_container_1" class="jp-video fullwidth">
<div class="jp-type-single">
<div id="jquery_jplayer_1" class="jp-jplayer"></div>
<div class="jp-gui">
<div class="jp-video-play" >
<a href="#" class="jp-video-play-icon" title="Play">Play</a>
</div>
<div class="jp-interface">
<div class="jp-progress">
<div class="jp-seek-bar">
<div class="jp-play-bar"></div>
</div>
</div>
<div class="jp-duration"></div>
<div class="jp-time-sep">/</div>
<div class="jp-current-time"></div>
<div class="jp-controls-holder">
<ul class="jp-controls">
<li><a href="#" class="jp-play" title="Play" tabindex="1"><span>play</span></a></li>
<li><a href="#" class="jp-pause" title="Pause" tabindex="1"><span>pause</span></a></li>
<li><a href="#" class="jp-stop" title="Stop" tabindex="1"><span>stop</span></a></li>
</ul>
<div class="jp-volume-bar">
<div class="jp-volume-bar-value"></div>
</div>
<ul class="jp-toggles">
<li><a class="jp-mute" href="#" title="Mute" tabindex="1"><span>Mute</span></a></li>
<li><a class="jp-unmute" title="Unmune" href="#" tabindex="1"><span>Unmute</span></a></li>
<li><a class="jp-full-screen" title="Full Screen" href="#" tabindex="1"><span>Full Screen</span></a></li>
<li><a class="jp-restore-screen" title="Restore Screen" href="#" tabindex="1" style="display:none;"><span>Restore Screen</span></a></li>
</ul>
<div class="jp-title">
<ul>
<li></li>
</ul>
</div>
</div>
</div>
<div class="jp-no-solution" style="display:none;">
<span>Update Required</span>To play the media you will need to either update your browser to a recent version or update your <a target="_blank" href="http://get.adobe.com/flashplayer/">Flash plugin</a>
</div>
</div>
</div>
</div>
</div>
<footer class="entry-meta">
<div class="post_category">
<a href="#">Web-design</a> | <a href="#">Success</a>
</div>
<span class="meta-date" style="display:none;">20120103143821</span>
</footer>
<div class="entry-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam consectetur est quis mauris accumsan eleifend</p>
</div>
</article>
<article class="portfolio format-album hentry" data-category="corporate">
<header class="entry-header">
<h4 class="entry-title"><a href="album_four.html">Project name</a></h4>
</header>
<div class="media_box">
<figure>
<a href="album_four.html" class="preloader"><img src="images/img/falbum_4_4.jpg" alt="" class="fullwidth" /></a>
</figure>
</div>
<footer class="entry-meta">
<div class="post_category">
<a href="#">Corporate</a>
</div>
<span class="meta-date" style="display:none;">20120103143821</span>
</footer>
<div class="entry-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam consectetur est quis mauris accumsan eleifend</p>
</div>
</article>
<article class="portfolio format-album hentry" data-category="business corporate">
<header class="entry-header">
<h4 class="entry-title"><a href="album_four.html">Project name</a></h4>
</header>
<div class="media_box">
<figure>
<a href="album_four.html" class="preloader"><img src="images/img/falbum_4_6.jpg" alt="" class="fullwidth" /></a>
</figure>
</div>
<footer class="entry-meta">
<div class="post_category">
<a href="#">Business</a> | <a href="#">Corporate</a>
</div>
<span class="meta-date" style="display:none;">20120123131821</span>
</footer>
<div class="entry-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam consectetur est quis mauris accumsan eleifend</p>
</div>
</article>
<article class="portfolio format-album hentry" data-category="success web-design">
<header class="entry-header">
<h4 class="entry-title"><a href="album_four.html">Project name</a></h4>
</header>
<div class="media_box">
<figure>
<a href="album_four.html" class="preloader"><img src="images/img/falbum_4_5.jpg" alt="" class="fullwidth" /></a>
</figure>
</div>
<footer class="entry-meta">
<div class="post_category">
<a href="#">Web-design</a> | <a href="#">Success</a>
</div>
<span class="meta-date" style="display:none;">20120123133820</span>
</footer>
<div class="entry-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam consectetur est quis mauris accumsan eleifend</p>
</div>
</article>
<article class="portfolio format-album hentry" data-category="business success corporate">
<header class="entry-header">
<h4 class="entry-title"><a href="album_four.html">Project name</a></h4>
</header>
<div class="media_box">
<figure>
<a href="album_four.html" class="preloader"><img src="images/img/falbum_4_7.jpg" alt="" class="fullwidth" /></a>
</figure>
</div>
<footer class="entry-meta">
<div class="post_category">
<a href="#">Business</a> | <a href="#">Success</a> | <a href="#">Corporate</a>
</div>
<span class="meta-date" style="display:none;">20110123133821</span>
</footer>
<div class="entry-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam consectetur est quis mauris accumsan eleifend</p>
</div>
</article>
<article class="portfolio format-album hentry" data-category="success">
<header class="entry-header">
<h4 class="entry-title"><a href="album_four.html">Project name</a></h4>
</header>
<div class="media_box">
<figure>
<a href="album_four.html" class="preloader"><img src="images/img/falbum_4_8.jpg" alt="" class="fullwidth" /></a>
</figure>
</div>
<footer class="entry-meta">
<div class="post_category">
<a href="#">Success</a>
</div>
<span class="meta-date" style="display:none;">20120323133821</span>
</footer>
<div class="entry-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam consectetur est quis mauris accumsan eleifend</p>
</div>
</article>
</section>
</div>
</section>
<!-- __________________________________________________ Finish Content -->
</div>
</section>
<!-- __________________________________________________ Finish Middle -->
<!-- __________________________________________________ Start Bottom -->
<section id="bottom">
<div class="one_fourth">
<aside class="widget widget_links">
<h3 class="widgettitle">Social</h3>
<ul>
<li><a href="#">Facebook</a></li>
<li><a href="#">Flickr</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Vimeo</a></li>
<li><a href="#">Google Plus</a></li>
</ul>
</aside>
</div>
<div class="one_fourth">
<aside class="widget widget_links">
<h3 class="widgettitle">Popular resources</h3>
<ul>
<li><a href="#">How to Write a Blog</a></li>
<li><a href="#">Create a Blog in 4 Steps</a></li>
<li><a href="#">15 Tips to Increase Traffic</a></li>
<li><a href="#">20 Blog Post Ideas</a></li>
<li><a href="#">Top 10 for Beginner Bloggers</a></li>
</ul>
</aside>
</div>
<div class="one_fourth">
<aside class="widget widget_links">
<h3 class="widgettitle">Blogroll</h3>
<ul>
<li><a href="#">Blogs Blog</a></li>
<li><a href="#">Roll Up Roll Up</a></li>
<li><a href="#">Blog Free</a></li>
<li><a href="#">Wordpress Blog</a></li>
<li><a href="#">Start Blogging</a></li>
</ul>
</aside>
</div>
<div class="one_fourth">
<aside class="widget widget_links">
<h3 class="widgettitle">About</h3>
<ul>
<li><a href="#">Halsey</a></li>
<li><a href="#">Careers</a></li>
<li><a href="#">Company news</a></li>
<li><a href="#">Investor relations</a></li>
<li><a href="#">Site map</a></li>
</ul>
</aside>
</div>
</section>
<!-- __________________________________________________ Finish Bottom -->
</div>
<!-- __________________________________________________ Start Footer -->
<footer id="footer">
<ul class="social_list">
<li><a href="#" title="Facebook"><img src="images/socicons/facebook.png" alt="" /></a></li>
<li><a href="#" title="Flickr"><img src="images/socicons/flickr.png" alt="" /></a></li>
<li><a href="#" title="Twitter"><img src="images/socicons/twitter.png" alt="" /></a></li>
<li><a href="#" title="Vimeo"><img src="images/socicons/vimeo.png" alt="" /></a></li>
<li><a href="#" title="Google Plus"><img src="images/socicons/googleplus.png" alt="" /></a></li>
</ul>
<span class="cmsms_copy">© 2012 Halsey</span>
<ul class="footer_nav">
<li><a href="contacts.html">Contact us</a></li>
<li><a href="#">Privacy statement</a></li>
</ul>
</footer>
<!-- __________________________________________________ Finish Footer -->
</section>
<!-- __________________________________________________ Finish Page -->
<script src="js/jquery.script.js" type="text/javascript"></script>
<script src="js/jquery.prettyPhoto.js" type="text/javascript"></script>
<script src="js/jquery.jPlayer.min.js" type="text/javascript"></script>
<script src="js/jquery.jPlayer.playlist.min.js" type="text/javascript"></script>
<script src="js/jquery.isotope.min.js" type="text/javascript"></script>
<script src="js/jquery.isotope.run.js" type="text/javascript"></script>
</body>
</html>