View file teamgear-pack/web/single.html

File size: 15.62Kb
<!--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>TeamGear Bootstarp Website Template | Single :: w3layouts</title>
<link href="web/css/bootstrap.css" rel='stylesheet' type='text/css' />
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="web/js/jquery-1.11.1.min.js"></script>
<!-- Custom Theme files -->
<link href="web/css/style.css" rel='stylesheet' type='text/css' />
<!-- Custom Theme files -->
<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>
<!--webfont-->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:100,200,300,400,500,600,700,800,900' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,400,500,600,700,800,900' rel='stylesheet' type='text/css'>
<!-- 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="product_banner" id="home">
 	<!-- 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>
			    <!----//search-scripts---->
		    <div class="header_bottom">
			 <div class="container">
				<div class="logo">
				  <a href="index.html"><img src="web/images/logo.png" alt=""></a>
				</div>
			      <div class="menu">
				  <ul>
					  <li class="current"><a href="product.html">Shop by Product</a></li>
					  <li><a href="product.html">Shop by Sport</a></li>
				  </ul>
				</div>	
			  <div class="cart">
				<div class="cssmenu">
					<ul>
						<li class="active"><a href="login.html">Account</a></li> |
						<li><a href="contact.html">Contact</a></li> |
						<li><a href="checkout.html">Checkout</a></li> |
						<li><a href="login.html">Log In</a></li> |
						<li><a href="register.html">Sign Up</a></li>
					</ul>
				</div>	
				<ul class="icon2 sub-icon2">
				<li><a class="active-icon c2" href="#">Shopping Cart: &nbsp;0 item(s)  &nbsp;&nbsp;$0.00</a>
					<ul class="sub-icon2 list">
						<li><p>Shopping cart is empty</p></li>
					</ul>
				</li>
				</ul>					
	  		    <div class="clearfix"></div>
	  		 </div>
	  		  <div class="clearfix"></div>
			 </div>
	   </div>
