2 PISOS, 2 DJ's
ptzh-CNenfrdeelhiitples

Typography

Buttons

BUTTONS
 
Button 1
 
Button 2
 
Button 3
 
Button 4
 
Button 5
 
GET CODE
<a class="jf_typo_button white size1">Button 1</a>
<a class="jf_typo_button white size2">Button 2</a>
<a class="jf_typo_button white size3">Button 3</a>
<a class="jf_typo_button white size4">Button 4</a>
<a class="jf_typo_button white size5">Button 5</a>
Button 1
 
Button 2
 
Button 3
 
Button 4
 
Button 5
 
GET CODE
<a class="jf_typo_button blue size1">Button 1</a>
<a class="jf_typo_button blue size2">Button 2</a>
<a class="jf_typo_button blue size3">Button 3</a>
<a class="jf_typo_button blue size4">Button 4</a>
<a class="jf_typo_button blue size5">Button 5</a>
Button 1
 
Button 2
 
Button 3
 
Button 4
 
Button 5
 
GET CODE
<a class="jf_typo_button red size1">Button 1</a>
<a class="jf_typo_button red size2">Button 2</a>
<a class="jf_typo_button red size3">Button 3</a>
<a class="jf_typo_button red size4">Button 4</a>
<a class="jf_typo_button red size5">Button 5</a>
Button 1
 
Button 2
 
Button 3
 
Button 4
 
Button 5
 
GET CODE
<a class="jf_typo_button green size1">Button 1</a>
<a class="jf_typo_button green size2">Button 2</a>
<a class="jf_typo_button green size3">Button 3</a>
<a class="jf_typo_button green size4">Button 4</a>
<a class="jf_typo_button green size5">Button 5</a>
 
 

Boxes

BOXES
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris congue commodo porttitor.
 
GET CODE
<div class="jf_typo_box style1">
	<span class="close grey" title="Close"></span>
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris congue commodo porttitor.
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris congue commodo porttitor.
 
GET CODE
<div class="jf_typo_box style2">
	<span class="close white" title="Close"></span>
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris congue commodo porttitor.
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris congue commodo porttitor.
 
GET CODE
<div class="jf_typo_box style3">
	<span class="close white" title="Close"></span>
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris congue commodo porttitor.
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris congue commodo porttitor.
 
GET CODE
<div class="jf_typo_box style4">
	<span class="close white" title="Close"></span>
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris congue commodo porttitor.
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris congue commodo porttitor.
 
GET CODE
<div class="jf_typo_box style1 dashed">
	<span class="close grey" title="Close"></span>
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris congue commodo porttitor.
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris congue commodo porttitor.
 
GET CODE
<div class="jf_typo_box style2 dashed">
	<span class="close white" title="Close"></span>
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris congue commodo porttitor.
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris congue commodo porttitor.
 
GET CODE
<div class="jf_typo_box style3 dashed">
	<span class="close white" title="Close"></span>
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris congue commodo porttitor.
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris congue commodo porttitor.
 
GET CODE
<div class="jf_typo_box style4 dashed">
	<span class="close white" title="Close"></span>
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris congue commodo porttitor.
</div>
 
 

Blockquotes

BLOCKQUOTES
 
In vitae purus ligula, in venenatis ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Enim auctor. In. Rhoncus aliquam magna adipiscing elementum auctor integer turpis placerat a eros tortor duis? Rhoncus duis! Augue adipiscing a tristique cras amet aenean in. Vel turpis? Et nascetur, turpis platea duis, vut non placerat velit sit, ultricies dis ac sociis ultrices, vut pellentesque? Integer in, cum, odio auctor! Vel etiam ridiculus odio mus cum sociis tincidunt mid urna? Auctor tincidunt augue! Sit augue scelerisque sit nec! Lacus ac vut dignissim, pid? Rhoncus eros dolor massa elementum est augue! Aliquam odio pulvinar dolor? Pulvinar, lundium eu! Arcu non aenean aenean cras a tempor ac eu, nec enim in est, proin lectus, pulvinar amet turpis lundium massa elit tempor porta? Rhoncus dapibus, scelerisque nec egestas augue etiam arcu platea purus.
 
GET CODE
<blockquote class="jf_typo_qoute_left">Quote text here...</blockquote>Paragraph text here...
 
 
In vitae purus ligula, in venenatis ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Enim auctor. In. Rhoncus aliquam magna adipiscing elementum auctor integer turpis placerat a eros tortor duis? Rhoncus duis! Augue adipiscing a tristique cras amet aenean in. Vel turpis? Et nascetur, turpis platea duis, vut non placerat velit sit, ultricies dis ac sociis ultrices, vut pellentesque? Integer in, cum, odio auctor! Vel etiam ridiculus odio mus cum sociis tincidunt mid urna? Auctor tincidunt augue! Sit augue scelerisque sit nec! Lacus ac vut dignissim, pid? Rhoncus eros dolor massa elementum est augue! Aliquam odio pulvinar dolor? Pulvinar, lundium eu! Arcu non aenean aenean cras a tempor ac eu, nec enim in est, proin lectus, pulvinar amet turpis lundium massa elit tempor porta? Rhoncus dapibus, scelerisque nec egestas augue etiam arcu platea purus.
 
GET CODE
<blockquote class="jf_typo_qoute_right">Quote text here...</blockquote>Paragraph text here...
 
 
In vitae purus ligula, in venenatis ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 
GET CODE
<blockquote>Quote text here...</blockquote>
 
 

Dropcaps

DROPCAPS
 

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. This is a blockquote. Aenean arcu elit, tristique semper pulvinar adipiscing. Donec faucibus. Nam sit amet sem.

GET CODE
<p><span class="jf_typo_dropcap style1">L</span>some text here...</p>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. This is a blockquote. Aenean arcu elit, tristique semper pulvinar adipiscing. Donec faucibus. Nam sit amet sem.

GET CODE
<p><span class="jf_typo_dropcap style2">L</span>some text here...</p>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. This is a blockquote. Aenean arcu elit, tristique semper pulvinar adipiscing. Donec faucibus. Nam sit amet sem.

GET CODE
<p><span class="jf_typo_dropcap style3">L</span>some text here...</p>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. This is a blockquote. Aenean arcu elit, tristique semper pulvinar adipiscing. Donec faucibus. Nam sit amet sem.

GET CODE
<p><span class="jf_typo_dropcap style4">L</span>some text here...</p>