"ajax shopping"
Bootstrap 3.0.0 Snippet by evarevirus

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html><html lang='en' class=''> <head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/shonhartman/pen/qqwyOJ?q=ajax%20shop&order=popularity&depth=everything&show_forks=false" /> <style class="cp-pen-styles"></style></head><body> <section id="content"> <div class="content-wrap"> <div class="container clearfix"> <!-- Shop ============================================= --> <div id="shop" class="shop product-1 clearfix"> <div class="product clearfix"> <div class="product-image"> <a href="#"><img src="http://canvashtml-cdn.semicolonweb.com/images/shop/dress/1.jpg" alt="Checked Short Dress"></a> <a href="#"><img src="http://canvashtml-cdn.semicolonweb.com/images/shop/dress/1-1.jpg" alt="Checked Short Dress"></a> <div class="sale-flash">50% Off*</div> <div class="product-overlay"> <a href="#" class="add-to-cart"><i class="icon-shopping-cart"></i><span> Add to Cart</span></a> <a href="include/ajax/shop-item.php" class="item-quick-view" data-lightbox="ajax"><i class="icon-zoom-in2"></i><span> Quick View</span></a> </div> </div> <div class="product-desc"> <div class="product-title"><h3><a href="#">Checked Short Dress</a></h3></div> <div class="product-price"><del>$24.99</del> <ins>$12.49</ins></div> <div class="product-rating"> <i class="icon-star3"></i> <i class="icon-star3"></i> <i class="icon-star3"></i> <i class="icon-star3"></i> <i class="icon-star-half-full"></i> </div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, sit, exercitationem, consequuntur, assumenda iusto eos commodi alias aut ipsum praesentium officia pariatur doloremque dolor tenetur esse vitae voluptatibus inventore delectus. Eaque laboriosam quaerat accusamus! Porro, laboriosam temporibus dolorum doloremque dolorem ex ducimus recusandae repellat neque sapiente ab numquam rerum deleniti!</p> <ul class="iconlist"> <li><i class="icon-caret-right"></i> Dynamic Color Options</li> <li><i class="icon-caret-right"></i> Lots of Size Options</li> <li><i class="icon-caret-right"></i> Delivered in 3-5 Days</li> <li><i class="icon-caret-right"></i> 30-Day Return Policy</li> </ul> </div> </div> <div class="product clearfix"> <div class="product-image"> <a href="#"><img src="http://canvashtml-cdn.semicolonweb.com/images/shop/pants/1-1.jpg" alt="Slim Fit Chinos"></a> <a href="#"><img src="http://canvashtml-cdn.semicolonweb.com/images/shop/pants/1.jpg" alt="Slim Fit Chinos"></a> <div class="product-overlay"> <a href="#" class="add-to-cart"><i class="icon-shopping-cart"></i><span> Add to Cart</span></a> <a href="include/ajax/shop-item.php" class="item-quick-view" data-lightbox="ajax"><i class="icon-zoom-in2"></i><span> Quick View</span></a> </div> </div> <div class="product-desc"> <div class="product-title"><h3><a href="#">Slim Fit Chinos</a></h3></div> <div class="product-price">$39.99</div> <div class="product-rating"> <i class="icon-star3"></i> <i class="icon-star3"></i> <i class="icon-star3"></i> <i class="icon-star-half-full"></i> <i class="icon-star-empty"></i> </div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, sit, exercitationem, consequuntur, assumenda iusto eos commodi alias aut ipsum praesentium officia pariatur doloremque dolor tenetur esse vitae voluptatibus inventore delectus. Eaque laboriosam quaerat accusamus! Porro, laboriosam temporibus dolorum doloremque dolorem ex ducimus recusandae repellat neque sapiente ab numquam rerum deleniti!</p> <ul class="iconlist"> <li><i class="icon-caret-right"></i> Dynamic Color Options</li> <li><i class="icon-caret-right"></i> Lots of Size Options</li> <li><i class="icon-caret-right"></i> Delivered in 3-5 Days</li> <li><i class="icon-caret-right"></i> 30-Day Return Policy</li> </ul> </div> </div> <div class="product clearfix"> <div class="product-image"> <div class="fslider" data-arrows="false"> <div class="flexslider"> <div class="slider-wrap"> <div class="slide"><a href="#"><img src="http://canvashtml-cdn.semicolonweb.com/images/shop/shoes/1.jpg" alt="Dark Brown Boots"></a></div> <div class="slide"><a href="#"><img src="http://canvashtml-cdn.semicolonweb.com/images/shop/shoes/1-1.jpg" alt="Dark Brown Boots"></a></div> <div class="slide"><a href="#"><img src="http://canvashtml-cdn.semicolonweb.com/images/shop/shoes/1-2.jpg" alt="Dark Brown Boots"></a></div> </div> </div> </div> <div class="product-overlay"> <a href="#" class="add-to-cart"><i class="icon-shopping-cart"></i><span> Add to Cart</span></a> <a href="include/ajax/shop-item.php" class="item-quick-view" data-lightbox="ajax"><i class="icon-zoom-in2"></i><span> Quick View</span></a> </div> </div> <div class="product-desc"> <div class="product-title"><h3><a href="#">Dark Brown Boots</a></h3></div> <div class="product-price">$49</div> <div class="product-rating"> <i class="icon-star3"></i> <i class="icon-star3"></i> <i class="icon-star3"></i> <i class="icon-star-empty"></i> <i class="icon-star-empty"></i> </div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, sit, exercitationem, consequuntur, assumenda iusto eos commodi alias aut ipsum praesentium officia pariatur doloremque dolor tenetur esse vitae voluptatibus inventore delectus. Eaque laboriosam quaerat accusamus! Porro, laboriosam temporibus dolorum doloremque dolorem ex ducimus recusandae repellat neque sapiente ab numquam rerum deleniti!</p> <ul class="iconlist"> <li><i class="icon-caret-right"></i> Dynamic Color Options</li> <li><i class="icon-caret-right"></i> Lots of Size Options</li> <li><i class="icon-caret-right"></i> Delivered in 3-5 Days</li> <li><i class="icon-caret-right"></i> 30-Day Return Policy</li> </ul> </div> </div> <div class="product clearfix"> <div class="product-image"> <a href="#"><img src="http://canvashtml-cdn.semicolonweb.com/images/shop/dress/2.jpg" alt="Light Blue Denim Dress"></a> <a href="#"><img src="http://canvashtml-cdn.semicolonweb.com/images/shop/dress/2-2.jpg" alt="Light Blue Denim Dress"></a> <div class="product-overlay"> <a href="#" class="add-to-cart"><i class="icon-shopping-cart"></i><span> Add to Cart</span></a> <a href="include/ajax/shop-item.php" class="item-quick-view" data-lightbox="ajax"><i class="icon-zoom-in2"></i><span> Quick View</span></a> </div> </div> <div class="product-desc"> <div class="product-title"><h3><a href="#">Light Blue Denim Dress</a></h3></div> <div class="product-price">$19.95</div> <div class="product-rating"> <i class="icon-star3"></i> <i class="icon-star3"></i> <i class="icon-star3"></i> <i class="icon-star3"></i> <i class="icon-star-empty"></i> </div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, sit, exercitationem, consequuntur, assumenda iusto eos commodi alias aut ipsum praesentium officia pariatur doloremque dolor tenetur esse vitae voluptatibus inventore delectus. Eaque laboriosam quaerat accusamus! Porro, laboriosam temporibus dolorum doloremque dolorem ex ducimus recusandae repellat neque sapiente ab numquam rerum deleniti!</p> <ul class="iconlist"> <li><i class="icon-caret-right"></i> Dynamic Color Options</li> <li><i class="icon-caret-right"></i> Lots of Size Options</li> <li><i class="icon-caret-right"></i> Delivered in 3-5 Days</li> <li><i class="icon-caret-right"></i> 30-Day Return Policy</li> </ul> </div> </div> <div class="product clearfix"> <div class="product-image"> <a href="#"><img src="http://canvashtml-cdn.semicolonweb.com/images/shop/sunglasses/1.jpg" alt="Unisex Sunglasses"></a> <a href="#"><img src="http://canvashtml-cdn.semicolonweb.com/images/shop/sunglasses/1-1.jpg" alt="Unisex Sunglasses"></a> <div class="sale-flash">Sale!</div> <div class="product-overlay"> <a href="#" class="add-to-cart"><i class="icon-shopping-cart"></i><span> Add to Cart</span></a> <a href="include/ajax/shop-item.php" class="item-quick-view" data-lightbox="ajax"><i class="icon-zoom-in2"></i><span> Quick View</span></a> </div> </div> <div class="product-desc"> <div class="product-title"><h3><a href="#">Unisex Sunglasses</a></h3></div> <div class="product-price"><del>$19.99</del> <ins>$11.99</ins></div> <div class="product-rating"> <i class="icon-star3"></i> <i class="icon-star3"></i> <i class="icon-star3"></i> <i class="icon-star-empty"></i> <i class="icon-star-empty"></i> </div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, sit, exercitationem, consequuntur, assumenda iusto eos commodi alias aut ipsum praesentium officia pariatur doloremque dolor tenetur esse vitae voluptatibus inventore delectus. Eaque laboriosam quaerat accusamus! Porro, laboriosam temporibus dolorum doloremque dolorem ex ducimus recusandae repellat neque sapiente ab numquam rerum deleniti!</p> <ul class="iconlist"> <li><i class="icon-caret-right"></i> Dynamic Color Options</li> <li><i class="icon-caret-right"></i> Lots of Size Options</li> <li><i class="icon-caret-right"></i> Delivered in 3-5 Days</li> <li><i class="icon-caret-right"></i> 30-Day Return Policy</li> </ul> </div> </div> <div class="product clearfix"> <div class="product-image"> <a href="#"><img src="http://canvashtml-cdn.semicolonweb.com/images/shop/tshirts/1.jpg" alt="Blue Round-Neck Tshirt"></a> <a href="#"><img src="http://canvashtml-cdn.semicolonweb.com/images/shop/tshirts/1-1.jpg" alt="Blue Round-Neck Tshirt"></a> <div class="product-overlay"> <a href="#" class="add-to-cart"><i class="icon-shopping-cart"></i><span> Add to Cart</span></a> <a href="include/ajax/shop-item.php" class="item-quick-view" data-lightbox="ajax"><i class="icon-zoom-in2"></i><span> Quick View</span></a> </div> </div> <div class="product-desc"> <div class="product-title"><h3><a href="#">Blue Round-Neck Tshirt</a></h3></div> <div class="product-price">$9.99</div> <div class="product-rating"> <i class="icon-star3"></i> <i class="icon-star3"></i> <i class="icon-star3"></i> <i class="icon-star-half-full"></i> <i class="icon-star-empty"></i> </div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, sit, exercitationem, consequuntur, assumenda iusto eos commodi alias aut ipsum praesentium officia pariatur doloremque dolor tenetur esse vitae voluptatibus inventore delectus. Eaque laboriosam quaerat accusamus! Porro, laboriosam temporibus dolorum doloremque dolorem ex ducimus recusandae repellat neque sapiente ab numquam rerum deleniti!</p> <ul class="iconlist"> <li><i class="icon-caret-right"></i> Dynamic Color Options</li> <li><i class="icon-caret-right"></i> Lots of Size Options</li> <li><i class="icon-caret-right"></i> Delivered in 3-5 Days</li> <li><i class="icon-caret-right"></i> 30-Day Return Policy</li> </ul> </div> </div> <div class="product clearfix"> <div class="product-image"> <a href="#"><img src="http://canvashtml-cdn.semicolonweb.com/images/shop/watches/1.jpg" alt="Silver Chrome Watch"></a> <a href="#"><img src="http://canvashtml-cdn.semicolonweb.com/images/shop/watches/1-1.jpg" alt="Silver Chrome Watch"></a> <div class="product-overlay"> <a href="#" class="add-to-cart"><i class="icon-shopping-cart"></i><span> Add to Cart</span></a> <a href="include/ajax/shop-item.php" class="item-quick-view" data-lightbox="ajax"><i class="icon-zoom-in2"></i><span> Quick View</span></a> </div> </div> <div class="product-desc"> <div class="product-title"><h3><a href="#">Silver Chrome Watch</a></h3></div> <div class="product-price">$129.99</div> <div class="product-rating"> <i class="icon-star3"></i> <i class="icon-star3"></i> <i class="icon-star3"></i> <i class="icon-star3"></i> <i class="icon-star-half-full"></i> </div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, sit, exercitationem, consequuntur, assumenda iusto eos commodi alias aut ipsum praesentium officia pariatur doloremque dolor tenetur esse vitae voluptatibus inventore delectus. Eaque laboriosam quaerat accusamus! Porro, laboriosam temporibus dolorum doloremque dolorem ex ducimus recusandae repellat neque sapiente ab numquam rerum deleniti!</p> <ul class="iconlist"> <li><i class="icon-caret-right"></i> Dynamic Color Options</li> <li><i class="icon-caret-right"></i> Lots of Size Options</li> <li><i class="icon-caret-right"></i> Delivered in 3-5 Days</li> <li><i class="icon-caret-right"></i> 30-Day Return Policy</li> </ul> </div> </div> <div class="product clearfix"> <div class="product-image"> <a href="#"><img src="http://canvashtml-cdn.semicolonweb.com/images/shop/shoes/2.jpg" alt="Men Grey Casual Shoes"></a> <a href="#"><img src="http://canvashtml-cdn.semicolonweb.com/images/shop/shoes/2-1.jpg" alt="Men Grey Casual Shoes"></a> <div class="sale-flash">Sale!</div> <div class="product-overlay"> <a href="#" class="add-to-cart"><i class="icon-shopping-cart"></i><span> Add to Cart</span></a> <a href="include/ajax/shop-item.php" class="item-quick-view" data-lightbox="ajax"><i class="icon-zoom-in2"></i><span> Quick View</span></a> </div> </div> <div class="product-desc"> <div class="product-title"><h3><a href="#">Men Grey Casual Shoes</a></h3></div> <div class="product-price"><del>$45.99</del> <ins>$39.49</ins></div> <div class="product-rating"> <i class="icon-star3"></i> <i class="icon-star3"></i> <i class="icon-star-half-full"></i> <i class="icon-star-empty"></i> <i class="icon-star-empty"></i> </div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, sit, exercitationem, consequuntur, assumenda iusto eos commodi alias aut ipsum praesentium officia pariatur doloremque dolor tenetur esse vitae voluptatibus inventore delectus. Eaque laboriosam quaerat accusamus! Porro, laboriosam temporibus dolorum doloremque dolorem ex ducimus recusandae repellat neque sapiente ab numquam rerum deleniti!</p> <ul class="iconlist"> <li><i class="icon-caret-right"></i> Dynamic Color Options</li> <li><i class="icon-caret-right"></i> Lots of Size Options</li> <li><i class="icon-caret-right"></i> Delivered in 3-5 Days</li> <li><i class="icon-caret-right"></i> 30-Day Return Policy</li> </ul> </div> </div> <div class="product clearfix"> <div class="product-image"> <div class="fslider" data-arrows="false"> <div class="flexslider"> <div class="slider-wrap"> <div class="slide"><a href="#"><img src="http://canvashtml-cdn.semicolonweb.com/images/shop/dress/3.jpg" alt="Pink Printed Dress"></a></div> <div class="slide"><a href="#"><img src="http://canvashtml-cdn.semicolonweb.com/images/shop/dress/3-1.jpg" alt="Pink Printed Dress"></a></div> <div class="slide"><a href="#"><img src="http://canvashtml-cdn.semicolonweb.com/images/shop/dress/3-2.jpg" alt="Pink Printed Dress"></a></div> </div> </div> </div> <div class="product-overlay"> <a href="#" class="add-to-cart"><i class="icon-shopping-cart"></i><span> Add to Cart</span></a> <a href="include/ajax/shop-item.php" class="item-quick-view" data-lightbox="ajax"><i class="icon-zoom-in2"></i><span> Quick View</span></a> </div> </div> <div class="product-desc"> <div class="product-title"><h3><a href="#">Pink Printed Dress</a></h3></div> <div class="product-price">$39.49</div> <div class="product-rating"> <i class="icon-star3"></i> <i class="icon-star3"></i> <i class="icon-star3"></i> <i class="icon-star-empty"></i> <i class="icon-star-empty"></i> </div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, sit, exercitationem, consequuntur, assumenda iusto eos commodi alias aut ipsum praesentium officia pariatur doloremque dolor tenetur esse vitae voluptatibus inventore delectus. Eaque laboriosam quaerat accusamus! Porro, laboriosam temporibus dolorum doloremque dolorem ex ducimus recusandae repellat neque sapiente ab numquam rerum deleniti!</p> <ul class="iconlist"> <li><i class="icon-caret-right"></i> Dynamic Color Options</li> <li><i class="icon-caret-right"></i> Lots of Size Options</li> <li><i class="icon-caret-right"></i> Delivered in 3-5 Days</li> <li><i class="icon-caret-right"></i> 30-Day Return Policy</li> </ul> </div> </div> <div class="product clearfix"> <div class="product-image"> <a href="#"><img src="http://canvashtml-cdn.semicolonweb.com/images/shop/pants/5.jpg" alt="Green Trousers"></a> <a href="#"><img src="http://canvashtml-cdn.semicolonweb.com/images/shop/pants/5-1.jpg" alt="Green Trousers"></a> <div class="sale-flash">Sale!</div> <div class="product-overlay"> <a href="#" class="add-to-cart"><i class="icon-shopping-cart"></i><span> Add to Cart</span></a> <a href="include/ajax/shop-item.php" class="item-quick-view" data-lightbox="ajax"><i class="icon-zoom-in2"></i><span> Quick View</span></a> </div> </div> <div class="product-desc"> <div class="product-title"><h3><a href="#">Green Trousers</a></h3></div> <div class="product-price"><del>$24.99</del> <ins>$21.99</ins></div> <div class="product-rating"> <i class="icon-star3"></i> <i class="icon-star3"></i> <i class="icon-star3"></i> <i class="icon-star-half-full"></i> <i class="icon-star-empty"></i> </div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, sit, exercitationem, consequuntur, assumenda iusto eos commodi alias aut ipsum praesentium officia pariatur doloremque dolor tenetur esse vitae voluptatibus inventore delectus. Eaque laboriosam quaerat accusamus! Porro, laboriosam temporibus dolorum doloremque dolorem ex ducimus recusandae repellat neque sapiente ab numquam rerum deleniti!</p> <ul class="iconlist"> <li><i class="icon-caret-right"></i> Dynamic Color Options</li> <li><i class="icon-caret-right"></i> Lots of Size Options</li> <li><i class="icon-caret-right"></i> Delivered in 3-5 Days</li> <li><i class="icon-caret-right"></i> 30-Day Return Policy</li> </ul> </div> </div> <div class="product clearfix"> <div class="product-image"> <a href="#"><img src="http://canvashtml-cdn.semicolonweb.com/images/shop/sunglasses/2.jpg" alt="Men Aviator Sunglasses"></a> <a href="#"><img src="http://canvashtml-cdn.semicolonweb.com/images/shop/sunglasses/2-1.jpg" alt="Men Aviator Sunglasses"></a> <div class="product-overlay"> <a href="#" class="add-to-cart"><i class="icon-shopping-cart"></i><span> Add to Cart</span></a> <a href="include/ajax/shop-item.php" class="item-quick-view" data-lightbox="ajax"><i class="icon-zoom-in2"></i><span> Quick View</span></a> </div> </div> <div class="product-desc"> <div class="product-title"><h3><a href="#">Men Aviator Sunglasses</a></h3></div> <div class="product-price">$13.49</div> <div class="product-rating"> <i class="icon-star3"></i> <i class="icon-star3"></i> <i class="icon-star3"></i> <i class="icon-star3"></i> <i class="icon-star-empty"></i> </div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, sit, exercitationem, consequuntur, assumenda iusto eos commodi alias aut ipsum praesentium officia pariatur doloremque dolor tenetur esse vitae voluptatibus inventore delectus. Eaque laboriosam quaerat accusamus! Porro, laboriosam temporibus dolorum doloremque dolorem ex ducimus recusandae repellat neque sapiente ab numquam rerum deleniti!</p> <ul class="iconlist"> <li><i class="icon-caret-right"></i> Dynamic Color Options</li> <li><i class="icon-caret-right"></i> Lots of Size Options</li> <li><i class="icon-caret-right"></i> Delivered in 3-5 Days</li> <li><i class="icon-caret-right"></i> 30-Day Return Policy</li> </ul> </div> </div> <div class="product clearfix"> <div class="product-image"> <a href="#"><img src="http://canvashtml-cdn.semicolonweb.com/images/shop/tshirts/4.jpg" alt="Black Polo Tshirt"></a> <a href="#"><img src="http://canvashtml-cdn.semicolonweb.com/images/shop/tshirts/4-1.jpg" alt="Black Polo Tshirt"></a> <div class="product-overlay"> <a href="#" class="add-to-cart"><i class="icon-shopping-cart"></i><span> Add to Cart</span></a> <a href="include/ajax/shop-item.php" class="item-quick-view" data-lightbox="ajax"><i class="icon-zoom-in2"></i><span> Quick View</span></a> </div> </div> <div class="product-desc"> <div class="product-title"><h3><a href="#">Black Polo Tshirt</a></h3></div> <div class="product-price">$11.49</div> <div class="product-rating"> <i class="icon-star3"></i> <i class="icon-star3"></i> <i class="icon-star3"></i> <i class="icon-star3"></i> <i class="icon-star3"></i> </div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, sit, exercitationem, consequuntur, assumenda iusto eos commodi alias aut ipsum praesentium officia pariatur doloremque dolor tenetur esse vitae voluptatibus inventore delectus. Eaque laboriosam quaerat accusamus! Porro, laboriosam temporibus dolorum doloremque dolorem ex ducimus recusandae repellat neque sapiente ab numquam rerum deleniti!</p> <ul class="iconlist"> <li><i class="icon-caret-right"></i> Dynamic Color Options</li> <li><i class="icon-caret-right"></i> Lots of Size Options</li> <li><i class="icon-caret-right"></i> Delivered in 3-5 Days</li> <li><i class="icon-caret-right"></i> 30-Day Return Policy</li> </ul> </div> </div> </div><!-- #shop end --> </div> </div> </section><!-- #content end --> </body></html>

Related: See More


Questions / Comments: