<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Violet Theme - Portfolio Page</title>
<meta name="keywords" content="violet, web portfolio, free templates, website templates, CSS, HTML" />
<meta name="description" content="Violet Portfolio Page - free CSS template provided by templatemo.com" />
<link href="css/templatemo_style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="css/ddsmoothmenu.css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/ddsmoothmenu.js">
/***********************************************
* Smooth Navigational Menu- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
</script>
<script type="text/javascript">
ddsmoothmenu.init({
mainmenuid: "templatemo_menu", //menu DIV id
orientation: 'h', //Horizontal or vertical menu: Set to "h" or "v"
classname: 'ddsmoothmenu', //class added to menu's outer DIV
//customtheme: ["#1c5a80", "#18374a"],
contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
})
</script>
<!--////// CHOOSE ONE OF THE 3 PIROBOX STYLES \\\\\\\-->
<link href="css_pirobox/white/style.css" media="screen" title="shadow" rel="stylesheet" type="text/css" />
<!--<link href="css_pirobox/white/style.css" media="screen" title="white" rel="stylesheet" type="text/css" />
<link href="css_pirobox/black/style.css" media="screen" title="black" rel="stylesheet" type="text/css" />-->
<!--////// END \\\\\\\-->
<!--////// INCLUDE THE JS AND PIROBOX OPTION IN YOUR HEADER \\\\\\\-->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/piroBox.1_2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$().piroBox({
my_speed: 600, //animation speed
bg_alpha: 0.5, //background opacity
radius: 4, //caption rounded corner
scrollImage : false, // true == image follows the page, false == image remains in the same open position
pirobox_next : 'piro_next', // Nav buttons -> piro_next == inside piroBox , piro_next_out == outside piroBox
pirobox_prev : 'piro_prev',// Nav buttons -> piro_prev == inside piroBox , piro_prev_out == outside piroBox
close_all : '.piro_close',// add class .piro_overlay(with comma)if you want overlay click close piroBox
slideShow : 'slideshow', // just delete slideshow between '' if you don't want it.
slideSpeed : 4 //slideshow duration in seconds(3 to 6 Recommended)
});
});
</script>
<!--////// END \\\\\\\-->
</head>
<body id="subpage">
<div id="templatemo_outer_wrapper_sp">
<div id="templatemo_wrapper_sp">
<div id="templatemo_header">
<div id="site_title"><h1><a href="#">Free CSS Templates</a></h1></div>
<div id="templatemo_menu" class="ddsmoothmenu">
<ul>
<li><a href="index.html"><span></span>Home</a></li>
<li><a href="about.html"><span></span>About Us</a>
<ul>
<li><a href="submenupage.html">Sub menu 1</a></li>
<li><a href="submenupage.html">Sub menu 2</a></li>
<li><a href="submenupage.html">Sub menu 3</a></li>
</ul>
</li>
<li><a href="portfolio.html" class="selected"><span></span>Portfolio</a>
<ul>
<li><a href="submenupage.html">Sub menu 1</a></li>
<li><a href="submenupage.html">Sub menu 2</a></li>
<li><a href="submenupage.html">Sub menu 3</a></li>
<li><a href="submenupage.html">Sub menu 4</a></li>
<li><a href="submenupage.html">Sub menu 5</a></li>
</ul>
</li>
<li><a href="blog.html"><span></span>Blog</a></li>
<li><a href="contact.html"><span></span>Contact</a></li>
</ul>
<br style="clear: left" />
</div> <!-- end of templatemo_menu -->
<div class="cleaner"></div>
</div> <!-- end of templatemo header -->
<div id="templatemo_middle_sp">
<div id="mid_title">
Our Portfolios
</div>
<p>Sed vestibulum sem vitae ante facilisis tristique. Duis volutpat tortor eget sem scelerisque vel facilisis leo rutrum. Quisque sodales, ipsum risus interdum lacus, at cursus magna mauris eu elit. Validate <a href="#" rel="nofollow"><strong>XHTML</strong></a> & <a href="#" rel="nofollow"><strong>CSS</strong></a>.</p>
<div id="learn_more"><a href="#">Learn More</a></div>
<div class="cleaner"></div>
</div> <!-- end of middle -->
<div id="templatemo_main">
<div id="gallery">
<div class="gallery_box">
<a class="pirobox" href="images/gallery/image_01_b.jpg" title="Sed sagittis orci nec ipsum sodales vitae interdum nibh tempor.">
<img src="images/gallery/image_01.jpg" alt="Image 01" class="image_wrapper" />
</a>
<div class="gl_box">
<a href="#" class="more float_l">Visit</a>
<a href="#" class="more float_r">Detail</a>
<div class="cleaner"></div>
</div>
<div class="cleaner"></div>
</div>
<div class="gallery_box">
<a class="pirobox" href="images/gallery/image_02_b.jpg" title="In dignissim elit non massa auctor hendrerit.">
<img src="images/gallery/image_02.jpg" alt="Image 02" class="image_wrapper" />
</a>
<div class="gl_box">
<a href="#" class="more float_l">Visit</a>
<a href="#" class="more float_r">Detail</a>
<div class="cleaner"></div>
</div>
<div class="cleaner"></div>
</div>
<div class="gallery_box">
<a class="pirobox" href="images/gallery/image_03_b.jpg" title="Vivamus at dolor eget ipsum pharetra semper a at nibh.">
<img src="images/gallery/image_03.jpg" alt="Image 03" class="image_wrapper" />
</a>
<div class="gl_box">
<a href="#" class="more float_l">Visit</a>
<a href="#" class="more float_r">Detail</a>
<div class="cleaner"></div>
</div>
<div class="cleaner"></div>
</div>
<div class="gallery_box gb_lmb">
<a class="pirobox" href="images/gallery/image_04_b.jpg" title="Suspendisse sagittis libero nec odio volutpat tempor sed sed est.">
<img src="images/gallery/image_04.jpg" alt="Image 04" class="image_wrapper" />
</a>
<div class="gl_box">
<a href="#" class="more float_l">Visit</a>
<a href="#" class="more float_r">Detail</a>
<div class="cleaner"></div>
</div>
<div class="clean