Example 1:
Code:
<ul class="vcel vm-cel vsl-cel vs-cel cell-gallery" style="--columns: 3;--m-columns: 3;--sl-columns: 3;--s-columns: 2;" data-vsettings>
<li class="image-item image-326 ">
<div class="vimg vove-h">
<a class="link-to-figure vlight vh-run" data-vlight="cell-662ed8c821514" href="https://wphiveframework.com/wp-content/uploads/2017/08/gallery_05.png">
<figure class="vmedia vtra vgrow vrun" data-vmedia="https://wphiveframework.com/wp-content/uploads/2017/08/gallery_05-450x299.png"></figure>
</a>
</div>
</li>
<li class="image-item image-325 ">
<div class="vimg vove-h">
<a class="link-to-figure vlight vh-run" data-vlight="cell-662ed8c821514" href="https://wphiveframework.com/wp-content/uploads/2017/08/gallery_04.png">
<figure class="vmedia vtra vgrow vrun" data-vmedia="https://wphiveframework.com/wp-content/uploads/2017/08/gallery_04-450x299.png"></figure>
</a>
</div>
</li>
<li class="image-item image-324 ">
<div class="vimg vove-h">
<a class="link-to-figure vlight vh-run" data-vlight="cell-662ed8c821514" href="https://wphiveframework.com/wp-content/uploads/2017/08/gallery_03.png">
<figure class="vmedia vtra vgrow vrun" data-vmedia="https://wphiveframework.com/wp-content/uploads/2017/08/gallery_03-450x299.png"></figure>
</a>
</div>
</li>
<li class="image-item image-323 ">
<div class="vimg vove-h">
<a class="link-to-figure vlight vh-run" data-vlight="cell-662ed8c821514" href="https://wphiveframework.com/wp-content/uploads/2017/08/gallery_02.png">
<figure class="vmedia vtra vgrow vrun" data-vmedia="https://wphiveframework.com/wp-content/uploads/2017/08/gallery_02-450x299.png"></figure>
</a>
</div>
</li>
<li class="image-item image-322 ">
<div class="vimg vove-h">
<a class="link-to-figure vlight vh-run" data-vlight="cell-662ed8c821514" href="https://wphiveframework.com/wp-content/uploads/2017/08/gallery_01.png">
<figure class="vmedia vtra vgrow vrun" data-vmedia="https://wphiveframework.com/wp-content/uploads/2017/08/gallery_01-450x299.png"></figure>
</a>
</div>
</li>
<li class="image-item image-321 ">
<div class="vimg vove-h">
<a class="link-to-figure vlight vh-run" data-vlight="cell-662ed8c821514" href="https://wphiveframework.com/wp-content/uploads/2017/08/gallery_06.jpg">
<figure class="vmedia vtra vgrow vrun" data-vmedia="https://wphiveframework.com/wp-content/uploads/2017/08/gallery_06-450x299.jpg"></figure>
</a>
</div>
</li>
</ul>
Example 1:
Code:
<p>
<a class="vtra vgrow vh" href="#">grow</a>
</p>
<p>
<a class="vtra vgrowRotate vh" href="#">growRotate</a>
</p>
<p>
<a class="vtra vrotate vh" href="#">rotate</a>
</p>
<p>
<a class="vtra vshrink vh" href="#">shrink</a>
</p>
<p>
<a class="vtra vbounceUt vh" href="#">bounceUp</a>
</p>
<p>
<a class="vtra vbounceDt vh" href="#">bounceDown</a>
</p>
<p>
<a class="vtra vmoveUt vh" href="#">moveUp</a>
</p>
<p>
<a class="vtra vmoveDt vh" href="#">moveDown</a>
</p>
<p>
<a class="vtra vmoveRt vh" href="#">moveRight</a>
</p>
<p>
<a class="vtra vmoveLt vh" href="#">moveLeft</a>
</p>Example 2:
Code:
<p class="vh-run">
<a class="vtra vflipItXt vtra-d3 vtra-d1- vrun" href="#">Flip In X</a>
</p>
<p class="vh-run">
<a class="vtra vflipItYt vtra-d3 vrun" href="#">Flip In Y</a>
</p>
<p class="vh-run">
<a class="vtra vflipOtXt vtra-d3 vtra-d1- vrun" href="#">Flip Out X</a>
</p>
<p class="vh-run">
<a class="vtra vflipOtYt vtra-d3 vrun" href="#">Flip Out Y</a>
</p>
Example 1:
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Code:
<p class="f0">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p class="f1">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p class="f2">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p class="f3">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>Example 2:
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Code:
<p class="f1-">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p class="f2-">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p class="f3-">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>Example 3 (Responsive Font Size):
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Code:
<p class="v1">Lorem Ipsum</p>
<p class="v2">Lorem Ipsum</p>
<p class="v3">Lorem Ipsum</p>
<p class="v4">Lorem Ipsum</p>
<p class="v5">Lorem Ipsum</p>
<p class="v6">Lorem Ipsum</p>
Example 1:
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum is simply
dummy textof the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum is simply dummy text of the printing and typesetting ind.
Code:
<p>Lorem Ipsum is simply
<mark>dummy text</mark> of the printing and typesetting industry.
</p>
<p>Lorem Ipsum is simply
<del>dummy text</del> of the printing and typesetting industry.
</p>
<p>Lorem Ipsum is simply
<u>dummy text</u> of the printing and typesetting industry.
</p>
<p>Lorem Ipsum is simply
<ins>dummy text</ins> of the printing and typesetting industry.
</p>
<p>Lorem Ipsum is simply
<strong>dummy text</strong> of the printing and typesetting industry.
</p>
<p>Lorem Ipsum is simply
<small>dummy text</small> of the printing and typesetting industry.
</p>
<p>Lorem Ipsum is simply
<em>dummy text</em> of the printing and typesetting industry.
</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting
<abbr title="Industry">ind.</abbr>
</p>Example 2:
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Code:
<blockquote>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<footer>
<cite title="Lorem Ipsum">Lorem Ipsum</cite>
</footer>
</blockquote>
Example 1:
-
First Box
-
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
-
Code:
<ul class="vl-flex vm-flex">
<li class="vcol vl-7 vflex vfle-dc vjus-cc">
<p>First Box</p>
</li>
<li class="vcol">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</li>
</ul>
