"card"
Bootstrap 3.0.0 Snippet by adarwash2012

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/danilocavalli/pen/bqmbJo?depth=everything&order=popularity&page=12&q=e-commerce&show_forks=false" /> <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Roboto:100,300,500,700"rel="stylesheet"'><link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css'> <style class="cp-pen-styles">body { background: #93AAB6; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; height: auto; } .card { margin-top: 150px; border-radius: 20px; box-shadow: -7px 7px 20px 0 rgba(0, 0, 0, 0.5); } .card .card-head { border-radius: 20px 20px 0 0; display: block; width: 400px; height: 300px; background-image: -webkit-linear-gradient(311deg, #04162E 10%, #95A2AD 100%); background-image: linear-gradient(139deg, #04162E 10%, #95A2AD 100%); } .card .card-head .logo { width: 60px; padding: 20px 0 0 20px; } .card .card-head .light { font-weight: 100; } .card .card-head h2 { font-size: 1.7rem; color: #fff; font-family: roboto; padding: 20px 0 0 20px; letter-spacing: 3px; } .card .card-head p { color: #fff; font-family: roboto; text-transform: uppercase; font-weight: 100; padding-left: 20px; margin: 0; letter-spacing: 3px; } .card .card-head .shoe { -webkit-transform: rotate(-2deg); transform: rotate(-2deg); width: 470px; position: absolute; top: 4rem; right: -7rem; z-index: 10; } .card .card-head .nmd { font-size: 9rem; color: #fff; font-family: roboto; padding: 0; margin: 0; text-transform: uppercase; opacity: .2; letter-spacing: -10px; padding-left: 10px; } .card .card-body h3, .card .card-body p { font-family: roboto; color: #132438; padding-left: 20px; } .card .card-body h3 { padding-top: 20px; text-transform: uppercase; font-size: 1.3rem; } .card .card-body h3 .badge { margin-left: 5px; background: red; } .card .card-body p { padding-top: 10px; } .card-body p { margin: 0; } .card-body .rating { padding: 0; margin-left: 20px; } .card-body .rating ul { display: inline; text-decoration: none; padding: 0; } .card-body .rating .star-grey { opacity: .4; } .card-body .size, .card-body .colours { display: block; font-family: roboto; color: #132438; padding: 20px 0 10px 20px; text-transform: uppercase; letter-spacing: 1px; } .card-body .number ul { display: inline; color: #132438; padding: 0; margin-left: 20px; } .card-body .number .selected { background: #132438; color: #fff; border-radius: 50%; padding: 10px 15px; } .colorway ul { display: inline-block; widtgh: 20px; height: 40px; border-radius: 50%; margin-left: 20px; } .colorway ul.celeste { background: #93AAB6; } .colorway ul.azzurro { background: #7E9CBB; } .colorway ul.blu { background: #132438; border: 1px solid #132438; } .price { display: block; position: absolute; background: #132438; width: 170px; height: 50px; border-radius: 10px; text-align: center; left: 260px; bottom: 25px; box-shadow: 0px 7px 20px 0 rgba(0, 0, 0, 0.5); } .price #euro { color: #fff; font-family: roboto; font-weight: 300; font-size: 2em; margin: auto; } </style></head><body> <body> <div class="card"> <div class="card-head"> <img class="logo" src="http://imgh.us/LOGO_529.png"> <h2>NMD_XR1 <span class="light">PRIMEKNIT</span></h2> <p class="font-weight-light">running shoes</p> <img class="shoe" src="http://imgh.us/IMG_NMD_rotate.png"> <span class="nmd">nmd</span> </div> <div class="card-body"> <section> <h3> nmd_xr1 primeknit <span class="badge badge-default">New</span></h3> <p>Adidas Primeknit upper wraps the foot<br> in adaptive support and ultralight comfort.</p> </section> <section> <div class="rating"> <ul>&#9733</ul> <ul>&#9733</ul> <ul>&#9733</ul> <ul>&#9733</ul> <ul class="star-grey">&#9733</ul> </div> </section> <section> <span class="size">size</span> <div class="number"> <ul>7</ul> <ul>8</ul> <ul class="selected">9</ul> <ul>10</ul> <ul>11</ul> </div> </section> <section> <span class="colours">colours</span> <div class="colorway"> <ul class="celeste"></ul> <ul class="azzurro"></ul> <ul class="picked blu "></ul> </div> <div class="price"> <span id="euro">€ 159,95</span> </div> </section> </div> </div> </body> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script> <script >var price; var quantity; var total; price = 159; quantity = 1; total = price * quantity; var el = document.getElementById('euro'); el.textContent = '€ ' + total; //# sourceURL=pen.js </script> </body></html>

Related: See More

Vue Material Kit
bootstrap 4 card
Card Styles
Bootstrap Social Card

Questions / Comments: