Presentation of Pricing Tables Creator

STEP 1 - Copy generated HTML CODE and paste it in the desired location of your html document.
( TIP: The quickest way to do this is to click on the link 'pop-up' in the upper right corner of the window with the code )

STEP 2 - Copy generated CSS CODE.

STEP 3 - Go to DEMO folder, open ptc-custom.css file with Your favorite css editor and paste copied styles.
( TIP: To edit the css file you can use the following programs Notepad++, Sublime Text, WebStorm, Dreamweaver. More programs can be found at this website 10 Professional Free CSS Editors )

INCLUDE CSS

Include three CSS files into your HTML head.

  • --> ptc-tables.css - pricing tables styles
  • --> ptc-custom.css - generated styles
  • --> font-awesome.css - font icons styles

( TIP: Files should be placed in the folder named css. Also remember that the file ptc-tables.css MUST ALWAYS be included before the ptc-custom.css )

<link rel="stylesheet" type="text/css" href="css/ptc-tables.css" />
<link rel="stylesheet" type="text/css" href="css/ptc-custom.css" />
<link rel="stylesheet" type="text/css" href="css/font-awesome.css" />


UPLOAD FILES TO YOUR SERVER

If Your html file is online You have to upload via FTP client following files preserving the directory structure shown below.

Your directory structure should look like this
( TIP: Files should be placed in the folder named css )

 

IMPORTANT: Do not forget to upload the 'fonts' folder that contains the files needed to display icons

In DEMO folder you will find an example of how to use the generated tables.

 

 

This html code below is sample code generated by the wizard

<!-- BEGIN PRICING TABLES -->

