"product"
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/curnsey/pen/LGgvoL?q=product&order=popularity&depth=everything&show_forks=false" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> <style class="cp-pen-styles">/* Using the ITCSS (http://itcss.io/) architecture for CSS */ /* 1. Settings - Preprocessors variables, fonts, imports, etc. */ @import url(https://fonts.googleapis.com/css?family=Poppins); @import url(https://fonts.googleapis.com/css?family=Montserrat); /* 2. Tools - mixins */ /* 3. Generic - very generic CSS rules */ * { box-sizing: border-box; font-family: Montserrat; font-size: 14px; } ::selection{background-color: white;} i { font-size: 20px; } /* 4. Elements - HTML Elements of the page h1-h6, etc. */ body { margin: 0; padding: 0; background-color: #222; color: #666; } a { color: #235ba8; text-decoration: none; } a:hover { text-decoration: underline; } input {} input:focus {} input[type="submit"], input[type="button"] {} /* 5. Objects - wrappers, cards, etc. */ .random-background { background-color: #36a88e; /*top colour*/ background-image: -webkit-linear-gradient(top, #36a88e, #f35b47); background-image: -moz-linear-gradient(top, #36a88e, #f35b47); background-image: -o-linear-gradient(top, #36a88e, #f35b47); background-image: linear-gradient(to bottom, #36a88e, #f35b47); height: 200vh; width: 100vw; } .itemlist{ max-width:1024px; margin:auto; padding:20px; display:flex; flex-wrap: wrap; } .itemlist-item-wrapper{width: calc(90% / 3); display:inline-block; font-size: 20px !important; margin:1% 0.5% 0.5% 0.5%; background-color:white; padding:10px; box-sizing: content-box;} @media(max-width: 800px){ .itemlist{ width:auto; margin:auto; padding:0;} .itemlist-item-wrapper{width:48%; margin:auto; margin-bottom:0.5%; padding:30px;} } @media(max-width: 600px){ .itemlist{ width:auto; margin:auto; padding:0;} .itemlist-item-wrapper{width:auto; margin:auto; margin-bottom:2%;} } .lightbox-blanket { background-color: rgba(30, 30, 30, 0.9); display: block; height: 100vh; position: fixed; overflow-y: scroll; top: 0; width: 100vw; z-index: 20; } .pop-up-container { height: 100%; width: auto; display: table; margin: auto; position: static; } @media (max-width:400px) { .pop-up-container { width: 96%; margin: 2%; } } .pop-up-container-vertical { height: 100%; vertical-align: middle; display: table-cell; } .pop-up-wrapper { -webkit-box-shadow: -45px 49px 83px 1px rgba(0, 0, 0, 0.45); -moz-box-shadow: -45px 49px 83px 1px rgba(0, 0, 0, 0.45); box-shadow: -45px 49px 83px 1px rgba(0, 0, 0, 0.45); display: block; margin: 20px auto; width: auto; position: relative; } .pop-up-wrapper { background-color: white; display: block; padding: 50px; } .go-back { position: absolute; left: 10px; top: 10px; color:#222; width: 0; height: 0; border-top: 60px solid #CAE00D; border-right: 60px solid transparent; } .go-back i { font-size:20px; position: relative; top: -52px; left: 10px; } .product-details { max-width: 600px; } .product-left { display: inline-block; padding-right: 4%; vertical-align: top; width: 46%; } .product-right { display: inline-block; vertical-align: top; width: 49%; } .product-bottom{border-top:1px solid #ccc; position:relative; padding-top:20px;} @media (max-width:650px){ .product-left, .product-right, .product-bottom{ width:100%;} .product-left{padding-right:0;} .product-info{display:inline-block; width:60%; vertical-align:top;} .product-image{display:inline-block; width:39%; vertical-align:top;} } @media (max-width:512px){ .product-info, .product-image{width:100%;} } .product-manufacturer { color:#222; font-size: 70px; font-weight: bold; line-height: 1; margin: -2px; } .product-title { font-size: 28px; color: #888; } .product-price { color:#222; font-size: 24px; letter-spacing: 1px; } .product-price-cents { text-decoration: underline; vertical-align: top; padding-left:3px; } .product-image { padding: 10px 10px 0 10px; } .product-image img { width: 100%; height: 100%; object-fit: contain; height: 295px; } .product-description {line-height:1.5;} .product-available { margin-top: 25px; } .product-rating{ margin-top:25px; } i.fa-star{color:#aaa; display:inline-block;} i.fa-star.rating{color: rgb(232, 217, 31);} .product-rating-details{display:inline-block; padding-left: 10px;} @media(max-width:515px){ .product-rating-details{padding-left:0;} } .product-extended { color: #235ba8; padding-left: 5px; } .product-quantity{margin-top:25px; margin-bottom:25px;} .product-checkout{position:absolute; left:0;font-size: 12px; text-transform: uppercase;} .product-checkout-actions{position:absolute; right:0;} .product-checkout-total, .product-checkout-total-amount{font-size: 20px; color: #C17A41;} .product-checkout-total * {display:inline-block;} .product-checkout-actions{} /* 6. Components - buttons, menus, images, etc. */ .product-quantity-label{text-transform:uppercase;} .product-quantity *{display:inline-block;} #product-quantity-input{background-color: #eee;border: none; width:2.5em; text-align: center;} .product-quantity-subtract, .product-quantity-add{margin-left: 20px; padding-left:5px; padding-right: 5px;} .product-quantity-subtract{margin-right:20px;} .toast{ position: fixed; top: -50px; left: calc(50vw - 50px); z-index:25; padding:5px 10px; border-radius: 15px; } .toast-success{ background-color: green; color:white; font-size: 9pt; } .toast-transition{ top: calc(50px); transition:top 1s; } /* 7. Trumps - text helpers, often !important */ .hidden { display: none; }</style></head><body> <body> <div class="lightbox-blanket"> <div class="pop-up-container"> <div class="pop-up-container-vertical"> <div class="pop-up-wrapper"> <div class="go-back" onclick="GoBack();"><i class="fa fa-arrow-left"></i> </div> <div class="product-details"> <div class="product-left"> <div class="product-info"> <div class="product-manufacturer">NOOK </div> <div class="product-title"> LOUNGE CHAIR </div> <div class="product-price" price-data="320.03"> $320<span class="product-price-cents">03</span> </div> </div> <div class="product-image"> <img src="http://3.design-milk.com/images/2013/07/Karim-Rashid-1-ChateauDAx_nook_chair.jpg" /> </div> </div> <div class="product-right"> <div class="product-description"> Designer Karim Rashid continues to put his signature spin on all genres of design through various collaborations with top-notch companies. Another one to add to the win column is his work with Italian manufacturer Chateau d’Ax. </div> <div class="product-available"> In stock. <span class="product-extended"><a href="#">Buy Extended Warranty</a></span> </div> <div class="product-rating"> <i class="fa fa-star rating" star-data="1"></i> <i class="fa fa-star rating" star-data="2"></i> <i class="fa fa-star rating" star-data="3"></i> <i class="fa fa-star" star-data="4"></i> <i class="fa fa-star" star-data="5"></i> <div class="product-rating-details">(3.1 - <span class="rating-count">1203</span> reviews) </div> </div> <div class="product-quantity"> <label for="product-quantity-input" class="product-quantity-label">Quantity</label> <div class="product-quantity-subtract"> <i class="fa fa-chevron-left"></i> </div> <div> <input type="text" id="product-quantity-input" placeholder="0" value="0" /> </div> <div class="product-quantity-add"> <i class="fa fa-chevron-right"></i> </div> </div> </div> <div class="product-bottom"> <div class="product-checkout"> Total Price <div class="product-checkout-total"> <i class="fa fa-usd"></i> <div class="product-checkout-total-amount"> 0.00 </div> </div> </div> <div class="product-checkout-actions"> <a class="add-to-cart" href="#" onclick="AddToCart(event);">Add to Cart</a> </div> </div> </div> </div> </div> </div> </div> <div class="random-background"> <div class="itemlist"> <div class="itemlist-item-wrapper" onclick="OpenProduct(1);"> <div class="product-details"> <div class=""> <div class="product-info"> <div class="product-title" item-data="1"> LOUNGE CHAIR </div> <div class="product-price" price-data="320.03" item-data="1"> $320<span class="product-price-cents">03</span> </div> </div> <div class="product-image" item-data="1"> <img src="http://3.design-milk.com/images/2013/07/Karim-Rashid-1-ChateauDAx_nook_chair.jpg" /> </div> </div> </div> </div> <div class="itemlist-item-wrapper" onclick="OpenProduct(2);"> <div class="product-details"> <div class=""> <div class="product-info"> <div class="product-title" item-data="2"> LOUNGE CHAIR </div> <div class="product-price" price-data="320.03" item-data="2"> $320<span class="product-price-cents">03</span> </div> </div> <div class="product-image" item-data="2"> <img src="https://s-media-cache-ak0.pinimg.com/originals/a3/da/27/a3da27667845ce82f52bd684619ee88f.jpg" /> </div> </div> </div> </div> <div class="itemlist-item-wrapper" onclick="OpenProduct(3);"> <div class="product-details"> <div class=""> <div class="product-info"> <div class="product-title" item-data="3"> LOUNGE CHAIR </div> <div class="product-price" price-data="320.03" item-data="3"> $320<span class="product-price-cents">03</span> </div> </div> <div class="product-image" item-data="3"> <img src="http://cdn.homedit.com/wp-content/uploads/2013/03/spline-swivel-armchair.jpg" /> </div> </div> </div> </div> <div class="itemlist-item-wrapper" onclick="OpenProduct(4);"> <div class="product-details"> <div class=""> <div class="product-info"> <div class="product-title" item-data="4"> LOUNGE CHAIR </div> <div class="product-price" price-data="320.03" item-data="4"> $320<span class="product-price-cents">03</span> </div> </div> <div class="product-image" item-data="4"> <img src="https://s-media-cache-ak0.pinimg.com/originals/a5/47/26/a547269acf071763233c1a1d0743905c.jpg" /> </div> </div> </div> </div> <div class="itemlist-item-wrapper" onclick="OpenProduct(5);"> <div class="product-details"> <div class=""> <div class="product-info"> <div class="product-title" item-data="5"> LOUNGE CHAIR </div> <div class="product-price" price-data="169.49" item-data="5"> $<span class="product-price-dollar">169</span><span class="product-price-cents">49</span> </div> </div> <div class="product-image" item-data="5"> <img src="http://static2.bonluxat.com/cmsense/data/uploads/orig/karim-rashid-pal-chair_8wr8.jpg" /> </div> </div> </div> </div> </div> </div> </body> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script> <script >//Go Back function OpenProduct(i){ var i = $('.product-image[item-data="'+i+'"] img'); var lbi = $('.lightbox-blanket .product-image img'); console.log($(i).attr("src")); $(lbi).attr("src", $(i).attr("src")); // var price = $(i).attr("price-data"); // var lbprice = $('.lightbox-blanket .product-info .product-price'); // if(lbprice){ // price = price.split["."]; // $(lbprice).html("$" + price[0] + "<span class='product-price-cents'>"+price[1] +"</span>"); //} $(".lightbox-blanket").toggle(); $("#product-quantity-input").val("0"); CalcPrice (0); } function GoBack(){ $(".lightbox-blanket").toggle(); } //Calculate new total when the quantity changes. function CalcPrice (qty){ var price = $(".product-price").attr("price-data"); var total = parseFloat((price * qty)).toFixed(2); $(".product-checkout-total-amount").text(total); } //Reduce quantity by 1 if clicked $(document).on("click", ".product-quantity-subtract", function(e){ var value = $("#product-quantity-input").val(); //console.log(value); var newValue = parseInt(value) - 1; if(newValue < 0) newValue=0; $("#product-quantity-input").val(newValue); CalcPrice(newValue); }); //Increase quantity by 1 if clicked $(document).on("click", ".product-quantity-add", function(e){ var value = $("#product-quantity-input").val(); //console.log(value); var newValue = parseInt(value) + 1; $("#product-quantity-input").val(newValue); CalcPrice(newValue); }); $(document).on("blur", "#product-quantity-input", function(e){ var value = $("#product-quantity-input").val(); //console.log(value); CalcPrice(value); }); function AddToCart(e){ e.preventDefault(); var qty = $("#product-quantity-input").val(); if(qty === '0'){return;} var toast = '<div class="toast toast-success">Added '+ qty +' to cart.</div>'; $("body").append(toast); setTimeout(function(){ $(".toast").addClass("toast-transition"); }, 100); setTimeout(function(){ $(".toast").remove(); }, 3500); } //# sourceURL=pen.js </script> </body></html>

Related: See More


Questions / Comments: