Skip to content

Flip Box ​

Click to preview the Flip Box demo. View demo

Great Flexibility ​

Code:

html
<div class="clearfix">
  <div class="col-md-3 col-sm-6">
    <div class="flip-box flip-box01">
      <div class="rotate">
        <div class="front">
          <div class="v-center"><span class="fa fa-trello"></span>
            <h3>Easy Operation</h3>
          </div>
        </div>
        <div class="back">
          <h3>Easy Operation</h3>
          <div class="back-con">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praent sit amet malesuada velit. Curabitur ut neque eu metus luctus posuere ut non odio. Vestibulum quam mauris, varius ac imperdiet in, adipiscing in sapien. Nullam faucibus turpis quis dui elementum, nec pharetra justo malesuada. Pellentesque et tortor et purus ullamcorper sodales et sed sapien. Cras ultrices diam id rutrum tristique sagittis in mattis at.</p>
          </div>
          <a class="dg-btn-1 size-lg hover-darkturquoise" href="#">VIEW MORE</a> </div>
      </div>
    </div>
  </div>
  <div class="col-md-3 col-sm-6">
    <div class="flip-box flip-box01">
      <div class="rotate">
        <div class="front">
          <div class="v-center"><span class="fa fa-life-ring"></span>
            <h3>Richer Interface</h3>
          </div>
        </div>
        <div class="back">
          <h3>Richer Interface</h3>
          <div class="back-con">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praent sit amet malesuada velit. Curabitur ut neque eu metus luctus posuere ut non odio. Vestibulum quam mauris, varius ac imperdiet in, adipiscing in sapien. Nullam faucibus turpis quis dui elementum, nec pharetra justo malesuada. Pellentesque et tortor et purus ullamcorper sodales et sed sapien. Cras ultrices diam id rutrum tristique sagittis in mattis at.</p>
          </div>
          <a class="dg-btn-1 size-lg hover-darkturquoise" href="#">VIEW MORE</a> </div>
      </div>
    </div>
  </div>
  <div class="clearfix visible-sm"> </div>
  <div class="col-md-3 col-sm-6">
    <div class="flip-box flip-box01">
      <div class="rotate">
        <div class="front">
          <div class="v-center"><span class="fa fa-css3"></span>
            <h3>Advanced Options</h3>
          </div>
        </div>
        <div class="back">
          <h3>Advanced Options</h3>
          <div class="back-con">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praent sit amet malesuada velit. Curabitur ut neque eu metus luctus posuere ut non odio. Vestibulum quam mauris, varius ac imperdiet in, adipiscing in sapien. Nullam faucibus turpis quis dui elementum, nec pharetra justo malesuada. Pellentesque et tortor et purus ullamcorper sodales et sed sapien. Cras ultrices diam id rutrum tristique sagittis in mattis at.</p>
          </div>
          <a class="dg-btn-1 size-lg hover-darkturquoise" href="#">VIEW MORE</a> </div>
      </div>
    </div>
  </div>
  <div class="col-md-3 col-sm-6">
    <div class="flip-box flip-box01">
      <div class="rotate">
        <div class="front">
          <div class="v-center"><span class="fa fa-language"></span>
            <h3>Great Flexibility</h3>
          </div>
        </div>

        <div class="back">
          <h3>Great Flexibility</h3>
          <div class="back-con">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praent sit amet malesuada velit. Curabitur ut neque eu metus luctus posuere ut non odio. Vestibulum quam mauris, varius ac imperdiet in, adipiscing in sapien. Nullam faucibus turpis quis dui elementum, nec pharetra justo malesuada. Pellentesque et tortor et purus ullamcorper sodales et sed sapien. Cras ultrices diam id rutrum tristique sagittis in mattis at.</p>
          </div>
          <a class="dg-btn-1 size-lg hover-darkturquoise" href="#">VIEW MORE</a> </div>
      </div>
    </div>
  </div>
</div>

STANDARD DEMOS ​

Code:

html
<div class="row">
  <div class="col-md-3 col-sm-6">
    <div class="flip-box flip-box02">
      <div class="rotate">
        <div class="front">
          <div class="v-center"><span class="pic"><img class="img-responsive" alt="" src="/portals/13/Features-Images/flipbox-img01.jpg" /> </span>
            <h3>SITE LAYOUT</h3>
            <p>Instead of using an icon</p>
          </div>
        </div>
        <div class="back">
          <h3>SITE LAYOUT</h3>
          <div class="back-con">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, eius perferendis temporibus sequi magni odit repellat iure accusamus minima fugiat.eius perferendis temporibus</p>
          </div>
          <a class="dg-btn-1 size-lg" href="#">VIEW MORE</a></div>
      </div>
    </div>
  </div>
  <div class="col-md-3 col-sm-6">
    <div class="flip-box flip-box02">
      <div class="rotate">
        <div class="front">
          <div class="v-center"><span class="pic"><img class="img-responsive" alt="" src="/portals/13/Features-Images/flipbox-img02.jpg" /> </span>
            <h3>CLEAN CODE</h3>
            <p>Instead of using an icon</p>
          </div>
        </div>
        <div class="back">
          <h3>CLEAN CODE</h3>
          <div class="back-con">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, eius perferendis temporibus sequi magni odit repellat iure accusamus minima fugiat.eius perferendis temporibus</p>
          </div>
          <a class="dg-btn-1 size-lg" href="#">VIEW MORE</a></div>
      </div>
    </div>
  </div>
  <div class="clearfix visible-sm"> </div>
  <div class="col-md-3 col-sm-6">
    <div class="flip-box flip-box02">
      <div class="rotate">
        <div class="front">
          <div class="v-center"><span class="pic"><img class="img-responsive" alt="" src="/portals/13/Features-Images/flipbox-img03.jpg" /> </span>
            <h3>ICON FONTS</h3>
            <p>The front and backside</p>
          </div>
        </div>
        <div class="back">
          <h3>ICON FONTS</h3>
          <div class="back-con">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, eius perferendis temporibus sequi magni odit repellat iure accusamus minima fugiat.eius perferendis temporibus</p>
          </div>
          <a class="dg-btn-1 size-lg" href="#">VIEW MORE</a></div>
      </div>
    </div>
  </div>
  <div class="col-md-3 col-sm-6">
    <div class="flip-box flip-box02">
      <div class="rotate">
        <div class="front">
          <div class="v-center"><span class="pic"><img class="img-responsive" alt="" src="/portals/13/Features-Images/flipbox-img04.jpg" /> </span>
            <h3>STANDARD DEMOS</h3>
            <p>The front and backside</p>
          </div>
        </div>
        <div class="back">
          <h3>STANDARD DEMOS</h3>
          <div class="back-con">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, eius perferendis temporibus sequi magni odit repellat iure accusamus minima fugiat.eius perferendis temporibus</p>
          </div>
          <a class="dg-btn-1 size-lg" href="#">VIEW MORE</a></div>
      </div>
    </div>
  </div>
</div>

Great Flexibility ​

Code:

html
<div class="flipbox-bg01 pt-60 pb-60">
  <div class="container">
    <div class="row">
      <div class="col-md-3 col-sm-6">
        <div class="flip-box flip-box03">
          <div class="rotate">
            <div class="front">
              <div class="v-center"><span class="fa fa-bell-o"></span>
                <h3>Richer Interface</h3>
                <p>Curabitur ut neque eu metus luctus posure non odio. Vestibulum quam mauris, varius acmper dietn, adipiscingin sapien.</p>
              </div>
            </div>
            <div class="back">
              <h3>Richer Interface</h3>
              <div class="back-con">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sit amet malesuada velit. Curabitur neque metus luctus.</p>
              </div>
              <a class="dg-btn-1 btn-accent size-xl" href="#">PURCHASE IT NOW</a></div>
          </div>
        </div>
      </div>
      <div class="col-md-3 col-sm-6">
        <div class="flip-box flip-box03">
          <div class="rotate">
            <div class="front">
              <div class="v-center"><span class="fa fa-power-off"></span>
                <h3>Easy Operation</h3>
                <p>Curabitur ut neque eu metus luctus posure non odio. Vestibulum quam mauris, varius acmper dietn, adipiscingin sapien.</p>
              </div>
            </div>
            <div class="back">
              <h3>Easy Operation</h3>
              <div class="back-con">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sit amet malesuada velit. Curabitur neque metus luctus.</p>
              </div>
              <a class="dg-btn-1 btn-accent size-xl" href="#">PURCHASE IT NOW</a></div>
          </div>
        </div>
      </div>
      <div class="clearfix visible-sm"> </div>
      <div class="col-md-3 col-sm-6">
        <div class="flip-box flip-box03">
          <div class="rotate">
            <div class="front">
              <div class="v-center"><span class="fa fa-pencil"></span>
                <h3>Advanced Options</h3>
                <p>Curabitur ut neque eu metus luctus posure non odio. Vestibulum quam mauris, varius acmper dietn, adipiscingin sapien.</p>
              </div>
            </div>
            <div class="back">
              <h3>Advanced Options</h3>
              <div class="back-con">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sit amet malesuada velit. Curabitur neque metus luctus.</p>
              </div>
              <a class="dg-btn-1 btn-accent size-xl" href="#">PURCHASE IT NOW</a></div>
          </div>
        </div>
      </div>
      <div class="col-md-3 col-sm-6">
        <div class="flip-box flip-box03">
          <div class="rotate">
            <div class="front">
              <div class="v-center"><span class="fa fa-pencil"></span>
                <h3>Great Flexibility</h3>
                <p>Curabitur ut neque eu metus luctus posure non odio. Vestibulum quam mauris, varius acmper dietn, adipiscingin sapien.</p>

              </div>
            </div>
            <div class="back">
              <h3>Great Flexibility</h3>
              <div class="back-con">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sit amet malesuada velit. Curabitur neque metus luctus.</p>
              </div>
              <a class="dg-btn-1 btn-accent size-xl" href="#">PURCHASE IT NOW</a></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Get to see the updated ​

Code:

html
<div class="row">
  <div class="col-sm-4">
    <div class="flip-box flip-box04 flip-small">
      <div class="rotate">
        <div class="front">
          <div class="v-center"><span class="pic"><img alt="" src="/portals/13/Features-Images/flipbox-img05.jpg" /> </span>
            <h3>ADVANCED TECHNOLOGY</h3>
          </div>
        </div>
        <div class="back">
          <h3>CUSTOMIZE THE BORD</h3>
          <div class="back-con">
            <p>Animated flip boxes are simply awesome. We’ve never met anyone who doesn’t love these bad boys. They are great for grabbing</p>
          </div>
          <a class="dg-btn-4 radius-3px btn-danger" href="#">Countinue Reading</a></div>
      </div>
    </div>
  </div>
  <div class="col-sm-8">
    <div class="flip-box flip-box04 flip-top">
      <div class="rotate">
        <div class="front">
          <div class="v-center"><span class="pic"><img alt="" src="/portals/13/Features-Images/flipbox-img06.jpg" /> </span>
            <h3>The sales will soar like never before, tripling your product sales in short time.</h3>
          </div>
        </div>
        <div class="back">
          <h3>Get to see the updated</h3>
          <div class="back-con">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sit amet malesuada velit. Curabitur ut neque metus luctus posuere ut non odio. Vestibulum quam mauris, varius ac imperdiet in, adipiscing in sapien. Nullam faucibus turpis quis dui elementum, nec pharetra justo malesuada. Pellentesque et tortor et purus ullamcorper sodales et sed sapien. Cras ultrices diam id rutrum tristique. Nulla massa metus, sagittis in mattis at, mollis et nunc. Class aptent taciti sociosqu ad litora. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
          </div>
          <a class="dg-btn-4 radius-3px btn-danger" href="#">Countinue Reading</a></div>
      </div>
    </div>
  </div>
</div>

Versatile Module ​

Code:

html
<div class="row">
  <div class="col-md-3 col-sm-6">
    <div class="flip-box flip-box05">
      <div class="rotate">
        <div class="front">
          <div class="v-center"><span class="pic"><img class="img-responsive" alt="" src="/portals/13/Features-Images/flipbox-img07.jpg" /> </span>
            <h3>Various Interfaces</h3>
            <p>Lorem ipsum dolor sitllen amet, consectetur adipiscing elitent amet malesuada velit.</p>
          </div>
        </div>
        <div class="back">
          <h3>Various Interfaces</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sit amet malesuada velit. Curabitur ut neque eu metus luctus posuere ut non odio. Vestibulum quam mauris, varius ac imperdiet in, adipiscing in sapien. Nullam faucibus turpis quis dui elementum, nec pharetra justo malesuada. Pellentesque sapien.</p>
        </div>
      </div>
    </div>
  </div>
  <div class="col-md-3 col-sm-6">
    <div class="flip-box flip-box05">
      <div class="rotate">
        <div class="front">
          <div class="v-center"><span class="pic"><img class="img-responsive" alt="" src="/portals/13/Features-Images/flipbox-img08.jpg" /> </span>
            <h3>Multiple Headers</h3>
            <p>Lorem ipsum dolor sitllen amet, consectetur adipiscing elitent amet malesuada velit.</p>
          </div>
        </div>
        <div class="back">
          <h3>Multiple Headers</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sit amet malesuada velit. Curabitur ut neque eu metus luctus posuere ut non odio. Vestibulum quam mauris, varius ac imperdiet in, adipiscing in sapien. Nullam faucibus turpis quis dui elementum, nec pharetra justo malesuada. Pellentesque sapien.</p>
        </div>
      </div>
    </div>
  </div>
  <div class="clearfix visible-sm"> </div>
  <div class="col-md-3 col-sm-6">
    <div class="flip-box flip-box05">
      <div class="rotate">
        <div class="front">
          <div class="v-center"><span class="pic"><img class="img-responsive" alt="" src="/portals/13/Features-Images/flipbox-img09.jpg" /> </span>
            <h3>Simple Forms</h3>
            <p>Lorem ipsum dolor sitllen amet, consectetur adipiscing elitent amet malesuada velit.</p>
          </div>
        </div>
        <div class="back">
          <h3>Simple Forms</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sit amet malesuada velit. Curabitur ut neque eu metus luctus posuere ut non odio. Vestibulum quam mauris, varius ac imperdiet in, adipiscing in sapien. Nullam faucibus turpis quis dui elementum, nec pharetra justo malesuada. Pellentesque sapien.</p>
        </div>
      </div>
    </div>
  </div>
  <div class="col-md-3 col-sm-6">
    <div class="flip-box flip-box05">
      <div class="rotate">
        <div class="front">
          <div class="v-center"><span class="pic"><img class="img-responsive" alt="" src="/portals/13/Features-Images/flipbox-img10.jpg" /> </span>
            <h3>Versatile Module</h3>
            <p>Lorem ipsum dolor sitllen amet, consectetur adipiscing elitent amet malesuada velit.</p>
          </div>
        </div>
        <div class="back">
          <h3>Versatile Module</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sit amet malesuada velit. Curabitur ut neque eu metus luctus posuere ut non odio. Vestibulum quam mauris, varius ac imperdiet in, adipiscing in sapien. Nullam faucibus turpis quis dui elementum, nec pharetra justo malesuada. Pellentesque sapien.</p>
        </div>
      </div>
    </div>
  </div>
</div>

ELEGANT DESIGN ​

Code:

html
<div class="flipbox-bg02 pt-60 pb-60">
  <div class="container">
    <div class="row">
      <div class="col-md-3 col-sm-6">
        <div class="flip-box flip-box06">
          <div class="rotate">
            <div class="front">
              <div class="v-center"><span class="fa fa-delicious"></span>
                <h3>RICHER INTERFACE</h3>
                <p><a href="#">Read More <span class="fa fa-long-arrow-right"></span></a></p>
              </div>
            </div>
            <div class="back">
              <div class="back-ver">
                <h3>RICHER INTERFACE</h3>
                <div>Lorem ipsum dolor ametconse ctetur adipiscing elit. Praesent sit amet malesuada velit. Curabitur neque eu metus luctus posuere uodio. adipiscing in sapien.</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-3 col-sm-6">
        <div class="flip-box flip-box06">
          <div class="rotate">
            <div class="front">
              <div class="v-center"><span class="fa fa-files-o"></span>
                <h3>EASY OPERATION</h3>
                <p><a href="#">Read More <span class="fa fa-long-arrow-right"></span></a></p>
              </div>
            </div>
            <div class="back">
              <div class="back-ver">
                <h3>EASY OPERATION</h3>
                <div>Lorem ipsum dolor ametconse ctetur adipiscing elit. Praesent sit amet malesuada velit. Curabitur neque eu metus luctus posuere uodio. adipiscing in sapien.</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="clearfix visible-sm"> </div>
      <div class="col-md-3 col-sm-6">
        <div class="flip-box flip-box06">
          <div class="rotate">
            <div class="front">
              <div class="v-center"><span class="fa fa-briefcase"></span>
                <h3>GREAT FLEXIBILITY</h3>
                <p><a href="#">Read More <span class="fa fa-long-arrow-right"></span></a></p>
              </div>
            </div>
            <div class="back">
              <div class="back-ver">
                <h3>GREAT FLEXIBILITY</h3>
                <div>Lorem ipsum dolor ametconse ctetur adipiscing elit. Praesent sit amet malesuada velit. Curabitur neque eu metus luctus posuere uodio. adipiscing in sapien.</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-3 col-sm-6">
        <div class="flip-box flip-box06">
          <div class="rotate">
            <div class="front">
              <div class="v-center"><span class="fa fa-film"></span>
                <h3>ELEGANT DESIGN</h3>
                <p><a href="#">Read More <span class="fa fa-long-arrow-right"></span></a></p>
              </div>
            </div>
            <div class="back">
              <div class="back-ver">
                <h3>ELEGANT DESIGN</h3>
                <div>Lorem ipsum dolor ametconse ctetur adipiscing elit. Praesent sit amet malesuada velit. Curabitur neque eu metus luctus posuere uodio. adipiscing in sapien.</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

SIMPLE FORMS ​

Code:

html
<div class="row">
  <div class="col-md-3 col-sm-6">
    <div class="flip-box flip-box07">
      <div class="rotate">
        <div class="front">
          <div class="v-center"><span class="fa fa-download"></span>
            <h3>ADVANCED TECHNOLOGY</h3>
            <p>Lorem ipsum dolor amet, consectetur adipiscing elit. Praesent amet malesuda velitnd. Curabitur neque metus luctusro. Vestibulum quam mauris varius imperdiet adipiscing apien.</p>
          </div>
        </div>
        <div class="back">
          <h3>ADVANCED TECHNOLOGY</h3>
          <p>Lorem ipsum dolor amet, consectetur adipiscing elit. Praesent amet malesuda velitnd. Curabitur neque metus luctusro. Vestibulum quam mauris varius imperdiet adipiscing apien.</p>
          <a class="more" href="#">READ MORE ></a> </div>
      </div>
    </div>
  </div>
  <div class="col-md-3 col-sm-6">
    <div class="flip-box flip-box07">
      <div class="rotate">
        <div class="front">
          <div class="v-center"><span class="fa fa-edit"></span>
            <h3>VARIOUS INTERFACES</h3>
            <p>Lorem ipsum dolor amet, consectetur adipiscing elit. Praesent amet malesuda velitnd. Curabitur neque metus luctusro. Vestibulum quam mauris varius imperdiet adipiscing apien.</p>
          </div>
        </div>
        <div class="back">
          <h3>VARIOUS INTERFACES</h3>
          <p>Lorem ipsum dolor amet, consectetur adipiscing elit. Praesent amet malesuda velitnd. Curabitur neque metus luctusro. Vestibulum quam mauris varius imperdiet adipiscing apien.</p>
          <a class="more" href="#">READ MORE ></a> </div>
      </div>
    </div>
  </div>
  <div class="clearfix visible-sm"> </div>
  <div class="col-md-3 col-sm-6">
    <div class="flip-box flip-box07">
      <div class="rotate">
        <div class="front">
          <div class="v-center"><span class="fa  fa-headphones"></span>
            <h3>MULTIPLE HEADERS</h3>
            <p>Lorem ipsum dolor amet, consectetur adipiscing elit. Praesent amet malesuda velitnd. Curabitur neque metus luctusro. Vestibulum quam mauris varius imperdiet adipiscing apien.</p>
          </div>
        </div>
        <div class="back">
          <h3>MULTIPLE HEADERS</h3>
          <p>Lorem ipsum dolor amet, consectetur adipiscing elit. Praesent amet malesuda velitnd. Curabitur neque metus luctusro. Vestibulum quam mauris varius imperdiet adipiscing apien.</p>
          <a class="more" href="#">READ MORE ></a> </div>
      </div>
    </div>
  </div>
  <div class="col-md-3 col-sm-6">
    <div class="flip-box flip-box07">
      <div class="rotate">
        <div class="front">
          <div class="v-center"><span class="fa  fa-file-video-o"></span>
            <h3>SIMPLE FORMS</h3>
            <p>Lorem ipsum dolor amet, consectetur adipiscing elit. Praesent amet malesuda velitnd. Curabitur neque metus luctusro. Vestibulum quam mauris varius imperdiet adipiscing apien.</p>
          </div>
        </div>
        <div class="back">
          <h3>SIMPLE FORMS</h3>
          <p>Lorem ipsum dolor amet, consectetur adipiscing elit. Praesent amet malesuda velitnd. Curabitur neque metus luctusro. Vestibulum quam mauris varius imperdiet adipiscing apien.</p>
          <a class="more" href="#">READ MORE ></a> </div>
      </div>
    </div>
  </div>
</div>

LAYOUT OPTIONS ​

Code:

html
<div class="row">
  <div class="col-sm-4">
    <div class="flip-box flip-box08">
      <div class="rotate">
        <div class="front">
          <div class="v-center"><span class="fa fa-music"></span>
            <h3>ENDLESSLY CUSTOMIZABLE</h3>
            <p>Lorem ipsum dolor amet, consectetur adipiscing elit. Praesent amet malesuda velitnd. Curabitur neque metus luctusro. Vestibulum quam adipiscing apien.</p>
          </div>
        </div>
        <div class="back">
          <h3>ENDLESSLY CUSTOMIZABLE</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sit amet malesuada velit. Curabitur ut neque eu metus luctus posuere ut non odio. Vestibulum quam mauris, varius ac imperdiet in, adipiscing in sapien. Nullam faucibus turpis quis dui elementum, nec pharetra justo malesuada. Pellentesque et tortor et purus ullamcorper sodales et sed sapien.</p>
        </div>
      </div>
    </div>
  </div>
  <div class="col-sm-4">
    <div class="flip-box flip-box08">
      <div class="rotate">
        <div class="front">
          <div class="v-center"><span class="fa fa-power-off"></span>
            <h3>Incredible Short Codes</h3>
            <p>Lorem ipsum dolor amet, consectetur adipiscing elit. Praesent amet malesuda velitnd. Curabitur neque metus luctusro. Vestibulum quam adipiscing apien.</p>
          </div>
        </div>
        <div class="back">
          <h3>Incredible Short Codes</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sit amet malesuada velit. Curabitur ut neque eu metus luctus posuere ut non odio. Vestibulum quam mauris, varius ac imperdiet in, adipiscing in sapien. Nullam faucibus turpis quis dui elementum, nec pharetra justo malesuada. Pellentesque et tortor et purus ullamcorper sodales et sed sapien.</p>
        </div>
      </div>
    </div>
  </div>
  <div class="col-sm-4">
    <div class="flip-box flip-box08">
      <div class="rotate">
        <div class="front">
          <div class="v-center"><span class="fa fa-microphone"></span>
            <h3>LAYOUT OPTIONS</h3>
            <p>Lorem ipsum dolor amet, consectetur adipiscing elit. Praesent amet malesuda velitnd. Curabitur neque metus luctusro. Vestibulum quam adipiscing apien.</p>
          </div>
        </div>
        <div class="back">
          <h3>LAYOUT OPTIONS</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sit amet malesuada velit. Curabitur ut neque eu metus luctus posuere ut non odio. Vestibulum quam mauris, varius ac imperdiet in, adipiscing in sapien. Nullam faucibus turpis quis dui elementum, nec pharetra justo malesuada. Pellentesque et tortor et purus ullamcorper sodales et sed sapien.</p>
        </div>
      </div>
    </div>
  </div>
</div>