"shop card"
Bootstrap 3.0.0 Snippet by evarevirus

Post to Facebook Tweet this

<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 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/MariamMassadeh/pen/Bmwvn?limit=all&page=31&q=shop" /> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'><script src='https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js'></script> <style class="cp-pen-styles">body { background-color:#B8C8B7; padding:0; margin:0; font-family:tahoma; cursor:default; } .cart { cursor:pointer; background-color:#E7EDE5; border-radius:50%; width:50px; height:50px; margin:25px auto; border:1px solid #fff; background-image:url("http://dc699.4shared.com/img/168tI2yV/s3/140c6403f50/cart_2.png"); background-position:center center; background-repeat:no-repeat; box-shadow: 0px -1px 0px 5px #C9D5C7 ; } .cart:hover,.skin { box-shadow: 0px -1px 0px 5px rgba(237, 175, 68, 0.37) ; -webkit-transition: all 2s; -moz-transition: all 2s; transition: all 2s; } .list { position:absolute; height:150px; width:264px; width:0px; background-color:transparent; margin-top:-10px; left:50%; margin-left:-90px; cursor:default; opacity:0; } .topPart,.downPart { background-color:#F1F6F0; } .topPart { width:172px; height:40px; border-radius:10px 10px 0px 0px; border:1px solid #B8CDB5; border-bottom:none; box-shadow: 0px -5px 0px 5px #CCD8CA ; position:absolute; z-index:2; } .topPart:before { content: ''; position: absolute; width: 2px; height: 2px; border: 5px solid transparent; border-bottom-color:#F1F6F0; margin-top: -12px; margin-left:86px; } .downPart { width:100%; border:1px solid #B8CDB5; border-bottom:none; box-shadow: 0px 0px 0px 5px #CCD8CA ; position:absolute; margin-top:40px; z-index:1; border-radius:0px 5px 5px 5px; } .num { background-color:#FFCE79; width:16px; height:16px; border-radius:50%; border:1px solid #EDAF44; text-align:center; font-size:11px; color:#fff; position:absolute; margin-top:-30px; margin-left:145px; } h1 { font-weight:bold; font-size:13px; color:#A3B2A1; width:140px; padding:5px; background-image:url("http://dc403.4shared.com/img/g74jcqwh/s3/140c6845cd0/cart_3.png"); background-repeat:no-repeat; padding-left:30px; background-position:5px center; } .imgContainer { text-align:center; width:50px; height:50px; } .imgContainer img { width:20p; height:20px; padding:5px; border:2px solid #D3DDD2; } .nameContainer { color:#A9B7A7; font-size:13px; font-weight:lighter; width:190px; } .nameContainer span { color:#EDAF44 } .x { color:#FF7A58; width:10px; font-size:11px; font-weight:bold; cursor:pointer; } .hr { border-bottom:1px solid #B8CDB5; } b { color:#8FA08D; font-size:11px; margin-left:5px; } input[type="button"] { background-color:#FFD48A; border:1px solid #EDA832; padding-left:10px; padding-right:10px; color:#fff; font-size:11px; font-weight:bold; border-radius:50px; line-height:20px; margin-right:10px; float:right; margin-top:2px; } input[type="button"]:hover { border:1px solid #fff; background-color:#A3B2A1; -webkit-transition: all 2s; -moz-transition: all 2s; transition: all 2s; } .temp {position: absolute; width: 250px; left: 50%; margin-left: -86px; top:143px; z-index: 9; } .tempSkin { top:600px; }</style></head><body> <div class="cart" onclick="showCart(this)"> </div> <div class="temp"></div> <div class="list"> <div class="topPart"> <h1>SHOPPING CART</h1> <div class="num">2</div> </div> <div class="downPart"> <table> <tbody> <tr> <td class="imgContainer"> <img src="https://icomoon.io/app/img/favicon96.png"/> </td> <td class="nameContainer"> icoMoon App Collection <br/> <span>$ 0</span> </td> <td class="x" onclick="x(this)"> x </td> </tr> <tr> <td colspan="3" class="hr"> </td> </tr> <tr style="line-height:30px;"> <td> <b>TOTAL:</b> </td> <td colspan="2" style="color:#B8C4B6;font-size:12px;width:200px;"> $ 9999 <input type="button" value="Checkout"/> </td> </tr> </tbody> </table> </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 >function showCart(field) { if($(field).hasClass("skin")) { $(field).removeClass("skin"); $(".list").animate({width:'0px',opacity:'0'},600); } else { $(field).addClass("skin"); $(".list").animate({width:'264px',opacity:'1'},600); } } function x(field) { var store=$(field).closest("tr").html(); $(".temp").addClass("tempSkin").append(store).delay(600).animate({top:'-600px'}).removeClass("tempSkin"); $(field).delay(400).closest("tr").remove(); } //# sourceURL=pen.js </script> </body></html>

Related: See More

Rotating CSS Card
bootstrap 4 card
Card Styles
Bootstrap Social Card

Questions / Comments: