Bootstrap snippet: simple pricing table

designed to help people of all skill levels - designer or developer, huge nerd or early beginner.
copy and paste the code. Use it as a complete kit or use it to start something more complex.
tags: html,table



<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"> <div class="container bootstrap snippet"> <div class="row"> <div class="col-sm-6 col-md-4"> <div class="panel plan"> <div class="panel-body"> <span class="plan-title">Personal</span> <p class="text-semibold text-mint">$99/year</p> <div class="plan-icon"> <i class="fa fa-mobile-phone"></i> </div> <p class="text-muted pad-btm"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p> <button class="btn btn-block btn-primary btn-lg">Choose</button> </div> </div> </div> <div class="col-sm-6 col-md-4"> <div class="panel plan"> <div class="panel-body"> <span class="plan-title">Premium</span> <p class="text-semibold text-mint">$299/year</p> <div class="plan-icon"> <i class="fa fa-laptop"></i> </div> <p class="text-muted pad-btm"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p> <button class="btn btn-block btn-success btn-lg">Choose</button> </div> </div> </div> <div class="col-sm-6 col-md-4"> <div class="panel plan"> <div class="panel-body"> <span class="plan-title">Enterprise</span> <p class="text-semibold text-mint">$399/year</p> <div class="plan-icon"> <i class="fa fa-desktop"></i> </div> <p class="text-muted pad-btm"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p> <button class="btn btn-block btn-warning btn-lg">Choose</button> </div> </div> </div> </div> </div>
body{ background:#eee; margin-top:20px; } .panel { box-shadow: 0 2px 0 rgba(0,0,0,0.05); border-radius: 0; border: 0; margin-bottom: 24px; } .panel-body { padding: 25px 20px; } .plan { text-align: center; } .plan .plan-icon { font-size: 7em; color: rgba(0,0,0,0.1); } .plan .plan-title { font-size: 2em; font-weight: 100; } .text-mint { color: #2b866e; } .plan .btn{ border-radius:0px; } .text-muted{ color: #606060; } .pad-btm { padding-bottom: 15px; } .text-semibold { font-weight: 600; } .details { background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJod…IgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=); background: -moz-linear-gradient(top,rgba(0,0,0,.75) 0,rgba(0,0,0,.36) 62%,rgba(0,0,0,0) 100%); background: -webkit-gradient(linear,left top,left bottom,color-stop(0,rgba(0,0,0,.75)),color-stop(62%,rgba(0,0,0,.36)),color-stop(100%,rgba(0,0,0,0))); background: -webkit-linear-gradient(top,rgba(0,0,0,.75) 0,rgba(0,0,0,.36) 62%,rgba(0,0,0,0) 100%); background: -o-linear-gradient(top,rgba(0,0,0,.75) 0,rgba(0,0,0,.36) 62%,rgba(0,0,0,0) 100%); background: -ms-linear-gradient(top,rgba(0,0,0,.75) 0,rgba(0,0,0,.36) 62%,rgba(0,0,0,0) 100%); background: linear-gradient(to bottom,rgba(0,0,0,.75) 0,rgba(0,0,0,.36) 62%,rgba(0,0,0,0) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5e000000', endColorstr='#00000000', GradientType=0); top: -10; display: block; height: 70px; padding: 10px 15px 0; position: relative; width: 100%; }
Dey-Dey

simple pricing table

Dey-Dey
  Jun 30th 2015, 23:40
162 Views