File size: 15.67Kb
<!--A Design by W3layouts
Author: W3layout
Author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
-->
<!DOCTYPE HTML>
<html>
<head>
<title>Free Snow Bootstrap Website Template | Single :: w3layouts</title>
<link href="web/css/bootstrap.css" rel='stylesheet' type='text/css' />
<link href="web/css/style.css" rel='stylesheet' type='text/css' />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800' rel='stylesheet' type='text/css'>
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<script src="web/js/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".dropdown img.flag").addClass("flagvisibility");
$(".dropdown dt a").click(function() {
$(".dropdown dd ul").toggle();
});
$(".dropdown dd ul li a").click(function() {
var text = $(this).html();
$(".dropdown dt a span").html(text);
$(".dropdown dd ul").hide();
$("#result").html("Selected value is: " + getSelectedValue("sample"));
});
function getSelectedValue(id) {
return $("#" + id).find("dt a span.value").html();
}
$(document).bind('click', function(e) {
var $clicked = $(e.target);
if (! $clicked.parents().hasClass("dropdown"))
$(".dropdown dd ul").hide();
});
$("#flagSwitcher").click(function() {
$(".dropdown img.flag").toggleClass("flagvisibility");
});
});
</script>
<!----details-product-slider--->
<!-- Include the Etalage files -->
<link rel="stylesheet" href="web/css/etalage.css">
<script src="web/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>
<div class="header">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="header-left">
<div class="logo">
<a href="index.html"><img src="web/images/logo.png" alt=""/></a>
</div>
<div class="menu">
<a class="toggleMenu" href="#"><img src="web/images/nav.png" alt="" /></a>
<ul class="nav" id="nav">
<li class="current"><a href="shop.html">Shop</a></li>
<li><a href="team.html">Team</a></li>
<li><a href="shop.html">Events</a></li>
<li><a href="experiance.html">Experiance</a></li>
<li><a href="shop.html">Company</a></li>
<li><a href="contact.html">Contact</a></li>
<div class="clear"></div>
</ul>
<script type="text/javascript" src="web/js/responsive-nav.js"></script>
</div>
<div class="clear"></div>
</div>
<div class="header_right">
<!-- start search-->
<div class="search-box">
<div id="sb-search" class="sb-search">
<form>
<input class="sb-search-input" placeholder="Enter your search term..." type="search" name="search" id="search">
<input class="sb-search-submit" type="submit" value="">
<span class="sb-icon-search"> </span>
</form>
</div>
</div>
<!----search-scripts---->
<script src="web/js/classie.js"></script>
<script src="web/js/uisearch.js"></script>
<script>
new UISearch( document.getElementById( 'sb-search' ) );
</script>
<ul class="icon1 sub-icon1 profile_img">
<li><a class="active-icon c1" href="#"> </a>
<ul class="sub-icon1 list">
<div class="product_control_buttons">
<a href="#"><img src="web/images/edit.png" alt=""/></a>
<a href="#"><img src="web/images/close_edit.png" alt=""/></a>
</div>
<div class="clear"></div>
<li class="list_img"><img src="web/images/1.jpg" alt=""/></li>
<li class="list_desc"><h4><a href="#">velit esse molestie</a></h4><span class="actual">1 x
$12.00</span></li>
<div class="login_buttons">
<div class="check_button"><a href="checkout.html">Check out</a></div>
<div class="login_button"><a href="login.html">Login</a></div>
<div class="clear"></div>
</div>
<div class="clear"></div>
</ul>
</li>
</ul>
<div class="clear"></div>
</div>
</div>
</div>
</div>
</div>
<div class="main">
<div class="shop_top">
<div class="container">
<div class="row">
<div class="col-md-9 single_left">
<div class="single_image">
<ul id="etalage">
<li>
<a href="optionallink.html">
<img class="etalage_thumb_image" src="web/images/3.jpg" />
<img class="etalage_source_image" src="web/images/3.jpg" />
</a>
</li>
<li>
<img class="etalage_thumb_image" src="web/images/4.jpg" />
<img class="etalage_source_image" src="web/images/4.jpg" />
</li>
<li>
<img class="etalage_thumb_image" src="web/images/5.jpg" />
<img class="etalage_source_image" src="web/images/5.jpg" />
</li>
<li>
<img class="etalage_thumb_image" src="web/images/6.jpg" />
<img class="etalage_source_image" src="web/images/6.jpg" />
</li>
<li>
<img class="etalage_thumb_image" src="web/images/7.jpg" />
<img class="etalage_source_image" src="web/images/7.jpg" />
</li>
<li>
<img class="etalage_thumb_image" src="web/images/8.jpg" />
<img class="etalage_source_image" src="web/images/8.jpg" />
</li>
<li>
<img class="etalage_thumb_image" src="web/images/9.jpg" />
<img class="etalage_source_image" src="web/images/9.jpg" />
</li>
</ul>
</div>
<!-- end product_slider -->
<div class="single_right">
<h3>hendrerit in vulputate velit </h3>
<p class="m_10">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse</p>
<ul class="options">
<h4 class="m_12">Select a Size(cm)</h4>
<li><a href="#">151</a></li>
<li><a href="#">148</a></li>
<li><a href="#">156</a></li>
<li><a href="#">145</a></li>
<li><a href="#">162(w)</a></li>
<li><a href="#">163</a></li>
</ul>
<ul class="product-colors">
<h3>available Colors</h3>
<li><a class="color1" href="#"><span> </span></a></li>
<li><a class="color2" href="#"><span> </span></a></li>
<li><a class="color3" href="#"><span> </span></a></li>
<li><a class="color4" href="#"><span> </span></a></li>
<li><a class="color5" href="#"><span> </span></a></li>
<li><a class="color6" href="#"><span> </span></a></li>
<div class="clear"> </div>
</ul>
<div class="btn_form">
<form>
<input type="submit" value="buy now" title="">
</form>
</div>
<ul class="add-to-links">
<li><img src="web/images/wish.png" alt=""><a href="#">Add to wishlist</a></li>
</ul>
<div class="social_buttons">
<h4>95 Items</h4>
<button type="button" class="btn1 btn1-default1 btn1-twitter" onclick="">
<i class="icon-twitter"></i> Tweet
</button>
<button type="button" class="btn1 btn1-default1 btn1-facebook" onclick="">
<i class="icon-facebook"></i> Share
</button>
<button type="button" class="btn1 btn1-default1 btn1-google" onclick="">
<i class="icon-google"></i> Google+
</button>
<button type="button" class="btn1 btn1-default1 btn1-pinterest" onclick="">
<i class="icon-pinterest"></i> Pinterest
</button>
</div>
</div>
<div class="clear"> </div>
</div>
<div class="col-md-3">
<div class="box-info-product">
<p class="price2">$130.25</p>
<ul class="prosuct-qty">
<span>Quantity:</span>
<select>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
</select>
</ul>
<button type="submit" name="Submit" class="exclusive">
<span>Add to cart</span>
</button>
</div>
</div>
</div>
<div class="desc">
<h4>Description</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores</p>
</div>
<div class="row">
<h4 class="m_11">Related Products in the same Category</h4>
<div class="col-md-4 product1">
<img src="web/images/s1.jpg" class="img-responsive" alt=""/>
<div class="shop_desc"><a href="single.html">
</a><h3><a href="single.html"></a><a href="#">aliquam volutp</a></h3>
<p>Lorem ipsum consectetuer adipiscing </p>
<span class="reducedfrom">$66.00</span>
<span class="actual">$12.00</span><br>
<ul class="buttons">
<li class="cart"><a href="#">Add To Cart</a></li>
<li class="shop_btn"><a href="#">Read More</a></li>
<div class="clear"> </div>
</ul>
</div>
</div>
<div class="col-md-4 product1">
<img src="web/images/s2.jpg" class="img-responsive" alt=""/>
<div class="shop_desc"><a href="single.html">
</a><h3><a href="single.html"></a><a href="#">aliquam volutp</a></h3>
<p>Lorem ipsum consectetuer adipiscing </p>
<span class="reducedfrom">$66.00</span>
<span class="actual">$12.00</span><br>
<ul class="buttons">
<li class="cart"><a href="#">Add To Cart</a></li>
<li class="shop_btn"><a href="#">Read More</a></li>
<div class="clear"> </div>
</ul>
</div>
</div>
<div class="col-md-4">
<img src="web/images/s3.jpg" class="img-responsive" alt=""/>
<div class="shop_desc"><a href="single.html">
</a><h3><a href="single.html"></a><a href="#">aliquam volutp</a></h3>
<p>Lorem ipsum consectetuer adipiscing </p>
<span class="reducedfrom">$66.00</span>
<span class="actual">$12.00</span><br>
<ul class="buttons">
<li class="cart"><a href="#">Add To Cart</a></li>
<li class="shop_btn"><a href="#">Read More</a></li>
<div class="clear"> </div>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="container">
<div class="row">
<div class="col-md-3">
<ul class="footer_box">
<h4>Products</h4>
<li><a href="#">Mens</a></li>
<li><a href="#">Womens</a></li>
<li><a href="#">Youth</a></li>
</ul>
</div>
<div class="col-md-3">
<ul class="footer_box">
<h4>About</h4>
<li><a href="#">Careers and internships</a></li>
<li><a href="#">Sponserships</a></li>
<li><a href="#">team</a></li>
<li><a href="#">Catalog Request/Download</a></li>
</ul>
</div>
<div class="col-md-3">
<ul class="footer_box">
<h4>Customer Support</h4>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Shipping and Order Tracking</a></li>
<li><a href="#">Easy Returns</a></li>
<li><a href="#">Warranty</a></li>
<li><a href="#">Replacement Binding Parts</a></li>
</ul>
</div>
<div class="col-md-3">
<ul class="footer_box">
<h4>Newsletter</h4>
<div class="footer_search">
<form>
<input type="text" value="Enter your email" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Enter your email';}">
<input type="submit" value="Go">
</form>
</div>
<ul class="social">
<li class="facebook"><a href="#"><span> </span></a></li>
<li class="twitter"><a href="#"><span> </span></a></li>
<li class="instagram"><a href="#"><span> </span></a></li>
<li class="pinterest"><a href="#"><span> </span></a></li>
<li class="youtube"><a href="#"><span> </span></a></li>
</ul>
</ul>
</div>
</div>
<div class="row footer_bottom">
<div class="copy">
<p>© 2014 Template by <a href="http://w3layouts.com" target="_blank">w3layouts</a></p>
</div>
<dl id="sample" class="dropdown">
<dt><a href="#"><span>Change Region</span></a></dt>
<dd>
<ul>
<li><a href="#">Australia<img class="flag" src="web/images/as.png" alt="" /><span class="value">AS</span></a></li>
<li><a href="#">Sri Lanka<img class="flag" src="web/images/srl.png" alt="" /><span class="value">SL</span></a></li>
<li><a href="#">Newziland<img class="flag" src="web/images/nz.png" alt="" /><span class="value">NZ</span></a></li>
<li><a href="#">Pakistan<img class="flag" src="web/images/pk.png" alt="" /><span class="value">Pk</span></a></li>
<li><a href="#">United Kingdom<img class="flag" src="web/images/uk.png" alt="" /><span class="value">UK</span></a></li>
<li><a href="#">United States<img class="flag" src="web/images/us.png" alt="" /><span class="value">US</span></a></li>
</ul>
</dd>
</dl>
</div>
</div>
</div>
</body>
</html>