Simple Pricing Table Using CSS3

By | August 15, 2013

Pricing Table will be used when there are more than one product/tariff.  Important advantage of pricing table is, we can compare with other tariffs. Here is the tutorial and code for simple pricing table using css3.

 

 

Simple Pricing Table Using CSS3

Simple Pricing Table Using CSS3

 

Below code will do the whole process, i.e., when we hover specfied box will be zoomed using scale transform property

.box:hover{

transform: scale(1.05, 1.05);

} 

index.php
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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href='http://fonts.googleapis.com/css?family=Oswald:400,300,700' rel='stylesheet' type='text/css'>
<title>Simple Pricing Table Using CSS3</title>
<link href="style.css" type="text/css" rel="stylesheet" />
</head>

<body>
<div class="container">

<div class="box">
<div class="acc">Free</div>
<div class="icon"></div>
<ul>
<li>10 GB Disk Space</li>
<li>100 GB Bandwidth</li>
<li>2 cPanel</li>
<li>100 Email</li>
<li>1 Database</li>
<li>No Dedicated IP</li>
<li class="amt">$15</li>
</ul>
</div>

<div class="box">
<div class="acc">Diamond</div>
<div class="icon"></div>
<ul>
<li>20 GB Disk Space</li>
<li>200 GB Bandwidth</li>
<li>5 cPanel</li>
<li>500 Email</li>
<li>5 Database</li>
<li>No Dedicated IP</li>
<li class="amt">$30</li>
</ul>
</div>

<div class="box">
<div class="acc">Premium</div>
<div class="icon"></div>
<ul>
<li>50 GB Disk Space</li>
<li>500 GB Bandwidth</li>
<li>5 cPanel</li>
<li>1000 Email</li>
<li>10 Database</li>
<li>1 Dedicated IP</li>
<li class="amt">$45</li>
</ul>
</div>
<br /><br /><br />
</div>
</body>
</html>
style.css
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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
.container
{
width: 800px;
margin: 150px auto;
min-height:700px;
}
.icon
{
background: url(icon.png) no-repeat;
background-size: 21%;
background-position: 50% 0%;
margin: 10px auto;
height: 47px;
}
.acc{
background-color: #F7D835;
text-align: center;
padding: 22px 0;
font-size: 19px;
text-transform: uppercase;
font-family: "Oswald", sans-serif, arial;
}
.box
{
float: left;
margin:0 15px;
transition:all 0.3s;
}
.box:hover
{
transform: scale(1.05, 1.05);
-webkit-transform: scale(1.05, 1.05);
-moz-transform: scale(1.05, 1.05);
-ms-transform: scale(1.05, 1.05);
-o-transform: scale(1.05, 1.05);
box-shadow: 1px 1px 30px #ccc;
-webkit-box-shadow: 1px 1px 30px #ccc;
-moz-box-shadow: 1px 1px 30px #ccc;
-ms-box-shadow: 1px 1px 30px #ccc;
-o-box-shadow: 1px 1px 30px #ccc;

}
.box ul
{
list-style: none;
margin: 0;
padding: 0;
}
.box ul li
{
font-family: sans-serif;
font-size: 14px;
background-color: #E9E9E9;
margin: 0px;
padding: 10px 50px;
text-align:center;
}

.amt
{
font-size: 37px!important;
font-family: Georgia, "Times New Roman", Times, serif!important;
text-align: center;
background-color: #575757!important;
color: #FFF!important;
}

.box ul li:nth-child(2n) {
background-color: #C2C2C2;
}

 

Leave a Reply

Your email address will not be published. Required fields are marked *