<div class="ptc-tables original">
	<div id="ptc_1" class="ptc-table col-lg-2 col-md-4 col-sm-6 col-xs-12 ptc-smaller">
		<div class="ptc-header">
			<div class="ptc-stars">
				<span class="fa fa-star"></span>
			</div>
			<h1 class="ptc-title">
				FREE
			</h1>
			<div class="ptc-arrow-down ptc-first">
			</div>
		</div>
		<div class="ptc-price">
			<span class="ptc-total"><sup class="ptc-currency">$</sup>99.99</span>
			<p class="ptc-text">
				PER MONTH
			</p><a class="ptc-button" href="#">SIGN UP</a>
			<div class="ptc-arrow-down ptc-second">
			</div>
		</div>
		<div class="ptc-content">
			<ul class="ptc-features">
				<li class="ptc-feature">
					<a href="#">FEATURE</a>
				</li>
				<li class="ptc-feature">
					<a href="#">FEATURE</a>
				</li>
				<li class="ptc-feature">
					<a href="#">FEATURE</a>
				</li>
				<li class="ptc-feature">
					<a href="#">FEATURE</a>
				</li>
				<li class="ptc-feature">
					<a href="#">FEATURE</a>
				</li>
			</ul>
		</div>
		<div class="ptc-footer">
			<a class="ptc-button" href="#">SIGN UP</a>
		</div>
	</div>
	<div id="ptc_2" class="ptc-table col-lg-2 col-md-4 col-sm-6 col-xs-12 ptc-smaller">
		<div class="ptc-header">
			<div class="ptc-stars">
				<span class="fa fa-star"></span><span class="fa fa-star"></span>
			</div>
			<h1 class="ptc-title">
				BASIC
			</h1>
			<div class="ptc-arrow-down ptc-first">
			</div>
		</div>
		<div class="ptc-price">
			<span class="ptc-total"><sup class="ptc-currency">$</sup>99.99</span>
			<p class="ptc-text">
				PER MONTH
			</p><a class="ptc-button" href="#">SIGN UP</a>
			<div class="ptc-arrow-down ptc-second">
			</div>
		</div>
		<div class="ptc-content">
			<ul class="ptc-features">
				<li class="ptc-feature">
					<a href="#">FEATURE</a>
				</li>
				<li class="ptc-feature">
					<a href="#">FEATURE</a>
				</li>
				<li class="ptc-feature">
					<a href="#">FEATURE</a>
				</li>
				<li class="ptc-feature">
					<a href="#">FEATURE</a>
				</li>
				<li class="ptc-feature">
					<a href="#">FEATURE</a>
				</li>
			</ul>
		</div>
		<div class="ptc-footer">
			<a class="ptc-button" href="#">SIGN UP</a>
		</div>
	</div>
	<div id="ptc_3" class="ptc-table col-lg-2 col-md-4 col-sm-6 col-xs-12 ptc-smaller">
		<div class="ptc-header">
			<div class="ptc-stars">
				<span class="fa fa-star"></span><span class="fa fa-star"></span><span class="fa fa-star"></span>
			</div>
			<h1 class="ptc-title">
				STANDARD
			</h1>
			<div class="ptc-arrow-down ptc-first">
			</div>
		</div>
		<div class="ptc-price">
			<span class="ptc-total"><sup class="ptc-currency">$</sup>99.99</span>
			<p class="ptc-text">
				PER MONTH
			</p><a class="ptc-button" href="#">SIGN UP</a>
			<div class="ptc-arrow-down ptc-second">
			</div>
		</div>
		<div class="ptc-content">
			<ul class="ptc-features">
				<li class="ptc-feature">
					<a href="#">FEATURE</a>
				</li>
				<li class="ptc-feature">
					<a href="#">FEATURE</a>
				</li>
				<li class="ptc-feature">
					<a href="#">FEATURE</a>
				</li>
				<li class="ptc-feature">
					<a href="#">FEATURE</a>
				</li>
				<li class="ptc-feature">
					<a href="#">FEATURE</a>
				</li>
			</ul>
		</div>
		<div class="ptc-footer">
			<a class="ptc-button" href="#">SIGN UP</a>
		</div>
	</div>
	<div id="ptc_4" class="ptc-table col-lg-2 col-md-4 col-sm-6 col-xs-12 ptc-smaller">
		<div class="ptc-header">
			<div class="ptc-stars">
				<span class="fa fa-star"></span><span class="fa fa-star"></span><span class="fa fa-star"></span><span class="fa fa-star"></span>
			</div>
			<h1 class="ptc-title">
				BUSINESS
			</h1>
			<div class="ptc-arrow-down ptc-first">
			</div>
		</div>
		<div class="ptc-price">
			<span class="ptc-total"><sup class="ptc-currency">$</sup>99.99</span>
			<p class="ptc-text">
				PER MONTH
			</p><a class="ptc-button" href="#">SIGN UP</a>
			<div class="ptc-arrow-down ptc-second">
			</div>
		</div>
		<div class="ptc-content">
			<ul class="ptc-features">
				<li class="ptc-feature">
					<a href="#">FEATURE</a>
				</li>
				<li class="ptc-feature">
					<a href="#">FEATURE</a>
				</li>
				<li class="ptc-feature">
					<a href="#">FEATURE</a>
				</li>
				<li class="ptc-feature">
					<a href="#">FEATURE</a>
				</li>
				<li class="ptc-feature">
					<a href="#">FEATURE</a>
				</li>
			</ul>
		</div>
		<div class="ptc-footer">
			<a class="ptc-button" href="#">SIGN UP</a>
		</div>
	</div>
	<div id="ptc_5" class="ptc-table col-lg-2 col-md-4 col-sm-6 col-xs-12 ptc-smaller">
		<div class="ptc-header">
			<div class="ptc-stars">
				<span class="fa fa-star"></span><span class="fa fa-star"></span><span class="fa fa-star"></span><span class="fa fa-star"></span><span class="fa fa-star"></span>
			</div>
			<h1 class="ptc-title">
				PREMIUM
			</h1>
			<div class="ptc-arrow-down ptc-first">
			</div>
		</div>
		<div class="ptc-price">
			<span class="ptc-total"><sup class="ptc-currency">$</sup>99.99</span>
			<p class="ptc-text">
				PER MONTH
			</p><a class="ptc-button" href="#">SIGN UP</a>
			<div class="ptc-arrow-down ptc-second">
			</div>
		</div>
		<div class="ptc-content">
			<ul class="ptc-features">
				<li class="ptc-feature">
					<a href="#">FEATURE</a>
				</li>
				<li class="ptc-feature">
					<a href="#">FEATURE</a>
				</li>
				<li class="ptc-feature">
					<a href="#">FEATURE</a>
				</li>
				<li class="ptc-feature">
					<a href="#">FEATURE</a>
				</li>
				<li class="ptc-feature">
					<a href="#">FEATURE</a>
				</li>
			</ul>
		</div>
		<div class="ptc-footer">
			<a class="ptc-button" href="#">SIGN UP</a>
		</div>
	</div>
	<div id="ptc_6" class="ptc-table col-lg-2 col-md-4 col-sm-6 col-xs-12 ptc-smaller">
		<div class="ptc-header">
			<div class="ptc-stars">
				<span class="fa fa-star"></span><span class="fa fa-star"></span><span class="fa fa-star"></span><span class="fa fa-star"></span><span class="fa fa-star"></span><span class="fa fa-star"></span>
			</div>
			<h1 class="ptc-title">
				PROFESSIONAL
			</h1>
			<div class="ptc-arrow-down ptc-first">
			</div>
		</div>
		<div class="ptc-price">
			<span class="ptc-total"><sup class="ptc-currency">$</sup>99.99</span>
			<p class="ptc-text">
				PER MONTH
			</p><a class="ptc-button" href="#">SIGN UP</a>
			<div class="ptc-arrow-down ptc-second">
			</div>
		</div>
		<div class="ptc-content">
			<ul class="ptc-features">
				<li class="ptc-feature">
					<a href="#">FEATURE</a>
				</li>
				<li class="ptc-feature">
					<a href="#">FEATURE</a>
				</li>
				<li class="ptc-feature">
					<a href="#">FEATURE</a>
				</li>
				<li class="ptc-feature">
					<a href="#">FEATURE</a>
				</li>
				<li class="ptc-feature">
					<a href="#">FEATURE</a>
				</li>
			</ul>
		</div>
		<div class="ptc-footer">
			<a class="ptc-button" href="#">SIGN UP</a>
		</div>
	</div>
</div>

<!-- END PRICING TABLES -->

The generated code can be edited in programs for editing html and freely change it.

The length of this code can be shorter or longer depending on the user settings.

@import url(http://fonts.googleapis.com/css?family=Teko);
.ptc-tables {
    font-family: Teko;
     font-size: 62.5%;
}
 

ptc-tables.css

In addition to the generated code css is also a solid css code that should be included named

This file contains sections:

You can easly find this sections in file.
 

font-awesome.css

This file contains font icons styles.

All the files needed to install pricing tables

 

 

CREDITS

Creator:

jQuery v1.8.3
jQuery UI
OWL Carousel
Numeric Stepper
Spectrum Colorpicker v1.5.1
Prism Syntax Highlighter
jQuery Syntax Highlighter v2.0.0
iCheck 1.0.1
Selectbox plugin 0.2
Impromptu - v5.2.5
Enscroll v0.6.1
HTML Clean for jQuery v1.4.0
vkBeautify v0.99.00.beta

Output:

Font Awesome 4.2.0
Bootstrap Grid v3.2.0
Hover.css v1.0.8