أسلوب الطباعة

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vel metus ac nisl scelerisque placerat id vel libero. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse eget massa urna, ac ornare purus. Pellentesque pellentesque accumsan libero, at porta risus tempor eget. Suspendisse erat massa, tincidunt ut tristique quis, tincidunt in justo. Sed nec urna massa.

Text Animation - Slide

<div class="animate-text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vel metus ac nisl scelerisque placerat id vel libero. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse eget massa urna, ac ornare purus. Pellentesque pellentesque accumsan libero, at porta risus tempor eget. Suspendisse erat massa, tincidunt ut tristique quis, tincidunt in justo. Sed nec urna massa.</p>
</div>

Text Animation - Fade

<div class="animate-text-fade">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vel metus ac nisl scelerisque placerat id vel libero. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse eget massa urna, ac ornare purus. Pellentesque pellentesque accumsan libero, at porta risus tempor eget. Suspendisse erat massa, tincidunt ut tristique quis, tincidunt in justo. Sed nec urna massa.</p>
</div>

Image Animation - Scale

<div class="animate-img">
<p><img alt="" src="/images/joomlart/ourwork/sl-2.jpg"></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vel metus ac nisl scelerisque placerat id vel libero. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse eget massa urna, ac ornare purus. Pellentesque pellentesque accumsan libero, at porta risus tempor eget. Suspendisse erat massa, tincidunt ut tristique quis, tincidunt in justo. Sed nec urna massa.</p>
</div>

Box Animation - Slide

<div class="span6 animate-left-box">
<div class="box">
<img align="left" alt="" src="/images/joomlart/customer/jayman.jpg">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vel metus ac nisl scelerisque placerat id vel libero. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse eget massa urna, ac ornare purus.</p>
</div>
</div>

<div class="span6 animate-right-box">
<div class="box">
<img align="left" alt="" src="/images/joomlart/customer/pizzulata.jpg">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vel metus ac nisl scelerisque placerat id vel libero. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse eget massa urna, ac ornare purus.</p>
</div>
</div>

Image Animation - Transform when hover

<div class="animation-img-hover pull-left"><img align="left" alt="" src="/images/joomlart/customer/VinThomas.jpg"></div>

<h3 class="hightlight-heading">Highlight</h3>

Highlight

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vel metus ac nisl <span class="highlight">scelerisque placerat</span> id vel libero. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse eget massa urna, ac ornare purus. Pellentesque pellentesque accumsan libero, at porta risus tempor eget. Suspendisse erat massa, tincidunt ut tristique quis, tincidunt in justo. Sed nec urna massa.</p>

List Photos

<div class="photo-list clearfix">
<span class="photo-item">
 <img src="/images/joomlart/ourprojects/op-1.jpg" alt="" class="photo-img"/>
 <span class="photo-name"><span>Maecenas Building</span></span>
</span>
<span class="photo-item">
 <img src="/images/joomlart/ourprojects/op-2.jpg" alt="" class="photo-img"/>
 <span class="photo-name"><span>Maecenas Building</span></span>
</span>
<span class="photo-item">
 <img src="/images/joomlart/ourprojects/op-3.jpg" alt="" class="photo-img"/>
 <span class="photo-name"><span>Maecenas Building</span></span>
</span>
<span class="photo-item">
 <img src="/images/joomlart/ourprojects/op-4.jpg" alt="" class="photo-img"/>
 <span class="photo-name"><span>Maecenas Building</span></span>
</span>
<span class="photo-item">
 <img src="/images/joomlart/ourprojects/op-5.jpg" alt="" class="photo-img"/>
 <span class="photo-name"><span>Maecenas Building</span></span>
</span>
<span class="photo-item">
 <img src="/images/joomlart/ourprojects/op-6.jpg" alt="" class="photo-img"/>
 <span class="photo-name"><span>Maecenas Building</span></span>
</span>
<span class="photo-item">
 <img src="/images/joomlart/ourprojects/op-7.jpg" alt="" class="photo-img"/>
 <span class="photo-name"><span>Maecenas Building</span></span>
</span>
<span class="photo-item">
 <img src="/images/joomlart/ourprojects/op-8.jpg" alt="" class="photo-img"/>
 <span class="photo-name"><span>Maecenas Building</span></span>
</span>
</div>

Donec pellentesque venenatis elit, quis aliquet mauris malesuada vel. Donec vitae libero dolor. Maecenas semper sapien sit amet tortor tempor et vulputate diam hendrerit.

Maecenas Building

Beranis's Typography

Animations