Flip Boxes

<div class="row">
  <div class="col-md-4">
    <div class="flip-box flip-box01">
      <div class="rotate">
        <div class="front">
          <div class="dg-iconbox01">
            <div class="dg-ico02  size-lg color-accent"><i class="fa fa-rocket2"></i><span class="bg bg-accent2"></span></div>
            <h3 class="title">SMART & EFFECTIVE</h3>
            <p>Content Text</p>
          </div>
        </div>
        <div class="back">
          <div class="dg-iconbox01">
            <h3 class="title">Smart & Effective</h3>
            <p>Content Text</p>
            <p class="pt-10"><a href="#" title="Learn More">Learn More <span class="fa fa-angle-double-right"></span></a></p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="flip-box flip-box01">
      <div class="rotate">
        <div class="front">
          <div class="dg-iconbox01">
            <div class="dg-ico02  size-lg color-accent"><i class="fa fa-magic-wand"></i><span class="bg bg-accent2"></span></div>
            <h3 class="title">SMART & EFFECTIVE</h3>
            <p>Content Text</p>
          </div>
        </div>
        <div class="back">
          <div class="dg-iconbox01">
            <h3 class="title">Smart & Effective</h3>
            <p>Content Text</p>
            <p class="pt-10"><a href="#" title="Learn More">Learn More <span class="fa fa-angle-double-right"></span></a></p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="flip-box flip-box01">
      <div class="rotate">
        <div class="front">
          <div class="dg-iconbox01">
            <div class="dg-ico02  size-lg color-accent"><i class="fa fa-headphones2"></i><span class="bg bg-accent2"></span></div>
            <h3 class="title">SMART & EFFECTIVE</h3>
            <p>Content Text</p>
          </div>
        </div>
        <div class="back">
          <div class="dg-iconbox01">
            <h3 class="title">Smart & Effective</h3>
            <p>Content Text</p>
            <p class="pt-10"><a href="#" title="Learn More">Learn More <span class="fa fa-angle-double-right"></span></a></p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="row">
  <div class="col-md-4">
    <div class="flip-box flip-box02">
      <div class="rotate">
        <div class="front">
          <div class="dg-iconbox">
            <div class="dg-ico03  size-xl bg-accent"><i class="fa fa-color-sampler"></i><span class="bg bg-accent2"></span></div>
            <h3 class="title">CUSTOM WIDGETS</h3>
            <p>Content Text</p>
          </div>
        </div>
        <div class="back">
          <div class="dg-iconbox">
            <div class="dg-ico03  size-xl bg-accent"><i class="fa fa-color-sampler"></i><span class="bg bg-accent2"></span></div>
            <p>Content Text</p>
            <p class="mt-10"><a class="dg-btn-2 btn-accent size-sm" href="#">LEARN MORE</a></p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="flip-box flip-box02">
      <div class="rotate">
        <div class="front">
          <div class="dg-iconbox">
            <div class="dg-ico03  size-xl bg-accent3"><i class="fa fa-diamond3"></i><span class="bg bg-accent2"></span></div>
            <h3 class="title">CUSTOM WIDGETS</h3>
            <p>Content Text</p>
          </div>
        </div>
        <div class="back">
          <div class="dg-iconbox">
            <div class="dg-ico03  size-xl bg-accent3"><i class="fa fa-diamond3"></i><span class="bg bg-accent2"></span></div>
            <p>Content Text</p>
            <p class="mt-10"><a class="dg-btn-2 btn-accent size-sm" href="#">LEARN MORE</a></p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="flip-box flip-box02">
      <div class="rotate">
        <div class="front">
          <div class="dg-iconbox">
            <div class="dg-ico03  size-xl bg-accent4"><i class="fa fa-bag"></i><span class="bg bg-accent2"></span></div>
            <h3 class="title">CUSTOM WIDGETS</h3>
            <p>Content Text</p>
          </div>
        </div>
        <div class="back">
          <div class="dg-iconbox">
            <div class="dg-ico03  size-xl bg-accent4"><i class="fa fa-bag"></i><span class="bg bg-accent2"></span></div>
            <p>Content Text</p>
            <p class="mt-10"><a class="dg-btn-2 btn-accent size-sm" href="#">LEARN MORE</a></p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="row">
  <div class="col-md-4">
    <div class="flip-box flip-box03">
      <div class="rotate">
        <div class="front">
          <div class="pic"><img src="/Portals/1/pages-images/flipboxes_img01.jpg" /></div>
          <div class="box">
            <div class="center">
              <h4 class="title">EXTENSIVE DOCUMENTATION</h4>
            </div>
          </div>
        </div>
        <div class="back">
          <div class="pic"><img src="/Portals/1/pages-images/flipboxes_img01.jpg" /></div>
          <div class="box">
            <div class="center">
              <h4 class="title">EXTENSIVE DOCUMENTATION</h4>
              <p>Ut enim ad minima veniam, quis nostrum exercita tionem ullam corporis suscipit laboriosam.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="flip-box flip-box03 flip-right">
      <div class="rotate">
        <div class="front">
          <div class="pic"><img src="/Portals/1/pages-images/flipboxes_img02.jpg" /></div>
          <div class="box">
            <div class="center">
              <h4 class="title">PAGE RANKING</h4>
            </div>
          </div>
        </div>
        <div class="back">
          <div class="pic"><img src="/Portals/1/pages-images/flipboxes_img02.jpg" /></div>
          <div class="box">
            <div class="center">
              <h4 class="title">PAGE RANKING</h4>
              <p>Ut enim ad minima veniam, quis nostrum exercita tionem ullam corporis suscipit laboriosam.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="flip-box flip-box03 flip-top">
      <div class="rotate">
        <div class="front">
          <div class="pic"><img src="/Portals/1/pages-images/flipboxes_img03.jpg" /></div>
          <div class="box">
            <div class="center">
              <h4 class="title">LOCATION TARGETING</h4>
            </div>
          </div>
        </div>
        <div class="back">
          <div class="pic"><img src="/Portals/1/pages-images/flipboxes_img03.jpg" /></div>
          <div class="box">
            <div class="center">
              <h4 class="title">LOCATION TARGETING</h4>
              <p>Ut enim ad minima veniam, quis nostrum exercita tionem ullam corporis suscipit laboriosam.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="row">
  <div class="col-md-4">
    <div class="flip-box flip-box04 rotate-3d">
      <div class="rotate">
        <div class="front">
          <div class="pic"><img src="/Portals/1/pages-images/flipboxes_img04.jpg" /></div>
          <div class="cont">
            <h4 class="title">OUR VALUES</h4>
            <p>Ut enim ad minima veniam, quis nostrum exercita tionem ullam corporis suscipit laboriosam.</p>
          </div>
        </div>
        <div class="back bg-accent">
          <div class="center">
            <h4 class="title">OUR VALUES</h4>
            <p class="pb-10">Content Text</p>
            <p><a href="#" title="">Learn More <span class="fa fa-angle-double-right"></span></a></p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="flip-box flip-box04 rotate-3d flip-left">
      <div class="rotate">
        <div class="front">
          <div class="pic"><img src="/Portals/1/pages-images/flipboxes_img05.jpg" /></div>
          <div class="cont">
            <h4 class="title">SMART & EFFECTIVE</h4>
            <p>Ut enim ad minima veniam, quis nostrum exercita tionem ullam corporis suscipit laboriosam.</p>
          </div>
        </div>
        <div class="back bg-accent">
          <div class="center">
            <h4 class="title">SMART & EFFECTIVE</h4>
            <p class="pb-10">Content Text</p>
            <p><a href="#" title="">Learn More <span class="fa fa-angle-double-right"></span></a></p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="flip-box flip-box04 rotate-3d flip-left">
      <div class="rotate">
        <div class="front">
          <div class="pic"><img src="/Portals/1/pages-images/flipboxes_img06.jpg" /></div>
          <div class="cont">
            <h4 class="title">GREAT DESIGN</h4>
            <p>Ut enim ad minima veniam, quis nostrum exercita tionem ullam corporis suscipit laboriosam.</p>
          </div>
        </div>
        <div class="back bg-accent">
          <div class="center">
            <h4 class="title">GREAT DESIGN</h4>
            <p class="pb-10">Content Text</p>
            <p><a href="#" title="">Learn More <span class="fa fa-angle-double-right"></span></a></p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="row">
  <div class="col-sm-6 col-lg-3">
    <div class="flip-box flip-box05">
      <div class="rotate">
        <div class="front">
          <div class="pic"><img src="/Portals/1/pages-images/flipboxes_img07.jpg" /></div>
          <div class="cont">
            <h4 class="title">Chris Brown<small>Purchase Manager</small></h4>
          </div>
        </div>
        <div class="back">
          <div class="center">
            <div class="social"><a href="#"><em class="fa fa-twitter"></em></a> <a href="#"><em class="fa fa-facebook"></em></a> <a href="#"><em class="fa fa-envelope"></em></a></div>
            <h4 class="title">Chris Brown<small>Purchase Manager</small></h4>
            <p>Content Text</p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="col-sm-6 col-lg-3">
    <div class="flip-box flip-box05">
      <div class="rotate">
        <div class="front">
          <div class="pic"><img src="/Portals/1/pages-images/flipboxes_img08.jpg" /></div>
          <div class="cont">
            <h4 class="title">Ross Williams<small>Programmer</small></h4>
          </div>
        </div>
        <div class="back">
          <div class="center">
            <div class="social"><a href="#"><em class="fa fa-twitter"></em></a> <a href="#"><em class="fa fa-facebook"></em></a> <a href="#"><em class="fa fa-envelope"></em></a></div>
            <h4 class="title">Ross Williams<small>Programmer </small></h4>
            <p>Content Text</p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="clearfix visible-sm"> </div>
  <div class="col-sm-6 col-lg-3">
    <div class="flip-box flip-box05">
      <div class="rotate">
        <div class="front">
          <div class="pic"><img src="/Portals/1/pages-images/flipboxes_img09.jpg" /></div>
          <div class="cont">
            <h4 class="title">Ross Williams<small>Purchase Manager</small></h4>
          </div>
        </div>
        <div class="back">
          <div class="center">
            <div class="social"><a href="#"><em class="fa fa-twitter"></em></a> <a href="#"><em class="fa fa-facebook"></em></a> <a href="#"><em class="fa fa-envelope"></em></a></div>
            <h4 class="title">David Parker<small>Technical Director</small></h4>
            <p>Content Text</p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="col-sm-6 col-lg-3">
    <div class="flip-box flip-box05">
      <div class="rotate">
        <div class="front">
          <div class="pic"><img src="/Portals/1/pages-images/flipboxes_img10.jpg" /></div>
          <div class="cont">
            <h4 class="title">Don Townsend<small>IT Manager</small></h4>
          </div>
        </div>
        <div class="back">
          <div class="center">
            <div class="social"><a href="#"><em class="fa fa-twitter"></em></a> <a href="#"><em class="fa fa-facebook"></em></a> <a href="#"><em class="fa fa-envelope"></em></a></div>
            <h4 class="title">David Parker<small>Technical Director</small></h4>
            <p>Content Text</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="row">
  <div class="col-sm-4">
    <div class="flip-box flip-box06">
      <div class="rotate">
        <div class="front bg-accent">
          <div class="dg-iconbox"><span class="dg-ico-max size-sm color-white"><i class="fa fa-cog"></i></span>
            <h3 class="title">ADVANCED SETTINGS</h3>
            <p>Content Text</p>
          </div>
        </div>
        <div class="back bg-white">
          <div class="center">
            <h4 class="title">ADVANCED SETTINGS</h4>
            <p>Content Text</p>
            <p class="mt-10"><a class="dg-btn-1 btn-accent" href="#">LEARN MORE</a></p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="col-sm-4">
    <div class="flip-box flip-box06">
      <div class="rotate">
        <div class="front bg-accent">
          <div class="dg-iconbox"><span class="dg-ico-max size-sm color-white"><i class="fa fa-pencil-ruler"></i></span>
            <h3 class="title">SMART & EFFECTIVE</h3>
            <p>Content Text</p>
          </div>
        </div>
        <div class="back bg-white">
          <div class="center">
            <h4 class="title">SMART & EFFECTIVE</h4>
            <p>Content Text</p>
            <p class="mt-10"><a class="dg-btn-1 btn-accent" href="#">LEARN MORE</a></p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="col-sm-4">
    <div class="flip-box flip-box06">
      <div class="rotate">
        <div class="front bg-accent">
          <div class="dg-iconbox"><span class="dg-ico-max size-sm color-white"><i class="fa fa-lamp"></i></span>
            <h3 class="title">IMAGINE AND CREATE</h3>
            <p>Content Text</p>
          </div>
        </div>
        <div class="back bg-white">
          <div class="center">
            <h4 class="title">IMAGINE AND CREATE</h4>
            <p>Content Text</p>
            <p class="mt-10"><a class="dg-btn-1 btn-accent" href="#">LEARN MORE</a></p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>