2 PISOS, 2 DJ's
ptzh-CNenfrdeelhiitples

Typography

ToolTips

TOOLTIPS
 
Northwest
North
Northeast
West
 
East
Southwest
South
Southeast
 
GET CODE
<div class="jf_col grid_4 jf_tipsy_nw" title="Northwest">Northwest</div>
<div class="jf_col grid_4 jf_tipsy_n" title="North">North</div>
<div class="jf_col grid_4 last-column jf_tipsy_ne" title="Northeast">Northeast</div>

<div class="jf_col grid_4 jf_tipsy_w" title="West">West</div>
<div class="jf_col grid_4">&nbsp;</div>
<div class="jf_col grid_4 last-column jf_tipsy_e" title="East">East</div>

<div class="jf_col grid_4 jf_tipsy_sw" title="Southwest">Southwest</div>
<div class="jf_col grid_4 jf_tipsy_s" title="South">South</div>
<div class="jf_col grid_4 last-column jf_tipsy_se" title="Southeast">Southeast</div>
 
 
Northwest
North
Northeast
West
 
East
Southwest
South
Southeast
 
GET CODE
<div class="jf_col grid_4 jf_tipsy_fast_nw" title="Northwest">Northwest</div>
<div class="jf_col grid_4 jf_tipsy_fast_n" title="North">North</div>
<div class="jf_col grid_4 last-column jf_tipsy_fast_ne" title="Northeast">Northeast</div>

<div class="jf_col grid_4 jf_tipsy_fast_w" title="West">West</div>
<div class="jf_col grid_4">&nbsp;</div>
<div class="jf_col grid_4 last-column jf_tipsy_fast_e" title="East">East</div>

<div class="jf_col grid_4 jf_tipsy_fast_sw" title="Southwest">Southwest</div>
<div class="jf_col grid_4 jf_tipsy_fast_s" title="South">South</div>
<div class="jf_col grid_4 last-column jf_tipsy_fast_se" title="Southeast">Southeast</div>
 
 
Northwest
North
Northeast
West
 
East
Southwest
South
Southeast
 
GET CODE
<div class="jf_col grid_4 jf_tipsy_nw_arial" title="Northwest">Northwest</div>
<div class="jf_col grid_4 jf_tipsy_n_arial" title="North">North</div>
<div class="jf_col grid_4 last-column jf_tipsy_ne_arial" title="Northeast">Northeast</div>

<div class="jf_col grid_4 jf_tipsy_w_arial" title="West">West</div>
<div class="jf_col grid_4">&nbsp;</div>
<div class="jf_col grid_4 last-column jf_tipsy_e_arial" title="East">East</div>

<div class="jf_col grid_4 jf_tipsy_sw_arial" title="Southwest">Southwest</div>
<div class="jf_col grid_4 jf_tipsy_s_arial" title="South">South</div>
<div class="jf_col grid_4 last-column jf_tipsy_se_arial" title="Southeast">Southeast</div>
 
 
Northwest
North
Northeast
West
 
East
Southwest
South
Southeast
 
GET CODE
<div class="jf_col grid_4 jf_tipsy_fast_nw_arial" title="Northwest">Northwest</div>
<div class="jf_col grid_4 jf_tipsy_fast_n_arial" title="North">North</div>
<div class="jf_col grid_4 last-column jf_tipsy_fast_ne_arial" title="Northeast">Northeast</div>

<div class="jf_col grid_4 jf_tipsy_fast_w_arial" title="West">West</div>
<div class="jf_col grid_4">&nbsp;</div>
<div class="jf_col grid_4 last-column jf_tipsy_fast_e_arial" title="East">East</div>

<div class="jf_col grid_4 jf_tipsy_fast_sw_arial" title="Southwest">Southwest</div>
<div class="jf_col grid_4 jf_tipsy_fast_s_arial" title="South">South</div>
<div class="jf_col grid_4 last-column jf_tipsy_fast_se_arial" title="Southeast">Southeast</div>
 
 

Image Styles

IMAGE STYLES
 
Consectetur Adipiscing Elit
 
14 October
2012
Written by:John Doe
Category:Blog
 
GET CODE
<div class="jf_image_block">
	<span class="jf_blog_image">
		<div class="jf_image">
			<img src="/images/jf/gallery/image_1.jpg">
		</div>
		<div class="jf_zoom_sec">
			<div class="jf_zoom_block">
				<div class="jf_zoom">
					<a class="pirobox_gall" rel="gallery" title="Sample Title" href="/images/jf/gallery/image_1.jpg">&nbsp;</a>
				</div>
			</div>
		</div>
		<div class="jf_date">
			<span class="date">14 October<br>2012</span>
		</div>
		<div class="jf_author">
			<span class="author">Written by:<a href="#">John Doe</a></span>
		</div>
		<div class="jf_category">
			<div class="category">Category:<a href="#">Blog</a></div>
		</div>
	</span>
	<div class="clr"></div>
