Flipbox

"MODIFY PAGES WITH EASE USING THE STYLE WIZARD! CHANGE OVERALL APPEARANCE IN FEW CLICKS

- OZONE TEAM

Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at dolores sit vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

FIND OUT MORE

FLIPBOX

FlipBox rotate left

Content Front Quisque pulvinar aliquam libero, nec ultrices magna iaculis non. Vestibulum nec justo ut nunc euismod suscipit. Etiam id gravida metus. Sed sed nibh nec ante laoreet tristique.

Content Behind Ut et mi turpis. Proin aliquam, libero at pellentesque fermentum, arcu arcu convallis tellus, a congue turpis dui a metus. Aliquam erat volutpat. Cras pharetra dignissim ante nec congue. Donec consequat sit amet diam nec semper. Nulla facilisi. Maecenas quis urna dignissim.

View Code

<div class="eds_flipBox">
      <div class="eds_front">
        Content Front...
      </div>
      <div class="eds_behind">
        Content Behind...
      </div>
    </div>

FlipBox rotate right

Content Front Quisque pulvinar aliquam libero, nec ultrices magna iaculis non. Vestibulum nec justo ut nunc euismod suscipit. Etiam id gravida metus. Sed sed nibh nec ante laoreet tristique.

Content Behind Ut et mi turpis. Proin aliquam, libero at pellentesque fermentum, arcu arcu convallis tellus, a congue turpis dui a metus. Aliquam erat volutpat. Cras pharetra dignissim ante nec congue. Donec consequat sit amet diam nec semper. Nulla facilisi. Maecenas quis urna dignissim.

View Code

<div class="eds_flipBox eds_flipRight">
      <div class="eds_front">
        Content Front...
      </div>
      <div class="eds_behind">
        Content Behind...
      </div>
    </div>

FlipBox rotate top

Content Front Quisque pulvinar aliquam libero, nec ultrices magna iaculis non. Vestibulum nec justo ut nunc euismod suscipit. Etiam id gravida metus. Sed sed nibh nec ante laoreet tristique.

Content Behind Ut et mi turpis. Proin aliquam, libero at pellentesque fermentum, arcu arcu convallis tellus, a congue turpis dui a metus. Aliquam erat volutpat. Cras pharetra dignissim ante nec congue. Donec consequat sit amet diam nec semper. Nulla facilisi. Maecenas quis urna dignissim.

View Code

<div class="eds_flipBox eds_flipTop">
      <div class="eds_front">
        Content Front...
      </div>
      <div class="eds_behind">
        Content Behind...
      </div>
    </div>

FlipBox rotate bottom

Content Front Quisque pulvinar aliquam libero, nec ultrices magna iaculis non. Vestibulum nec justo ut nunc euismod suscipit. Etiam id gravida metus. Sed sed nibh nec ante laoreet tristique.

Content Behind Ut et mi turpis. Proin aliquam, libero at pellentesque fermentum, arcu arcu convallis tellus, a congue turpis dui a metus. Aliquam erat volutpat. Cras pharetra dignissim ante nec congue. Donec consequat sit amet diam nec semper. Nulla facilisi. Maecenas quis urna dignissim.

View Code

<div class="eds_flipBox eds_flipBottom">
      <div class="eds_front">
        Content Front...
      </div>
      <div class="eds_behind">
        Content Behind...
      </div>
    </div>

FlipBox with various elements example

HAVE QUESTIONS?

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio. Cras nec consectetur enim, eget elementum nunc. Vivamus enim erat, tristique in nibh id.

Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore

View Code

<div class="eds_flipBox eds_flipTop">
<div class="eds_front">
<div class="eds_box eds_box_3 eds_withFontIcon">
<div class="fontIcon">
<span class="fas fa-question"></span>
</div>
<h3 class="text-center">HAVE QUESTIONS?</h3>
<p class="text-center">Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio. Cras nec consectetur enim, eget elementum nunc. Vivamus enim erat, tristique in nibh id.</p>
</div>
</div>
<div class="eds_behind">
<div class="eds_box eds_box_3 eds_withSmallFontIcon eds_withBottomButton">
<div class="fontIcon eds_small">
<span class="fas fa-question"></span>
</div>
<p class="text-center">Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore</p>
<p class="text-center">Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore</p>
<div class="eds_bottomButton">
<div class="text-center"><a href="#" class="eds_btn">READ MORE</a></div>
</div>
</div>
</div>
</div>