</div>
<div class="main">
  <div class="product_wrapper">
  	<div class="container">
  		<div class="dreamcrub">
			   	 <ul class="breadcrumbs">
                    <li class="home">
                       <a href="index.html" title="Go to Home Page">Home</a>&nbsp;&nbsp;
                       <span>&gt;</span>
                    </li>
                    <li class="home">&nbsp;
                        Product&nbsp;&nbsp;
                          <span>&gt;</span>
                    </li>
                    <li class="home">&nbsp;
                        nulla facilisis&nbsp;
                    </li>
                  </ul>
        </div>
		<div class="row">
			<div class="col-md-3 single_left">
			   <div class="block block-layered-nav first">
                  <p class="block-subtitle">Shopping Options</p>
            <dl id="narrow-by-list">
                 <dt class="odd">Price</dt>
                    <dd class="odd">
					<ol>
					    <li>
					                <a href="#"><span class="price">$100.00</span> - <span class="price">$199.99</span></a>
					                        (3)
					            </li>
					    <li>
					                <a href="#"><span class="price">$200.00</span> - <span class="price">$299.99</span></a>
					                        (2)
					            </li>
					    <li>
					                <a href="#"><span class="price">$300.00</span> and above</a>
					                        (1)
					            </li>
					</ol>
					</dd>
					                                                                    <dt class="even">Manufacturer</dt>
					                    <dd class="even">
					<ol>
					    <li>
					                <a href="#">Ferrari</a>
					                        (1)
					            </li>
					    <li>
					                <a href="#">Honda</a>
					                        (1)
					            </li>
					    <li>
					                <a href="#">McLaren Mercedes</a>
					                        (2)
					            </li>
					    <li>
					                <a href="#">Renault</a>
					                        (1)
					            </li>
					    
					</ol>
					</dd>
                                                                    <dt class="last odd">Color</dt>
                    <dd class="last odd">
					<ol>
					    <li>
					                <a href="#">black</a>
					                        (2)
					            </li>
					    <li>
					                <a href="#">grey</a>
					                        (2)
					            </li>
					    <li>
					                <a href="#">white</a>
					                        (2)
					            </li>
					</ol>
					</dd>
                                            </dl>
          
                </div>
				<link href="web/css/default.css" rel="stylesheet" type="text/css" media="all" />
	             <link href="web/css/nivo-slider.css" rel="stylesheet" type="text/css" media="all" />
				  <script src="web/js/jquery.nivo.slider.js"></script>
				    <script type="text/javascript">
				    $(window).load(function() {
				        $('#slider').nivoSlider();
				    });
				    </script>
		      <div class="slider-wrapper theme-default">
	              <div id="slider" class="nivoSlider">
	                <img src="web/images/s1.jpg"  alt="" />
	               	<img src="web/images/s2.jpg"  alt="" />
	                <img src="web/images/s3.jpg"  alt="" />
	              </div>
			  </div>
			  <div class="tags">
				    	<h4 class="tag_head">Popular Tags</h4>
				         <ul class="tags_links">
							<li><a href="#">Kitesurf</a></li>
							<li><a href="#">Super</a></li>
							<li><a href="#">Duper</a></li>
							<li><a href="#">Theme</a></li>
							<li><a href="#">Men</a></li>
							<li><a href="#">Women</a></li>
							<li><a href="#">Equipment</a></li>
							<li><a href="#">Best</a></li>
							<li><a href="#">Accessories</a></li>
							<li><a href="#">Men</a></li>
							<li><a href="#">Apparel</a></li>
							<li><a href="#">Super</a></li>
							<li><a href="#">Duper</a></li>
							<li><a href="#">Theme</a></li>
							<li><a href="#">Responsiv</a></li>
					        <li><a href="#">Women</a></li>
							<li><a href="#">Equipment</a></li>
						</ul>
						<a href="#" class="link1">View all tags</a>
				 </div>
		   </div>
		   <div class="col-md-9">
		   	 <div class="singel_right">
			     <div class="labout span_1_of_a1">
				<!-- start product_slider -->
				     <ul id="etalage">
							<li>
								<a href="optionallink.html">
									<img class="etalage_thumb_image" src="web/images/single1.jpg" class="img-responsive" />
									<img class="etalage_source_image" src="web/images/single1.jpg" class="img-responsive" />
								</a>
							</li>
							<li>
								<img class="etalage_thumb_image" src="web/images/single2.jpg" class="img-responsive" />
								<img class="etalage_source_image" src="web/images/single2.jpg" class="img-responsive" />
							</li>
							<li>
								<img class="etalage_thumb_image" src="web/images/single3.jpg" class="img-responsive" />
								<img class="etalage_source_image" src="web/images/single3.jpg" class="img-responsive" />
							</li>
							<li>
								<img class="etalage_thumb_image" src="web/images/single1.jpg" class="img-responsive" />
								<img class="etalage_source_image" src="web/images/single1.jpg" class="img-responsive" />
							</li>
							<li>
								<img class="etalage_thumb_image" src="web/images/single2.jpg" class="img-responsive" />
								<img class="etalage_source_image" src="web/images/single2.jpg" class="img-responsive" />
							</li>
							<li>
								<img class="etalage_thumb_image" src="web/images/single3.jpg" class="img-responsive" />
								<img class="etalage_source_image" src="web/images/single3.jpg" class="img-responsive" />
							</li>
							<li>
								<img class="etalage_thumb_image" src="web/images/single1.jpg" class="img-responsive" />
								<img class="etalage_source_image" src="web/images/single1.jpg" class="img-responsive" />
							</li>
						</ul>
					<!-- end product_slider -->
			  </div>
			  <div class="cont1 span_2_of_a1">
				<h1>nulla facilisis</h1>
				<p class="availability in-stock">Availability: <span>In stock</span></p>
			    <p class="single_price">$149.95</p>
				<p class="single_desc">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. </p>
			   <div class="quantity">	
				 <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>
				 <div class="cart_btn">
					 <a href="#">Add to Cart</a>
				</div>
			    <div class="clearfix"></div>
			  </div>
			  <div class="wish-list">
				 	<ul>
				 		<li class="wish"><a href="#">Add to Wishlist</a></li>
				 	    <li class="compare"><a href="#">Add to Compare</a></li>
				 	</ul>
			  </div>
			  <ul class="social_single">
				<li><a href=""> <i class="fb1"> </i> </a></li>
				<li><a href=""><i class="tw1"> </i> </a></li>
				<li><a href=""><i class="g1"> </i> </a></li>
				<li><a href=""><i class="rss"> </i> </a></li>
			  </ul>
			</div>
			<div class="clearfix"></div>
		   </div>
		   <div class="toogle">
     	     <h3>Product Details</h3>
     	     <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.</p>
           </div>
           <div class="toogle product_tag">
     	     <h3>Product Tags</h3>
     	     <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.</p>
     	     <h4>Add Your Tags:</h4>
     	     <div class="input-box">
				<input type="text" value="">
			 </div>
			<div class="button"><span><a href="#">Add Tags</a></span></div>
           </div>
		  </div>
		</div>
	 </div>
   </div>
  </div>
  <div class="footer">
           	 <div class="container">
           	 	<div class="footer-grid">
					<h3>Customer Service</h3>
					<ul class="list1">
						  <li><a href="#">Help & Contact</a></li>
						  <li><a href="#">Shipping & taxes</a></li>
						  <li><a href="#">Return policy</a></li>
						  <li><a href="#">Careers</a></li>
						  <li><a href="#">Affiliates</a></li>
						  <li><a href="#">Legal Notice</a></li>
					</ul>
				</div>
				<div class="footer-grid">
					<h3>Information</h3>
					<ul class="list1">
						  <li><a href="#">New products</a></li>
						  <li><a href="#">Top sellers</a></li>
						  <li><a href="#">Specials products</a></li>
						  <li><a href="#">Manufacurers</a></li>
						  <li><a href="#">Suppliers</a></li>
						  <li><a href="#">Our Stores</a></li>
					</ul>
				</div>
				<div class="footer-grid">
					<h3>My Account</h3>
					<ul class="list1">
						  <li><a href="#">My account</a></li>
						  <li><a href="#">Personal Information</a></li>
						  <li><a href="#">Addresses</a></li>
						  <li><a href="#">Discount</a></li>
						  <li><a href="#">Orders history</a></li>
						  <li><a href="#">Your vouchers</a></li>
					</ul>
				</div>
				<div class="footer-grid">
					<h3>Follow Us</h3>
					<ul class="social">
							<li><a href=""> <i class="tw"> </i> </a></li>
							<li><a href=""><i class="fb"> </i> </a></li>
							<li><a href=""><i class="vimeo"> </i> </a></li>
							<li><a href=""><i class="tumblr"> </i> </a></li>
							<li><a href=""><i class="dribble"> </i> </a></li>
				    </ul>
				    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt</p>
				</div>
				<div class="footer-grid last_grid">
					<h4>Subscribe to our Newsletter</h4>
					<form>
						<input type="text" value="Your Email Address" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Your Email Address';}">
						<input type="submit" value="Go">
					</form>
					<h5>Call Team<br>Dragon Motorsports</h5>
					<h6>1.800.123.4568</h6>
				</div>
           	 </div>
           </div> 
           <div class="footer_bottom">
           	<div class="container">
           	   <p class="copy">&copy; 2014 Template by <a href="http://w3layouts.com" target="_blank"> w3layouts</a></p>
           	</div>
		   </div>   
        </div>
</body>
</html>