<!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 One Column</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/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 class="caption">
<!-- Begin template wrapper -->
<div id="wrapper">
<!-- Begin header -->
<div id="header_wrapper_caption">
<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 One Column</h1>
</div>
</div>
</div>
</div>
<!-- End header -->
<br class="clear"/>
<!-- Begin content -->
<div id="content_wrapper_caption">
<div class="inner">
<!-- Begin one column content -->
<div class="one_column">
<div class="main">
<div class="portfolio_one_column">
<div class="detail">
<h5>Vimeo Content</h5>
<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>
</div>
<div class="image">
<a href="#vimeo_video" class="portfolio_vimeo">
<img src="example/portfolio_l1.png" alt=""/>
</a>
<div class="hover_content">
<img src="images/icon_play.png" alt=""/>
</div>
</div>
<!-- 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 -->
</div>
<div class="portfolio_one_column">
<div class="detail">
<h5>Image Content</h5>
<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>
</div>
<div class="image">
<a href="example/slide2.png" class="portfolio_image">
<img src="example/portfolio_l2.png" alt=""/>
</a>
<div class="hover_content">
<img src="images/icon_zoom.png" alt=""/>
</div>
</div>
</div>
<div class="portfolio_one_column">
<div class="detail">
<h5>Youtube Content</h5>
<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>
</div>
<div class="image">
<a href="#youtube_video" class="portfolio_youtube">
<img src="example/portfolio_l3.png" alt=""/>
</a>
<div class="hover_content">
<img src="images/icon_play.png" alt=""/>
</div>
</div>
<!-- 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/nCgQDjiotG0" style="width:640px;height:385px">
<param name="movie" value="http://www.youtube.com/v/nCgQDjiotG0" />
</object>
</div>
</div>
<!-- End youtube video content -->
</div>
</div>
</div>
<!-- End one column content -->
</div>
</div>
<!-- End content -->
<br class="clear"/>
<!-- 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>