OverviewElitepack CSS3 Pricing Tables is a collection of pure CSS3 Classic Pricing tables that are uniquely designed to showcase pricing features for your products or services.
The Elitepack Pricing Tables have a pretty clean and minimalistic design with smooth shadows and hover effects. These pricing tables can be used in any business website template or any other web project you are working on. Elitepack Pricing tables come bundled with 4 variation designs:
[list bullet-1][li]Tabled Layout[/li][li]Tabled layout with detail section[/li][li]Pricing boxes[/li][li]Animated product boxes[/li][/list]
Elitepack pricing tables utilizes abstract classes meaning you can create you own colors by playing around with gradients, choosing the icons that you wish to incorporate, using variation of colors on a single set and so much more.
What's in the package
Once you download the zipped file, extract it to a local folder or on your server via FTP. You will find 3 folders within: demo, psd and css:[list bullet-1] [li]demo - This is a working HTML version showcasing the css3 pricing tables in use[/li] [li]css - the css3 pricing tables pack. This is your production unit. To use it in your website, copy the entire css folder and paste it in the root folder of your site then reference the css stylesheet appropriately[/li] [li]psd - psd sources for the option buttons used[/li] [/list]
How to add it to your projectNOTE: This section assumes you have the basic knowledge in HTML/PHP and how to apply CSS stylesheets in your header. To add the css stylesheets into your website (whether HTML, PHP or any other language that utilizes stylesheets) simply add the following code in the head section of your HTML File.
<link rel="stylesheet" href="/css/pricing-tabled-light.css" type="text/css" media="screen" /> <!--[if IE 7]><link rel="stylesheet" href="/css/pricing.ie7.css" type="text/css" media="screen" /><![endif]--> <!--[if IE 8]><link rel="stylesheet" href="/css/pricing.ie8.css" type="text/css" media="screen" /><![endif]--> <!--[if IE 9]><link rel="stylesheet" href="/css/pricing.ie9.css" type="text/css" media="screen" /><![endif]-->
How to create tablesOnce you have included your preferred css stylesheet in your header section, you are ready to roll.
Step 1: Determine the layout you want to useThe elitepack pricing tables have four different layouts that you can choose from and each layout has its own unique css stylesheet: [list bullet-1] [li]Tabled Layout - uses a combination of divs to create a tabled column layout[/li] [li]Tabled layout with detail section - uses a combination of divs to create a detailed section on the left and tabled columns on the right[/li] [li]Pricing boxes - uses a combination of divs to created a disjointed pricing boxes[/li] [li]Animated product boxes - combines images and CSS3 animations to show the product detail[/li] [/list]
Step 2: Choose the number of columns and color you want to useTo create a set of pricing tables, you must first determine the number of columns you want to create and the color scheme. Add the following code within your html specifying the number of columns within your class. In the example below, I'm going to create a four column pricing table.
<div class="pricing four orange"> </div>If you would like to use different coloration in each box then you don't have to define the color in the top div as above. In that case you will define the color in the th, bottom and price-tag divs respectively.
Step 3: Enter number of price-col div within the pricing div as per your number of columnsOnce we have created the pricing top div copy the following price-col div structure and paste it the number of times that you specified the number of columns.
<!--price box column--> <div class="price-col last"> <div class="th"> <span class="title"><strong>Package</strong> Name</span> <span class="bottom"></span> </div> <div class="p-inner"> <ul class="feature"> <li>feature 1 </li> <li class="odd">feature 2</li> <li>feature 3</li> <li class="odd price-tag">$ 20 <sub>/mo</sub></li> </ul> <span class="call-action"> <a class="csbutton" href="#" >Buy now</a> </span> </div> </div> </div>