This page requires a Javascript enabled browser
<< Back | Main Menu | FAQ | [?]

Pricing Tables (responsive)

Create stylish comparison tables.

Local: CSS/JS files (add code to <HEAD> section):

?
1
2
3
4
<!-- DC Pricing Tables CSS -->
<link type="text/css" rel="stylesheet" href="dcodes/pricingtables/css/dc_pricingtables.css" />
<!-- DC Pricing Tables JS -->
<script type="text/javascript" src="dcodes/pricingtables/js/dc_pricingtables.js"></script>

Hosted: CSS/JS files (add code to <HEAD> section):

?
1
2
3
4
<!-- DC Pricing Tables CSS -->
<link type="text/css" rel="stylesheet" href="http://cdn.dcodes.net/2/pricingtables/css/dc_pricingtables.css" />
<!-- DC Pricing Tables JS -->
<script type="text/javascript" src="http://cdn.dcodes.net/2/pricingtables/js/dc_pricingtables.js"></script>

Pricing Table Style 1

Business$59


  • 10GB Disk Space
  • 100GB Monthly Bandwidth
  • 20 Email Accounts
  • Unlimited subdomains

    • Sign Up

Standard$17


  • 3GB Disk Space
  • 25GB Monthly Bandwidth
  • 5 Email Accounts
  • Unlimited subdomains

    • Sign Up

Basic$9


  • 1GB Disk Space
  • 10GB Monthly Bandwidth
  • 2 Email Accounts
  • Unlimited subdomains

    • Sign Up

View code:

?
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
<!-- DC Pricing Tables:1 Start -->
  <div id="dc_pricingtable01" class="clear">
    <!-- Column 1 -->
    <div class="plan">
      <h3>Business<span>$59</span></h3>
      <ul>
        <br />
        <li><b>10GB</b> Disk Space</li>
        <li><b>100GB</b> Monthly Bandwidth</li>
        <li><b>20</b> Email Accounts</li>
        <li><b>Unlimited</b> subdomains</li>
        <br /><a href="#" class="dc_pricing_button blue">Sign Up</a><!-- additional options: small, rounded, large, light_blue, blue, green, red, orange, yellow, pink, purple, grey, black -->
      </ul>
    </div>
    <!-- Column 2 (standout) -->
    <div class="plan" id="most-popular">
      <h3>Professional<span>$29</span></h3>
      <ul>
        <br />
        <li><b>5GB</b> Disk Space</li>
        <li><b>50GB</b> Monthly Bandwidth</li>
        <li><b>10</b> Email Accounts</li>
        <li><b>Unlimited</b> subdomains</li>
        <br /><a href="#" class="dc_pricing_button blue">Sign Up</a>
      </ul>
    </div>
    <!-- Column 3 -->
    <div class="plan">
      <h3>Standard<span>$17</span></h3>
      <ul>
        <br />
        <li><b>3GB</b> Disk Space</li>
        <li><b>25GB</b> Monthly Bandwidth</li>
        <li><b>5</b> Email Accounts</li>
        <li><b>Unlimited</b> subdomains</li>
        <br /><a href="#" class="dc_pricing_button blue">Sign Up</a>
      </ul>
    </div>
    <!-- Column 4 -->
    <div class="plan">
      <h3>Basic<span>$9</span></h3>
      <ul>
        <br />
        <li><b>1GB</b> Disk Space</li>
        <li><b>10GB</b> Monthly Bandwidth</li>
        <li><b>2</b> Email Accounts</li>
        <li><b>Unlimited</b> subdomains</li>
        <br /><a href="#" class="dc_pricing_button blue">Sign Up</a>
      </ul>
    </div>
  </div>
<!-- DC Pricing Tables:1 End -->
<div class="dc_clear"></div> <!-- line break/clear line -->

Pricing Table Style 2

2 header styles + 25 different color headers + 10 color buttons available. Mix & match.

  Style A  

  • Starter
  • $5 /mo.
  • 10GB
  • 100GB
  • 1
  • 10
  • 10
  • 5
  • Sign Up
  • Basic
  • $10 /mo.
  • 50GB
  • 500GB
  • 10
  • 50
  • 50
  • 10
  • Sign Up
  • Professional
  • $29 /mo.
  • 100GB
  • 1000GB
  • Unlimited
  • Unlimited
  • Unlimited
  • 50
  • Sign Up

View code:

?
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
<!-- DC Pricing Tables:2 Start -->
<div class="dc_pricingtable02 pricing_four"><!-- use pricing_three for 3 columns, pricing_four = 4 columns, pricing_five = 5 columns, pricing_six = 6 columns -->
   
  <!-- Column 1 -->
  <ul class="pricing_column_first gap">
    <li class="pricing_header1"></li>
    <li class="pricing_header2"><span>Choose a Plan</span></li>
    <li class="odd"> <a class="tooltip" href="#">Disk Storage <span>The amount of disk storage we provide you with every account purchase.</span> </a> </li>
    <li class="even"> <a class="tooltip" href="#">Bandwidth <span>Amount of data transfer bandwidth provided to each account, per month.</span> </a> </li>
    <li class="odd"><span>Domain Names</span></li>
    <li class="even"> <a class="tooltip" href="#">Subdomains <span>Number of subdomain assigned to your account. </a> </li>
    <li class="odd"><span>Site Builder</span></li>
    <li class="even"><span>Backups</span></li>
    <li class="odd"> <a class="tooltip" href="#">CPANEL <span>Web-based control panel system.</span> </a> </li>
    <li class="even"><span>Email Accounts</span></li>
    <li class="odd"><span>MySQL Databases</span></li>
    <li class="pricing_footer"></li>
  </ul>
  <div class="pricing_hover_area">
     
    <!-- Column 2 -->
    <ul class="pricing_column glass_white">
      <!-- color options: glass_black, glass_orange, glass_lightblue, glass_blue, glass_green, glass_purple, glass_red, glass_white, glass_aqua, glass_yellow, light_blue, blue, navy, green, yellow, orange, red, maroon, purple, pink, white, paper, silver, grey, black -->
      <li class="pricing_header1">Starter</li>
      <li class="pricing_header2">$5 <span>/mo.</span></li>
      <li class="odd">10GB</li>
      <li class="even">100GB</li>
      <li class="odd">1</li>
      <li class="even">10</li>
      <li class="odd"><span class="pricing_no"></span></li>
      <li class="even"><span class="pricing_no"></span></li>
      <li class="odd"><span class="pricing_yes"></span></li>
      <li class="even">10</li>
      <li class="odd">5</li>
      <li class="pricing_footer"> <a href="#" class="dc_pricing_button grey">Sign Up</a><!-- additional options: small, rounded, large, light_blue, blue, green, red, orange, yellow, pink, purple, grey, black -->
      </li>
    </ul>
     
    <!-- Column 3 -->
    <ul class="pricing_column glass_aqua">
      <li class="pricing_header1">Basic</li>
      <li class="pricing_header2">$10 <span>/mo.</span></li>
      <li class="odd">50GB</li>
      <li class="even">500GB</li>
      <li class="odd">10</li>
      <li class="even">50</li>
      <li class="odd"><span class="pricing_yes"></span></li>
      <li class="even"><span class="pricing_yes"></span></li>
      <li class="odd"><span class="pricing_yes"></span></li>
      <li class="even">50</li>
      <li class="odd">10</li>
      <li class="pricing_footer"><a href="#" class="dc_pricing_button grey">Sign Up</a></li>
    </ul>
     
    <!-- Column 4 -->
    <ul class="pricing_column glass_black">
      <li class="pricing_header1">Professional</li>
      <li class="pricing_header2">$29 <span>/mo.</span></li>
      <li class="odd">100GB</li>
      <li class="even">1000GB</li>
      <li class="odd">Unlimited</li>
      <li class="even">Unlimited</li>
      <li class="odd"><span class="pricing_yes"></span></li>
      <li class="even"><span class="pricing_yes"></span></li>
      <li class="odd"><span class="pricing_yes"></span></li>
      <li class="even">Unlimited</li>
      <li class="odd">50</li>
      <li class="pricing_footer"><a href="#" class="dc_pricing_button grey">Sign Up</a></li>
    </ul>
  </div>
</div>
<!-- DC Pricing Tables:2 End -->
<div class="dc_clear"></div> <!-- line break/clear line -->

  Style B  

  • Starter
  • $5 /mo.
  • 10GB
  • 100GB
  • 1
  • 10
  • 10
  • 5
  • Sign Up
  • Basic
  • $10 /mo.
  • 50GB
  • 500GB
  • 10
  • 50
  • 50
  • 10
  • Sign Up
  • Professional
  • $29 /mo.
  • 100GB
  • 1000GB
  • Unlimited
  • Unlimited
  • Unlimited
  • 50
  • Sign Up
  • Business
  • $39 /mo.
  • 500GB
  • Unlimited
  • Unlimited
  • Unlimited
  • Unlimited
  • 200
  • Sign Up

View code:

?
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
<!-- DC Pricing Tables:2 Start -->
<div class="dc_pricingtable02 pricing_five"><!-- use pricing_three for 3 columns, pricing_four = 4 columns, pricing_five = 5 columns, pricing_six = 6 columns -->
   
  <!-- Column 1 -->
  <ul class="pricing_column_first gap">
    <li class="pricing_header1"></li>
    <li class="pricing_header2"><span>Choose a Plan</span></li>
    <li class="odd"> <a class="tooltip" href="#">Disk Storage <span>The amount of disk storage we provide you with every account purchase.</span> </a> </li>
    <li class="even"> <a class="tooltip" href="#">Bandwidth <span>Amount of data transfer bandwidth provided to each account, per month.</span> </a> </li>
    <li class="odd"><span>Domain Names</span></li>
    <li class="even"> <a class="tooltip" href="#">Subdomains <span>Number of subdomain assigned to your account. </a> </li>
    <li class="odd"><span>Site Builder</span></li>
    <li class="even"><span>Backups</span></li>
    <li class="odd"> <a class="tooltip" href="#">CPANEL <span>Web-based control panel system.</span> </a> </li>
    <li class="even"><span>Email Accounts</span></li>
    <li class="odd"><span>MySQL Databases</span></li>
    <li class="pricing_footer"></li>
  </ul>
  <div class="pricing_hover_area">
     
    <!-- Column 2 -->
    <ul class="pricing_column glass_orange">
      <!-- color options: glass_black, glass_orange, glass_lightblue, glass_blue, glass_green, glass_purple, glass_red, glass_white, glass_aqua, glass_yellow, light_blue, blue, navy, green, yellow, orange, red, maroon, purple, pink, white, paper, silver, grey, black -->
      <li class="pricing_header1">Starter</li>
      <li class="pricing_header2">$5 <span>/mo.</span></li>
      <li class="odd">10GB</li>
      <li class="even">100GB</li>
      <li class="odd">1</li>
      <li class="even">10</li>
      <li class="odd"><span class="pricing_no"></span></li>
      <li class="even"><span class="pricing_no"></span></li>
      <li class="odd"><span class="pricing_yes"></span></li>
      <li class="even">10</li>
      <li class="odd">5</li>
      <li class="pricing_footer"> <a href="#" class="dc_pricing_button orange">Sign Up</a><!-- additional options: small, rounded, large, light_blue, blue, green, red, orange, yellow, pink, purple, grey, black -->
      </li>
    </ul>
     
    <!-- Column 3 -->
    <ul class="pricing_column glass_red">
      <li class="pricing_header1">Basic</li>
      <li class="pricing_header2">$10 <span>/mo.</span></li>
      <li class="odd">50GB</li>
      <li class="even">500GB</li>
      <li class="odd">10</li>
      <li class="even">50</li>
      <li class="odd"><span class="pricing_yes"></span></li>
      <li class="even"><span class="pricing_yes"></span></li>
      <li class="odd"><span class="pricing_yes"></span></li>
      <li class="even">50</li>
      <li class="odd">10</li>
      <li class="pricing_footer"><a href="#" class="dc_pricing_button red">Sign Up</a></li>
    </ul>
     
    <!-- Column 4 -->
    <ul class="pricing_column glass_green">
      <li class="pricing_header1">Professional</li>
      <li class="pricing_header2">$29 <span>/mo.</span></li>
      <li class="odd">100GB</li>
      <li class="even">1000GB</li>
      <li class="odd">Unlimited</li>
      <li class="even">Unlimited</li>
      <li class="odd"><span class="pricing_yes"></span></li>
      <li class="even"><span class="pricing_yes"></span></li>
      <li class="odd"><span class="pricing_yes"></span></li>
      <li class="even">Unlimited</li>
      <li class="odd">50</li>
      <li class="pricing_footer"><a href="#" class="dc_pricing_button green">Sign Up</a></li>
    </ul>
     
    <!-- Column 5 -->
    <ul class="pricing_column glass_blue">
      <li class="pricing_header1">Business</li>
      <li class="pricing_header2">$39 <span>/mo.</span></li>
      <li class="odd">500GB</li>
      <li class="even">Unlimited</li>
      <li class="odd">Unlimited</li>
      <li class="even">Unlimited</li>
      <li class="odd"><span class="pricing_yes"></span></li>
      <li class="even"><span class="pricing_yes"></span></li>
      <li class="odd"><span class="pricing_yes"></span></li>
      <li class="even">Unlimited</li>
      <li class="odd">200</li>
      <li class="pricing_footer"><a href="#" class="dc_pricing_button blue">Sign Up</a></li>
    </ul>
  </div>
</div>
<!-- DC Pricing Tables:2 End -->
<div class="dc_clear"></div> <!-- line break/clear line -->

  Style C  

  • Starter
  • $5 /mo.
  • 10GB
  • 100GB
  • 1
  • 10
  • 10
  • 5
  • Sign Up
  • Basic
  • $10 /mo.
  • 50GB
  • 500GB
  • 10
  • 50
  • 50
  • 10
  • Sign Up
  • Professional
  • $29 /mo.
  • 100GB
  • 1000GB
  • Unlimited
  • Unlimited
  • Unlimited
  • 50
  • Sign Up
  • Business
  • $39 /mo.
  • 500GB
  • Unlimited
  • Unlimited
  • Unlimited
  • Unlimited
  • 200
  • Sign Up
  • Enterprise
  • $39 /mo.
  • 500GB
  • Unlimited
  • Unlimited
  • Unlimited
  • Unlimited
  • 200
  • Sign Up

View code:

?
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
<!-- DC Pricing Tables:2 Start -->
<div class="dc_pricingtable02 pricing_six"><!-- use pricing_three for 3 columns, pricing_four = 4 columns, pricing_five = 5 columns, pricing_six = 6 columns -->
   
  <!-- Column 1 -->
  <ul class="pricing_column_first gap">
    <li class="pricing_header1"></li>
    <li class="pricing_header2"><span>Choose a Plan</span></li>
    <li class="odd"> <a class="tooltip" href="#">Disk Storage <span>The amount of disk storage we provide you with every account purchase.</span> </a> </li>
    <li class="even"> <a class="tooltip" href="#">Bandwidth <span>Amount of data transfer bandwidth provided to each account, per month.</span> </a> </li>
    <li class="odd"><span>Domain Names</span></li>
    <li class="even"> <a class="tooltip" href="#">Subdomains <span>Number of subdomain assigned to your account. </a> </li>
    <li class="odd"><span>Site Builder</span></li>
    <li class="even"><span>Backups</span></li>
    <li class="odd"> <a class="tooltip" href="#">CPANEL <span>Web-based control panel system.</span> </a> </li>
    <li class="even"><span>Email Accounts</span></li>
    <li class="odd"><span>MySQL Databases</span></li>
    <li class="pricing_footer"></li>
  </ul>
  <div class="pricing_hover_area">
     
    <!-- Column 2 -->
    <ul class="pricing_column glass_white">
      <!-- color options: glass_black, glass_orange, glass_lightblue, glass_blue, glass_green, glass_purple, glass_red, glass_white, glass_aqua, glass_yellow, light_blue, blue, navy, green, yellow, orange, red, maroon, purple, pink, white, paper, silver, grey, black -->
      <li class="pricing_header1">Starter</li>
      <li class="pricing_header2">$5 <span>/mo.</span></li>
      <li class="odd">10GB</li>
      <li class="even">100GB</li>
      <li class="odd">1</li>
      <li class="even">10</li>
      <li class="odd"><span class="pricing_no"></span></li>
      <li class="even"><span class="pricing_no"></span></li>
      <li class="odd"><span class="pricing_yes"></span></li>
      <li class="even">10</li>
      <li class="odd">5</li>
      <li class="pricing_footer"> <a href="#" class="dc_pricing_button black">Sign Up</a><!-- additional options: small, rounded, large, light_blue, blue, green, red, orange, yellow, pink, purple, grey, black -->
      </li>
    </ul>
     
    <!-- Column 3 -->
    <ul class="pricing_column glass_aqua">
      <li class="pricing_header1">Basic</li>
      <li class="pricing_header2">$10 <span>/mo.</span></li>
      <li class="odd">50GB</li>
      <li class="even">500GB</li>
      <li class="odd">10</li>
      <li class="even">50</li>
      <li class="odd"><span class="pricing_yes"></span></li>
      <li class="even"><span class="pricing_yes"></span></li>
      <li class="odd"><span class="pricing_yes"></span></li>
      <li class="even">50</li>
      <li class="odd">10</li>
      <li class="pricing_footer"><a href="#" class="dc_pricing_button black">Sign Up</a></li>
    </ul>
     
    <!-- Column 4 -->
    <ul class="pricing_column glass_yellow">
      <li class="pricing_header1">Professional</li>
      <li class="pricing_header2">$29 <span>/mo.</span></li>
      <li class="odd">100GB</li>
      <li class="even">1000GB</li>
      <li class="odd">Unlimited</li>
      <li class="even">Unlimited</li>
      <li class="odd"><span class="pricing_yes"></span></li>
      <li class="even"><span class="pricing_yes"></span></li>
      <li class="odd"><span class="pricing_yes"></span></li>
      <li class="even">Unlimited</li>
      <li class="odd">50</li>
      <li class="pricing_footer"><a href="#" class="dc_pricing_button black">Sign Up</a></li>
    </ul>
     
    <!-- Column 5 -->
    <ul class="pricing_column glass_green">
      <li class="pricing_header1">Business</li>
      <li class="pricing_header2">$39 <span>/mo.</span></li>
      <li class="odd">500GB</li>
      <li class="even">Unlimited</li>
      <li class="odd">Unlimited</li>
      <li class="even">Unlimited</li>
      <li class="odd"><span class="pricing_yes"></span></li>
      <li class="even"><span class="pricing_yes"></span></li>
      <li class="odd"><span class="pricing_yes"></span></li>
      <li class="even">Unlimited</li>
      <li class="odd">200</li>
      <li class="pricing_footer"><a href="#" class="dc_pricing_button black">Sign Up</a></li>
    </ul>
    <!-- Column 6 -->
    <ul class="pricing_column glass_black">
      <li class="pricing_header1">Enterprise</li>
      <li class="pricing_header2">$39 <span>/mo.</span></li>
      <li class="odd">500GB</li>
      <li class="even">Unlimited</li>
      <li class="odd">Unlimited</li>
      <li class="even">Unlimited</li>
      <li class="odd"><span class="pricing_yes"></span></li>
      <li class="even"><span class="pricing_yes"></span></li>
      <li class="odd"><span class="pricing_yes"></span></li>
      <li class="even">Unlimited</li>
      <li class="odd">200</li>
      <li class="pricing_footer"><a href="#" class="dc_pricing_button black">Sign Up</a></li>
    </ul>
  </div>
</div>
<!-- DC Pricing Tables:2 End -->
<div class="dc_clear"></div> <!-- line break/clear line -->

  Style D  

  • Starter
  • $5 /mo.
  • 10GB
  • 100GB
  • 1
  • 10
  • 10
  • 5
  • Sign Up
  • Basic
  • $10 /mo.
  • 50GB
  • 500GB
  • 10
  • 50
  • 50
  • 10
  • Sign Up
  • Professional
  • $29 /mo.
  • 100GB
  • 1000GB
  • Unlimited
  • Unlimited
  • Unlimited
  • 50
  • Sign Up
  • Business
  • $39 /mo.
  • 500GB
  • Unlimited
  • Unlimited
  • Unlimited
  • Unlimited
  • 200
  • Sign Up
  • Enterprise
  • $39 /mo.
  • 500GB
  • Unlimited
  • Unlimited
  • Unlimited
  • Unlimited
  • 200
  • Sign Up

View code:

?
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
<!-- DC Pricing Tables:2 Start -->
<div class="dc_pricingtable02 pricing_six"><!-- use pricing_three for 3 columns, pricing_four = 4 columns, pricing_five = 5 columns, pricing_six = 6 columns -->
   
  <!-- Column 1 -->
  <ul class="pricing_column_first gap">
    <li class="pricing_header1"></li>
    <li class="pricing_header2"><span>Choose a Plan</span></li>
    <li class="odd"> <a class="tooltip" href="#">Disk Storage <span>The amount of disk storage we provide you with every account purchase.</span> </a> </li>
    <li class="even"> <a class="tooltip" href="#">Bandwidth <span>Amount of data transfer bandwidth provided to each account, per month.</span> </a> </li>
    <li class="odd"><span>Domain Names</span></li>
    <li class="even"> <a class="tooltip" href="#">Subdomains <span>Number of subdomain assigned to your account. </a> </li>
    <li class="odd"><span>Site Builder</span></li>
    <li class="even"><span>Backups</span></li>
    <li class="odd"> <a class="tooltip" href="#">CPANEL <span>Web-based control panel system.</span> </a> </li>
    <li class="even"><span>Email Accounts</span></li>
    <li class="odd"><span>MySQL Databases</span></li>
    <li class="pricing_footer"></li>
  </ul>
  <div class="pricing_hover_area">
     
    <!-- Column 2 -->
    <ul class="pricing_column white">
      <!-- color options: glass_black, glass_orange, glass_lightblue, glass_blue, glass_green, glass_purple, glass_red, glass_white, glass_aqua, glass_yellow, light_blue, blue, navy, green, yellow, orange, red, maroon, purple, pink, white, paper, silver, grey, black -->
      <li class="pricing_header1">Starter</li>
      <li class="pricing_header2">$5 <span>/mo.</span></li>
      <li class="odd">10GB</li>
      <li class="even">100GB</li>
      <li class="odd">1</li>
      <li class="even">10</li>
      <li class="odd"><span class="pricing_no"></span></li>
      <li class="even"><span class="pricing_no"></span></li>
      <li class="odd"><span class="pricing_yes"></span></li>
      <li class="even">10</li>
      <li class="odd">5</li>
      <li class="pricing_footer"> <a href="#" class="dc_pricing_button grey">Sign Up</a><!-- additional options: small, rounded, large, light_blue, blue, green, red, orange, yellow, pink, purple, grey, black -->
      </li>
    </ul>
     
    <!-- Column 3 -->
    <ul class="pricing_column paper">
      <li class="pricing_header1">Basic</li>
      <li class="pricing_header2">$10 <span>/mo.</span></li>
      <li class="odd">50GB</li>
      <li class="even">500GB</li>
      <li class="odd">10</li>
      <li class="even">50</li>
      <li class="odd"><span class="pricing_yes"></span></li>
      <li class="even"><span class="pricing_yes"></span></li>
      <li class="odd"><span class="pricing_yes"></span></li>
      <li class="even">50</li>
      <li class="odd">10</li>
      <li class="pricing_footer"><a href="#" class="dc_pricing_button grey">Sign Up</a></li>
    </ul>
     
    <!-- Column 4 -->
    <ul class="pricing_column silver">
      <li class="pricing_header1">Professional</li>
      <li class="pricing_header2">$29 <span>/mo.</span></li>
      <li class="odd">100GB</li>
      <li class="even">1000GB</li>
      <li class="odd">Unlimited</li>
      <li class="even">Unlimited</li>
      <li class="odd"><span class="pricing_yes"></span></li>
      <li class="even"><span class="pricing_yes"></span></li>
      <li class="odd"><span class="pricing_yes"></span></li>
      <li class="even">Unlimited</li>
      <li class="odd">50</li>
      <li class="pricing_footer"><a href="#" class="dc_pricing_button grey">Sign Up</a></li>
    </ul>
     
    <!-- Column 5 -->
    <ul class="pricing_column grey">
      <li class="pricing_header1">Business</li>
      <li class="pricing_header2">$39 <span>/mo.</span></li>
      <li class="odd">500GB</li>
      <li class="even">Unlimited</li>
      <li class="odd">Unlimited</li>
      <li class="even">Unlimited</li>
      <li class="odd"><span class="pricing_yes"></span></li>
      <li class="even"><span class="pricing_yes"></span></li>
      <li class="odd"><span class="pricing_yes"></span></li>
      <li class="even">Unlimited</li>
      <li class="odd">200</li>
      <li class="pricing_footer"><a href="#" class="dc_pricing_button grey">Sign Up</a></li>
    </ul>
    <!-- Column 6 -->
    <ul class="pricing_column black">
      <li class="pricing_header1">Enterprise</li>
      <li class="pricing_header2">$39 <span>/mo.</span></li>
      <li class="odd">500GB</li>
      <li class="even">Unlimited</li>
      <li class="odd">Unlimited</li>
      <li class="even">Unlimited</li>
      <li class="odd"><span class="pricing_yes"></span></li>
      <li class="even"><span class="pricing_yes"></span></li>
      <li class="odd"><span class="pricing_yes"></span></li>
      <li class="even">Unlimited</li>
      <li class="odd">200</li>
      <li class="pricing_footer"><a href="#" class="dc_pricing_button grey">Sign Up</a></li>
    </ul>
  </div>
</div>
<!-- DC Pricing Tables:2 End -->
<div class="dc_clear"></div> <!-- line break/clear line -->

  Style E  

  • Starter
  • $5 /mo.
  • 10GB
  • 100GB
  • 1
  • 10
  • 10
  • 5
  • Sign Up
  • Basic
  • $10 /mo.
  • 50GB
  • 500GB
  • 10
  • 50
  • 50
  • 10
  • Sign Up
  • Professional
  • $29 /mo.
  • 100GB
  • 1000GB
  • Unlimited
  • Unlimited
  • Unlimited
  • 50
  • Sign Up
  • Business
  • $39 /mo.
  • 500GB
  • Unlimited
  • Unlimited
  • Unlimited
  • Unlimited
  • 200
  • Sign Up

View code:

?
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
<!-- DC Pricing Tables:2 Start -->
<div class="dc_pricingtable02 pricing_five"><!-- use pricing_three for 3 columns, pricing_four = 4 columns, pricing_five = 5 columns, pricing_six = 6 columns -->
   
  <!-- Column 1 -->
  <ul class="pricing_column_first gap">
    <li class="pricing_header1"></li>
    <li class="pricing_header2"><span>Choose a Plan</span></li>
    <li class="odd"> <a class="tooltip" href="#">Disk Storage <span>The amount of disk storage we provide you with every account purchase.</span> </a> </li>
    <li class="even"> <a class="tooltip" href="#">Bandwidth <span>Amount of data transfer bandwidth provided to each account, per month.</span> </a> </li>
    <li class="odd"><span>Domain Names</span></li>
    <li class="even"> <a class="tooltip" href="#">Subdomains <span>Number of subdomain assigned to your account. </a> </li>
    <li class="odd"><span>Site Builder</span></li>
    <li class="even"><span>Backups</span></li>
    <li class="odd"> <a class="tooltip" href="#">CPANEL <span>Web-based control panel system.</span> </a> </li>
    <li class="even"><span>Email Accounts</span></li>
    <li class="odd"><span>MySQL Databases</span></li>
    <li class="pricing_footer"></li>
  </ul>
  <div class="pricing_hover_area">
     
    <!-- Column 2 -->
    <ul class="pricing_column grey">
      <!-- color options: glass_black, glass_orange, glass_lightblue, glass_blue, glass_green, glass_purple, glass_red, glass_white, glass_aqua, glass_yellow, light_blue, blue, navy, green, yellow, orange, red, maroon, purple, pink, white, paper, silver, grey, black -->
      <li class="pricing_header1">Starter</li>
      <li class="pricing_header2">$5 <span>/mo.</span></li>
      <li class="odd">10GB</li>
      <li class="even">100GB</li>
      <li class="odd">1</li>
      <li class="even">10</li>
      <li class="odd"><span class="pricing_no"></span></li>
      <li class="even"><span class="pricing_no"></span></li>
      <li class="odd"><span class="pricing_yes"></span></li>
      <li class="even">10</li>
      <li class="odd">5</li>
      <li class="pricing_footer"> <a href="#" class="dc_pricing_button grey">Sign Up</a><!-- additional options: small, rounded, large, light_blue, blue, green, red, orange, yellow, pink, purple, grey, black -->
      </li>
    </ul>
     
    <!-- Column 3 -->
    <ul class="pricing_column purple">
      <li class="pricing_header1">Basic</li>
      <li class="pricing_header2">$10 <span>/mo.</span></li>
      <li class="odd">50GB</li>
      <li class="even">500GB</li>
      <li class="odd">10</li>
      <li class="even">50</li>
      <li class="odd"><span class="pricing_yes"></span></li>
      <li class="even"><span class="pricing_yes"></span></li>
      <li class="odd"><span class="pricing_yes"></span></li>
      <li class="even">50</li>
      <li class="odd">10</li>
      <li class="pricing_footer"><a href="#" class="dc_pricing_button grey">Sign Up</a></li>
    </ul>
     
    <!-- Column 4 -->
    <ul class="pricing_column black">
      <li class="pricing_header1">Professional</li>
      <li class="pricing_header2">$29 <span>/mo.</span></li>
      <li class="odd">100GB</li>
      <li class="even">1000GB</li>
      <li class="odd">Unlimited</li>
      <li class="even">Unlimited</li>
      <li class="odd"><span class="pricing_yes"></span></li>
      <li class="even"><span class="pricing_yes"></span></li>
      <li class="odd"><span class="pricing_yes"></span></li>
      <li class="even">Unlimited</li>
      <li class="odd">50</li>
      <li class="pricing_footer"><a href="#" class="dc_pricing_button grey">Sign Up</a></li>
    </ul>
     
    <!-- Column 5 -->
    <ul class="pricing_column maroon">
      <li class="pricing_header1">Business</li>
      <li class="pricing_header2">$39 <span>/mo.</span></li>
      <li class="odd">500GB</li>
      <li class="even">Unlimited</li>
      <li class="odd">Unlimited</li>
      <li class="even">Unlimited</li>
      <li class="odd"><span class="pricing_yes"></span></li>
      <li class="even"><span class="pricing_yes"></span></li>
      <li class="odd"><span class="pricing_yes"></span></li>
      <li class="even">Unlimited</li>
      <li class="odd">200</li>
      <li class="pricing_footer"><a href="#" class="dc_pricing_button grey">Sign Up</a></li>
    </ul>
  </div>
</div>
<!-- DC Pricing Tables:2 End -->
<div class="dc_clear"></div> <!-- line break/clear line -->

Pricing Table Style 3

View code:

?
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
<!-- DC Pricing Tables:3 Start -->
  <div class="dc_pricingtable03 dc_pt3_style1">
    <div class="caption_column">
      <ul>
        <li class="header_row_1 align_center radius5_topleft"></li>
        <li class="header_row_2">
          <h2 class="caption">Choose plan</h2>
        </li>
        <li class="row_style_4"><span>Web Space</span></li>
        <li class="row_style_2"><span>Bandwidth</span></li>
        <li class="row_style_4"><span>E-mail accounts</span></li>
        <li class="row_style_2"><span>MySQL databases</span></li>
        <li class="row_style_4"><span><a href="#" class="tooltip" rel="Web-based control panel system">CPANEL</a></span></li>
        <li class="row_style_2"><span><a href="#" class="tooltip" rel="24/7 Support via Phone, Email, Web.">24/7 Support</a></span></li>
        <li class="footer_row"></li>
      </ul>
    </div>
    <div class="column_1">
      <ul>
        <li class="header_row_1 align_center">
          <h2 class="col1">starter</h2>
        </li>
        <li class="header_row_2 align_center">
          <h1 class="col1">$<span>5</span></h1>
          <h3 class="col1">per month</h3>
        </li>
        <li class="row_style_3 align_center"><span><a href="#" class="tooltip" rel="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">10GB</a></span></li>
        <li class="row_style_1 align_center"><span><a href="#" class="tooltip" rel="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">100GB</a></span></li>
        <li class="row_style_3 align_center"><span><a href="#" class="tooltip" rel="Tooltip info.">1</a></span></li>
        <li class="row_style_1 align_center"><span><a href="#" class="tooltip" rel="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">1</a></span></li>
        <li class="row_style_3 align_center"><span class="pricing_no"></span></li>
        <li class="row_style_1 align_center"><span class="pricing_yes"></span></li>
        <li class="footer_row"><a href="" class="sign_up">sign up!</a></li>
      </ul>
    </div>
    <div class="column_2">
      <ul>
        <li class="header_row_1 align_center">
          <h2 class="col2">basic</h2>
        </li>
        <li class="header_row_2 align_center">
          <h1 class="col2">$<span>10</span></h1>
          <h3 class="col2">per month</h3>
        </li>
        <li class="row_style_4 align_center"><span><a href="#" class="tooltip" rel="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">30GB</a></span></li>
        <li class="row_style_2 align_center"><span><a href="#" class="tooltip" rel="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">200GB</a></span></li>
        <li class="row_style_4 align_center"><span><a href="#" class="tooltip" rel="Tooltip info.">10</a></span></li>
        <li class="row_style_2 align_center"><span><a href="#" class="tooltip" rel="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">10</a></span></li>
        <li class="row_style_4 align_center"><span class="pricing_yes"></span></li>
        <li class="row_style_2 align_center"><span class="pricing_yes"></span></li>
        <li class="footer_row"><a href="" class="sign_up">sign up!</a></li>
      </ul>
    </div>
    <div class="column_3">
      <ul>
        <li class="header_row_1 align_center">
          <h2 class="col3">pro</h2>
        </li>
        <li class="header_row_2 align_center">
          <h1 class="col3">$<span>29</span></h1>
          <h3 class="col3">per month</h3>
        </li>
        <li class="row_style_3 align_center"><span><a href="#" class="tooltip" rel="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">100GB</a></span></li>
        <li class="row_style_1 align_center"><span><a href="#" class="tooltip" rel="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">500GB</a></span></li>
        <li class="row_style_3 align_center"><span><a href="#" class="tooltip" rel="Tooltip info.">50</a></span></li>
        <li class="row_style_1 align_center"><span><a href="#" class="tooltip" rel="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">50</a></span></li>
        <li class="row_style_3 align_center"><span class="pricing_yes"></span></li>
        <li class="row_style_1 align_center"><span class="pricing_yes"></span></li>
        <li class="footer_row"><a href="" class="sign_up">sign up!</a></li>
      </ul>
    </div>
    <div class="column_4">
      <ul>
        <li class="header_row_1 align_center radius5_topright">
          <h2 class="col4">biz</h2>
        </li>
        <li class="header_row_2 align_center">
          <h1 class="col4">$<span>39</span></h1>
          <h3 class="col4">per month</h3>
        </li>
        <li class="row_style_4 align_center"><span><a href="#" class="tooltip" rel="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">Unlimited</a></span></li>
        <li class="row_style_2 align_center"><span><a href="#" class="tooltip" rel="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">1000GB</a></span></li>
        <li class="row_style_4 align_center"><span><a href="#" class="tooltip" rel="Tooltip info.">Unlimited</a></span></li>
        <li class="row_style_2 align_center"><span><a href="#" class="tooltip" rel="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">Unlimited</a></span></li>
        <li class="row_style_4 align_center"><span class="pricing_yes"></span></li>
        <li class="row_style_2 align_center"><span class="pricing_yes"></span></li>
        <li class="footer_row"><a href="" class="sign_up">sign up!</a></li>
      </ul>
    </div>
  </div>
<!-- DC Pricing Tables:3 End -->
<div class="dc_clear"></div> <!-- line break/clear line -->

Pricing Table Style 4


View code:

?
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
<!-- DC Pricing Tables:4 Start -->
  <div class="dc_pricingtable04">
    <ul class="price-box">
      <li class="pricing-header glass_blue">
        <ul>
          <li class="title">Starter</li>
          <li class="price"><span class="currency">$</span><span class="big">4</span><span class="small">.95</span></li>
          <li class="month-label">Per Month</li>
        </ul>
      </li>
      <li class="pricing-content">
        <ul>
          <li class="big-description"><strong>Suitable for small blogs, personal sites.</strong></li>
          <li><strong>5</strong> Domains</li>
          <li><strong>5 GB</strong> Storage</li>
          <li><strong>Unlimited</strong> Users</li>
          <li><strong>5</strong> MySQL DBs</li>
          <li><strong>24/7</strong> Support</li>
        </ul>
      </li>
      <li class="pricing-footer"> <a href="#" class="dc_pricing_button large green">Join</a> </li>
    </ul>
    <ul class="price-box">
      <li class="pricing-header">
        <ul>
          <li class="title">Basic</li>
          <li class="price"><span class="currency">$</span><span class="big">10</span><span class="small"></span></li>
          <li class="month-label">Per Month</li>
        </ul>
      </li>
      <li class="pricing-content">
        <ul>
          <li class="big-description"><strong>Perfect for those getting started with a website.</strong></li>
          <li><strong>10</strong> Domains</li>
          <li><strong>25 GB</strong> Storage</li>
          <li><strong>Unlimited</strong> Users</li>
          <li><strong>10</strong> MySQL DBs</li>
          <li><strong>24/7</strong> Support</li>
        </ul>
      </li>
      <li class="pricing-footer"> <a href="#" class="dc_pricing_button large green">Join</a> </li>
    </ul>
    <ul class="price-box">
      <li class="pricing-header">
        <ul>
          <li class="title">Pro</li>
          <li class="price"><span class="currency">$</span><span class="big">29</span><span class="small"></span></li>
          <li class="month-label">Per Month</li>
        </ul>
      </li>
      <li class="pricing-content">
        <ul>
          <li class="big-description"><strong>Designed for small to medium businesses.</strong></li>
          <li><strong>50</strong> Domains</li>
          <li><strong>50 GB</strong> Storage</li>
          <li><strong>Unlimited</strong> Users</li>
          <li><strong>Unlimited</strong> MySQL DBs</li>
          <li><strong>24/7</strong> Support</li>
        </ul>
      </li>
      <li class="pricing-footer"> <a href="#" class="dc_pricing_button large green">Join</a> </li>
    </ul>
    <div class="dc_clear"></div>
  </div>
<!-- DC Pricing Tables:4 End -->
<div class="dc_clear"></div> <!-- line break/clear line -->

Pricing Table Style 5


View code:

?
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
<!-- DC Pricing Tables:5 Start -->
  <div class="dc_pricingtable05">
    <ul class="borderright">
        <li><h3>Basic</h3><span>$4.50/month</span></li>
        <li class="white">Up to 50 users</li>
        <li>50 GB storage</li>
        <li class="white">Unlimited Sets</li>
        <li>Unlimited Workspaces</li>
        <li class="white">iPhone App</li>
        <li>Private URLs</li>
        <li class="white">Enhanced Security</li>
        <li><a href="#" class="dc_pricing_button grey">Sign Up</a></li>
    </ul>
     
    <ul class="borderleft borderright">
        <li><h3>Advanced</h3><span>$9.50/month</span></li>
        <li  class="white">Up to 50 users</li>
        <li>50 GB storage</li>
        <li class="white">Unlimited Sets</li>
        <li>Unlimited Workspaces</li>
        <li class="white">iPhone App</li>
        <li>Private URLs</li>
        <li class="white">Enhanced Security</li>
        <li><a href="#" class="dc_pricing_button grey">Sign Up</a></li>
    </ul>
     
    <ul class="borderright borderleft">
        <li><h3>Premium</h3><span>$11.50/month</span></li>
        <li class="white">Up to 50 users</li>
        <li>50 GB storage</li>
        <li class="white">Unlimited Sets</li>
        <li>Unlimited Workspaces</li>
        <li class="white">iPhone App</li>
        <li>Private URLs</li>
        <li class="white">Enhanced Security</li>
        <li><a href="#" class="dc_pricing_button grey">Sign Up</a></li>
    </ul>
     
    <ul class="borderleft">
        <li><h3>Pro</h3><span>$13.50/month</span></li>
        <li class="white">Up to 50 users</li>
        <li>50 GB storage</li>
        <li class="white">Unlimited Sets</li>
        <li>Unlimited Workspaces</li>
        <li class="white">iPhone App</li>
        <li>Private URLs</li>
        <li class="white">Enhanced Security</li>
        <li><a href="#" class="dc_pricing_button grey">Sign Up</a></li>
    </ul>
  </div>
<!-- DC Pricing Tables:5 End -->
<div class="dc_clear"></div> <!-- line break/clear line -->

Pricing Table Style 6


View code:

?
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
<!-- DC Pricing Tables:6 Start -->
<div class="dc_pricingtable06">
  <ul class="borderright">
    <li>
      <h3>Basic</h3>
      <span>$4.50/month</span></li>
    <li class="white">Up to 50 users</li>
    <li>50 GB storage</li>
    <li class="white">Unlimited Sets</li>
    <li>Unlimited Workspaces</li>
    <li class="white">iPhone App</li>
    <li>Private URLs</li>
    <li class="white">Enhanced Security</li>
    <li><a href="#" class="dc_pricing_button blue">Sign Up</a></li>
  </ul>
  <ul class="borderleft borderright">
    <li>
      <h3>Advanced</h3>
      <span>$9.50/month</span></li>
    <li  class="white">Up to 50 users</li>
    <li>50 GB storage</li>
    <li class="white">Unlimited Sets</li>
    <li>Unlimited Workspaces</li>
    <li class="white">iPhone App</li>
    <li>Private URLs</li>
    <li class="white">Enhanced Security</li>
    <li><a href="#" class="dc_pricing_button red">Sign Up</a></li>
  </ul>
  <ul class="borderright borderleft">
    <li>
      <h3>Premium</h3>
      <span>$11.50/month</span></li>
    <li class="white">Up to 50 users</li>
    <li>50 GB storage</li>
    <li class="white">Unlimited Sets</li>
    <li>Unlimited Workspaces</li>
    <li class="white">iPhone App</li>
    <li>Private URLs</li>
    <li class="white">Enhanced Security</li>
    <li><a href="#" class="dc_pricing_button green">Sign Up</a></li>
  </ul>
  <ul class="borderleft">
    <li>
      <h3>Pro</h3>
      <span>$13.50/month</span></li>
    <li class="white">Up to 50 users</li>
    <li>50 GB storage</li>
    <li class="white">Unlimited Sets</li>
    <li>Unlimited Workspaces</li>
    <li class="white">iPhone App</li>
    <li>Private URLs</li>
    <li class="white">Enhanced Security</li>
    <li><a href="#" class="dc_pricing_button orange">Sign Up</a></li>
  </ul>
</div>
<!-- DC Pricing Tables:6 End -->
<div class="dc_clear"></div> <!-- line break/clear line -->


© TemplateAccess