<h3 class="jm-typo-title">Image Borders</h3>
<div class="row-fluid">
<div class="span4">
<pre>&lt;img class="img-rounded" src="image.jpg" /&gt;</pre>
<div style="text-align: center;"><img class="img-rounded" src="images/sample/article.png" alt="Typography" border="0" /></div>
<p></p>
</div>
<div class="span4">
<pre>&lt;img class="img-circle" src="image.jpg" /&gt;</pre>
<div style="text-align: center;"><img class="img-circle" src="images/sample/article.png" alt="Typography" border="0" /></div>
<p></p>
</div>
<div class="span4">
<pre>&lt;img class="img-polaroid" src="image.jpg" /&gt;</pre>
<div style="text-align: center;"><img class="img-polaroid" src="images/sample/article.png" alt="Typography" border="0" /></div>
</div>
</div>
<h3 class="jm-typo-title">Headings</h3>
<div class="row-fluid">
<div class="span6">
<h1>This is Heading One (h1)</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis viverra leo sed turpis convallis sit amet condimentum diam vehicula. Morbi suscipit nisl odio, nec sodales tellus. Aenean quis sapien suscipit mauris convallis porta lacinia bibendum felis.</p>
<br />
<h2>This is Heading Two (h2)</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis viverra leo sed turpis convallis sit amet condimentum diam vehicula. Morbi suscipit nisl odio, nec sodales tellus. Aenean quis sapien suscipit mauris convallis porta lacinia bibendum felis.</p>
<br />
<h3>This is Heading Three (h3)</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis viverra leo sed turpis convallis sit amet condimentum diam vehicula. Morbi suscipit nisl odio, nec sodales tellus. Aenean quis sapien suscipit mauris convallis porta lacinia bibendum felis.</p>
</div>
<div class="span6">
<h4>This is Heading Four (h4)</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis viverra leo sed turpis convallis sit amet condimentum diam vehicula. Morbi suscipit nisl odio, nec sodales tellus. Aenean quis sapien suscipit mauris convallis porta lacinia bibendum felis.</p>
<br />
<h5>This is Heading Five (h5)</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis viverra leo sed turpis convallis sit amet condimentum diam vehicula. Morbi suscipit nisl odio, nec sodales tellus. Aenean quis sapien suscipit mauris convallis porta lacinia bibendum felis.</p>
<br />
<h6>This is Heading Six (h6)</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis viverra leo sed turpis convallis sit amet condimentum diam vehicula. Morbi suscipit nisl odio, nec sodales tellus. Aenean quis sapien suscipit mauris convallis porta lacinia bibendum felis.</p>
</div>
</div>
<h3 class="jm-typo-title">Numered blocks</h3>
<div class="row-fluid">
<div class="span6">
<pre>&lt;p class="jm-block"&gt;&lt;span class="jm"&gt;01&lt;/span&gt;Text goes here&lt;/p&gt;</pre>
<p class="jm-block"><span class="jm">01</span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis viverra leo sed turpis convallis sit amet condimentum diam vehicula. Morbi suscipit nisl odio, nec sodales tellus. Aenean quis sapien suscipit mauris.</p>
<p class="jm-block"><span class="jm">02</span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis viverra leo sed turpis convallis sit amet condimentum diam vehicula. Morbi suscipit nisl odio, nec sodales tellus. Aenean quis sapien suscipit mauris.</p>
<p class="jm-block"><span class="jm">03</span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis viverra leo sed turpis convallis sit amet condimentum diam vehicula. Morbi suscipit nisl odio, nec sodales tellus. Aenean quis sapien suscipit mauris.</p>
</div>
<div class="span6">
<pre>&lt;p class="jm-block second"&gt;&lt;span class="jm"&gt;a&lt;/span&gt;Text goes here&lt;/p&gt;</pre>
<p class="jm-block second"><span class="jm">a</span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis viverra leo sed turpis convallis sit amet condimentum diam vehicula. Morbi suscipit nisl odio, nec sodales tellus. Aenean quis sapien suscipit mauris.</p>
<p class="jm-block second"><span class="jm">b</span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis viverra leo sed turpis convallis sit amet condimentum diam vehicula. Morbi suscipit nisl odio, nec sodales tellus. Aenean quis sapien suscipit mauris.</p>
<p class="jm-block second"><span class="jm">c</span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis viverra leo sed turpis convallis sit amet condimentum diam vehicula. Morbi suscipit nisl odio, nec sodales tellus. Aenean quis sapien suscipit mauris.</p>
</div>
</div>
<h3 class="jm-typo-title" style="margin-bottom: 0;">Colored Blocks</h3>
<div class="row-fluid">
<div class="span6">
<div class="alert">&lt;div class="alert"&gt;Text goes here&lt;/div&gt;</div>
<div class="alert alert-error">&lt;div class="alert alert-error"&gt;Text goes here&lt;/div&gt;</div>
</div>
<div class="span6">
<div class="alert alert-success">&lt;div class="alert alert-success"&gt;Text goes here&lt;/div&gt;</div>
<div class="alert alert-info">&lt;div class="alert alert-info"&gt;Text goes here&lt;/div&gt;</div>
</div>
</div>
<h3 class="jm-typo-title">Icon blocks</h3>
<div class="row-fluid">
<div class="span6">
<p class="jmbadge">&lt;p class="jmbadge" &gt;Text goes here&lt;/p&gt;</p>
<p class="jmcalendar">&lt;p class="jmcalendar" &gt;Text goes here&lt;/p&gt;</p>
<p class="jmchat">&lt;p class="jmchat" &gt;Text goes here&lt;/p&gt;</p>
<p class="jmcheck">&lt;p class="jmcheck" &gt;Text goes here&lt;/p&gt;</p>
<p class="jmcloud">&lt;p class="jmcloud" &gt;Text goes here&lt;/p&gt;</p>
<p class="jmdirection">&lt;p class="jmdirection" &gt;Text goes here&lt;/p&gt;</p>
<p class="jmdivide">&lt;p class="jmdivide" &gt;Text goes here&lt;/p&gt;</p>
<p class="jmerror">&lt;p class="jmerror" &gt;Text goes here&lt;/p&gt;</p>
<p class="jmfire">&lt;p class="jmfire" &gt;Text goes here&lt;/p&gt;</p>
</div>
<div class="span6">
<p class="jmflag">&lt;p class="jmflag" &gt;Text goes here&lt;/p&gt;</p>
<p class="jmheart">&lt;p class="jmheart" &gt;Text goes here&lt;/p&gt;</p>
<p class="jmhome">&lt;p class="jmhome" &gt;Text goes here&lt;/p&gt;</p>
<p class="jminfo">&lt;p class="jminfo" &gt;Text goes here&lt;/p&gt;</p>
<p class="jmlist">&lt;p class="jmlist" &gt;Text goes here&lt;/p&gt;</p>
<p class="jmmail">&lt;p class="jmmail" &gt;Text goes here&lt;/p&gt;</p>
<p class="jmpeople">&lt;p class="jmpeople" &gt;Text goes here&lt;/p&gt;</p>
<p class="jmstar">&lt;p class="jmstar" &gt;Text goes here&lt;/p&gt;</p>
<p class="jmstat">&lt;p class="jmstat" &gt;Text goes here&lt;/p&gt;</p>
</div>
</div>
<h3 class="jm-typo-title">Blockquote</h3>
<div class="row-fluid">
<div class="span12">
<pre>&lt;blockquote&gt;<br />&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.&lt;/p&gt;<br />&lt;small&gt;John Doe&lt;/small&gt;<br />&lt;/blockquote&gt;</pre>
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<small>John Doe</small></blockquote>
</div>
<div class="span12">
<pre>&lt;blockquote class="pull-right"&gt;<br />&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.&lt;/p&gt;<br />&lt;small&gt;John Doe&lt;/small&gt;<br />&lt;/blockquote&gt;</pre>
<blockquote class="pull-right">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<small>John Doe</small></blockquote>
</div>
</div>
<h3 class="jm-typo-title">Unordered lists</h3>
<div class="row-fluid" style="margin-bottom: 30px;">
<div class="span4">
<pre>&lt;ul&gt;<br />&lt;-- list goes here --&gt;<br />&lt;/ul&gt;</pre>
<ul>
<li>Duis tincidunt nunc sit amet ipsum</li>
<li>Duis tincidunt nunc sit amet ipsum</li>
<li>Duis tincidunt nunc sit amet ipsum
<ul>
<li>Duis tincidunt nunc sit amet ipsum</li>
<li>Duis tincidunt nunc sit amet ipsum</li>
<li>Duis tincidunt nunc sit amet ipsum
<ul>
<li>Duis tincidunt nunc sit amet ipsum</li>
<li>Duis tincidunt nunc sit amet ipsum</li>
<li>Duis tincidunt nunc sit amet ipsum</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<div class="span4">
<pre>&lt;ul class="jm-color1"&gt;<br />&lt;-- list goes here --&gt;<br />&lt;/ul&gt;</pre>
<ul class="jm-color1">
<li>Duis tincidunt nunc sit amet ipsum</li>
<li>Duis tincidunt nunc sit amet ipsum</li>
<li>Duis tincidunt nunc sit amet ipsum
<ul>
<li>Duis tincidunt nunc sit amet ipsum</li>
<li>Duis tincidunt nunc sit amet ipsum</li>
<li>Duis tincidunt nunc sit amet ipsum
<ul>
<li>Duis tincidunt nunc sit amet ipsum</li>
<li>Duis tincidunt nunc sit amet ipsum</li>
<li>Duis tincidunt nunc sit amet ipsum</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<div class="span4">
<pre>&lt;ul class="jm-color2"&gt;<br />&lt;-- list goes here --&gt;<br />&lt;/ul&gt;</pre>
<ul class="jm-color2">
<li>Duis tincidunt nunc sit amet ipsum</li>
<li>Duis tincidunt nunc sit amet ipsum</li>
<li>Duis tincidunt nunc sit amet ipsum
<ul>
<li>Duis tincidunt nunc sit amet ipsum</li>
<li>Duis tincidunt nunc sit amet ipsum</li>
<li>Duis tincidunt nunc sit amet ipsum
<ul>
<li>Duis tincidunt nunc sit amet ipsum</li>
<li>Duis tincidunt nunc sit amet ipsum</li>
<li>Duis tincidunt nunc sit amet ipsum</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
<h3 class="jm-typo-title">Ordered lists</h3>
<div class="row-fluid">
<div class="span4">
<pre>&lt;ol&gt;<br />&lt;-- list goes here --&gt;<br />&lt;/ol&gt;</pre>
<ol>
<li>Duis tincidunt nunc sit amet ipsum</li>
<li>Duis tincidunt nunc sit amet ipsum</li>
<li>Duis tincidunt nunc sit amet ipsum
<ol>
<li>Duis tincidunt nunc sit amet ipsum</li>
<li>Duis tincidunt nunc sit amet ipsum
<ol>
<li>Duis tincidunt nunc sit amet ipsum</li>
<li>Duis tincidunt nunc sit amet ipsum</li>
<li>Duis tincidunt nunc sit amet ipsum</li>
</ol>
</li>
</ol>
</li>
</ol>
</div>
<div class="span4">
<pre>&lt;ol class="jm-roman"&gt;<br />&lt;-- list goes here --&gt;<br />&lt;/ol&gt;</pre>
<ol class="jm-roman">
<li>Duis tincidunt nunc sit amet ipsum</li>
<li>Duis tincidunt nunc sit amet ipsum</li>
<li>Duis tincidunt nunc sit amet ipsum
<ol>
<li>Duis tincidunt nunc sit amet ipsum</li>
<li>Duis tincidunt nunc sit amet ipsum
<ol>
<li>Duis tincidunt nunc sit amet ipsum</li>
<li>Duis tincidunt nunc sit amet ipsum</li>
<li>Duis tincidunt nunc sit amet ipsum</li>
</ol>
</li>
</ol>
</li>
</ol>
</div>
<div class="span4">
<pre>&lt;ol class="jm-alpha"&gt;<br />&lt;-- list goes here --&gt;<br />&lt;/ol&gt;</pre>
<ol class="jm-alpha">
<li>Duis tincidunt nunc sit amet ipsum</li>
<li>Duis tincidunt nunc sit amet ipsum</li>
<li>Duis tincidunt nunc sit amet ipsum
<ol>
<li>Duis tincidunt nunc sit amet ipsum</li>
<li>Duis tincidunt nunc sit amet ipsum
<ol>
<li>Duis tincidunt nunc sit amet ipsum</li>
<li>Duis tincidunt nunc sit amet ipsum</li>
<li>Duis tincidunt nunc sit amet ipsum</li>
</ol>
</li>
</ol>
</li>
</ol>
</div>
</div>
<h3 class="jm-typo-title">Read More and Button</h3>
<pre>&lt;a class="readmore" href="#"&gt;Read more&lt;/a&gt;</pre>
<p style="margin-bottom: 30px;"><a href="#" class="readmore">Read more</a></p>
<pre>&lt;a class="btn" href="#"&gt;Button&lt;/a&gt;</pre>
<p style="margin-bottom: 30px;"><a href="#" class="btn">Button</a></p>
<h3 class="jm-typo-title">Glyphicon Font</h3>
<div>
<pre>&lt;span class="icon-joomla"&gt;&amp;nbsp&lt;/span&gt;</pre>
</div>
<div class="row-fluid">
<div class="span3">
<div style="padding: 2px 0;"><span class="icon-asterisk"> </span> icon-asterisk</div>
<div style="padding: 2px 0;"><span class="icon-plus"> </span> icon-plus</div>
<div style="padding: 2px 0;"><span class="icon-euro"> </span> icon-euro</div>
<div style="padding: 2px 0;"><span class="icon-minus"> </span> icon-minus</div>
<div style="padding: 2px 0;"><span class="icon-cloud"> </span> icon-cloud</div>
<div style="padding: 2px 0;"><span class="icon-envelope"> </span> icon-envelope</div>
<div style="padding: 2px 0;"><span class="icon-pencil"> </span> icon-pencil</div>
<div style="padding: 2px 0;"><span class="icon-glass"> </span> icon-glass</div>
<div style="padding: 2px 0;"><span class="icon-music"> </span> icon-music</div>
<div style="padding: 2px 0;"><span class="icon-search"> </span> icon-search</div>
<div style="padding: 2px 0;"><span class="icon-heart"> </span> icon-heart</div>
<div style="padding: 2px 0;"><span class="icon-star"> </span> icon-star</div>
<div style="padding: 2px 0;"><span class="icon-star-empty"> </span> icon-star-empty</div>
<div style="padding: 2px 0;"><span class="icon-user"> </span> icon-user</div>
<div style="padding: 2px 0;"><span class="icon-film"> </span> icon-film</div>
<div style="padding: 2px 0;"><span class="icon-th-large"> </span> icon-th-large</div>
<div style="padding: 2px 0;"><span class="icon-th"> </span> icon-th</div>
<div style="padding: 2px 0;"><span class="icon-th-list"> </span> icon-th-list</div>
<div style="padding: 2px 0;"><span class="icon-ok"> </span> icon-ok</div>
<div style="padding: 2px 0;"><span class="icon-remove"> </span> icon-remove</div>
<div style="padding: 2px 0;"><span class="icon-zoom-in"> </span> icon-zoom-in</div>
<div style="padding: 2px 0;"><span class="icon-zoom-out"> </span> icon-zoom-out</div>
<div style="padding: 2px 0;"><span class="icon-off"> </span> icon-off</div>
<div style="padding: 2px 0;"><span class="icon-signal"> </span> icon-signal</div>
<div style="padding: 2px 0;"><span class="icon-cog"> </span> icon-cog</div>
<div style="padding: 2px 0;"><span class="icon-trash"> </span> icon-trash</div>
<div style="padding: 2px 0;"><span class="icon-home"> </span> icon-home</div>
<div style="padding: 2px 0;"><span class="icon-file"> </span> icon-file</div>
<div style="padding: 2px 0;"><span class="icon-time"> </span> icon-time</div>
<div style="padding: 2px 0;"><span class="icon-road"> </span> icon-road</div>
<div style="padding: 2px 0;"><span class="icon-download-alt"> </span> icon-download-alt</div>
<div style="padding: 2px 0;"><span class="icon-download"> </span> icon-download</div>
<div style="padding: 2px 0;"><span class="icon-upload"> </span> icon-upload</div>
<div style="padding: 2px 0;"><span class="icon-inbox"> </span> icon-inbox</div>
<div style="padding: 2px 0;"><span class="icon-play-circle"> </span> icon-play-circle</div>
<div style="padding: 2px 0;"><span class="icon-repeat"> </span> icon-repeat</div>
<div style="padding: 2px 0;"><span class="icon-refresh"> </span> icon-refresh</div>
<div style="padding: 2px 0;"><span class="icon-list-alt"> </span> icon-list-alt</div>
<div style="padding: 2px 0;"><span class="icon-lock"> </span> icon-lock</div>
<div style="padding: 2px 0;"><span class="icon-flag"> </span> icon-flag</div>
<div style="padding: 2px 0;"><span class="icon-headphones"> </span> icon-headphones</div>
<div style="padding: 2px 0;"><span class="icon-volume-off"> </span> icon-volume-off</div>
<div style="padding: 2px 0;"><span class="icon-volume-down"> </span> icon-volume-down</div>
<div style="padding: 2px 0;"><span class="icon-volume-up"> </span> icon-volume-up</div>
<div style="padding: 2px 0;"><span class="icon-qrcode"> </span> icon-qrcode</div>
<div style="padding: 2px 0;"><span class="icon-barcode"> </span> icon-barcode</div>
<div style="padding: 2px 0;"><span class="icon-tag"> </span> icon-tag</div>
<div style="padding: 2px 0;"><span class="icon-tags"> </span> icon-tags</div>
<div style="padding: 2px 0;"><span class="icon-book"> </span> icon-book</div>
<div style="padding: 2px 0;"><span class="icon-bookmark"> </span> icon-bookmark</div>
</div>
<div class="span3">
<div style="padding: 2px 0;"><span class="icon-print"> </span> icon-print</div>
<div style="padding: 2px 0;"><span class="icon-camera"> </span> icon-camera</div>
<div style="padding: 2px 0;"><span class="icon-font"> </span> icon-font</div>
<div style="padding: 2px 0;"><span class="icon-bold"> </span> icon-bold</div>
<div style="padding: 2px 0;"><span class="icon-italic"> </span> icon-italic</div>
<div style="padding: 2px 0;"><span class="icon-text-height"> </span> icon-text-height</div>
<div style="padding: 2px 0;"><span class="icon-text-width"> </span> icon-text-width</div>
<div style="padding: 2px 0;"><span class="icon-align-left"> </span> icon-align-left</div>
<div style="padding: 2px 0;"><span class="icon-align-center"> </span> icon-align-center</div>
<div style="padding: 2px 0;"><span class="icon-align-right"> </span> icon-align-right</div>
<div style="padding: 2px 0;"><span class="icon-align-justify"> </span> icon-align-justify</div>
<div style="padding: 2px 0;"><span class="icon-list"> </span> icon-list</div>
<div style="padding: 2px 0;"><span class="icon-indent-left"> </span> icon-indent-left</div>
<div style="padding: 2px 0;"><span class="icon-indent-right"> </span> icon-indent-right</div>
<div style="padding: 2px 0;"><span class="icon-facetime-video"> </span> icon-facetime-video</div>
<div style="padding: 2px 0;"><span class="icon-picture"> </span> icon-picture</div>
<div style="padding: 2px 0;"><span class="icon-map-marker"> </span> icon-map-marker</div>
<div style="padding: 2px 0;"><span class="icon-adjust"> </span> icon-adjust</div>
<div style="padding: 2px 0;"><span class="icon-tint"> </span> icon-tint</div>
<div style="padding: 2px 0;"><span class="icon-edit"> </span> icon-edit</div>
<div style="padding: 2px 0;"><span class="icon-share"> </span> icon-share</div>
<div style="padding: 2px 0;"><span class="icon-check"> </span> icon-check</div>
<div style="padding: 2px 0;"><span class="icon-move"> </span> icon-move</div>
<div style="padding: 2px 0;"><span class="icon-step-backward"> </span> icon-step-backward</div>
<div style="padding: 2px 0;"><span class="icon-fast-backward"> </span> icon-fast-backward</div>
<div style="padding: 2px 0;"><span class="icon-backward"> </span> icon-backward</div>
<div style="padding: 2px 0;"><span class="icon-play"> </span> icon-play</div>
<div style="padding: 2px 0;"><span class="icon-pause"> </span> icon-pause</div>
<div style="padding: 2px 0;"><span class="icon-stop"> </span> icon-stop</div>
<div style="padding: 2px 0;"><span class="icon-forward"> </span> icon-forward</div>
<div style="padding: 2px 0;"><span class="icon-fast-forward"> </span> icon-fast-forward</div>
<div style="padding: 2px 0;"><span class="icon-step-forward"> </span> icon-step-forward</div>
<div style="padding: 2px 0;"><span class="icon-eject"> </span> icon-eject</div>
<div style="padding: 2px 0;"><span class="icon-chevron-left"> </span> icon-chevron-left</div>
<div style="padding: 2px 0;"><span class="icon-chevron-right"> </span> icon-chevron-right</div>
<div style="padding: 2px 0;"><span class="icon-plus-sign"> </span> icon-plus-sign</div>
<div style="padding: 2px 0;"><span class="icon-minus-sign"> </span> icon-minus-sign</div>
<div style="padding: 2px 0;"><span class="icon-remove-sign"> </span> icon-remove-sign</div>
<div style="padding: 2px 0;"><span class="icon-ok-sign"> </span> icon-ok-sign</div>
<div style="padding: 2px 0;"><span class="icon-question-sign"> </span> icon-question-sign</div>
<div style="padding: 2px 0;"><span class="icon-info-sign"> </span> icon-info-sign</div>
<div style="padding: 2px 0;"><span class="icon-screenshot"> </span> icon-screenshot</div>
<div style="padding: 2px 0;"><span class="icon-remove-circle"> </span> icon-remove-circle</div>
<div style="padding: 2px 0;"><span class="icon-ok-circle"> </span> icon-ok-circle</div>
<div style="padding: 2px 0;"><span class="icon-ban-circle"> </span> icon-ban-circle</div>
<div style="padding: 2px 0;"><span class="icon-arrow-left"> </span> icon-arrow-left</div>
<div style="padding: 2px 0;"><span class="icon-arrow-right"> </span> icon-arrow-right</div>
<div style="padding: 2px 0;"><span class="icon-arrow-up"> </span> icon-arrow-up</div>
<div style="padding: 2px 0;"><span class="icon-arrow-down"> </span> icon-arrow-down</div>
<div style="padding: 2px 0;"><span class="icon-share-alt"> </span> icon-share-alt</div>
</div>
<div class="span3">
<div style="padding: 2px 0;"><span class="icon-resize-full"> </span> icon-resize-full</div>
<div style="padding: 2px 0;"><span class="icon-resize-small"> </span> icon-resize-small</div>
<div style="padding: 2px 0;"><span class="icon-exclamation-sign"> </span> icon-exclamation-sign</div>
<div style="padding: 2px 0;"><span class="icon-gift"> </span> icon-gift</div>
<div style="padding: 2px 0;"><span class="icon-leaf"> </span> icon-leaf</div>
<div style="padding: 2px 0;"><span class="icon-fire"> </span> icon-fire</div>
<div style="padding: 2px 0;"><span class="icon-eye-open"> </span> icon-eye-open</div>
<div style="padding: 2px 0;"><span class="icon-eye-close"> </span> icon-eye-close</div>
<div style="padding: 2px 0;"><span class="icon-warning-sign"> </span> icon-warning-sign</div>
<div style="padding: 2px 0;"><span class="icon-plane"> </span> icon-plane</div>
<div style="padding: 2px 0;"><span class="icon-calendar"> </span> icon-calendar</div>
<div style="padding: 2px 0;"><span class="icon-random"> </span> icon-random</div>
<div style="padding: 2px 0;"><span class="icon-comment"> </span> icon-comment</div>
<div style="padding: 2px 0;"><span class="icon-magnet"> </span> icon-magnet</div>
<div style="padding: 2px 0;"><span class="icon-chevron-up"> </span> icon-chevron-up</div>
<div style="padding: 2px 0;"><span class="icon-chevron-down"> </span> icon-chevron-down</div>
<div style="padding: 2px 0;"><span class="icon-retweet"> </span> icon-retweet</div>
<div style="padding: 2px 0;"><span class="icon-shopping-cart"> </span> icon-shopping-cart</div>
<div style="padding: 2px 0;"><span class="icon-folder-close"> </span> icon-folder-close</div>
<div style="padding: 2px 0;"><span class="icon-folder-open"> </span> icon-folder-open</div>
<div style="padding: 2px 0;"><span class="icon-resize-vertical"> </span> icon-resize-vertical</div>
<div style="padding: 2px 0;"><span class="icon-resize-horizontal"> </span> icon-resize-horizontal</div>
<div style="padding: 2px 0;"><span class="icon-hdd"> </span> icon-hdd</div>
<div style="padding: 2px 0;"><span class="icon-bullhorn"> </span> icon-bullhorn</div>
<div style="padding: 2px 0;"><span class="icon-bell"> </span> icon-bell</div>
<div style="padding: 2px 0;"><span class="icon-certificate"> </span> icon-certificate</div>
<div style="padding: 2px 0;"><span class="icon-thumbs-up"> </span> icon-thumbs-up</div>
<div style="padding: 2px 0;"><span class="icon-thumbs-down"> </span> icon-thumbs-down</div>
<div style="padding: 2px 0;"><span class="icon-hand-right"> </span> icon-hand-right</div>
<div style="padding: 2px 0;"><span class="icon-hand-left"> </span> icon-hand-left</div>
<div style="padding: 2px 0;"><span class="icon-hand-up"> </span> icon-hand-up</div>
<div style="padding: 2px 0;"><span class="icon-hand-down"> </span> icon-hand-down</div>
<div style="padding: 2px 0;"><span class="icon-circle-arrow-right"> </span> icon-circle-arrow-right</div>
<div style="padding: 2px 0;"><span class="icon-circle-arrow-left"> </span> icon-circle-arrow-left</div>
<div style="padding: 2px 0;"><span class="icon-circle-arrow-up"> </span> icon-circle-arrow-up</div>
<div style="padding: 2px 0;"><span class="icon-circle-arrow-down"> </span> icon-circle-arrow-down</div>
<div style="padding: 2px 0;"><span class="icon-globe"> </span> icon-globe</div>
<div style="padding: 2px 0;"><span class="icon-wrench"> </span> icon-wrench</div>
<div style="padding: 2px 0;"><span class="icon-tasks"> </span> icon-tasks</div>
<div style="padding: 2px 0;"><span class="icon-filter"> </span> icon-filter</div>
<div style="padding: 2px 0;"><span class="icon-briefcase"> </span> icon-briefcase</div>
<div style="padding: 2px 0;"><span class="icon-fullscreen"> </span> icon-fullscreen</div>
<div style="padding: 2px 0;"><span class="icon-dashboard"> </span> icon-dashboard</div>
<div style="padding: 2px 0;"><span class="icon-paperclip"> </span> icon-paperclip</div>
<div style="padding: 2px 0;"><span class="icon-heart-empty"> </span> icon-heart-empty</div>
<div style="padding: 2px 0;"><span class="icon-link"> </span> icon-link</div>
<div style="padding: 2px 0;"><span class="icon-phone"> </span> icon-phone</div>
<div style="padding: 2px 0;"><span class="icon-pushpin"> </span> icon-pushpin</div>
<div style="padding: 2px 0;"><span class="icon-usd"> </span> icon-usd</div>
<div style="padding: 2px 0;"><span class="icon-gbp"> </span> icon-gbp</div>
</div>
<div class="span3">
<div style="padding: 2px 0;"><span class="icon-sort"> </span> icon-sort</div>
<div style="padding: 2px 0;"><span class="icon-sort-by-alphabet"> </span> icon-sort-by-alphabet</div>
<div style="padding: 2px 0;"><span class="icon-sort-by-alphabet-alt"> </span> icon-sort-by-alphabet-alt</div>
<div style="padding: 2px 0;"><span class="icon-sort-by-order"> </span> icon-sort-by-order</div>
<div style="padding: 2px 0;"><span class="icon-sort-by-order-alt"> </span> icon-sort-by-order-alt</div>
<div style="padding: 2px 0;"><span class="icon-sort-by-attributes"> </span> icon-sort-by-attributes</div>
<div style="padding: 2px 0;"><span class="icon-sort-by-attributes-alt"> </span> icon-sort-by-attributes-alt</div>
<div style="padding: 2px 0;"><span class="icon-unchecked"> </span> icon-unchecked</div>
<div style="padding: 2px 0;"><span class="icon-expand"> </span> icon-expand</div>
<div style="padding: 2px 0;"><span class="icon-collapse-down"> </span> icon-collapse-down</div>
<div style="padding: 2px 0;"><span class="icon-collapse-up"> </span> icon-collapse-up</div>
<div style="padding: 2px 0;"><span class="icon-log-in"> </span> icon-log-in</div>
<div style="padding: 2px 0;"><span class="icon-flash"> </span> icon-flash</div>
<div style="padding: 2px 0;"><span class="icon-log-out"> </span> icon-log-out</div>
<div style="padding: 2px 0;"><span class="icon-new-window"> </span> icon-new-window</div>
<div style="padding: 2px 0;"><span class="icon-record"> </span> icon-record</div>
<div style="padding: 2px 0;"><span class="icon-save"> </span> icon-save</div>
<div style="padding: 2px 0;"><span class="icon-open"> </span> icon-open</div>
<div style="padding: 2px 0;"><span class="icon-saved"> </span> icon-saved</div>
<div style="padding: 2px 0;"><span class="icon-import"> </span> icon-import</div>
<div style="padding: 2px 0;"><span class="icon-export"> </span> icon-export</div>
<div style="padding: 2px 0;"><span class="icon-send"> </span> icon-send</div>
<div style="padding: 2px 0;"><span class="icon-floppy-disk"> </span> icon-floppy-disk</div>
<div style="padding: 2px 0;"><span class="icon-floppy-saved"> </span> icon-floppy-saved</div>
<div style="padding: 2px 0;"><span class="icon-floppy-remove"> </span> icon-floppy-remove</div>
<div style="padding: 2px 0;"><span class="icon-floppy-save"> </span> icon-floppy-save</div>
<div style="padding: 2px 0;"><span class="icon-floppy-open"> </span> icon-floppy-open</div>
<div style="padding: 2px 0;"><span class="icon-credit-card"> </span> icon-credit-card</div>
<div style="padding: 2px 0;"><span class="icon-transfer"> </span> icon-transfer</div>
<div style="padding: 2px 0;"><span class="icon-cutlery"> </span> icon-cutlery</div>
<div style="padding: 2px 0;"><span class="icon-header"> </span> icon-header</div>
<div style="padding: 2px 0;"><span class="icon-compressed"> </span> icon-compressed</div>
<div style="padding: 2px 0;"><span class="icon-earphone"> </span> icon-earphone</div>
<div style="padding: 2px 0;"><span class="icon-phone-alt"> </span> icon-phone-alt</div>
<div style="padding: 2px 0;"><span class="icon-tower"> </span> icon-tower</div>
<div style="padding: 2px 0;"><span class="icon-stats"> </span> icon-stats</div>
<div style="padding: 2px 0;"><span class="icon-sd-video"> </span> icon-sd-video</div>
<div style="padding: 2px 0;"><span class="icon-hd-video"> </span> icon-hd-video</div>
<div style="padding: 2px 0;"><span class="icon-subtitles"> </span> icon-subtitles</div>
<div style="padding: 2px 0;"><span class="icon-sound-stereo"> </span> icon-sound-stereo</div>
<div style="padding: 2px 0;"><span class="icon-sound-dolby"> </span> icon-sound-dolby</div>
<div style="padding: 2px 0;"><span class="icon-sound-5-1"> </span> icon-sound-5-1</div>
<div style="padding: 2px 0;"><span class="icon-sound-6-1"> </span> icon-sound-6-1</div>
<div style="padding: 2px 0;"><span class="icon-sound-7-1"> </span> icon-sound-7-1</div>
<div style="padding: 2px 0;"><span class="icon-copyright-mark"> </span> icon-copyright-mark</div>
<div style="padding: 2px 0;"><span class="icon-registration-mark"> </span> icon-registration-mark</div>
<div style="padding: 2px 0;"><span class="icon-cloud-download"> </span> icon-cloud-download</div>
<div style="padding: 2px 0;"><span class="icon-cloud-upload"> </span> icon-cloud-upload</div>
<div style="padding: 2px 0;"><span class="icon-tree-conifer"> </span> icon-tree-conifer</div>
<div style="padding: 2px 0;"><span class="icon-tree-deciduous"> </span> icon-tree-deciduous</div>
</div>
</div>
<h3 class="jm-typo-title">Social icons</h3>
<div>
<pre>&lt;div class="jm-social"&gt;
&lt;a class="btn btn-social-icon btn-deviantart"&gt;&lt;i class="fa fa-deviantart"&gt;&lt;/i&gt;&lt;/a&gt;
&lt;a class="btn btn-social-icon btn-dropbox"&gt;&lt;i class="fa fa-dropbox"&gt;&lt;/i&gt;&lt;/a&gt;
&lt;a class="btn btn-social-icon btn-facebook"&gt;&lt;i class="fa fa-facebook"&gt;&lt;/i&gt;&lt;/a&gt;
&lt;a class="btn btn-social-icon btn-flickr"&gt;&lt;i class="fa fa-flickr"&gt;&lt;/i&gt;&lt;/a&gt;
&lt;a class="btn btn-social-icon btn-github"&gt;&lt;i class="fa fa-github"&gt;&lt;/i&gt;&lt;/a&gt;
&lt;a class="btn btn-social-icon btn-google"&gt;&lt;i class="fa fa-google"&gt;&lt;/i&gt;&lt;/a&gt;
&lt;a class="btn btn-social-icon btn-instagram"&gt;&lt;i class="fa fa-instagram"&gt;&lt;/i&gt;&lt;/a&gt;
&lt;a class="btn btn-social-icon btn-lastfm"&gt;&lt;i class="fa fa-lastfm"&gt;&lt;/i&gt;&lt;/a&gt;
&lt;a class="btn btn-social-icon btn-linkedin"&gt;&lt;i class="fa fa-linkedin"&gt;&lt;/i&gt;&lt;/a&gt;
&lt;a class="btn btn-social-icon btn-paypal"&gt;&lt;i class="fa fa-paypal"&gt;&lt;/i&gt;&lt;/a&gt;
&lt;a class="btn btn-social-icon btn-pinterest"&gt;&lt;i class="fa fa-pinterest"&gt;&lt;/i&gt;&lt;/a&gt;
&lt;a class="btn btn-social-icon btn-reddit"&gt;&lt;i class="fa fa-reddit"&gt;&lt;/i&gt;&lt;/a&gt;
&lt;a class="btn btn-social-icon btn-skype"&gt;&lt;i class="fa fa-skype"&gt;&lt;/i&gt;&lt;/a&gt;
&lt;a class="btn btn-social-icon btn-tumblr"&gt;&lt;i class="fa fa-tumblr"&gt;&lt;/i&gt;&lt;/a&gt;
&lt;a class="btn btn-social-icon btn-twitch"&gt;&lt;i class="fa fa-twitch"&gt;&lt;/i&gt;&lt;/a&gt;
&lt;a class="btn btn-social-icon btn-twitter"&gt;&lt;i class="fa fa-twitter"&gt;&lt;/i&gt;&lt;/a&gt;
&lt;a class="btn btn-social-icon btn-vimeo"&gt;&lt;i class="fa fa-vimeo"&gt;&lt;/i&gt;&lt;/a&gt;
&lt;a class="btn btn-social-icon btn-youtube"&gt;&lt;i class="fa fa-youtube"&gt;&lt;/i&gt;&lt;/a&gt;
&lt;/div&gt;
</pre>
</div>
<div class="jm-social"><a class="btn btn-social-icon btn-deviantart"><i class="fa fa-deviantart"></i></a> <a class="btn btn-social-icon btn-dropbox"><i class="fa fa-dropbox"></i></a> <a class="btn btn-social-icon btn-facebook"><i class="fa fa-facebook"></i></a> <a class="btn btn-social-icon btn-flickr"><i class="fa fa-flickr"></i></a> <a class="btn btn-social-icon btn-github"><i class="fa fa-github"></i></a> <a class="btn btn-social-icon btn-google"><i class="fa fa-google"></i></a> <a class="btn btn-social-icon btn-instagram"><i class="fa fa-instagram"></i></a> <a class="btn btn-social-icon btn-lastfm"><i class="fa fa-lastfm"></i></a> <a class="btn btn-social-icon btn-linkedin"><i class="fa fa-linkedin"></i></a> <a class="btn btn-social-icon btn-paypal"><i class="fa fa-paypal"></i></a> <a class="btn btn-social-icon btn-pinterest"><i class="fa fa-pinterest"></i></a> <a class="btn btn-social-icon btn-reddit"><i class="fa fa-reddit"></i></a> <a class="btn btn-social-icon btn-skype"><i class="fa fa-skype"></i></a> <a class="btn btn-social-icon btn-tumblr"><i class="fa fa-tumblr"></i></a> <a class="btn btn-social-icon btn-twitch"><i class="fa fa-twitch"></i></a> <a class="btn btn-social-icon btn-twitter"><i class="fa fa-twitter"></i></a> <a class="btn btn-social-icon btn-vimeo"><i class="fa fa-vimeo"></i></a> <a class="btn btn-social-icon btn-youtube"><i class="fa fa-youtube"></i></a></div>
<h3 class="jm-typo-title">Offcanvas Button Module</h3>
<div class="row-fluid">
<div class="span12">
<pre>&lt;p&gt;&lt;a class="toggle-nav menu"&gt;&lt;i class="fa fa-bars"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/p&gt;
</pre>
<p><a class="toggle-nav menu"><i class="fa fa-bars"></i></a></p>
</div>
</div>
<h3 class="jm-typo-title">Jumbo Slogan</h3>
<pre>&lt;div class="jm-jumbo-text text-center"&gt;<br />&lt;h2&gt;Are you ready for posting your ads on JM ClassifiedAds?&lt;/h2&gt;<br />&lt;p&gt;Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.&lt;/p&gt;<br />&lt;p&gt;&lt;a class="btn" href="#"&gt;Post an ad +&lt;/a&gt;&lt;/p&gt;<br />&lt;/div&gt;
</pre>
<div class="jm-jumbo-text text-center">
<h2>Are you ready for posting your ads on JM ClassifiedAds?</h2>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
<p><a class="btn" href="#">Post an ad +</a></p>
</div>
<h3 class="jm-typo-title">Pricing</h3>
<pre>&lt;div class="row-fluid"&gt;<br />&lt;div class="span6"&gt;<br />&lt;div class="jm-pricing"&gt;<br />&lt;div class="row-fluid"&gt;<br />&lt;div class="span6 text-center"&gt;<br />&lt;h3&gt;FREE AD&lt;/h3&gt;<br />&lt;span class="jm-price"&gt;$0.00&lt;/span&gt;&lt;/div&gt;<br />&lt;div class="span6"&gt;<br />&lt;ul&gt;<br />&lt;li&gt;Lorem ipsum dolor sit amet&lt;/li&gt;<br />&lt;li&gt;Adipiscing elit, sed do eiusmod tempor incididunt&lt;/li&gt;<br />&lt;li&gt;Lorem ipsum dolor sit amet, consectetur&lt;/li&gt;<br />&lt;li&gt;Adipiscing elit, sed do&lt;/li&gt;<br />&lt;/ul&gt;<br />&lt;/div&gt;<br />&lt;/div&gt;<br />&lt;/div&gt;<br />&lt;/div&gt;<br />&lt;div class="span6"&gt;<br />&lt;div class="jm-pricing"&gt;<br />&lt;div class="row-fluid"&gt;<br />&lt;div class="span6 text-center"&gt;<br />&lt;h3&gt;FEATURED AD&lt;/h3&gt;<br />&lt;span class="jm-price"&gt;from $1.0&lt;/span&gt;&lt;/div&gt;<br />&lt;div class="span6"&gt;<br />&lt;ul&gt;<br />&lt;li&gt;Lorem ipsum dolor sit amet&lt;/li&gt;<br />&lt;li&gt;Adipiscing elit, sed do eiusmod tempor incididunt&lt;/li&gt;<br />&lt;li&gt;Lorem ipsum dolor sit amet, consectetur&lt;/li&gt;<br />&lt;li&gt;Adipiscing elit, sed do&lt;/li&gt;<br />&lt;/ul&gt;<br />&lt;/div&gt;<br />&lt;/div&gt;<br />&lt;/div&gt;<br />&lt;/div&gt;<br />&lt;/div&gt;
</pre>
<div class="row-fluid">
<div class="span6">
<div class="jm-pricing jm-module color2-ms">
<div class="row-fluid">
<div class="span6 text-center">
<h3>FREE AD</h3>
<span class="jm-price">$0.00</span></div>
<div class="span6">
<ul>
<li>Lorem ipsum dolor sit amet</li>
<li>Adipiscing elit, sed do eiusmod tempor incididunt</li>
<li>Lorem ipsum dolor sit amet, consectetur</li>
<li>Adipiscing elit, sed do</li>
</ul>
</div>
</div>
</div>
</div>
<div class="span6">
<div class="jm-pricing jm-module color2-ms">
<div class="row-fluid">
<div class="span6 text-center">
<h3>FEATURED AD</h3>
<span class="jm-price">from $1.0</span></div>
<div class="span6">
<ul>
<li>Lorem ipsum dolor sit amet</li>
<li>Adipiscing elit, sed do eiusmod tempor incididunt</li>
<li>Lorem ipsum dolor sit amet, consectetur</li>
<li>Adipiscing elit, sed do</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<h3 class="jm-typo-title">Company address</h3>
<pre>&lt;div class="jm-footer-info"&gt;<br />&lt;img src="images/logo.png" alt="" /&gt;<br />&lt;div class="jm-footer-text"&gt;<br />&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.&lt;br /&gt;&lt;br /&gt;<br />72 Red Lion Street, &lt;br /&gt; London, United Kingdom &lt;br /&gt; <br />Mail: templates@joomla-monster.com &lt;br /&gt; <br />Phone: 987 654-3210&lt;/p&gt;<br />&lt;div class="jm-social"&gt;<br />&lt;a class="btn btn-social-icon btn-twitter"&gt;&lt;i class="fa fa-twitter"&gt;&lt;/i&gt;&lt;/a&gt;<br />&lt;a class="btn btn-social-icon btn-facebook"&gt;&lt;i class="fa fa-facebook"&gt;&lt;/i&gt;&lt;/a&gt;<br />&lt;a class="btn btn-social-icon btn-pinterest"&gt;&lt;i class="fa fa-pinterest"&gt;&lt;/i&gt;&lt;/a&gt;<br />&lt;/div&gt;<br />&lt;/div&gt;<br />&lt;/div&gt;
</pre>
<div class="jm-module color3-ms">
<div class="jm-footer-info"><img src="images/logo.png" alt="" />
<div class="jm-footer-text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.<br /><br />72 Red Lion Street, <br /> London, United Kingdom <br /> Mail: templates@joomla-monster.com <br /> Phone: 987 654-3210</p>
<div class="jm-social"><a class="btn btn-social-icon btn-twitter"><i class="fa fa-twitter"></i></a> <a class="btn btn-social-icon btn-facebook"><i class="fa fa-facebook"></i></a> <a class="btn btn-social-icon btn-pinterest"><i class="fa fa-pinterest"></i></a></div>
</div>
</div>
</div>