"Hosting Plan"
Bootstrap 3.3.0 Snippet by mahmudcse

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ----------> <div class="container"> <div class="row"> <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12"> <div class="blocks"> <div class="block-header"> <h4>START UP</h4> </div> <div class="block-container"> <p><span class="glyphicon glyphicon-ok" data-unicode="e013" style="color:#45BA76;"> </span>1GB Disk Space</p> <p><span class="glyphicon glyphicon-ok" data-unicode="e013" style="color:#45BA76;"> </span>Unlimited Bandwidth</p> <p><span class="glyphicon glyphicon-ok" data-unicode="e013" style="color:#45BA76;"> </span>5 Email Address</p> <p><span class="glyphicon glyphicon-ok" data-unicode="e013" style="color:#45BA76;"> </span>24 Hours Support</p> <p><span class="glyphicon glyphicon-remove" data-unicode="e013" style="color:red;"> </span>No Sub-Domains</p> <p><span class="glyphicon glyphicon-remove" data-unicode="e013" style="color:red;"> </span>No Free Domains</p> <p class="price"><i style="font-size: 40px;">$</i>15<sub><small class="renew-price">Per/Yr</small></sub></p> </div> <div class="block-footer"> <a class="order-now" href="#">Order Now</a> </div> </div> </div> <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12"> <div class="blocks active-block"> <div class="block-header"> <h4>STANDARD</h4> </div> <div class="block-container"> <p><span class="glyphicon glyphicon-ok" data-unicode="e013" style="color:#45BA76;"> </span>5GB Disk Space</p> <p><span class="glyphicon glyphicon-ok" data-unicode="e013" style="color:#45BA76;"> </span>Unlimited Bandwidth</p> <p><span class="glyphicon glyphicon-ok" data-unicode="e013" style="color:#45BA76;"> </span>15 Email Address</p> <p><span class="glyphicon glyphicon-ok" data-unicode="e013" style="color:#45BA76;"> </span>24 Hours Support</p> <p><span class="glyphicon glyphicon-ok" data-unicode="e013" style="color:#45BA76;"> </span>15 Sub-Domains</p> <p><span class="glyphicon glyphicon-ok" data-unicode="e013" style="color:#45BA76;"> </span>1 Free Domains</p> <p class="price"><i style="font-size: 40px;">$</i>35<sub><small class="renew-price">Per/Yr</small></sub></p> </div> <div class="block-footer"> <a class="order-now" href="#">Order Now</a> </div> </div> </div> <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12"> <div class="blocks"> <div class="block-header"> <h4>PROFESSIONAL</h4> </div> <div class="block-container"> <p><span class="glyphicon glyphicon-ok" data-unicode="e013" style="color:#45BA76;"> </span>Unlimited Disk Space</p> <p><span class="glyphicon glyphicon-ok" data-unicode="e013" style="color:#45BA76;"> </span>Unlimited Bandwidth</p> <p><span class="glyphicon glyphicon-ok" data-unicode="e013" style="color:#45BA76;"> </span>25 Email Address</p> <p><span class="glyphicon glyphicon-ok" data-unicode="e013" style="color:#45BA76;"> </span>24 Hours Support</p> <p><span class="glyphicon glyphicon-ok" data-unicode="e013" style="color:#45BA76;"> </span>Unlimited Sub-Domains</p> <p><span class="glyphicon glyphicon-ok" data-unicode="e013" style="color:#45BA76;"> </span>3 Free Domains</p> <p class="price"><i style="font-size: 40px;">$</i>55<sub><small class="renew-price">Per/Yr</small></sub></p> </div> <div class="block-footer"> <a class="order-now" href="#">Order Now</a> </div> </div> </div> </div> </div>
/*----------------------------------------------------------------------------- Custom Stylesheet version: 1.0 date: 03/02/16 author: [Md.Mahamudur Rahman] email: [mahamud.cse2014@gmail.com] ------------------------------------------------------------------------------*/ .col-lg-4{ padding: 0 !important;} .blocks{ border:1px solid #EEEEEE;} .blocks:hover{box-shadow:0px 0px 10px #D9E0DB;} .block-header{ height: 95px; text-align: center; width: 100%; padding: 8%; background: #F8F8F8; color: #333333;} .block-container p:hover{background:#F8F8F8;} .block-header h4{ font-weight: bold; vertical-align: center;} .block-container{ text-align: center;} .block-container p{ border-bottom:1px solid #F4F7F8; margin: 0; padding: 2%; } .block-container p:last-child{ border-bottom:none;} .price{font-size: 50px; font-family: PT Serif; color: #FF592D; font-weight: bold;} .renew-price{font-size: 12px; color: #333333; font-style: italic; font-weight: normal;} .block-footer{text-align: center; padding: 10%;} .order-now{border: 1px solid #FF592D; padding: 15px; border-radius: 4%; color:#333333; font-weight: bold; } .order-now:hover{text-decoration: none; background: #FF592D; color: #fff;} .active-block { box-shadow:0px 0px 10px #D9E0DB;} .active-block .block-header{ background: #45BA76; color: #fff;} .active-block .price{ color:#45BA76;} .active-block .block-footer a{ background: #45BA76; color: #fff; border:none;} .active-block .block-footer a:hover{ background: #EEEEEE; color: #333333; border:1px solid #45BA76;}

Related: See More

Argon Design System
Lesson plan example

Questions / Comments: