<!DOCTYPE HTML>
<html>
<head>
<title>The Yolk Website Template</title>
<link href="css/bootstrap.min.css" rel='stylesheet' type='text/css' />
<link href="css/bootstrap.css" rel='stylesheet' type='text/css' />
<link href="css/theme.css" rel='stylesheet' type='text/css' />
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
</script>
<!----webfonts---->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800,300' rel='stylesheet' type='text/css'>
<!----//webfonts---->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<!-- jquery plguin -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<!-- start details -->
<!----details-product-slider--->
<!-- Include the Etalage files -->
<link rel="stylesheet" href="css/etalage.css">
<script src="js/jquery.etalage.min.js"></script>
<!-- Include the Etalage files -->
<script>
jQuery(document).ready(function($){
$('#etalage').etalage({
thumb_image_width: 300,
thumb_image_height: 400,
show_hint: true,
click_callback: function(image_anchor, instance_id){
alert('Callback example:\nYou clicked on an image with the anchor: "'+image_anchor+'"\n(in Etalage instance: "'+instance_id+'")');
}
});
// This is for the dropdown list example:
$('.dropdownlist').change(function(){
etalage_show( $(this).find('option:selected').attr('class') );
});
});
</script>
<!----//details-product-slider--->
</head>
<body>
<!----start-container----->
<div class="header-bg">
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="logo"><a href="index.html"><img src="images/logo.png" alt=""/></a></div>
</div>
<div class="col-md-8">
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header"><span class="text-left"><a href="#">MENU</a></span>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
<div class="btn-group show-on-hover">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Categories<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">New arrivals</a></li>
<li><a href="#">Men</a></li>
<li><a href="#">Women</a></li>
<li><a href="#">Accessories</a></li>
</ul>
</div>
</li>
<li><a href="about.html">About</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="right">
<ul class="list-unstyled">
<li class="a text-left"><a href="#"><span class="glyphicon glyphicon-shopping-cart"></span></a> $2,534,5435</li>
<li><a href="#">Checkout</a></li>
</ul>
</div>
</div>
<!----start-images-slider---->
<!-- Single button -->
</div>
</div>
</div>
<div class="single">
<div class="container">
<div class="rsidebar span_1_of_left">
<section class="sky-form">
<h4>Occasion</h4>
<div class="row row1 scroll-pane" style="overflow: hidden; padding: 0px; width: 283px;">
<div class="jspContainer" style="width: 283px; height: 200px;"><div class="jspPane" style="padding: 20px; top: 0px; left: 0px; width: 243px;"><div class="col col-4">
<label class="checkbox"><input type="checkbox" name="checkbox" checked=""><i></i>Athletic (20)</label>
</div><div class="col col-4">
<label class="checkbox"><input type="checkbox" name="checkbox"><i></i>Athletic Shoes (48)</label>
<label class="checkbox"><input type="checkbox" name="checkbox"><i></i>Casual (45)</label>
<label class="checkbox"><input type="checkbox" name="checkbox"><i></i>Casual (45)</label>
<label class="checkbox"><input type="checkbox" name="checkbox"><i></i>Other (1)</label>
</div></div></div></div>
<h4>Category</h4>
<div class="row row1 scroll-pane" style="overflow: hidden; padding: 0px; width: 283px;">
<div class="jspContainer" style="width: 283px; height: 200px;"><div class="jspPane" style="padding: 20px; top: 0px; left: 0px; width: 243px;"><div class="col col-4">
<label class="checkbox"><input type="checkbox" name="checkbox" checked=""><i></i>Flats (70)</label>
</div><div class="col col-4">
<label class="checkbox"><input type="checkbox" name="checkbox"><i></i>Athletic Shoes (48)</label>
<label class="checkbox"><input type="checkbox" name="checkbox"><i></i>Athletic Shoes (48)</label>
<label class="checkbox"><input type="checkbox" name="checkbox"><i></i>Heels (38)</label>
<label class="checkbox"><input type="checkbox" name="checkbox"><i></i>Other (1)</label>
</div></div></div></div>
<h4>Styles</h4>
<div class="row row1 scroll-pane" style="overflow: hidden; padding: 0px; width: 283px;">
<div class="jspContainer" style="width: 283px; height: 200px;"><div class="jspPane" style="padding: 20px; top: 0px; left: 0px; width: 243px;"><div class="col col-4">
<label class="checkbox"><input type="checkbox" name="checkbox" checked=""><i></i>Athletic (20)</label>
</div><div class="col col-4">
<label class="checkbox"><input type="checkbox" name="checkbox"><i></i>Ballerina (5)</label>
<label class="checkbox"><input type="checkbox" name="checkbox"><i></i>Pumps (7)</label>
<label class="checkbox"><input type="checkbox" name="checkbox"><i></i>High Tops (2)</label>
<label class="checkbox"><input type="checkbox" name="checkbox"><i></i>Other (1)</label>
</div></div></div></div>
</section>
</div>
<div class="cont span_2_of_3">
<div class="labout span_1_of_a1">
<!-- start product_slider -->
<ul id="etalage">
<li>
<a href="optionallink.html">
<img class="etalage_thumb_image" src="images/t1.jpg" />
<img class="etalage_source_image" src="images/t2.jpg" />
</a>
</li>
<li>
<img class="etalage_thumb_image" src="images/t2.jpg" />
<img class="etalage_source_image" src="images/t2.jpg" />
</li>
<li>
<img class="etalage_thumb_image" src="images/t3.jpg" />
<img class="etalage_source_im