<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>
