"card shop"
Bootstrap 3.0.0 Snippet by alejandrosalgadoram

<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/RSH87/pen/RagqEv?depth=everything&order=popularity&page=22&q=product&show_forks=false" /> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css'><link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.2.4/css/simple-line-icons.min.css'> <style class="cp-pen-styles">@import url(https://fonts.googleapis.com/css?family=Nunito:400,300,700); * { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; box-sizing: border-box; } body { background-color: #0b0b0b; font-family: 'Nunito', sans-serif; } nav { position: fixed; z-index: 999; width: 100%; height: 70px; background-color: #ffffff; line-height: 70px; } nav .mini { position: fixed; top: 80px; right: 10px; background: #FFF; padding: 40px; opacity: 0; visibility: hidden; -webkit-transition: opacity .2s ease .2s; transition: opacity .2s ease .2s; } nav .mini.visible { padding: 40px; opacity: 1; visibility: visible; } nav .mini .products { font-weight: bold; font-size: 14px; } nav .mini p { font-size: 11px; display: block; margin: 0; padding: 0; line-height: 20px; } nav .cart { position: relative; float: right; margin-right: 50px; height: 20px; line-height: 70px; font-size: 28px; height: 100%; cursor: pointer; } nav .cart span { height: 100%; float: left; margin-right: 20px; opacity: 1; color: #fff; font-size: 18px; font-family: 'Nunito', sans-serif; } nav .cart span.updateQuantity:before, nav .cart span.updateQuantity:after { top: 0; bottom: 0; opacity: 1; width: 30px; -webkit-transition: all .2s ease, top .3s ease .4s, bottom .3s ease .4s; transition: all .2s ease, top .3s ease .4s, bottom .3s ease .4s; } nav .cart span.update { -webkit-transition: color .2s ease .6s; transition: color .2s ease .6s; color: #000; } nav .cart span.update:before { top: -30px; width: 30px; opacity: 1; -webkit-transition: all .2s ease, top .3s ease .4s, bottom .3s ease .4s; transition: all .2s ease, top .3s ease .4s, bottom .3s ease .4s; } nav .cart span.update:after { top: 30px; width: 30px; opacity: 1; -webkit-transition: all .2s ease, top .3s ease .4s, bottom .3s ease .4s; transition: all .2s ease, top .3s ease .4s, bottom .3s ease .4s; } nav .cart span:before, nav .cart span:after { content: ""; position: absolute; width: 0px; height: 2px; background-color: #0b0b0b; left: -10px; right: 40px; top: 2px; bottom: 0; margin: auto; } nav ul { float: left; } nav ul li { font-weight: bold; display: inline-block; margin-left: 50px; color: #0b0b0b; font-size: 12px; } .container { padding: 20px; padding-top: 100px; text-align: center; } .container .product { position: relative; overflow: hidden; width: 200px; height: 240px; display: inline-block; border-radius: 4px; background-color: rgba(255, 255, 255, 0.45); margin: 20px; padding: 15px; } .container .product img { position: relative; top: -15px; left: -15px; -webkit-transition: all .2s ease; transition: all .2s ease; -webkit-clip-path: polygon(0 100%, 0 0, 100% 0, 100% 70%); clip-path: polygon(0 100%, 0 0, 100% 0, 100% 70%); border-top-right-radius: 4px; border-top-left-radius: 4px; } .container .product img:hover { -webkit-clip-path: polygon(0 100%, 0 0, 100% 0, 100% 100%); clip-path: polygon(0 100%, 0 0, 100% 0, 100% 100%); -webkit-transform: scale(1.1); transform: scale(1.1); } .container .product h2 { text-align: left; color: #fff; font-size: 14px; font-weight: bold; margin-bottom: 4px; } .container .product .description { text-align: left; font-size: 11px; color: #fff; max-height: 23px; overflow: hidden; } .container .product .price { text-align: right; font-size: 18px; color: #fff; margin-top: 6px; } .container .product .btn { position: absolute; font-size: 11px; font-weight: bold; float: right; padding: 10px; border: 2px solid #00fefe; border-radius: 20px; bottom: 10px; right: 10px; color: #00fefe; cursor: pointer; overflow: hidden; -webkit-transition: all .2s ease; transition: all .2s ease; } .container .product .btn.ok { background-color: rgba(0, 254, 254, 0.4); color: #fff; } .container .product .btn.ok:after { content: "\e080"; color: #fff; } .container .product .btn:hover { padding-right: 25px; } .container .product .btn:hover:after { margin-left: 5px; } .container .product .btn:after { font-family: 'simple-line-icons'; content: "\e095"; -webkit-transition: all .2s ease; transition: all .2s ease; position: absolute; color: #00fefe; margin-left: 30px; transition: all .2s ease; } .container .product .quickview { position: absolute; bottom: 20px; font-size: 11px; color: #fff; cursor: pointer; } .container .product .quickview:before { font-family: 'simple-line-icons'; content: "\e05d"; margin-right: 3px; } .quickviewContainer { position: fixed; height: 100vh; width: 400px; background: rgba(0, 0, 0, 0.9); top: 70px; right: -100%; -webkit-transition: all .3s ease; transition: all .3s ease; padding: 30px; color: #fff; } .quickviewContainer .close { height: 20px; width: 20px; float: right; cursor: pointer; } .quickviewContainer .close:before, .quickviewContainer .close:after { content: ""; position: absolute; width: 20px; height: 2px; background-color: #ffF; -webkit-transform: rotate(45deg); transform: rotate(45deg); } .quickviewContainer .close:after { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .quickviewContainer .headline { margin-bottom: 30px; font-size: 18px; } .quickviewContainer .description { font-size: 12px; margin-bottom: 20px; } .quickviewContainer img { display: inline-block; border-radius: 4px; margin: 5px; } .quickviewContainer.active { right: 0; } </style></head><body> <nav> <div class='mini'> <p class='products'>Empty</p> <p class='names'></p> <p class='miniprice'></p> </div> <ul> <li>Home</li> <li>Webshop</li> <li>Contact</li> </ul> <div class='cart icon-basket'> <span class='number'>1</span> </div> </nav> <div class='container'> <div class='product'> <img src='https://placeimg.com/200/100'> <h2 class='header'>Product Name</h2> <p class='description'>Nullam posuere turpis vel lacinia luctus. Donec in efficitur neque. Curabitur consectetur non ipsum in eleifend. Praesent id velit in nisi maximus porta nec vitae odio. Proin vitae magna a massa accumsan venenatis. Donec semper, sem in ullamcorper bibendum, mauris sem imperdiet lorem, tempor aliquet ligula lorem sit amet nibh. Suspendisse potenti.</p> <p class='price'>231,-</p> <div class='btn'>Add to cart</div> <div class='quickview'>Quickview</div> </div> <div class='product'> <img src='https://placeimg.com/200/100'> <h2 class='header'>Product Name</h2> <p class='description'>Nullam posuere turpis vel lacinia luctus. Donec in efficitur neque. Curabitur consectetur non ipsum in eleifend. Praesent id velit in nisi maximus porta nec vitae odio. Proin vitae magna a massa accumsan venenatis. Donec semper, sem in ullamcorper bibendum, mauris sem imperdiet lorem, tempor aliquet ligula lorem sit amet nibh. Suspendisse potenti.</p> <p class='price'>231,-</p> <div class='btn'>Add to cart</div> <div class='quickview'>Quickview</div> </div> <div class='product'> <img src='https://placeimg.com/200/100'> <h2 class='header'>Product Name</h2> <p class='description'>Nullam posuere turpis vel lacinia luctus. Donec in efficitur neque. Curabitur consectetur non ipsum in eleifend. Praesent id velit in nisi maximus porta nec vitae odio. Proin vitae magna a massa accumsan venenatis. Donec semper, sem in ullamcorper bibendum, mauris sem imperdiet lorem, tempor aliquet ligula lorem sit amet nibh. Suspendisse potenti.</p> <p class='price'>231,-</p> <div class='btn'>Add to cart</div> <div class='quickview'>Quickview</div> </div> <div class='product'> <img src='https://placeimg.com/200/100'> <h2 class='header'>Product Name</h2> <p class='description'>Nullam posuere turpis vel lacinia luctus. Donec in efficitur neque. Curabitur consectetur non ipsum in eleifend. Praesent id velit in nisi maximus porta nec vitae odio. Proin vitae magna a massa accumsan venenatis. Donec semper, sem in ullamcorper bibendum, mauris sem imperdiet lorem, tempor aliquet ligula lorem sit amet nibh. Suspendisse potenti.</p> <p class='price'>231,-</p> <div class='btn'>Add to cart</div> <div class='quickview'>Quickview</div> </div> <div class='product'> <img src='https://placeimg.com/200/100'> <h2 class='header'>Product Name</h2> <p class='description'>Nullam posuere turpis vel lacinia luctus. Donec in efficitur neque. Curabitur consectetur non ipsum in eleifend. Praesent id velit in nisi maximus porta nec vitae odio. Proin vitae magna a massa accumsan venenatis. Donec semper, sem in ullamcorper bibendum, mauris sem imperdiet lorem, tempor aliquet ligula lorem sit amet nibh. Suspendisse potenti.</p> <p class='price'>231,-</p> <div class='btn'>Add to cart</div> <div class='quickview'>Quickview</div> </div> <div class='product'> <img src='https://placeimg.com/200/100'> <h2 class='header'>Product Name</h2> <p class='description'>Nullam posuere turpis vel lacinia luctus. Donec in efficitur neque. Curabitur consectetur non ipsum in eleifend. Praesent id velit in nisi maximus porta nec vitae odio. Proin vitae magna a massa accumsan venenatis. Donec semper, sem in ullamcorper bibendum, mauris sem imperdiet lorem, tempor aliquet ligula lorem sit amet nibh. Suspendisse potenti.</p> <p class='price'>231,-</p> <div class='btn'>Add to cart</div> <div class='quickview'>Quickview</div> </div> <div class='product'> <img src='https://placeimg.com/200/100'> <h2 class='header'>Product Name</h2> <p class='description'>Nullam posuere turpis vel lacinia luctus. Donec in efficitur neque. Curabitur consectetur non ipsum in eleifend. Praesent id velit in nisi maximus porta nec vitae odio. Proin vitae magna a massa accumsan venenatis. Donec semper, sem in ullamcorper bibendum, mauris sem imperdiet lorem, tempor aliquet ligula lorem sit amet nibh. Suspendisse potenti.</p> <p class='price'>231,-</p> <div class='btn'>Add to cart</div> <div class='quickview'>Quickview</div> </div> <div class='product'> <img src='https://placeimg.com/200/100'> <h2 class='header'>Product Name</h2> <p class='description'>Nullam posuere turpis vel lacinia luctus. Donec in efficitur neque. Curabitur consectetur non ipsum in eleifend. Praesent id velit in nisi maximus porta nec vitae odio. Proin vitae magna a massa accumsan venenatis. Donec semper, sem in ullamcorper bibendum, mauris sem imperdiet lorem, tempor aliquet ligula lorem sit amet nibh. Suspendisse potenti.</p> <p class='price'>231,-</p> <div class='btn'>Add to cart</div> <div class='quickview'>Quickview</div> </div> <div class='product'> <img src='https://placeimg.com/200/100'> <h2 class='header'>Product Name</h2> <p class='description'>Nullam posuere turpis vel lacinia luctus. Donec in efficitur neque. Curabitur consectetur non ipsum in eleifend. Praesent id velit in nisi maximus porta nec vitae odio. Proin vitae magna a massa accumsan venenatis. Donec semper, sem in ullamcorper bibendum, mauris sem imperdiet lorem, tempor aliquet ligula lorem sit amet nibh. Suspendisse potenti.</p> <p class='price'>231,-</p> <div class='btn'>Add to cart</div> <div class='quickview'>Quickview</div> </div> <div class='product'> <img src='https://placeimg.com/200/100'> <h2 class='header'>Product Name</h2> <p class='description'>Nullam posuere turpis vel lacinia luctus. Donec in efficitur neque. Curabitur consectetur non ipsum in eleifend. Praesent id velit in nisi maximus porta nec vitae odio. Proin vitae magna a massa accumsan venenatis. Donec semper, sem in ullamcorper bibendum, mauris sem imperdiet lorem, tempor aliquet ligula lorem sit amet nibh. Suspendisse potenti.</p> <p class='price'>231,-</p> <div class='btn'>Add to cart</div> <div class='quickview'>Quickview</div> </div> <div class='product'> <img src='https://placeimg.com/200/100'> <h2 class='header'>Product Name</h2> <p class='description'>Nullam posuere turpis vel lacinia luctus. Donec in efficitur neque. Curabitur consectetur non ipsum in eleifend. Praesent id velit in nisi maximus porta nec vitae odio. Proin vitae magna a massa accumsan venenatis. Donec semper, sem in ullamcorper bibendum, mauris sem imperdiet lorem, tempor aliquet ligula lorem sit amet nibh. Suspendisse potenti.</p> <p class='price'>231,-</p> <div class='btn'>Add to cart</div> <div class='quickview'>Quickview</div> </div> <div class='product'> <img src='https://placeimg.com/200/100'> <h2 class='header'>Product Name</h2> <p class='description'>Nullam posuere turpis vel lacinia luctus. Donec in efficitur neque. Curabitur consectetur non ipsum in eleifend. Praesent id velit in nisi maximus porta nec vitae odio. Proin vitae magna a massa accumsan venenatis. Donec semper, sem in ullamcorper bibendum, mauris sem imperdiet lorem, tempor aliquet ligula lorem sit amet nibh. Suspendisse potenti.</p> <p class='price'>231,-</p> <div class='btn'>Add to cart</div> <div class='quickview'>Quickview</div> </div> <div class='product'> <img src='https://placeimg.com/200/100'> <h2 class='header'>Product Name</h2> <p class='description'>Nullam posuere turpis vel lacinia luctus. Donec in efficitur neque. Curabitur consectetur non ipsum in eleifend. Praesent id velit in nisi maximus porta nec vitae odio. Proin vitae magna a massa accumsan venenatis. Donec semper, sem in ullamcorper bibendum, mauris sem imperdiet lorem, tempor aliquet ligula lorem sit amet nibh. Suspendisse potenti.</p> <p class='price'>231,-</p> <div class='btn'>Add to cart</div> <div class='quickview'>Quickview</div> </div> <div class='product'> <img src='https://placeimg.com/200/100'> <h2 class='header'>Product Name</h2> <p class='description'>Nullam posuere turpis vel lacinia luctus. Donec in efficitur neque. Curabitur consectetur non ipsum in eleifend. Praesent id velit in nisi maximus porta nec vitae odio. Proin vitae magna a massa accumsan venenatis. Donec semper, sem in ullamcorper bibendum, mauris sem imperdiet lorem, tempor aliquet ligula lorem sit amet nibh. Suspendisse potenti.</p> <p class='price'>231,-</p> <div class='btn'>Add to cart</div> <div class='quickview'>Quickview</div> </div> <div class='product'> <img src='https://placeimg.com/200/100'> <h2 class='header'>Product Name</h2> <p class='description'>Nullam posuere turpis vel lacinia luctus. Donec in efficitur neque. Curabitur consectetur non ipsum in eleifend. Praesent id velit in nisi maximus porta nec vitae odio. Proin vitae magna a massa accumsan venenatis. Donec semper, sem in ullamcorper bibendum, mauris sem imperdiet lorem, tempor aliquet ligula lorem sit amet nibh. Suspendisse potenti.</p> <p class='price'>231,-</p> <div class='btn'>Add to cart</div> <div class='quickview'>Quickview</div> </div> </div> <div class='quickviewContainer'> <div class='close'></div> <h2 class='headline'></h2> <p class='description'></p> <img src='https://placeimg.com/100/100'> <img src='https://placeimg.com/100/100'> <img src='https://placeimg.com/100/100'> </div> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script> <script >var cartCount = 0, buy = $('.btn'), span = $('.number'), cart = $('.cart'), quickview = $('.quickviewContainer'), quickViewBtn = $('.quickview'), close = $('.quickviewContainer .close'), minicart = [], totalPrice = [], miniCartPrice; buy.on('click', addToCart); quickViewBtn.on('click', quickView); cart.on('click', showMiniCart); close.on('click', function(){ quickview.removeClass('active'); }); function quickView() { var description = $(this).parent().find('.description').text(), header = $(this).parent().find('.header').text(), price = $(this).find('.price'), quickViewHeader = $('.quickviewContainer .headline'), quickViewDescription = $('.quickviewContainer .description'); clearTimeout(timeQuick); if(quickview.hasClass('active')){ quickview.removeClass('active'); var timeQuick = setTimeout(function(){ quickview.addClass('active'); }, 300); } else{ quickview.addClass('active'); } quickViewHeader.text(header); quickViewDescription.text(description); } function showMiniCart() { $('.mini').toggleClass('visible'); } function addToCart() { var self = $(this), productName = $(this).parent().find('.header').text(), miniCartNames = $('.products'), names = $('.names'), price = $(this).parent().find('.price').text(), priceInt = parseInt(price); totalPrice.push(priceInt); miniCartPrice = totalPrice.reduce(function(a,b){ return a+b }); $('.miniprice').text('Total amount: ' + miniCartPrice + ",-"); minicart.push(productName); lastProduct = minicart[minicart.length - 1]; miniCartNames.text('Your cart lines: '); names.append('<p>' + lastProduct + '</p>'); cartCount++; span.text(cartCount); clearTimeout(time); if(span.hasClass('update')){ span.removeClass('update'); span.addClass('updateQuantity'); var time = setTimeout(function(){ span.removeClass('updateQuantity'); span.addClass('update'); }, 700); } else{ span.addClass('update'); } if (cartCount == 1){ cart.toggleClass('icon-basket icon-basket-loaded'); } $(this).addClass('ok'); var timeOk = setTimeout(function(){ self.removeClass('ok'); }, 1000); } //# sourceURL=pen.js </script> </body></html>

Related: See More


Questions / Comments: