<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<!-- Website Title -->
<title>Maxi | Portfolio + Slider</title>
<!-- Meta data for SEO -->
<meta name="description" content=""/>
<meta name="keywords" content=""/>
<!-- Template stylesheet -->
<link rel="stylesheet" href="css/screen.css" type="text/css" media="all"/>
<link rel="stylesheet" id="link_skin" href="css/skins/pink.css" type="text/css" media="all"/>
<link rel="stylesheet" type="text/css" href="js/nivoslider/nivo-slider.css" media="screen"/>
<link rel="stylesheet" type="text/css" href="js/nivoslider/style/custom-nivo-slider.css" media="screen"/>
<link rel="stylesheet" type="text/css" href="js/fancybox/jquery.fancybox-1.3.0.css" media="screen"/>
<!--[if IE]>
<link href="css/ie.css" rel="stylesheet" type="text/css" media="all">
<![endif]-->
<!--[if IE 7]>
<link href="css/ie7.css" rel="stylesheet" type="text/css" media="all">
<![endif]-->
<!-- Jquery and plugins -->
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.img.preload.js"></script>
<script type="text/javascript" src="js/jquery.easing.js"></script>
<script type="text/javascript" src="js/jquery.css.transform.js"></script>
<script type="text/javascript" src="js/jquery.animate.js"></script>
<script type="text/javascript" src="js/jquery.quicksand.js"></script>
<script type="text/javascript" src="js/fancybox/jquery.fancybox-1.3.0.js"></script>
<script type="text/javascript" src="js/nivoslider/jquery.nivo.slider.pack.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>
<script type="text/javascript" src="js/browser.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
</head>
<body>
<!-- Begin template wrapper -->
<div id="wrapper">
<!-- Begin header -->
<div id="header_portfolio_slider_wrapper">
<div id="top_bar">
<div class="wrapper">
<div id="logo">
<a href="index.html">
<img src="images/logo.png" alt=""/>
</a>
</div>
<!-- Begin main nav -->
<ul class="nav">
<li>
<a href="index.html">
Home
</a>
</li>
<li>
<a href="portfolio.html" class="active">
Portfolio
</a>
<div class="popup">
<div class="top"></div>
<div class="content">
<ul class="submenu">
<li>
<a href="portfolio_default.html">
Portfolio Default
</a>
</li>
<li>
<a href="portfolio_with_slider.html">
Portfolio + Slider
</a>
</li>
<li>
<a href="portfolio_one_column.html">
Portfolio 1 Column
</a>
</li>
</ul>
<br class="clear"/>
</div>
<div class="footer"></div>
</div>
</li>
<li>
<a href="pages.html">
Pages
</a>
<div class="popup">
<div class="top"></div>
<div class="content">
<ul class="submenu">
<li>
<a href="full_width.html">
Full width
</a>
</li>
<li>
<a href="right_side_bar.html">
Right side bar
</a>
</li>
<li>
<a href="typography.html">
Typography
</a>
</li>
</ul>
<br class="clear"/>
</div>
<div class="footer"></div>
</div>
</li>
<li>
<a href="skins.html">
Skins
</a>
<div class="popup">
<div class="top"></div>
<div class="content">
<ul id="nav_skin" class="submenu">
<li>
<a href="#bokeh">
Bokeh
</a>
</li>
<li>
<a href="#bokeh2">
Bokeh2
</a>
</li>
<li>
<a href="#space">
Space
</a>
</li>
<li>
<a href="#wood">
Wood
</a>
</li>
<li>
<a href="#dark_wood">
Dark Wood
</a>
</li>
<li>
<a href="#blue">
Shiny Blue
</a>
</li>
<li>
<a href="#red">
Shiny Red
</a>
</li>
<li>
<a href="#pink">
Shiny Pink
</a>
</li>
<li>
<a href="#green">
Shiny Green
</a>
</li>
<li>
<a href="#purple">
Shiny Purple
</a>
</li>
<li>
<a href="#black">
Plain
</a>
</li>
</ul>
<br class="clear"/>
</div>
<div class="footer"></div>
</div>
</li>
<li>
<a href="blog.html">
Blog
</a>
</li>
<li>
<a href="about.html">
About us
</a>
</li>
<li>
<a href="contact.html">
Contact
</a>
</li>
</ul>
<!-- End main nav -->
<br class="clear"/>
<div class="caption">
<h1>Portfolio + Slider</h1>
</div>
<!-- Begin content slider -->
<div class="content_slider_frame">
<div id="img_slider">
<img src="example/slide2.png" alt=""/>
<img src="example/slide1.png" alt="" title="This is an image with example title"/>
</div>
</div>
<!-- End content slider -->
</div>
</div>
<br class="clear"/>
</div>
<!-- End header -->
<!-- Begin content -->
<div id="content_wrapper">
<div class="inner">
<!-- Begin one column content -->
<div class="one_column">
<div class="main">
<!-- Begin portfolio content -->
<ul class="portfolio_tab">
<li class="all active">
All
</li>
<li class="webdesign">
Web Design
</li>
<li class="photography">
Photography
</li>
<li class="programming">
Programming
</li>
</ul>
<br class="clear"/>
<!-- Begin photos list -->
<div class="portfolio_container">
<ul class="portfolio_photos">
<li data-id="1" data-type="webdesign">
<div class="wrapper">
<a href="example/slide2.png" class="portfolio_image">
<img src="example/portfolio1.png" alt=""/>
</a>
<div class="hover_content">
<img src="images/icon_zoom.png" alt=""/>
</div>
</div>
<br class="clear"/>
<span>Image Content</span>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.
</p>
<br/><br/>
<a href="">Read more</a><img src="images/arrow_li.png" alt="" style="margin-left:10px"/>
</li>
<li data-id="2" data-type="photography">
<div class="wrapper">
<a href="#vimeo_video" class="portfolio_vimeo">
<img src="example/portfolio5.png" alt=""/>
</a>
<div class="hover_content">
<img src="images/icon_play.png" alt=""/>
</div>
</div>
<br class="clear"/>
<span>Vimeo Content</span>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.
</p>
<br/><br/>
<a href="">Read more</a><img src="images/arrow_li.png" alt="" style="margin-left:10px"/>
</li>
<li data-id="3" data-type="programming">
<div class="wrapper">
<a href="#youtube_video" class="portfolio_youtube">
<img src="example/portfolio2.png" alt=""/>
</a>
<div class="hover_content">
<img src="images/icon_play.png" alt=""/>
</div>
</div>
<br class="clear"/>
<span>Youtube Content</span>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.
</p>
<br/><br/>
<a href="">Read more</a><img src="images/arrow_li.png" alt="" style="margin-left:10px"/>
</li>
<li data-id="4" data-type="webdesign">
<div class="wrapper">
<a href="example/slide2.png" class="portfolio_image">
<img src="example/portfolio1.png" alt=""/>
</a>
<div class="hover_content">
<img src="images/icon_zoom.png" alt=""/>
</div>
</div>
<br class="clear"/>
<span>Image Content</span>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.
</p>
<br/><br/>
<a href="">Read more</a><img src="images/arrow_li.png" alt="" style="margin-left:10px"/>
</li>
<li data-id="5" data-type="photography">
<div class="wrapper">
<a href="#vimeo_video2" class="portfolio_vimeo">
<img src="example/portfolio5.png" alt=""/>
</a>
<div class="hover_content">
<img src="images/icon_play.png" alt=""/>
</div>
</div>
<br class="clear"/>
<span>Vimeo Content</span>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.
</p>
<br/><br/>
<a href="">Read more</a><img src="images/arrow_li.png" alt="" style="margin-left:10px"/>
</li>
<li data-id="6" data-type="webdesign">
<div class="wrapper">
<a href="#youtube_video" class="portfolio_youtube">
<img src="example/portfolio2.png" alt=""/>
</a>
<div class="hover_content">
<img src="images/icon_play.png" alt=""/>
</div>
</div>
<br class="clear"/>
<span>Youtube Content</span>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.
</p>
<br/><br/>
<a href="">Read more</a><img src="images/arrow_li.png" alt="" style="margin-left:10px"/>
</li>
</ul>
</div>
<!-- End photos list -->
<!-- End portfolio content -->
</div>
</div>
<!-- End one column content -->
<!-- Begin youtube video content -->
<div style="display:none;">
<div id="youtube_video2" style="width:640px;height:385px">
<object type="application/x-shockwave-flash" data="http://www.youtube.com/v/RrDHrwLUtvk" style="width:640px;height:385px">
<param name="movie" value="http://www.youtube.com/v/RrDHrwLUtvk" />
</object>
</div>
</div>
<!-- End youtube video content -->
<!-- Begin youtube video content -->
<div style="display:none;">
<div id="youtube_video" style="width:640px;height:385px">
<object type="application/x-shockwave-flash" data="http://www.youtube.com/v/RrDHrwLUtvk" style="width:640px;height:385px">
<param name="movie" value="http://www.youtube.com/v/RrDHrwLUtvk" />
</object>
</div>
</div>
<!-- End youtube video content -->
<!-- Begin vimeo video content -->
<div style="display:none;">
<div id="vimeo_video" style="width:601px;height:338px">
<object width="601" height="338" data="http://vimeo.com/moogaloop.swf?clip_id=12662463&server=vimeo.com&show_title=0&show_byline=0&show_portrait=0&color=ffffff&fullscreen=1" type="application/x-shockwave-flash">
<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=12662463&server=vimeo.com&show_title=0&show_byline=0&show_portrait=0&color=ffffff&fullscreen=1" />
</object>
</div>
</div>
<!-- End vimeo video content -->
<!-- Begin vimeo video content -->
<div style="display:none;">
<div id="vimeo_video2" style="width:601px;height:338px">
<object width="601" height="338" data="http://vimeo.com/moogaloop.swf?clip_id=12662463&server=vimeo.com&show_title=0&show_byline=0&show_portrait=0&color=ffffff&fullscreen=1" type="application/x-shockwave-flash">
<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=12662463&server=vimeo.com&show_title=0&show_byline=0&show_portrait=0&color=ffffff&fullscreen=1" />
</object>
</div>
</div>
<!-- End vimeo video content -->
</div>
</div>
<!-- End content -->
<br class="clear"/><br/><br/>
<!-- Begin footer -->
<div id="footer">
<div class="wrapper">
<div class="about">
<h5>About us</h5>
<br/>
<p>
Nulla iaculis sapien at dolor elementum volutpat.
Quisque et nisi vel enim consequat ultrices.
Donec et dolor nec justo malesuada pharetra.
Nam sollicitudin tortor.
</p>
<br/>
<ul class="social_media">
<li>
<a href="">
<img src="images/icon_twitter2.png" alt=""/>
</a>
</li>
<li>
<a href="">
<img src="images/icon_facebook.png" alt=""/>
</a>
</li>
<li>
<a href="">
<img src="images/icon_flickr.png" alt=""/>
</a>
</li>
<li>
<a href="">
<img src="images/icon_rss.png" alt=""/>
</a>
</li>
</ul>
</div>
<div>
<h5>Recent</h5>
<ul class="list">
<li>
<a href="">Nulla iaculis sapien at</a>
</li>
<li>
<a href="">Dolor elementum </a>
</li>
<li>
<a href="">Quisque et nisi vel</a>
</li>
<li>
<a href="">Enim consequat ultrices</a>
</li>
<li>
<a href="">Donec et dolor nec</a>
</li>
</ul>
</div>
<div>
<h5>Categories</h5>
<ul class="list">
<li>
<a href="">Nulla iaculis sapien at</a>
</li>
<li>
<a href="">Dolor elementum </a>
</li>
<li>
<a href="">Quisque et nisi vel</a>
</li>
</ul>
</div>
<div>
<h5>Archives</h5>
<ul class="list">
<li>
<a href="">April 2010</a>
</li>
<li>
<a href="">May 2010</a>
</li>
<li>
<a href="">June 2010</a>
</li>
<li>
<a href="">July 2010</a>
</li>
</ul>
</div>
<br class="clear"/>
</div>
</div>
<!-- End footer -->
</div>
<!-- End template wrapper -->
</body>
</html>