"chop card"
Bootstrap 3.0.0 Snippet by evarevirus

<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/jakestuts/pen/qKvew?depth=everything&order=popularity&page=27&q=iframe&show_forks=false" /> <style class="cp-pen-styles">@import url(https://fonts.googleapis.com/css?family=Fredoka+One); 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-size: 100%; font: inherit; vertical-align: baseline; outline: none; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } html { overflow-y: scroll; } body { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 62.5%; line-height: 1; color: #414141; background: #caccf7 url('https://i.imgur.com/Syv2IVk.png'); /* https://subtlepatterns.com/old-map/ */ padding: 25px 0; } ::selection { background: #bdc0e8; } ::-moz-selection { background: #bdc0e8; } ::-webkit-selection { background: #bdc0e8; } br { display: block; line-height: 1.6em; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } ol, ul { list-style: none; } input, textarea { -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; outline: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } strong, b { font-weight: bold; } em, i { font-style: italic; } table { border-collapse: collapse; border-spacing: 0; } img { border: 0; max-width: 100%; } h1 { font-family: 'Fredoka One', Helvetica, Tahoma, sans-serif; color: #fff; text-shadow: 1px 2px 0 #7184d8; font-size: 3.5em; line-height: 1.1em; padding: 6px 0; font-weight: normal; text-align: center; } /* page structure */ #w { display: block; width: 600px; margin: 0 auto; } #title { display: block; width: 100%; background: #95a6d6; padding: 10px 0; -webkit-border-top-right-radius: 6px; -webkit-border-top-left-radius: 6px; -moz-border-radius-topright: 6px; -moz-border-radius-topleft: 6px; border-top-right-radius: 6px; border-top-left-radius: 6px; } #page { display: block; background: #fff; padding: 15px 0; -webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.4); -moz-box-shadow: 0 2px 4px rgba(0,0,0,0.4); } /** cart table **/ #cart { display: block; border-collapse: collapse; margin: 0; width: 100%; font-size: 1.2em; color: #444; } #cart thead th { padding: 8px 0; font-weight: bold; } #cart thead th.first { width: 175px; } #cart thead th.second { width: 45px; } #cart thead th.third { width: 230px; } #cart thead th.fourth { width: 130px; } #cart thead th.fifth { width: 20px; } #cart tbody td { text-align: center; margin-top: 4px; } tr.productitm { height: 65px; line-height: 65px; border-bottom: 1px solid #d7dbe0; } #cart tbody td img.thumb { vertical-align: bottom; border: 1px solid #ddd; margin-bottom: 4px; } .qtyinput { width: 33px; height: 22px; border: 1px solid #a3b8d3; background: #dae4eb; color: #616161; text-align: center; } tr.totalprice, tr.extracosts { height: 35px; line-height: 35px; } tr.extracosts { background: #e4edf4; } .remove { /* http://findicons.com/icon/261449/trash_can?id=397422 */ cursor: pointer; position: relative; right: 12px; top: 5px; } .light { color: #888b8d; text-shadow: 1px 1px 0 rgba(255,255,255,0.45); font-size: 1.1em; font-weight: normal; } .thick { color: #272727; font-size: 1.7em; font-weight: bold; } /** submit btn **/ tr.checkoutrow { background: #cfdae8; border-top: 1px solid #abc0db; border-bottom: 1px solid #abc0db; } td.checkout { padding: 12px 0; padding-top: 20px; width: 100%; text-align: right; } /* https://codepen.io/guvootes/pen/eyDAb */ #submitbtn { width: 150px; height: 35px; outline: none; border: none; border-radius: 5px; margin: 0 0 10px 0; font-size: 1.3em; letter-spacing: 0.05em; font-family: Arial, Tahoma, sans-serif; color: #fff; text-shadow: 1px 1px 0 rgba(0,0,0,0.2); cursor: pointer; overflow: hidden; border-bottom: 1px solid #0071ff; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #66aaff), color-stop(100%, #4d9cff)); background-image: -webkit-linear-gradient(#66aaff, #4d9cff); background-image: -moz-linear-gradient(#66aaff, #4d9cff); background-image: -o-linear-gradient(#66aaff, #4d9cff); background-image: linear-gradient(#66aaff, #4d9cff); } #submitbtn:hover { background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #4d9cff), color-stop(100%, #338eff)); background-image: -webkit-linear-gradient(#4d9cff, #338eff); background-image: -moz-linear-gradient(#4d9cff, #338eff); background-image: -o-linear-gradient(#4d9cff, #338eff); background-image: linear-gradient(#4d9cff, #338eff); } #submitbtn:active { border-bottom: 0; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #338eff), color-stop(100%, #4d9cff)); background-image: -webkit-linear-gradient(#338eff, #4d9cff); background-image: -moz-linear-gradient(#338eff, #4d9cff); background-image: -o-linear-gradient(#338eff, #4d9cff); background-image: linear-gradient(#338eff, #4d9cff); -webkit-box-shadow: inset 0 1px 3px 1px rgba(0,0,0,0.25); -moz-box-shadow: inset 0 1px 3px 1px rgba(0,0,0,0.25); box-shadow: inset 0 1px 3px 1px rgba(0,0,0,0.25); }</style></head><body> <body> <div id="w"> <header id="title"> <h1>HTML5/CSS3 Shopping Cart UI</h1> </header> <div id="page"> <table id="cart"> <thead> <tr> <th class="first">Photo</th> <th class="second">Qty</th> <th class="third">Product</th> <th class="fourth">Line Total</th> <th class="fifth"> </th> </tr> </thead> <tbody> <!-- shopping cart contents --> <tr class="productitm"> <!-- http://www.inkydeals.com/deal/ginormous-bundle/ --> <td><img src="https://i.imgur.com/8goC6r6.png" class="thumb"></td> <td><input type="number" value="1" min="0" max="99" class="qtyinput"></td> <td>Design Bundle Package</td> <td>$79.00</td> <td><span class="remove"><img src="https://i.imgur.com/h1ldGRr.png" alt="X"></span></td> </tr> <tr class="productitm"> <!-- http://www.amazon.com/Stuff-My-Cat-The-Book/dp/0811855384 --> <td><img src="https://i.imgur.com/RkzoXzZ.png" class="thumb"></td> <td><input type="number" value="1" min="0" max="99" class="qtyinput"></td> <td>Stuff on my Cat: The Book</td> <td>$8.95</td> <td><span class="remove"><img src="https://i.imgur.com/h1ldGRr.png" alt="X"></span></td> </tr> <tr class="productitm"> <!-- http://www.amazon.com/SpongeBob-SquarePants-The-First-Episodes/dp/B002DYJTVW --> <td><img src="https://i.imgur.com/vZ26Uwy.png" class="thumb"></td> <td><input type="number" value="1" min="0" max="99" class="qtyinput"></td> <td>SpongeBob's First 100 Episodes</td> <td>$75.00</td> <td><span class="remove"><img src="https://i.imgur.com/h1ldGRr.png" alt="X"></span></td> </tr> <tr class="productitm"> <!-- http://www.barnesandnoble.com/w/javascript-and-jquery-david-sawyer-mcfarland/1100405042 --> <td><img src="https://i.imgur.com/tEdRnz4.png" class="thumb"></td> <td><input type="number" value="1" min="0" max="99" class="qtyinput"></td> <td>JavaScript & jQuery: The Missing Manual</td> <td>$27.50</td> <td><span class="remove"><img src="https://i.imgur.com/h1ldGRr.png" alt="X"></span></td> </tr> <!-- tax + subtotal --> <tr class="extracosts"> <td class="light">Shipping & Tax</td> <td colspan="2" class="light"></td> <td>$35.00</td> <td> </td> </tr> <tr class="totalprice"> <td class="light">Total:</td> <td colspan="2"> </td> <td colspan="2"><span class="thick">$225.45</span></td> </tr> <!-- checkout btn --> <tr class="checkoutrow"> <td colspan="5" class="checkout"><button id="submitbtn">Checkout Now!</button></td> </tr> </tbody> </table> </div> </div> </body> </body></html>

Related: See More


Questions / Comments: