Bootstrap snippet: Circular Price 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.



<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-xs-12 col-sm-12 col-md-12"> <div class="row well bg-themeprimary no-margin"> <div class=""> <div class="col-md-3 col-sm-4 col-xs-12"> <div class="plan-circular"> <span class="plan-title">STARTER</span> <hr class="title-devider"> <div class="plan-body"> <div class="plan-currency">$</div> <div class="plan-price">35</div> <div class="plan-month">monthly</div> </div> <div class="plan-tag bg-themesecondary"> <i class="tag-icon fa fa-times"></i> </div> </div> </div> <div class="col-md-3 col-sm-4 col-xs-12"> <div class="plan-circular"> <span class="plan-title">STANDARD</span> <hr class="title-devider"> <div class="plan-body"> <div class="plan-currency">$</div> <div class="plan-price">45</div> <div class="plan-month">monthly</div> </div> <div class="plan-tag bg-themethirdcolor"> <i class="tag-icon fa fa-times"></i> </div> </div> </div> <div class="col-md-3 col-sm-4 col-xs-12"> <div class="plan-circular animated flipInX"> <span class="plan-title">PROFESSIONAL</span> <hr class="title-devider"> <div class="plan-body"> <div class="plan-currency">$</div> <div class="plan-price">55</div> <div class="plan-month">monthly</div> </div> <div class="plan-tag bg-themefourthcolor"> <i class="tag-icon fa fa-check"></i> </div> </div> </div> <div class="col-md-3 col-sm-4 col-xs-12"> <div class="plan-circular"> <span class="plan-title">ENTERPRISE</span> <hr class="title-devider"> <div class="plan-body"> <div class="plan-currency">$</div> <div class="plan-price">65</div> <div class="plan-month">monthly</div> </div> <div class="plan-tag bg-themefifthcolor"> <i class="tag-icon fa fa-times"></i> </div> </div> </div> </div> </div> </div> </div> </div>
body{ background:#eee; margin-top:20px; } .well[class*="bg-"] { color: #f5f5f5; } .plan-circular { margin: 10px auto; text-align: center; } .no-margin { margin: 0 !important; } .plan-circular .plan-title { color: #fff; } .plan-circular .title-devider { margin: 10px 40%; border-color: #fff; } .plan-circular .plan-body { position: relative; width: 150px; height: 150px; background-color: #fff; border: 10px solid rgba(255,255,255,.3); -webkit-border-radius: 50%; -webkit-background-clip: padding-box; -moz-border-radius: 50%; -moz-background-clip: padding; border-radius: 50%; background-clip: padding-box; margin: 0 auto; font-family: 'Open Sans',sans-serif; } .plan-circular .plan-body .plan-currency { position: absolute; top: 33px; right: 80px; font-size: 26px; color: #777; } .plan-circular .plan-body .plan-price { position: absolute; top: 33px; right: 35px; font-size: 40px; color: #555; } .plan-circular .plan-body .plan-month { position: absolute; top: 80px; right: 38px; font-size: 12px; color: #999; } .plan-circular .plan-tag { width: 25px; height: 40px; -webkit-border-radius: 2px; -webkit-background-clip: padding-box; -moz-border-radius: 2px; -moz-background-clip: padding; border-radius: 2px; background-clip: padding-box; margin: 0 auto; margin-top: -15px; } .bg-themeprimary { background-color: #2dc3e8 !important; } .bg-themesecondary { background-color: #fb6e52 !important; } .bg-themethirdcolor { background-color: #ffce55 !important; } .bg-themefourthcolor { background-color: #a0d468 !important; } .bg-themefifthcolor { background-color: #e75b8d !important; }
Dey-Dey

Circular Price Table

Dey-Dey
  Aug 13th 2015, 09:51
2.0K Views