Ajax Loader
HTML
</head>
1
</head>
2
 
3
    <body>
4
 
5
        <div class="page-container">
6
 
7
            <div class="pricing-table">
8
                <div class="pricing-table-header">
9
                    <h2>Personal Site</h2>
10
                    <h3>$15/month</h3>
11
                </div>
12
                <div class="pricing-table-space"></div>
13
                <div class="pricing-table-features">
14
                    <p><strong>50</strong> Email Addresses</p>
15
                    <p><strong>35GB</strong> of Storage</p>
16
                    <p><strong>40</strong> Databases</p>
17
                    <p><strong>10</strong> Domains</p>
18
                    <p><strong>24/7 Unlimited</strong> Support</p>
19
                </div>
20
                <div class="pricing-table-sign-up">
21
                  <p><a href="http://bloggingbolt.blogspot.com">Sign Up Now</a></p>
22
                </div>
23
            </div>
24
 
25
            <div class="pricing-table pricing-table-highlighted">
26
                <div class="pricing-table-header">
27
                    <h2>Small Business</h2>
28
                    <h3>$59/month</h3>
29
                </div>
30
                <div class="pricing-table-space"></div>
31
                <div class="pricing-table-text">
32
                    <p><strong>This is a perfect choice for small businesses and startups.</strong></p>
33
                </div>
34
                <div class="pricing-table-features">
35
                    <p><strong>Unlimited</strong> Email Addresses</p>
36
                    <p><strong>65GB</strong> of Storage</p>
37
                    <p><strong>75</strong> Databases</p>
38
                    <p><strong>25</strong> Domains</p>
39
                    <p><strong>24/7 Unlimited</strong> Support</p>
40
                </div>
41
                <div class="pricing-table-sign-up">
42
                    <p><a href="http://bloggingbolt.blogspot.com">Sign Up Now</a></p>
43
                </div>
44
            </div>
45
 
46
            <div class="pricing-table">
47
                <div class="pricing-table-header">
48
                    <h2>Corporate Site</h2>
49
                    <h3>$85/month</h3>
50
                </div>
51
                <div class="pricing-table-space"></div>
52
                <div class="pricing-table-features">
53
                    <p><strong>Unlimited</strong> Email Addresses</p>
54
                    <p><strong>85GB</strong> of Storage</p>
55
                    <p><strong>Unlimited</strong> Databases</p>
56
                    <p><strong>50</strong> Domains</p>
57
                    <p><strong>24/7 Unlimited</strong> Support</p>
58
                </div>
59
                <div class="pricing-table-sign-up">
60
                    <p><a href="http://bloggingbolt.blogspot.com">Sign Up Now</a></p>
61
                </div>
62
            </div>
63
 
64
        </div>
65
 
66
    </body>
67
 
68
</html>
69
 
 
CSS
 
1
 
2
body {
3
    background: #f8f8f8;
4
    font-family: 'PT Sans', Helvetica, Arial, sans-serif;
5
    background: url(../img/bg.jpg) left top repeat;
6
    text-align: center;
7
    color: #fff;
8
}
9
.page-container {
10
    overflow: hidden;
11
    width: 1000px;
12
    margin: 100px auto 0 auto;
13
    padding-bottom: 60px;
14
}
15
 
16
.pricing-table {
17
    float: left;
18
    width: 305px;
19
    margin: 50px 14px 0 14px;
20
    background: #f8f8f8;
21
    -moz-border-radius: 6px;
22
    -webkit-border-radius: 6px;
23
    border-radius: 6px;
24
    -moz-box-shadow: 0 2px 15px 0 rgba(0,0,0,.2);
25
    -webkit-box-shadow: 0 2px 15px 0 rgba(0,0,0,.2);
26
    box-shadow: 0 2px 15px 0 rgba(0,0,0,.2);
27
    
28
}
29
 
30
.pricing-table strong { font-weight: 700; color: #3d3d3d; }
31
 
32
.pricing-table-header {
33
    padding: 30px 0 25px 0;
34
    background: #3d3d3d;
35
    -moz-border-radius-topleft: 6px;
36
    -moz-border-radius-topright: 6px;
37
    -webkit-border-top-left-radius: 6px;
38
    -webkit-border-top-right-radius: 6px;
39
    border-top-left-radius: 6px;
40
    border-top-right-radius: 6px;
41
    background-image: -webkit-gradient(linear, left top, left bottom, from(#494949), to(#3e3e3e));
42
    background-image: -webkit-linear-gradient(top, #494949, #3e3e3e);
43
    background-image: -moz-linear-gradient(top, #494949, #3e3e3e);
44
    background-image: -o-linear-gradient(top, #494949, #3e3e3e);
45
    background-image: -ms-linear-gradient(top, #494949, #3e3e3e);
46
    background-image: linear-gradient(to bottom, #494949, #3e3e3e);
47
}
48
 
49
.pricing-table-header h2 { font-size: 30px; font-weight: 700; text-shadow: 0 -2px 0 rgba(0,0,0,.25); }
50
.pricing-table-header h3 { margin-top: 20px; font-size: 24px; font-weight: 400; text-shadow: 0 -2px 0 rgba(0,0,0,.25); }
51
 
52
.pricing-table-space { height: 10px; }
53
 
54
.pricing-table-text {
55
    margin: 15px 30px 0 30px;
56
    padding: 0 10px 15px 10px;
57
    border-bottom: 1px solid #ddd;
58
    text-align: left;
59
    line-height: 30px;
60
    font-size: 16px;
61
    color: #888;
62
}
63
 
64
.pricing-table-features {
65
    margin: 15px 30px 0 30px;
66
    padding: 0 10px 15px 10px;
67
    border-bottom: 1px solid #ddd;
68
    text-align: left;
69
    line-height: 30px;
70
    font-size: 16px;
71
    color: #888;
72
}
73
 
74
.pricing-table-sign-up {
75
    margin-top: 25px;
76
    padding-bottom: 30px;
77
}
78
 
79
.pricing-table-sign-up a {
80
    display: inline-block;
81
    width: 180px;
82
    height: 40px;
83
    background: #3d3d3d;
84
    -moz-border-radius: 6px;
85
    -webkit-border-radius: 6px;
86
    border-radius: 6px;
87
    background-image: -webkit-gradient(linear, left top, left bottom, from(#494949), to(#3e3e3e));
88
    background-image: -webkit-linear-gradient(top, #494949, #3e3e3e);
89
    background-image: -moz-linear-gradient(top, #494949, #3e3e3e);
90
    background-image: -o-linear-gradient(top, #494949, #3e3e3e);
91
    background-image: -ms-linear-gradient(top, #494949, #3e3e3e);
92
    background-image: linear-gradient(to bottom, #494949, #3e3e3e);
93
    line-height: 40px;
94
    font-size: 20px;
95
    color: #fff;
96
    text-decoration: none;
97
    text-transform: uppercase;
98
    text-shadow: 0 -2px 0 rgba(0,0,0,.25);
99
    -o-transition: all .2s;
100
    -moz-transition: all .2s;
101
    -webkit-transition: all .2s;
102
    -ms-transition: all .2s;
103
}
104
 
105
.pricing-table-sign-up a:hover {
106
    text-decoration: none;
107
    -moz-box-shadow: 0 -5px 10px 0 rgba(0,0,0,.2) inset;
108
    -webkit-box-shadow: 0 -5px 10px 0 rgba(0,0,0,.2) inset;
109
    box-shadow: 0 -5px 10px 0 rgba(0,0,0,.2) inset;
110
}
111
 
112
.pricing-table-sign-up a:active {
113
    -moz-box-shadow: 0 3px 8px 0 rgba(0,0,0,.2) inset;
114
    -webkit-box-shadow: 0 3px 8px 0 rgba(0,0,0,.2) inset;
115
    box-shadow: 0 3px 8px 0 rgba(0,0,0,.2) inset;
116
}
117
 
118
 
119
/* Highlighted table */
120
 
121
.pricing-table-highlighted {
122
    margin-top: 0;
123
}
124
 
125
.pricing-table-highlighted .pricing-table-header {
126
    background: #628842;
127
    background-image: -webkit-gradient(linear, left top, left bottom, from(#76a04f), to(#648a43));
128
    background-image: -webkit-linear-gradient(top, #76a04f, #648a43);
129
    background-image: -moz-linear-gradient(top, #76a04f, #648a43);
130
    background-image: -o-linear-gradient(top, #76a04f, #648a43);
131
    background-image: -ms-linear-gradient(top, #76a04f, #648a43);
132
    background-image: linear-gradient(to bottom, #76a04f, #648a43);
133
}
134
 
135
.pricing-table-highlighted .pricing-table-sign-up a {
136
    background: #628842;
137
    background-image: -webkit-gradient(linear, left top, left bottom, from(#76a04f), to(#648a43));
138
    background-image: -webkit-linear-gradient(top, #76a04f, #648a43);
139
    background-image: -moz-linear-gradient(top, #76a04f, #648a43);
140
    background-image: -o-linear-gradient(top, #76a04f, #648a43);
141
    background-image: -ms-linear-gradient(top, #76a04f, #648a43);
142
    background-image: linear-gradient(to bottom, #76a04f, #648a43);
143
}
144
 
145
 
 

Pricing Tables

CSSDeck G+