"Hosting Plan"
Bootstrap 3.3.0 Snippet by mahmudcse

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
/*-----------------------------------------------------------------------------
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;}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Now UI Kit
Lesson plan example

Questions / Comments: