"card"
Bootstrap 3.0.0 Snippet by xrozix

<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 ----------> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" /> <h1 class="demo-title">Material responsive pricing tables</h1> <div class="pricing-table"> <div class="pricing-option"> <i class="material-icons">important_devices</i> <h1>Ui design</h1> <hr /> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente harum voluptatum, sit cum voluptatibus inventore quae qui provident eveniet dicta at, quibusdam ipsam iusto reprehenderit hic saepe nesciunt sed illo.</p> <hr /> <div class="price"> <div class="front"> <span class="price">199 <b>$</b></span> </div> <div class="back"> <a href="#" class="button">Purchase now</a> </div> </div> </div> <div class="pricing-option"> <i class="material-icons">perm_identity</i> <h1>Ux design</h1> <hr /> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente harum voluptatum, sit cum voluptatibus inventore quae qui provident eveniet dicta at, quibusdam ipsam iusto reprehenderit hic saepe nesciunt sed illo.</p> <hr /> <div class="price"> <div class="front"> <span class="price">399 <b>$</b></span> </div> <div class="back"> <a href="#" class="button">Purchase now</a> </div> </div> </div> <div class="pricing-option"> <i class="material-icons">art_track</i> <h1>Print design</h1> <hr /> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente harum voluptatum, sit cum voluptatibus inventore quae qui provident eveniet dicta at, quibusdam ipsam iusto reprehenderit hic saepe nesciunt sed illo.</p> <hr /> <div class="price"> <div class="front"> <span class="price">999 <b>$</b></span> </div> <div class="back"> <a href="#" class="button">Purchase now</a> </div> </div> </div> </div>
@import url(https://fonts.googleapis.com/css?family=Josefin+Sans:400,300,300italic,400italic,600,700,600italic,700italic); body { font-family: "Josefin Sans", sans-serif; line-height: 1; padding: 20px; height: 100%; background: #eee; } .demo-title { text-align: center; font-size: 3rem; margin-bottom: 50px; } .pricing-table { display: table; width: 100%; } .pricing-table .pricing-option { width: 28%; background: white; float: left; padding: 2%; text-align: center; -webkit-transition: all .3s ease-in-out; transition: all .3s ease-in-out; } .pricing-table .pricing-option:nth-child(even) { margin: 0 2%; } .pricing-table .pricing-option:hover { cursor: pointer; box-shadow: 0px 2px 30px rgba(0, 0, 0, 0.3); -webkit-transform: scale(1.04); transform: scale(1.04); } .pricing-table .pricing-option:hover i, .pricing-table .pricing-option:hover h1, .pricing-table .pricing-option:hover span, .pricing-table .pricing-option:hover b { color: #F85E6A; } .pricing-table .pricing-option:hover .front { opacity: 0; visibility: hidden; } .pricing-table .pricing-option:hover .back { opacity: 1 !important; visibility: visible !important; } .pricing-table .pricing-option:hover .back a.button { -webkit-transform: translateY(0px) !important; transform: translateY(0px) !important; } .pricing-table .pricing-option hr { border: none; border-bottom: 1px solid #F0F0F0; } .pricing-table .pricing-option i { font-size: 3rem; color: #D8D8D8; -webkit-transition: all .3s ease-in-out; transition: all .3s ease-in-out; } .pricing-table .pricing-option h1 { margin: 10px 0; color: #212121; -webkit-transition: all .3s ease-in-out; transition: all .3s ease-in-out; } .pricing-table .pricing-option p { color: #999; padding: 0 10px; line-height: 1.3; } .pricing-table .pricing-option .price { position: relative; } .pricing-table .pricing-option .price .front span.price { font-size: 2rem; text-transform: uppercase; margin-top: 20px; display: block; font-weight: 700; position: relative; } .pricing-table .pricing-option .price .front span.price b { position: absolute; font-size: 1rem; margin-left: 2px; font-weight: 600; } .pricing-table .pricing-option .price .back { opacity: 0; visibility: hidden; -webkit-transition: all .3s ease-in-out; transition: all .3s ease-in-out; } .pricing-table .pricing-option .price .back a.button { background: #F85E6A; padding: 15px 20px; display: inline-block; text-decoration: none; color: white; position: absolute; font-size: 13px; top: -5px; left: 0; right: 0; width: 150px; margin: auto; text-transform: uppercase; -webkit-transform: translateY(20px); transform: translateY(20px); -webkit-transition: all .3s ease-in-out; transition: all .3s ease-in-out; } .pricing-table .pricing-option .price .back a.button:hover { background: #f62d3d; } @media screen and (max-width: 600px) { .pricing-table .pricing-option { padding: 5%; width: 90%; } .pricing-table .pricing-option:nth-child(even) { margin: 30px 0 !important; } }

Related: See More


Questions / Comments: