| Current File : /home/karenpetzb/www/business/light/templates/feature_all.htm |
<p class="margin_2line" id="images">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ultrices, nunc in adipiscing consectetur. Phasellus porta euismod volutpat. Donec a nibh eros. Fusce scelerisque egestas magna quis eleifend. In hac habitasse platea dictumst.</p>
<h3 class="margin_2line margin_bottom_1line">Left float image</h3>
<div class="item floatleft">
<img src="/business/image/noimage.png" alt=""/>
<a class="fancybox" href="/business/image/noimage_big.png" title="Description">Lien de la loupe
</a>
<div class="details">
<div class="mblogfooter2 custom_font"><p>Photo title</p></div>
</div>
</div>
<p class=""><span class="highlight">This image is left aligned. It has on-hover description.</span> Tellus, sed egestas velit tellus a ipsum. Ut enim ad minima veniam. Integer pretium tellus nec nibh imperdiet id auctor tellus gravida. Nulla vehicula auctor ante, quis vulputate purus tincidunt in. Nulla facilisi. In nec massa mi. Suspendisse at nisi id nulla bibendum sodales vel id ipsum. Duis fermentum interdum elit ut mollis. Sed diam nunc, aliquet vitae vulputate sed, sollicitudin vitae velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ultrices, nunc in adipiscing consectetur, libero velit egestas tellus, sed egestas velit tellus a ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ultrices, nunc in adipiscing consectetur. Phasellus porta euismod volutpat. Donec a nibh eros. Fusce scelerisque egestas magna quis eleifend. In hac habitasse platea dictumst.</p>
<h3 class="margin_2line margin_bottom_1line">Right float image</h3>
<div class="item floatright">
<img src="/business/image/noimage.png" alt=""/>
<a class="fancybox" href="/business/image/noimage_big.png" title="Description">Lien de la loupe
</a>
<div class="details">
<div class="mblogfooter2 custom_font"><p>Photo title</p></div>
</div>
</div>
<p class=""><span class="highlight">This image is right aligned. It has on-hover description.</span> Praesent molestie placerat feugiat. Eam convallis fringilla dui, sit amet ultrices massa tempus vitae. Integer aliquam feugiat orci a aliquet. Duies eros tortor, imperdiet et sollicitudin eget, ornare vitae purus. Pellentesque habitant morbi tristique sentus et netus et malesuada fames ac turpis egestas. Inger sit amet purus et magna dignissim venenatis. Fusce euismod pulvinar augue non blandit. Quisque sed lacus enim. Aliquam id ipsum est, sed bibendum libero. Nam condimentum justo eu purus lobortis blandit. </p>
<h3 class="margin_2line margin_bottom_1line">Centered image with qTip</h3>
<!-- <a class="fancybox qtip" href="/business/image/noimage_big.png" title="This is photo description"><img class="floatcenter margin_1line" src="/business/image/noimage.png" alt=""/></a> -->
<div class="item floatcenter">
<img src="/business/image/noimage.png" alt=""/>
<a class="fancybox qtip" href="/business/image/noimage_big.png" title="Description">Lien de la loupe
</a>
<div class="details">
<div class="mblogfooter2 custom_font"><p>Photo title</p></div>
</div>
</div>
<h3 class="margin_2line">Paragraph with dropcap</h3>
<p class="dropcap margin_1line">Donec quis est non arcu lobortis consequat. Aenean dignissim nunc id lectus scelerisque ullamcorper. Nullam quis neque elementum est ultricies sodales eu ac lectus. Suspendisse potenti. Quisque commodo iaculis lectus eget pharetra. Morbi nec ultricies diam. Nulla dapibus adipiscing egestas. Quisque blandit dui arcu. Fusce eget tellus ac nisi scelerisque gravida. </p>
<h3 class="margin_2line">Paragraph with links and highligths</h3>
<p class="margin_1line"><span class="highlight">Ut enim ad minima veniam</span>. Integer <a href="#" class="qtip" title="link title">placerat feugiat</a> nec nibh imperdiet id auctor tellus gravida. Nulla vehicula auctor ante, quis vulputate purus tincidunt in. Nulla facilisi. In nec massa mi. Suspendisse at nisi id nulla bibendum sodales vel id ipsum. <span class="highlight2">Duis fermentum interdum elit ut mollis</span>. Sed diam nunc, <a href="#" class="qtip" title="link title">placerat feugiat</a> vitae vulputate sed, <span class="highlight3">sollicitudin vitae velit</span>.</p>
<h3 class="margin_2line" id="code">This is a piece of code</h3>
<code class="margin_1line">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ultrices, nunc in adipiscing consectetur, libero velit egestas tellus, sed egestas velit tellus a ipsum.
</code>
<h3 class="margin_2line">This is a quote</h3>
<blockquote class="margin_1line">Pellentesque condimentum, nunc vitae pharetra condimentum, ante arcu adipiscing ligula, id porta ligula tellus ac quam. Sed vitae mi at nulla vehicula accumsan. Phasellus porta euismod volutpat. Donec a nibh eros. Fusce scelerisque egestas magna quis eleifend. In hac habitasse platea dictumst. Sed venenatis luctus enim eu accumsan. In in enim mauris. </blockquote>
<div class="column_cont" id="lists">
<div class="one-third margin_1line">
<h3 class="margin_1line">Unordered list</h3>
<ul class="margin_1line">
<li>Lorem ipsum dolor sit amet.</li>
<li>Duis tempor augue vel lectus.</li>
<li>Phasellus nec sapien mauris.</li>
<li>Vivamus non mi quis purus.</li>
<li>Nullam dapibus mattis auguen.</li>
<li>Aliquam vitae eros diam.</li>
</ul>
</div>
<div class="one-third margin_1line">
<h3 class="margin_1line">Ordered list</h3>
<ol class="margin_1line">
<li>Lorem ipsum dolor sit amet.</li>
<li>Duis tempor augue vel lectus.</li>
<li>Phasellus nec sapien mauris.</li>
<li>Vivamus non mi quis purus.</li>
<li>Nullam dapibus mattis auguen.</li>
<li>Aliquam vitae eros diam.</li>
</ol>
</div>
<div class="one-third margin_1line">
<h3 class="margin_1line">Custom list with links</h3>
<ul class="links">
<li><a href="#">Lorem ipsum dolor sit amet.</a></li>
<li><a href="#">Duis tempor augue vel lectus.</a></li>
<li><a href="#">Phasellus nec sapien mauris.</a></li>
</ul>
</div>
</div>
<div class="clear"></div>
<h3 class="margin_2line margin_bottom_1line">This is a table</h3>
<table class="">
<tr>
<th>header 1</th><th>header 2</th><th>header 3</th><th>header 4</th>
</tr>
<tr>
<td>item 1-1</td><td>item 1-2</td><td>item 1-3</td><td>item 1-4</td>
</tr>
<tr>
<td>item 2-1</td><td>item 2-2</td><td>item 2-3</td><td>item 2-4</td>
</tr>
<tr>
<td>item 3-1</td><td>item 3-2</td><td>item 3-3</td><td>item 3-4</td>
</tr>
<tr>
<td>item 4-1</td><td>item 4-2</td><td>item 4-3</td><td>item 4-4</td>
</tr>
</table>
<div class="column_cont margin_2line" id="columns">
<div class="one-half">
<h3>One-half column</h3>
<p class="margin_1line">Ellentesque condimentum, nunc vitae pharetra condimentum, ante arcu adipiscing ligula, id porta ligula tellus ac quam. Sed vitae mi at nulla vehicula accumsan. Phasellus porta euismod volutpat. Donec a nibh eros. Fusce scelerisque egestas magna quis eleifend. In hac habitasse platea dictumst.</p>
</div>
<div class="one-half">
<h3>One-half column</h3>
<p class="margin_1line">Ellentesque condimentum, nunc vitae pharetra condimentum, ante arcu adipiscing ligula, id porta ligula tellus ac quam. Sed vitae mi at nulla vehicula accumsan. Phasellus porta euismod volutpat. Donec a nibh eros. Fusce scelerisque egestas magna quis eleifend. In hac habitasse platea dictumst.</p>
</div>
</div>
<div class="clear"></div>
<div class="column_cont margin_2line">
<div class="one-third">
<h3>One-third column</h3>
<p class="margin_1line">Ellentesque condimentum, nunc vitae pharetra condimentum, ante arcu adipiscing ligula, id porta ligula tellus ac quam. Sed vitae mi at nulla vehicula accumsan. Phasellus porta euismod volutpat. Donec a nibh eros. Fusce scelerisque egestas magna quis eleifend. In hac habitasse platea dictumst.</p>
</div>
<div class="one-third">
<h3>One-third column</h3>
<p class="margin_1line">Ellentesque condimentum, nunc vitae pharetra condimentum, ante arcu adipiscing ligula, id porta ligula tellus ac quam. Sed vitae mi at nulla vehicula accumsan. Phasellus porta euismod volutpat. Donec a nibh eros. Fusce scelerisque egestas magna quis eleifend. In hac habitasse platea dictumst.</p>
</div>
<div class="one-third">
<h3>One-third column</h3>
<p class="margin_1line">Ellentesque condimentum, nunc vitae pharetra condimentum, ante arcu adipiscing ligula, id porta ligula tellus ac quam. Sed vitae mi at nulla vehicula accumsan. Phasellus porta euismod volutpat. Donec a nibh eros. Fusce scelerisque egestas magna quis eleifend. In hac habitasse platea dictumst.</p>
</div>
</div>
<div class="clear"></div>
<div class="column_cont margin_2line">
<div class="one-third">
<h3>One-third column</h3>
<p class="margin_1line">Ellentesque condimentum, nunc vitae pharetra condimentum, ante arcu adipiscing ligula, id porta ligula tellus ac quam. Sed vitae mi at nulla vehicula accumsan. Phasellus porta euismod volutpat. Donec a nibh eros. Fusce scelerisque egestas magna quis eleifend. In hac habitasse platea dictumst.</p>
</div>
<div class="two-third">
<h3>Two-third column</h3>
<p class="margin_1line">Ellentesque condimentum, nunc vitae pharetra condimentum, ante arcu adipiscing ligula, id porta ligula tellus ac quam. Sed vitae mi at nulla vehicula accumsan. Phasellus porta euismod volutpat. Donec a nibh eros. Fusce scelerisque egestas magna quis eleifend. In hac habitasse platea dictumst. Ellentesque condimentum, nunc vitae pharetra condimentum, ante arcu adipiscing ligula, id porta ligula tellus ac quam. Sed vitae mi at nulla vehicula accumsan. Phasellus porta euismod volutpat. Donec a nibh eros. Fusce scelerisque egestas magna quis eleifend. In hac habitasse platea dictumst.</p>
</div>
</div>
<div class="clear"></div>
<div class="column_cont margin_2line">
<div class="two-third">
<h3>Two-third column</h3>
<p class="margin_1line">Ellentesque condimentum, nunc vitae pharetra condimentum, ante arcu adipiscing ligula, id porta ligula tellus ac quam. Sed vitae mi at nulla vehicula accumsan. Phasellus porta euismod volutpat. Donec a nibh eros. Fusce scelerisque egestas magna quis eleifend. In hac habitasse platea dictumst. Ellentesque condimentum, nunc vitae pharetra condimentum, ante arcu adipiscing ligula, id porta ligula tellus ac quam. Sed vitae mi at nulla vehicula accumsan. Phasellus porta euismod volutpat. Donec a nibh eros. Fusce scelerisque egestas magna quis eleifend. In hac habitasse platea dictumst.. </p>
</div>
<div class="one-third">
<h3>One-third column</h3>
<p class="margin_1line">Ellentesque condimentum, nunc vitae pharetra condimentum, ante arcu adipiscing ligula, id porta ligula tellus ac quam. Sed vitae mi at nulla vehicula accumsan. Phasellus porta euismod volutpat. Donec a nibh eros. Fusce scelerisque egestas magna quis eleifend. In hac habitasse platea dictumst.</p>
</div>
</div>
<div class="clear"></div>
<div class="column_cont">
<div class="one-fourth margin_2line">
<h3>1/4 column</h3>
<p class="margin_1line">Ellentesque condimentum, nunc vitae pharetra condimentum, ante arcu adipiscing ligula, id porta ligula tellus ac quam. Sed vitae mi at nulla vehicula accumsan. Phasellus porta euismod volutpat. Donec a nibh eros. Fusce scelerisque egestas magna quis eleifend. In hac habitasse platea dictumst.</p>
</div>
<div class="one-fourth margin_2line">
<h3>1/4 column</h3>
<p class="margin_1line">Ellentesque condimentum, nunc vitae pharetra condimentum, ante arcu adipiscing ligula, id porta ligula tellus ac quam. Sed vitae mi at nulla vehicula accumsan. Phasellus porta euismod volutpat. Donec a nibh eros. Fusce scelerisque egestas magna quis eleifend. In hac habitasse platea dictumst.</p>
</div>
<div class="one-fourth margin_2line">
<h3>1/4 column</h3>
<p class="margin_1line">Ellentesque condimentum, nunc vitae pharetra condimentum, ante arcu adipiscing ligula, id porta ligula tellus ac quam. Sed vitae mi at nulla vehicula accumsan. Phasellus porta euismod volutpat. Donec a nibh eros. Fusce scelerisque egestas magna quis eleifend. In hac habitasse platea dictumst.</p>
</div>
<div class="one-fourth margin_2line">
<h3>1/4 column</h3>
<p class="margin_1line">Ellentesque condimentum, nunc vitae pharetra condimentum, ante arcu adipiscing ligula, id porta ligula tellus ac quam. Sed vitae mi at nulla vehicula accumsan. Phasellus porta euismod volutpat. Donec a nibh eros. Fusce scelerisque egestas magna quis eleifend. In hac habitasse platea dictumst.</p>
</div>
</div>
<div class="clear"></div>
<div class="column_cont margin_2line">
<div class="one-fourth">
<h3>1/4 column</h3>
<p class="margin_1line">Ellentesque condimentum, nunc vitae pharetra condimentum, ante arcu adipiscing ligula, id porta ligula tellus ac quam. Sed vitae mi at nulla vehicula accumsan. Phasellus porta euismod volutpat. Donec a nibh eros. Fusce scelerisque egestas magna quis eleifend. In hac habitasse platea dictumst.</p>
</div>
<div class="three-fourth">
<h3>3/4 column</h3>
<p class="margin_1line">Ellentesque condimentum, nunc vitae pharetra condimentum, ante arcu adipiscing ligula, id porta ligula tellus ac quam. Sed vitae mi at nulla vehicula accumsan. Phasellus porta euismod volutpat. Donec a nibh eros. Fusce scelerisque egestas magna quis eleifend. In hac habitasse platea dictumst. Ellentesque condimentum, nunc vitae pharetra condimentum, ante arcu adipiscing ligula, id porta ligula tellus ac quam. Sed vitae mi at nulla vehicula accumsan. Phasellus porta euismod volutpat. Donec a nibh eros. Fusce scelerisque egestas magna quis eleifend. In hac habitasse platea dictumst. Ellentesque condimentum, nunc vitae pharetra condimentum, ante arcu adipiscing ligula, id porta ligula tellus ac quam. Sed vitae mi at nulla vehicula accumsan.</p>
</div>
</div>
<div class="clear"></div>
<h1 class="margin_2line margin_bottom_1line" id="headers">This is a H1 Header</h1>
<p class="">Phasellus porta euismod volutpat. Donec a nibh eros.</p>
<h2 class="margin_2line margin_bottom_1line">This is a H2 Header</h2>
<p class="">Phasellus porta euismod volutpat. Donec a nibh eros.</p>
<h3 class="margin_2line margin_bottom_1line">This is a H3 Header</h3>
<p class="">Phasellus porta euismod volutpat. Donec a nibh eros.</p>
<h4 class="margin_2line margin_bottom_1line">This is a H4 Header</h4>
<p class="">Phasellus porta euismod volutpat. Donec a nibh eros.</p>
<h5 class="margin_2line margin_bottom_1line">This is a H5 Header</h5>
<p class="">Phasellus porta euismod volutpat. Donec a nibh eros.</p>
<h6 class="margin_2line margin_bottom_1line">This is a H6 Header</h6>
<p class="">Phasellus porta euismod volutpat. Donec a nibh eros.</p>
<h3 class="margin_2line" id="blocks">Info blocks</h3>
<div class="column_cont">
<div class="one-half">
<blockquote class="success margin_1line">This is a <strong>success</strong> message</blockquote>
<blockquote class="error margin_1line">This is a <strong>error</strong> message</blockquote>
</div>
<div class="one-half">
<blockquote class="info margin_1line">This is a <strong>info</strong> message</blockquote>
<blockquote class="warning margin_1line">This is a <strong>warning</strong> message</blockquote>
</div>
</div>
<div class="clear"></div>
</div>