</div>
 
 
Consectetur Adipiscing Elit
 
14 October
2012
Written by:John Doe
Category:Blog
 
GET CODE
<div class="jf_image_block style2">
	<span class="jf_blog_image">
		<div class="jf_image">
			<img src="/images/jf/gallery/image_1.jpg">
		</div>
		<div class="jf_zoom_sec">
			<div class="jf_zoom_block">
				<div class="jf_zoom">
					<a class="pirobox_gall" rel="gallery" title="Sample Title" href="/images/jf/gallery/image_1.jpg">&nbsp;</a>
				</div>
			</div>
		</div>
		<div class="jf_date">
			<span class="date">14 October<br>2012</span>
		</div>
		<div class="jf_author">
			<span class="author">Written by:<a href="#">John Doe</a></span>
		</div>
		<div class="jf_category">
			<div class="category">Category:<a href="#">Blog</a></div>
		</div>
	</span>
	<div class="clr"></div>
</div>
 
 
Consectetur Adipiscing Elit
 
14 October
2012
Written by:John Doe
Category:Blog
 
GET CODE
<div class="jf_image_block style3">
	<span class="jf_blog_image">
		<div class="jf_image">
			<img src="/images/jf/gallery/image_1.jpg">
		</div>
		<div class="jf_zoom_sec">
			<div class="jf_zoom_block">
				<div class="jf_zoom">
					<a class="pirobox_gall" rel="gallery" title="Sample Title" href="/images/jf/gallery/image_1.jpg">&nbsp;</a>
				</div>
			</div>
		</div>
		<div class="jf_date">
			<span class="date">14 October<br>2012</span>
		</div>
		<div class="jf_author">
			<span class="author">Written by:<a href="#">John Doe</a></span>
		</div>
		<div class="jf_category">
			<div class="category">Category:<a href="#">Blog</a></div>
		</div>
	</span>
	<div class="clr"></div>
</div>
 
 
 
GET CODE
<ul class="jf_typo_gallery">
	<li>
		<a class="pirobox_gall" rel="gallery" title="Sample Title" href="/images/jf/gallery/image_1.jpg"> 
			<img src="/images/jf/gallery/thumb/image_1.jpg">
			<div class="mask">
				<div class="mask_content">
					<div class="title">Sample Tittle</div>
					<div class="border">&nbsp;</div>
					<div class="zoom">&nbsp;</div>
				</div>
			</div>
		</a>
	</li>
	<li>
		<a class="pirobox_gall" rel="gallery" title="Sample Title" href="/images/jf/gallery/image_1.jpg"> 
			<img src="/images/jf/gallery/thumb/image_1.jpg">
			<div class="mask">
				<div class="mask_content">
					<div class="title">Sample Tittle</div>
					<div class="border">&nbsp;</div>
					<div class="zoom">&nbsp;</div>
				</div>
			</div>
		</a>
	</li>
</ul>
 
 

Pricing Tables

PRICING TABLES
 

Basic

$20/month

  • Item One Description
  • Item Two Description
  • Item Three Description
  • Item Four Description
  • Item Five Description
Purchase

Advanced

$40/month

  • Item One Description
  • Item Two Description
  • Item Three Description
  • Item Four Description
  • Item Five Description
Purchase

Expert

$60/month

  • Item One Description
  • Item Two Description
  • Item Three Description
  • Item Four Description
  • Item Five Description
Purchase
 
GET CODE
<div id="jf_pricing_table" class="blue">
	<div class="jf_pricing_column jf_pricing_3_col">
		<h3>Basic</h3>
		<div class="jf_cost">
			<p>
				$20<span>/month</span>
			</p>
		</div>
		<div class="jf_features">
			<ul>
				<li class="yes">Item One Description</li>
				<li class="yes">Item Two Description</li>
				<li class="no">Item Three Description</li>
				<li class="no">Item Four Description</li>
				<li class="no">Item Five Description</li>
			</ul>
		</div>
		<div class="jf_buynow">
			<a href="#" class="button large">Purchase</a>
		</div>
	</div>
	<div class="jf_pricing_column jf_pricing_3_col jf_recommended">
		<h3>Advanced<span class="jf_bestvalue_button"></span></h3>
		<div class="jf_cost">
			<p>
				$40<span>/month</span>
			</p>
		</div>
		<div class="jf_features">
			<ul>
				<li class="yes">Item One Description</li>
				<li class="yes">Item Two Description</li>
				<li class="yes">Item Three Description</li>
				<li class="no">Item Four Description</li>
				<li class="no">Item Five Description</li>
			</ul>
		</div>
		<div class="jf_buynow">
			<a href="#" class="button large">Purchase</a>
		</div>
	</div>
	<div class="jf_pricing_column jf_pricing_3_col">
		<h3>Expert</h3>
		<div class="jf_cost">
			<p>
				$60<span>/month</span>
			</p>
		</div>
		<div class="jf_features">
			<ul>
				<li class="yes">Item One Description</li>
				<li class="yes">Item Two Description</li>
				<li class="yes">Item Three Description</li>
				<li class="yes">Item Four Description</li>
				<li class="yes">Item Five Description</li>
			</ul>
		</div>
		<div class="jf_buynow">
			<a href="#" class="button large">Purchase</a>
		</div>
	</div>
	<div class="clear"></div>
</div>
 
 

Basic

$20/month

  • Item One Description
  • Item Two Description
  • Item Three Description
  • Item Four Description
  • Item Five Description
Purchase

Advanced

$40/month

  • Item One Description
  • Item Two Description
  • Item Three Description
  • Item Four Description
  • Item Five Description
Purchase

Expert

$60/month

  • Item One Description
  • Item Two Description
  • Item Three Description
  • Item Four Description
  • Item Five Description
Purchase

Custom

> $80/month

  • Item One Description
  • Item Two Description
  • Item Three Description
  • Item Four Description
  • Item Five Description
Purchase
 
GET CODE
<div id="jf_pricing_table" class="blue">
	<div class="jf_pricing_column jf_pricing_4_col">
		<h3>Basic</h3>
		<div class="jf_cost">
			<p>
				$20<span>/month</span>
			</p>
		</div>
		<div class="jf_features">
			<ul>
				<li class="yes">Item One Description</li>
				<li class="yes">Item Two Description</li>
				<li class="no">Item Three Description</li>
				<li class="no">Item Four Description</li>
				<li class="no">Item Five Description</li>
			</ul>
		</div>
		<div class="jf_buynow">
			<a href="#" class="button large">Purchase</a>
		</div>
	</div>
	<div class="jf_pricing_column jf_pricing_4_col jf_recommended">
		<h3>Advanced<span class="jf_recommended_button"></span></h3>
		<div class="jf_cost">
			<p>
				$40<span>/month</span>
			</p>
		</div>
		<div class="jf_features">
			<ul>
				<li class="yes">Item One Description</li>
				<li class="yes">Item Two Description</li>
				<li class="yes">Item Three Description</li>
				<li class="no">Item Four Description</li>
				<li class="no">Item Five Description</li>
			</ul>
		</div>
		<div class="jf_buynow">
			<a href="#" class="button large">Purchase</a>
		</div>
	</div>
	<div class="jf_pricing_column jf_pricing_4_col ">
		<h3>Expert</h3>
		<div class="jf_cost">
			<p>
				$60<span>/month</span>
			</p>
		</div>
		<div class="jf_features">
			<ul>
				<li class="yes">Item One Description</li>
				<li class="yes">Item Two Description</li>
				<li class="yes">Item Three Description</li>
				<li class="yes">Item Four Description</li>
				<li class="no">Item Five Description</li>
			</ul>
		</div>
		<div class="jf_buynow">
			<a href="#" class="button large">Purchase</a>
		</div>
	</div>
	<div class="jf_pricing_column jf_pricing_4_col ">
		<h3>Custom</h3>
		<div class="jf_cost">
			<p>
				&gt; $80<span>/month</span>
			</p>
		</div>
		<div class="jf_features">
			<ul>
				<li class="yes">Item One Description</li>
				<li class="yes">Item Two Description</li>
				<li class="yes">Item Three Description</li>
				<li class="yes">Item Four Description</li>
				<li class="yes">Item Five Description</li>
			</ul>
		</div>
		<div class="jf_buynow">
			<a href="#" class="button large">Purchase</a>
		</div>
	</div>
	<div class="clear"></div>
</div>
 
 

Basic

$20/month

  • Item One Description
  • Item Two Description
  • Item Three Description
  • Item Four Description
  • Item Five Description
Purchase

Advanced

$40/month

  • Item One Description
  • Item Two Description
  • Item Three Description
  • Item Four Description
  • Item Five Description
Purchase

Expert

$60/month

  • Item One Description
  • Item Two Description
  • Item Three Description
  • Item Four Description
  • Item Five Description
Purchase
 
GET CODE
<div id="jf_pricing_table" class="red">
	<div class="jf_pricing_column jf_pricing_3_col">
		<h3>Basic</h3>
		<div class="jf_cost">
			<p>
				$20<span>/month</span>
			</p>
		</div>
		<div class="jf_features">
			<ul>
				<li class="yes">Item One Description</li>
				<li class="yes">Item Two Description</li>
				<li class="no">Item Three Description</li>
				<li class="no">Item Four Description</li>
				<li class="no">Item Five Description</li>
			</ul>
		</div>
		<div class="jf_buynow">
			<a href="#" class="button large">Purchase</a>
		</div>
	</div>
	<div class="jf_pricing_column jf_pricing_3_col jf_recommended">
		<h3>Advanced<span class="jf_bestvalue_button"></span></h3>
		<div class="jf_cost">
			<p>
				$40<span>/month</span>
			</p>
		</div>
		<div class="jf_features">
			<ul>
				<li class="yes">Item One Description</li>
				<li class="yes">Item Two Description</li>
				<li class="yes">Item Three Description</li>
				<li class="no">Item Four Description</li>
				<li class="no">Item Five Description</li>
			</ul>
		</div>
		<div class="jf_buynow">
			<a href="#" class="button large">Purchase</a>
		</div>
	</div>
	<div class="jf_pricing_column jf_pricing_3_col">
		<h3>Expert</h3>
		<div class="jf_cost">
			<p>
				$60<span>/month</span>
			</p>
		</div>
		<div class="jf_features">
			<ul>
				<li class="yes">Item One Description</li>
				<li class="yes">Item Two Description</li>
				<li class="yes">Item Three Description</li>
				<li class="yes">Item Four Description</li>
				<li class="yes">Item Five Description</li>
			</ul>
		</div>
		<div class="jf_buynow">
			<a href="#" class="button large">Purchase</a>
		</div>
	</div>
	<div class="clear"></div>
</div>
 
 

Basic

$20/month

  • Item One Description
  • Item Two Description
  • Item Three Description
  • Item Four Description
  • Item Five Description
Purchase

Advanced

$40/month

  • Item One Description
  • Item Two Description
  • Item Three Description
  • Item Four Description
  • Item Five Description
Purchase

Expert

$60/month

  • Item One Description
  • Item Two Description
  • Item Three Description
  • Item Four Description
  • Item Five Description
Purchase

Custom

> $80/month

  • Item One Description
  • Item Two Description
  • Item Three Description
  • Item Four Description
  • Item Five Description
Purchase
 
GET CODE
<div id="jf_pricing_table" class="red">
	<div class="jf_pricing_column jf_pricing_4_col">
		<h3>Basic</h3>
		<div class="jf_cost">
			<p>
				$20<span>/month</span>
			</p>
		</div>
		<div class="jf_features">
			<ul>
				<li class="yes">Item One Description</li>
				<li class="yes">Item Two Description</li>
				<li class="no">Item Three Description</li>
				<li class="no">Item Four Description</li>
				<li class="no">Item Five Description</li>
			</ul>
		</div>
		<div class="jf_buynow">
			<a href="#" class="button large">Purchase</a>
		</div>
	</div>
	<div class="jf_pricing_column jf_pricing_4_col jf_recommended">
		<h3>Advanced<span class="jf_recommended_button"></span></h3>
		<div class="jf_cost">
			<p>
				$40<span>/month</span>
			</p>
		</div>
		<div class="jf_features">
			<ul>
				<li class="yes">Item One Description</li>
				<li class="yes">Item Two Description</li>
				<li class="yes">Item Three Description</li>
				<li class="no">Item Four Description</li>
				<li class="no">Item Five Description</li>
			</ul>
		</div>
		<div class="jf_buynow">
			<a href="#" class="button large">Purchase</a>
		</div>
	</div>
	<div class="jf_pricing_column jf_pricing_4_col ">
		<h3>Expert</h3>
		<div class="jf_cost">
			<p>
				$60<span>/month</span>
			</p>
		</div>
		<div class="jf_features">
			<ul>
				<li class="yes">Item One Description</li>
				<li class="yes">Item Two Description</li>
				<li class="yes">Item Three Description</li>
				<li class="yes">Item Four Description</li>
				<li class="no">Item Five Description</li>
			</ul>
		</div>
		<div class="jf_buynow">
			<a href="#" class="button large">Purchase</a>
		</div>
	</div>
	<div class="jf_pricing_column jf_pricing_4_col ">
		<h3>Custom</h3>
		<div class="jf_cost">
			<p>
				&gt; $80<span>/month</span>
			</p>
		</div>
		<div class="jf_features">
			<ul>
				<li class="yes">Item One Description</li>
				<li class="yes">Item Two Description</li>
				<li class="yes">Item Three Description</li>
				<li class="yes">Item Four Description</li>
				<li class="yes">Item Five Description</li>
			</ul>
		</div>
		<div class="jf_buynow">
			<a href="#" class="button large">Purchase</a>
		</div>
	</div>
	<div class="clear"></div>
</div>
 
 

Basic

$20/month

  • Item One Description
  • Item Two Description
  • Item Three Description
  • Item Four Description
  • Item Five Description
Purchase

Advanced

$40/month

  • Item One Description
  • Item Two Description
  • Item Three Description
  • Item Four Description
  • Item Five Description
Purchase

Expert

$60/month

  • Item One Description
  • Item Two Description
  • Item Three Description
  • Item Four Description
  • Item Five Description
Purchase
 
GET CODE
<div id="jf_pricing_table" class="green">
	<div class="jf_pricing_column jf_pricing_3_col">
		<h3>Basic</h3>
		<div class="jf_cost">
			<p>
				$20<span>/month</span>
			</p>
		</div>
		<div class="jf_features">
			<ul>
				<li class="yes">Item One Description</li>
				<li class="yes">Item Two Description</li>
				<li class="no">Item Three Description</li>
				<li class="no">Item Four Description</li>
				<li class="no">Item Five Description</li>
			</ul>
		</div>
		<div class="jf_buynow">
			<a href="#" class="button large">Purchase</a>
		</div>
	</div>
	<div class="jf_pricing_column jf_pricing_3_col jf_recommended">
		<h3>Advanced<span class="jf_bestvalue_button"></span></h3>
		<div class="jf_cost">
			<p>
				$40<span>/month</span>
			</p>
		</div>
		<div class="jf_features">
			<ul>
				<li class="yes">Item One Description</li>
				<li class="yes">Item Two Description</li>
				<li class="yes">Item Three Description</li>
				<li class="no">Item Four Description</li>
				<li class="no">Item Five Description</li>
			</ul>
		</div>
		<div class="jf_buynow">
			<a href="#" class="button large">Purchase</a>
		</div>
	</div>
	<div class="jf_pricing_column jf_pricing_3_col">
		<h3>Expert</h3>
		<div class="jf_cost">
			<p>
				$60<span>/month</span>
			</p>
		</div>
		<div class="jf_features">
			<ul>
				<li class="yes">Item One Description</li>
				<li class="yes">Item Two Description</li>
				<li class="yes">Item Three Description</li>
				<li class="yes">Item Four Description</li>
				<li class="yes">Item Five Description</li>
			</ul>
		</div>
		<div class="jf_buynow">
			<a href="#" class="button large">Purchase</a>
		</div>
	</div>
	<div class="clear"></div>
</div>
 
 

Basic

$20/month

  • Item One Description
  • Item Two Description
  • Item Three Description
  • Item Four Description
  • Item Five Description
Purchase

Advanced

$40/month

  • Item One Description
  • Item Two Description
  • Item Three Description
  • Item Four Description
  • Item Five Description
Purchase

Expert

$60/month

  • Item One Description
  • Item Two Description
  • Item Three Description
  • Item Four Description
  • Item Five Description
Purchase

Custom

> $80/month

  • Item One Description
  • Item Two Description
  • Item Three Description
  • Item Four Description
  • Item Five Description
Purchase
 
GET CODE
<div id="jf_pricing_table" class="green">
	<div class="jf_pricing_column jf_pricing_4_col">
		<h3>Basic</h3>
		<div class="jf_cost">
			<p>
				$20<span>/month</span>
			</p>
		</div>
		<div class="jf_features">
			<ul>
				<li class="yes">Item One Description</li>
				<li class="yes">Item Two Description</li>
				<li class="no">Item Three Description</li>
				<li class="no">Item Four Description</li>
				<li class="no">Item Five Description</li>
			</ul>
		</div>
		<div class="jf_buynow">
			<a href="#" class="button large">Purchase</a>
		</div>
	</div>
	<div class="jf_pricing_column jf_pricing_4_col jf_recommended">
		<h3>Advanced<span class="jf_recommended_button"></span></h3>
		<div class="jf_cost">
			<p>
				$40<span>/month</span>
			</p>
		</div>
		<div class="jf_features">
			<ul>
				<li class="yes">Item One Description</li>
				<li class="yes">Item Two Description</li>
				<li class="yes">Item Three Description</li>
				<li class="no">Item Four Description</li>
				<li class="no">Item Five Description</li>
			</ul>
		</div>
		<div class="jf_buynow">
			<a href="#" class="button large">Purchase</a>
		</div>
	</div>
	<div class="jf_pricing_column jf_pricing_4_col ">
		<h3>Expert</h3>
		<div class="jf_cost">
			<p>
				$60<span>/month</span>
			</p>
		</div>
		<div class="jf_features">
			<ul>
				<li class="yes">Item One Description</li>
				<li class="yes">Item Two Description</li>
				<li class="yes">Item Three Description</li>
				<li class="yes">Item Four Description</li>
				<li class="no">Item Five Description</li>
			</ul>
		</div>
		<div class="jf_buynow">
			<a href="#" class="button large">Purchase</a>
		</div>
	</div>
	<div class="jf_pricing_column jf_pricing_4_col ">
		<h3>Custom</h3>
		<div class="jf_cost">
			<p>
				&gt; $80<span>/month</span>
			</p>
		</div>
		<div class="jf_features">
			<ul>
				<li class="yes">Item One Description</li>
				<li class="yes">Item Two Description</li>
				<li class="yes">Item Three Description</li>
				<li class="yes">Item Four Description</li>
				<li class="yes">Item Five Description</li>
			</ul>
		</div>
		<div class="jf_buynow">
			<a href="#" class="button large">Purchase</a>
		</div>
	</div>
	<div class="clear"></div>
</div>
 
 

Basic

$20/month

  • Item One Description
  • Item Two Description
  • Item Three Description
  • Item Four Description
  • Item Five Description
Purchase

Advanced

$40/month

  • Item One Description
  • Item Two Description
  • Item Three Description
  • Item Four Description
  • Item Five Description
Purchase

Expert

$60/month

  • Item One Description
  • Item Two Description
  • Item Three Description
  • Item Four Description
  • Item Five Description
Purchase
 
GET CODE
<div id="jf_pricing_table" class="black">
	<div class="jf_pricing_column jf_pricing_3_col">
		<h3>Basic</h3>
		<div class="jf_cost">
			<p>
				$20<span>/month</span>
			</p>
		</div>
		<div class="jf_features">
			<ul>
				<li class="yes">Item One Description</li>
				<li class="yes">Item Two Description</li>
				<li class="no">Item Three Description</li>
				<li class="no">Item Four Description</li>
				<li class="no">Item Five Description</li>
			</ul>
		</div>
		<div class="jf_buynow">
			<a href="#" class="button large">Purchase</a>
		</div>
	</div>
	<div class="jf_pricing_column jf_pricing_3_col jf_recommended">
		<h3>Advanced<span class="jf_bestvalue_button"></span></h3>
		<div class="jf_cost">
			<p>
				$40<span>/month</span>
			</p>
		</div>
		<div class="jf_features">
			<ul>
				<li class="yes">Item One Description</li>
				<li class="yes">Item Two Description</li>
				<li class="yes">Item Three Description</li>
				<li class="no">Item Four Description</li>
				<li class="no">Item Five Description</li>
			</ul>
		</div>
		<div class="jf_buynow">
			<a href="#" class="button large">Purchase</a>
		</div>
	</div>
	<div class="jf_pricing_column jf_pricing_3_col">
		<h3>Expert</h3>
		<div class="jf_cost">
			<p>
				$60<span>/month</span>
			</p>
		</div>
		<div class="jf_features">
			<ul>
				<li class="yes">Item One Description</li>
				<li class="yes">Item Two Description</li>
				<li class="yes">Item Three Description</li>
				<li class="yes">Item Four Description</li>
				<li class="yes">Item Five Description</li>
			</ul>
		</div>
		<div class="jf_buynow">
			<a href="#" class="button large">Purchase</a>
		</div>
	</div>
	<div class="clear"></div>
</div>
 
 

Basic

$20/month

  • Item One Description
  • Item Two Description
  • Item Three Description
  • Item Four Description
  • Item Five Description
Purchase

Advanced

$40/month

  • Item One Description
  • Item Two Description
  • Item Three Description
  • Item Four Description
  • Item Five Description
Purchase

Expert

$60/month

  • Item One Description
  • Item Two Description
  • Item Three Description
  • Item Four Description
  • Item Five Description
Purchase

Custom

> $80/month

  • Item One Description
  • Item Two Description
  • Item Three Description
  • Item Four Description
  • Item Five Description
Purchase
 
GET CODE
<div id="jf_pricing_table" class="black">
	<div class="jf_pricing_column jf_pricing_4_col">
		<h3>Basic</h3>
		<div class="jf_cost">
			<p>
				$20<span>/month</span>
			</p>
		</div>
		<div class="jf_features">
			<ul>
				<li class="yes">Item One Description</li>
				<li class="yes">Item Two Description</li>
				<li class="no">Item Three Description</li>
				<li class="no">Item Four Description</li>
				<li class="no">Item Five Description</li>
			</ul>
		</div>
		<div class="jf_buynow">
			<a href="#" class="button large">Purchase</a>
		</div>
	</div>
	<div class="jf_pricing_column jf_pricing_4_col jf_recommended">
		<h3>Advanced<span class="jf_recommended_button"></span></h3>
		<div class="jf_cost">
			<p>
				$40<span>/month</span>
			</p>
		</div>
		<div class="jf_features">
			<ul>
				<li class="yes">Item One Description</li>
				<li class="yes">Item Two Description</li>
				<li class="yes">Item Three Description</li>
				<li class="no">Item Four Description</li>
				<li class="no">Item Five Description</li>
			</ul>
		</div>
		<div class="jf_buynow">
			<a href="#" class="button large">Purchase</a>
		</div>
	</div>
	<div class="jf_pricing_column jf_pricing_4_col ">
		<h3>Expert</h3>
		<div class="jf_cost">
			<p>
				$60<span>/month</span>
			</p>
		</div>
		<div class="jf_features">
			<ul>
				<li class="yes">Item One Description</li>
				<li class="yes">Item Two Description</li>
				<li class="yes">Item Three Description</li>
				<li class="yes">Item Four Description</li>
				<li class="no">Item Five Description</li>
			</ul>
		</div>
		<div class="jf_buynow">
			<a href="#" class="button large">Purchase</a>
		</div>
	</div>
	<div class="jf_pricing_column jf_pricing_4_col ">
		<h3>Custom</h3>
		<div class="jf_cost">
			<p>
				&gt; $80<span>/month</span>
			</p>
		</div>
		<div class="jf_features">
			<ul>
				<li class="yes">Item One Description</li>
				<li class="yes">Item Two Description</li>
				<li class="yes">Item Three Description</li>
				<li class="yes">Item Four Description</li>
				<li class="yes">Item Five Description</li>
			</ul>
		</div>
		<div class="jf_buynow">
			<a href="#" class="button large">Purchase</a>
		</div>
	</div>
	<div class="clear"></div>
</div>
 
 

Tables

Tables
 
Table header 1 Table header 2 Table header 3 Table header 4
Odio lacus mid habitasse dis tristique! Natoque in Porttitor integer placerat lorem placerat pulvinar
Odio lacus mid habitasse dis tristique! Natoque in Porttitor integer placerat lorem placerat pulvinar
Odio lacus mid habitasse dis tristique! Natoque in Porttitor integer placerat lorem placerat pulvinar
Odio lacus mid habitasse dis tristique! Natoque in Porttitor integer placerat lorem placerat pulvinar
Odio lacus mid habitasse dis tristique! Natoque in Porttitor integer placerat lorem placerat pulvinar
 
GET CODE
<table class="jf_typo_table style1">
	<thead>
		<tr>  
			<th scope="col">Table header 1</th>
			<th scope="col">Table header 2</th>
			<th scope="col">Table header 3</th>
			<th scope="col">Table header 4</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Sample text here...</td>
			<td>Sample text here...</td>
			<td>Sample text here...</td>
			<td>Sample text here...</td>
		</tr>
		<tr>
			<td>Sample text here...</td>
			<td>Sample text here...</td>
			<td>Sample text here...</td>
			<td>Sample text here...</td>
		</tr>
		<tr>
			<td>Sample text here...</td>
			<td>Sample text here...</td>
			<td>Sample text here...</td>
			<td>Sample text here...</td>
		</tr>
		<tr>
			<td>Sample text here...</td>
			<td>Sample text here...</td>
			<td>Sample text here...</td>
			<td>Sample text here...</td>
		</tr>
		<tr>
			<td>Sample text here...</td>
			<td>Sample text here...</td>
			<td>Sample text here...</td>
			<td>Sample text here...</td>
		</tr>
	</tbody>
</table>
 
 
Table header 1 Table header 2 Table header 3 Table header 4
Odio lacus mid habitasse dis tristique! Natoque in Porttitor integer placerat lorem placerat pulvinar
Odio lacus mid habitasse dis tristique! Natoque in Porttitor integer placerat lorem placerat pulvinar
Odio lacus mid habitasse dis tristique! Natoque in Porttitor integer placerat lorem placerat pulvinar
Odio lacus mid habitasse dis tristique! Natoque in Porttitor integer placerat lorem placerat pulvinar
Odio lacus mid habitasse dis tristique! Natoque in Porttitor integer placerat lorem placerat pulvinar
 
GET CODE
<table class="jf_typo_table style2">
	<thead>
		<tr>  
			<th scope="col">Table header 1</th>
			<th scope="col">Table header 2</th>
			<th scope="col">Table header 3</th>
			<th scope="col">Table header 4</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Sample text here...</td>
			<td>Sample text here...</td>
			<td>Sample text here...</td>
			<td>Sample text here...</td>
		</tr>
		<tr>
			<td>Sample text here...</td>
			<td>Sample text here...</td>
			<td>Sample text here...</td>
			<td>Sample text here...</td>
		</tr>
		<tr>
			<td>Sample text here...</td>
			<td>Sample text here...</td>
			<td>Sample text here...</td>
			<td>Sample text here...</td>
		</tr>
		<tr>
			<td>Sample text here...</td>
			<td>Sample text here...</td>
			<td>Sample text here...</td>
			<td>Sample text here...</td>
		</tr>
		<tr>
			<td>Sample text here...</td>
			<td>Sample text here...</td>
			<td>Sample text here...</td>
			<td>Sample text here...</td>
		</tr>
	</tbody>
</table>
 
 
Table header 1 Table header 2 Table header 3 Table header 4
Odio lacus mid habitasse dis tristique! Natoque in Porttitor integer placerat lorem placerat pulvinar
Odio lacus mid habitasse dis tristique! Natoque in Porttitor integer placerat lorem placerat pulvinar
Odio lacus mid habitasse dis tristique! Natoque in Porttitor integer placerat lorem placerat pulvinar
Odio lacus mid habitasse dis tristique! Natoque in Porttitor integer placerat lorem placerat pulvinar
Odio lacus mid habitasse dis tristique! Natoque in Porttitor integer placerat lorem placerat pulvinar
 
GET CODE
<table class="jf_typo_table style3">
	<thead>
		<tr>  
			<th scope="col">Table header 1</th>
			<th scope="col">Table header 2</th>
			<th scope="col">Table header 3</th>
			<th scope="col">Table header 4</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Sample text here...</td>
			<td>Sample text here...</td>
			<td>Sample text here...</td>
			<td>Sample text here...</td>
		</tr>
		<tr>
			<td>Sample text here...</td>
			<td>Sample text here...</td>
			<td>Sample text here...</td>
			<td>Sample text here...</td>
		</tr>
		<tr>
			<td>Sample text here...</td>
			<td>Sample text here...</td>
			<td>Sample text here...</td>
			<td>Sample text here...</td>
		</tr>
		<tr>
			<td>Sample text here...</td>
			<td>Sample text here...</td>
			<td>Sample text here...</td>
			<td>Sample text here...</td>
		</tr>
		<tr>
			<td>Sample text here...</td>
			<td>Sample text here...</td>
			<td>Sample text here...</td>
			<td>Sample text here...</td>
		</tr>
	</tbody>
</table>
 
 
Table header 1 Table header 2 Table header 3 Table header 4
Odio lacus mid habitasse dis tristique! Natoque in Porttitor integer placerat lorem placerat pulvinar
Odio lacus mid habitasse dis tristique! Natoque in Porttitor integer placerat lorem placerat pulvinar
Odio lacus mid habitasse dis tristique! Natoque in Porttitor integer placerat lorem placerat pulvinar
Odio lacus mid habitasse dis tristique! Natoque in Porttitor integer placerat lorem placerat pulvinar
Odio lacus mid habitasse dis tristique! Natoque in Porttitor integer placerat lorem placerat pulvinar
 
GET CODE
<table class="jf_typo_table style4">
	<thead>
		<tr>  
			<th scope="col">Table header 1</th>
			<th scope="col">Table header 2</th>
			<th scope="col">Table header 3</th>
			<th scope="col">Table header 4</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Sample text here...</td>
			<td>Sample text here...</td>
			<td>Sample text here...</td>
			<td>Sample text here...</td>
		</tr>
		<tr>
			<td>Sample text here...</td>
			<td>Sample text here...</td>
			<td>Sample text here...</td>
			<td>Sample text here...</td>
		</tr>
		<tr>
			<td>Sample text here...</td>
			<td>Sample text here...</td>
			<td>Sample text here...</td>
			<td>Sample text here...</td>
		</tr>
		<tr>
			<td>Sample text here...</td>
			<td>Sample text here...</td>
			<td>Sample text here...</td>
			<td>Sample text here...</td>
		</tr>
		<tr>
			<td>Sample text here...</td>
			<td>Sample text here...</td>
			<td>Sample text here...</td>
			<td>Sample text here...</td>
		</tr>
	</tbody>
</table>