<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/alex_rodrigues/pen/ABGdg?depth=everything&order=popularity&page=32&q=product&show_forks=false" />
<script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style class="cp-pen-styles">@import url(https://fonts.googleapis.com/css?family=Droid+Serif:400,400italic|Montserrat:400,700);
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font: inherit;
font-size: 100%;
vertical-align: baseline;
}
html {
line-height: 1;
}
ol, ul {
list-style: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
vertical-align: middle;
}
q, blockquote {
quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after {
content: "";
content: none;
}
a img {
border: none;
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
display: block;
}
* {
box-sizing: border-box;
}
body {
color: #333;
-webkit-font-smoothing: antialiased;
font-family: "Droid Serif", serif;
}
img {
max-width: 100%;
}
.cf:before, .cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
.cf {
*zoom: 1;
}
.wrap {
width: 75%;
max-width: 960px;
margin: 0 auto;
padding: 5% 0;
margin-bottom: 5em;
}
.projTitle {
font-family: "Montserrat", sans-serif;
font-weight: bold;
text-align: center;
font-size: 2em;
padding: 1em 0;
border-bottom: 1px solid #dadada;
letter-spacing: 3px;
text-transform: uppercase;
}
.projTitle span {
font-family: "Droid Serif", serif;
font-weight: normal;
font-style: italic;
text-transform: lowercase;
color: #777;
}
.heading {
padding: 1em 0;
border-bottom: 1px solid #D0D0D0;
}
.heading h1 {
font-family: "Droid Serif", serif;
font-size: 2em;
float: left;
}
.heading a.continue:link, .heading a.continue:visited {
text-decoration: none;
font-family: "Montserrat", sans-serif;
letter-spacing: -.015em;
font-size: .75em;
padding: 1em;
color: #fff;
background: #82ca9c;
font-weight: bold;
border-radius: 50px;
float: right;
text-align: right;
-webkit-transition: all 0.25s linear;
-moz-transition: all 0.25s linear;
-ms-transition: all 0.25s linear;
-o-transition: all 0.25s linear;
transition: all 0.25s linear;
}
.heading a.continue:after {
content: "\276f";
padding: .5em;
position: relative;
right: 0;
-webkit-transition: all 0.15s linear;
-moz-transition: all 0.15s linear;
-ms-transition: all 0.15s linear;
-o-transition: all 0.15s linear;
transition: all 0.15s linear;
}
.heading a.continue:hover, .heading a.continue:focus, .heading a.continue:active {
background: #f69679;
}
.heading a.continue:hover:after, .heading a.continue:focus:after, .heading a.continue:active:after {
right: -10px;
}
.tableHead {
display: table;
width: 100%;
font-family: "Montserrat", sans-serif;
font-size: .75em;
}
.tableHead li {
display: table-cell;
padding: 1em 0;
text-align: center;
}
.tableHead li.prodHeader {
text-align: left;
}
.cart {
padding: 1em 0;
}
.cart .items {
display: block;
width: 100%;
vertical-align: middle;
padding: 1.5em;
border-bottom: 1px solid #fafafa;
}
.cart .items.even {
background: #fafafa;
}
.cart .items .infoWrap {
display: table;
width: 100%;
}
.cart .items .cartSection {
display: table-cell;
vertical-align: middle;
}
.cart .items .cartSection .itemNumber {
font-size: .75em;
color: #777;
margin-bottom: .5em;
}
.cart .items .cartSection h3 {
font-size: 1em;
font-family: "Montserrat", sans-serif;
font-weight: bold;
text-transform: uppercase;
letter-spacing: .025em;
}
.cart .items .cartSection p {
display: inline-block;
font-size: .85em;
color: #777777;
font-family: "Montserrat", sans-serif;
}
.cart .items .cartSection p .quantity {
font-weight: bold;
color: #333;
}
.cart .items .cartSection p.stockStatus {
color: #82CA9C;
font-weight: bold;
padding: .5em 0 0 1em;
text-transform: uppercase;
}
.cart .items .cartSection p.stockStatus.out {
color: #F69679;
}
.cart .items .cartSection .itemImg {
width: 4em;
float: left;
}
.cart .items .cartSection.qtyWrap, .cart .items .cartSection.prodTotal {
text-align: center;
}
.cart .items .cartSection.qtyWrap p, .cart .items .cartSection.prodTotal p {
font-weight: bold;
font-size: 1.25em;
}
.cart .items .cartSection input.qty {
width: 2em;
text-align: center;
font-size: 1em;
padding: .25em;
margin: 1em .5em 0 0;
}
.cart .items .cartSection .itemImg {
width: 8em;
display: inline;
padding-right: 1em;
}
.special {
display: block;
font-family: "Montserrat", sans-serif;
}
.special .specialContent {
padding: 1em 1em 0;
display: block;
margin-top: .5em;
border-top: 1px solid #dadada;
}
.special .specialContent:before {
content: "\21b3";
font-size: 1.5em;
margin-right: 1em;
color: #6f6f6f;
font-family: helvetica, arial, sans-serif;
}
a.remove {
text-decoration: none;
font-family: "Montserrat", sans-serif;
color: #ffffff;
font-weight: bold;
background: #e0e0e0;
padding: .5em;
font-size: .75em;
display: inline-block;
border-radius: 100%;
line-height: .85;
-webkit-transition: all 0.25s linear;
-moz-transition: all 0.25s linear;
-ms-transition: all 0.25s linear;
-o-transition: all 0.25s linear;
transition: all 0.25s linear;
}
a.remove:hover {
background: #f30;
}
.promoCode {
border: 2px solid #efefef;
float: left;
width: 35%;
padding: 2%;
}
.promoCode label {
display: block;
width: 100%;
font-style: italic;
font-size: 1.15em;
margin-bottom: .5em;
letter-spacing: -.025em;
}
.promoCode input {
width: 85%;
font-size: 1em;
padding: .5em;
float: left;
border: 1px solid #dadada;
}
.promoCode input:active, .promoCode input:focus {
outline: 0;
}
.promoCode a.btn {
float: left;
width: 15%;
padding: .75em 0;
border-radius: 0 1em 1em 0;
text-align: center;
border: 1px solid #82ca9c;
}
.promoCode a.btn:hover {
border: 1px solid #f69679;
background: #f69679;
}
.btn:link, .btn:visited {
text-decoration: none;
font-family: "Montserrat", sans-serif;
letter-spacing: -.015em;
font-size: 1em;
padding: 1em 3em;
color: #fff;
background: #82ca9c;
font-weight: bold;
border-radius: 50px;
float: right;
text-align: right;
-webkit-transition: all 0.25s linear;
-moz-transition: all 0.25s linear;
-ms-transition: all 0.25s linear;
-o-transition: all 0.25s linear;
transition: all 0.25s linear;
}
.btn:after {
content: "\276f";
padding: .5em;
position: relative;
right: 0;
-webkit-transition: all 0.15s linear;
-moz-transition: all 0.15s linear;
-ms-transition: all 0.15s linear;
-o-transition: all 0.15s linear;
transition: all 0.15s linear;
}
.btn:hover, .btn:focus, .btn:active {
background: #f69679;
}
.btn:hover:after, .btn:focus:after, .btn:active:after {
right: -10px;
}
.promoCode .btn {
font-size: .85em;
paddding: .5em 2em;
}
/* TOTAL AND CHECKOUT */
.subtotal {
float: right;
width: 35%;
}
.subtotal .totalRow {
padding: .5em;
text-align: right;
}
.subtotal .totalRow.final {
font-size: 1.25em;
font-weight: bold;
}
.subtotal .totalRow span {
display: inline-block;
padding: 0 0 0 1em;
text-align: right;
}
.subtotal .totalRow .label {
font-family: "Montserrat", sans-serif;
font-size: .85em;
text-transform: uppercase;
color: #777;
}
.subtotal .totalRow .value {
letter-spacing: -.025em;
width: 35%;
}
@media only screen and (max-width: 39.375em) {
.wrap {
width: 98%;
padding: 2% 0;
}
.projTitle {
font-size: 1.5em;
padding: 10% 5%;
}
.heading {
padding: 1em;
font-size: 90%;
}
.cart .items .cartSection {
width: 90%;
display: block;
float: left;
}
.cart .items .cartSection.qtyWrap {
width: 10%;
text-align: center;
padding: .5em 0;
float: right;
}
.cart .items .cartSection.qtyWrap:before {
content: "QTY";
display: block;
font-family: "Montserrat", sans-serif;
padding: .25em;
font-size: .75em;
}
.cart .items .cartSection.prodTotal, .cart .items .cartSection.removeWrap {
display: none;
}
.cart .items .cartSection .itemImg {
width: 25%;
}
.promoCode, .subtotal {
width: 100%;
}
a.btn.continue {
width: 100%;
text-align: center;
}
}
</style></head><body>
<div class="wrap cf">
<h1 class="projTitle">Responsive Table<span>-Less</span> Shopping Cart</h1>
<div class="heading cf">
<h1>My Cart</h1>
<a href="#" class="continue">Continue Shopping</a>
</div>
<div class="cart">
<!-- <ul class="tableHead">
<li class="prodHeader">Product</li>
<li>Quantity</li>
<li>Total</li>
<li>Remove</li>
</ul>-->
<ul class="cartWrap">
<li class="items odd">
<div class="infoWrap">
<div class="cartSection">
<img src="http://lorempixel.com/output/technics-q-c-300-300-4.jpg" alt="" class="itemImg" />
<p class="itemNumber">#QUE-007544-002</p>
<h3>Item Name 1</h3>
<p> <input type="text" class="qty" placeholder="3"/> x $5.00</p>
<p class="stockStatus"> In Stock</p>
</div>
<div class="prodTotal cartSection">
<p>$15.00</p>
</div>
<div class="cartSection removeWrap">
<a href="#" class="remove">x</a>
</div>
</div>
</li>
<li class="items even">
<div class="infoWrap">
<div class="cartSection">
<img src="http://lorempixel.com/output/technics-q-c-300-300-4.jpg" alt="" class="itemImg" />
<p class="itemNumber">#QUE-007544-002</p>
<h3>Item Name 1</h3>
<p> <input type="text" class="qty" placeholder="3"/> x $5.00</p>
<p class="stockStatus"> In Stock</p>
</div>
<div class="prodTotal cartSection">
<p>$15.00</p>
</div>
<div class="cartSection removeWrap">
<a href="#" class="remove">x</a>
</div>
</div>
</li>
<li class="items odd">
<div class="infoWrap">
<div class="cartSection">
<img src="http://lorempixel.com/output/technics-q-c-300-300-4.jpg" alt="" class="itemImg" />
<p class="itemNumber">#QUE-007544-002</p>
<h3>Item Name 1</h3>
<p> <input type="text" class="qty" placeholder="3"/> x $5.00</p>
<p class="stockStatus out"> Out of Stock</p>
</div>
<div class="prodTotal cartSection">
<p>$15.00</p>
</div>
<div class="cartSection removeWrap">
<a href="#" class="remove">x</a>
</div>
</div>
</li>
<li class="items even">
<div class="infoWrap">
<div class="cartSection info">
<img src="http://lorempixel.com/output/technics-q-c-300-300-4.jpg" alt="" class="itemImg" />
<p class="itemNumber">#QUE-007544-002</p>
<h3>Item Name 1</h3>
<p> <input type="text" class="qty" placeholder="3"/> x $5.00</p>
<p class="stockStatus"> In Stock</p>
</div>
<div class="prodTotal cartSection">
<p>$15.00</p>
</div>
<div class="cartSection removeWrap">
<a href="#" class="remove">x</a>
</div>
</div>
<div class="special"><div class="specialContent">Free gift with purchase!, gift wrap, etc!!</div></div>
</li>
<!--<li class="items even">Item 2</li>-->
</ul>
</div>
<div class="promoCode"><label for="promo">Have A Promo Code?</label><input type="text" name="promo" placholder="Enter Code" />
<a href="#" class="btn"></a></div>
<div class="subtotal cf">
<ul>
<li class="totalRow"><span class="label">Subtotal</span><span class="value">$35.00</span></li>
<li class="totalRow"><span class="label">Shipping</span><span class="value">$5.00</span></li>
<li class="totalRow"><span class="label">Tax</span><span class="value">$4.00</span></li>
<li class="totalRow final"><span class="label">Total</span><span class="value">$44.00</span></li>
<li class="totalRow"><a href="#" class="btn continue">Checkout</a></li>
</ul>
</div>
</div>
<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 >// Remove Items From Cart
$('a.remove').click(function(){
event.preventDefault();
$( this ).parent().parent().parent().hide( 400 );
})
// Just for testing, show all items
$('a.btn.continue').click(function(){
$('li.items').show(400);
})
//# sourceURL=pen.js
</script>
</body></html>
