"product 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 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/ayanacampbell/pen/LVbEBW?depth=everything&order=popularity&page=4&q=product&show_forks=false" /> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'> <style class="cp-pen-styles">body{ margin: 0; padding: 0; border: 0; /*background-color: #EEEEEE;*/ color: #444; font-family: "Helvetica", sans-serif; height: 100%; width: 100%; } *{ box-sizing: border-box; } h1, h2, h3, h4, h5, h6{ margin: 0; padding: 0; border: 0; } h1{ font-size: 130%; } h2{ color: #aaa; font-size: 18px; font-weight: 400; } p{ font-size: 12px; line-height: 1.5; } /*.wrapper{ padding: 20px 0px; }*/ .nav{ background-color: #eee; width: 100%; text-align: center; padding: 20px 3% 70px 3%; /*padding: 0px 3%;*/ } .nav .logo{ display: inline-block; float: left; width: auto; } .nav .logo img{ width: 120px; } .nav .nav-links{ display: inline-block; text-align: center; margin: 0 auto; } .nav-links a{ color: #000; font-size: 12px; text-decoration: none; margin: 0px 15px; } .nav-links a:hover{ border-bottom: 2px solid #000; } .nav .cart-icon{ color: #444; display: inline-block; float: right; } .product{ background-color: #eee; border-bottom: 1px solid #ddd; clear: both; padding: 0px 10% 70px 10%; } .group:after { content: ""; display: table; clear: both; } .col-1-2{ width: 50%; height: 100%; float: left; } .product-image{ /*border: 1px dotted #aaa;*/ } .product-image .bg{ background-image: url('https://cdn.shopify.com/s/files/1/0199/4554/products/fncwdmain_1024x1024.png?v=1428681549'); background-size: cover; background-position: center top; width: 100%; min-height: 450px; } .product-image .indicator{ text-align:center; } .product-image .dot{ background-color: #aaa; border-radius: 50%; cursor: pointer; display: inline-block; margin-right: 5px; width: 5px; height: 5px; -webkit-transition: all 400ms ease; transition: all 400ms ease; } .dot:hover{ background-color: #444; } .product-info{ padding: 0px 8%; } .product-info h1{ margin-bottom: 5px; } .product-info h2{ margin-bottom: 50px; } .product-info .select-dropdown{ display: inline-block; margin-right: 10px; position: relative; width: auto; float: left; } .product-info select{ cursor: pointer; margin-bottom: 20px; padding: 12px 92px 12px 15px; background-color: #fff; border: none; border-radius: 2px; color: #aaa; font-size: 12px; -webkit-appearance: none; -moz-appearance: none; appearance: none; } select:active, select:focus { outline: none; box-shadow: none; } .select-dropdown:after { content: " "; cursor: pointer; position: absolute; top: 30%; right: 10%; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid #aaa; } .product-info a.add-btn{ background-color: #444; border-radius: 2px; color: #eee; display: inline-block; font-size: 14px; margin-bottom: 30px; padding: 15px 100px; text-align: center; text-decoration: none; -webkit-transition: all 400ms ease; transition: all 400ms ease; } a.add-btn:hover{ background-color: #555; } .product-info p{ margin-bottom: 30px; } .product-info p a{ border-bottom: 1px dotted #444; color: #444; font-weight: 700; text-decoration: none; -webkit-transition: all 400ms ease; transition: all 400ms ease; } .product-info p a:hover{ opacity: .7; } .product-info ul{ font-size: 12px; padding: 0; margin-bottom: 50px; } .product-info li{ list-style-type: none; margin-bottom: 5px; } .product-info li::before{ content:"\2022"; margin-right: 20px; } .product-info a.share-link{ color: #aaa; font-size: 11px; margin-right: 30px; text-decoration: none; } .product-info a.share-link:hover{ border-bottom: 2px solid #aaa; } footer{ background-color: #212121; clear: both; width: 100%; padding: 20px 10% 10px 10%; text-align: center; vertical-align: middle; } footer img{ display: inline-block; height: 20px; width: auto; margin-bottom: 10px; margin-right: 10px; vertical-align: middle; } footer h3{ color: #bbb; font-size: 12px; font-weight: 700; display: inline-block; height: 20px; letter-spacing: .8px; margin-bottom: 0px; text-transform: uppercase; vertical-align: middle; }</style></head><body> <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,700' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> <div class="wrapper"> <div class="nav"> <a href="" class="logo"><img src="https://static.mailchimp.com/web/brand-assets/logo-dark.png" alt="logo"></a> <div class="nav-links"> <a href="">Store</a> <a href="">Collections</a> <a href="">About</a> <a href="">Contact</a> </div> <a href="" class="cart-icon"><i class="fa fa-shopping-cart"></i></a> </div> <div class="product group"> <div class="col-1-2 product-image"> <div class="bg"></div> <div class="indicator"> <div class="dot one"></div> <div class="dot two"></div> <div class="dot three"></div> <div class="dot four"></div> <div class="dot five"></div> </div> </div> <div class="col-1-2 product-info"> <h1>Field Notes Cherry Graph 3-Pack</h1> <h2>$7.50</h2> <div class="select-dropdown"> <select> <option value="size">Size</option> <option value="size">Small</option> <option value="size">Medium</option> <option value="size">Large</option> </select> </div> <div class="select-dropdown"> <select> <option value="quantity">1</option> <option value="quantity">2</option> <option value="quantity">3</option> <option value="quantity">4</option> </select> </div> <br> <a href="" class="add-btn">Add To Cart</a> <p>I am using <a href="https://dribbble.com/shots/2063472-Single-Product-Template?list=users&offset=2">this Dribbble shot by Olly Sorsby</a> to practice front-end stuff. Eget lacinia odio sem nec elit. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam id dolor id nibh ultricies.</p> <ul> <li>Graph paper 40-page memo book.</li> <li>3 book per pack. Banded and shrink-wrapped</li> <li>Three great memo books worth fillin' up with information</li> <li>Red cherry wood covers</li> </ul> <a href="" class="share-link">Tweet</a> <a href="" class="share-link">Like</a> <a href="" class="share-link">Pin</a> <a href="" class="share-link">Email</a> </div> </div> <footer> <img src="https://s3.amazonaws.com/f.cl.ly/items/0t1y1e3c1t3X1d1R2Z1e/Screen%20Shot%202015-05-09%20at%202.44.46%20PM.png"> <h3>Built with love by Ayana Campbell - May 24, 2015</h3> </footer> </div> </body></html>

Related: See More

Paper Dashboard
Bootstrap 4 and CCS3 Product Cards with Transition
bootstrap 4 card
Card Styles

Questions / Comments: