"Responsive pricing tables with Hover Effects"
Bootstrap 3.2.0 Snippet by abhimaliyeckal

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="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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 ---------->
<h2>STYLE 1</h2>
<!-- PRICING TABLE STYLE 1-->
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-6 col-xs-12 float-shadow">
<div class="price_table_container">
<div class="price_table_heading">Starter</div>
<div class="price_table_body">
<div class="price_table_row cost warning-bg"><strong>$ 19</strong><span>/MONTH</span></div>
<div class="price_table_row">1 Website</div>
<div class="price_table_row">10 GB Storage</div>
<div class="price_table_row">10 GB Bandwidth</div>
<div class="price_table_row">10 Email Addresses</div>
<div class="price_table_row">Free Backup</div>
<div class="price_table_row">Full Time Support</div>
</div>
<a href="#" class="btn btn-warning btn-lg btn-block">Sign Up</a>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-12 float-shadow">
<div class="recommended"><strong><span class="glyphicon glyphicon-heart" aria-hidden="true"></span> RECOMMENDED</strong></div>
<div class="price_table_container">
<div class="price_table_heading">Basic</div>
<div class="price_table_body">
<div class="price_table_row cost primary-bg"><strong>$ 29</strong><span>/MONTH</span></div>
<div class="price_table_row">10 Websites</div>
<div class="price_table_row">100 GB Storage</div>
<div class="price_table_row">100 GB Bandwidth</div>
<div class="price_table_row">50 Email Addresses</div>
<div class="price_table_row">Free Backup</div>
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
32
33
34
35
36
37
/*!
* pricing.css (https://github.com/abhimaliyeckal)
* Version: 1.0
* Author: Abhishek Raj
* Linkedin URL: https://in.linkedin.com/in/abhimaliyeckal
* Github: https://github.com/abhimaliyeckal
* Made available under a MIT License:
* http://www.opensource.org/licenses/mit-license.php
* pricing.css Copyright Abhishek Raj 2014.
*/
@import url(http://fonts.googleapis.com/css?family=Open+Sans:300);
body{
background:#010101;
}
.price_table_container{
text-align:center;
color:#666;
margin-top:35px;
font-family: 'Open Sans', sans-serif;
}
.price_table_heading{
font-size:36px;
padding:10px;
background:#EEE;
}
.price_table_row {
padding:15px;
background: #FFF;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments:

meerja maqbul baig () - 7 years ago - Reply 0