X
en-UScy-GBbr-FR

Flip Box

  Features / Short Codes / Flip Box



PHOTOSHOP

PHOTOSHOP

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, eius perferendis temporibus sequi magni odit repellat iure accusamus minima fugiat.

HTML + CSS

HTML + CSS

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, eius perferendis temporibus sequi magni odit repellat iure accusamus minima fugiat.

ILLUSTRATOR

ILLUSTRATOR

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, eius perferendis temporibus sequi magni odit repellat iure accusamus minima fugiat.

CREATIVE

CREATIVE

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, eius perferendis temporibus sequi magni odit repellat iure accusamus minima fugiat.

SOURCE CODE 
<div class="row">
  <div class="col-sm-3">
    <div class="flip_box flip_box_1">
      <div class="rotate">
        <div class="front"> <span class="glyphicons glyph-edit"></span>
          <h3>PHOTOSHOP</h3>
        </div>
        <div class="back">
          <h3>PHOTOSHOP</h3>
          <p>Content Text 1 ...</p>
        </div>
      </div>
    </div>
  </div>
  <div class="col-sm-3">
    <div class="flip_box flip_right flip_box_1">
      <div class="rotate">
        <div class="front"> <span class="glyphicons glyph-cogwheels"></span>
          <h3>HTML + CSS</h3>
        </div>
        <div class="back">
          <h3>HTML + CSS</h3>
          <p>Content Text 2 ...</p>
        </div>
      </div>
    </div>
  </div>
  <div class="col-sm-3">
    <div class="flip_box flip_top flip_box_1">
      <div class="rotate">
        <div class="front"> <span class="glyphicons glyph-camera"></span>
          <h3>ILLUSTRATOR</h3>
        </div>
        <div class="back">
          <h3>ILLUSTRATOR</h3>
          <p>Content Text 3 ...</p>
        </div>
      </div>
    </div>
  </div>
  <div class="col-sm-3">
    <div class="flip_box flip_bottom flip_box_1">
      <div class="rotate">
        <div class="front"> <span class="glyphicons glyph-lightbulb"></span>
          <h3>CREATIVE</h3>
        </div>
        <div class="back">
          <h3>CREATIVE</h3>
          <p>Content Text 4 ...</p>
        </div>
      </div>
    </div>
  </div>
</div>



PHOTOSHOP

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, eius perferendis temporibus sequi magni odit repellat iure accusamus minima fugiat.

PHOTOSHOP

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, eius perferendis temporibus sequi magni odit repellat iure accusamus minima fugiat.

READ MORE

HTML + CSS

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, eius perferendis temporibus sequi magni odit repellat iure accusamus minima fugiat.

HTML + CSS

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, eius perferendis temporibus sequi magni odit repellat iure accusamus minima fugiat.

READ MORE

ILLUSTRATOR

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, eius perferendis temporibus sequi magni odit repellat iure accusamus minima fugiat.

ILLUSTRATOR

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, eius perferendis temporibus sequi magni odit repellat iure accusamus minima fugiat.

READ MORE

CREATIVE

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, eius perferendis temporibus sequi magni odit repellat iure accusamus minima fugiat.

CREATIVE

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, eius perferendis temporibus sequi magni odit repellat iure accusamus minima fugiat.

READ MORE
SOURCE CODE 
<div class="row">
  <div class="col-sm-3">
    <div class="flip_box flip_box_2">
      <div class="rotate">
        <div class="front"> <span class="glyphicons glyph-edit"></span>
          <h3>PHOTOSHOP</h3>
          <p>Content Text 1 ...</p>
        </div>
        <div class="back">
          <h3>PHOTOSHOP</h3>
          <p>Content Text 1 ...</p>
          <a href="#" class="but">READ MORE</a> </div>
      </div>
    </div>
  </div>
  <div class="col-sm-3">
    <div class="flip_box flip_right flip_box_2">
      <div class="rotate">
        <div class="front"> <span class="glyphicons glyph-cogwheels"></span>
          <h3>HTML + CSS</h3>
          <p>Content Text 2 ...</p>
        </div>
        <div class="back">
          <h3>HTML + CSS</h3>
          <p>Content Text 2 ...</p>
          <a href="#" class="but">READ MORE</a> </div>
      </div>
    </div>
  </div>
  <div class="col-sm-3">
    <div class="flip_box flip_top flip_box_2">
      <div class="rotate">
        <div class="front"> <span class="glyphicons glyph-camera"></span>
          <h3>ILLUSTRATOR</h3>
          <p>Content Text 3 ...</p>
        </div>
        <div class="back">
          <h3>ILLUSTRATOR</h3>
          <p>Content Text 3 ...</p>
          <a href="#" class="but">READ MORE</a> </div>
      </div>
    </div>
  </div>
  <div class="col-sm-3">
    <div class="flip_box flip_bottom flip_box_2">
      <div class="rotate">
        <div class="front"> <span class="glyphicons glyph-lightbulb"></span>
          <h3>CREATIVE</h3>
          <p>Content Text 4 ...</p>
        </div>
        <div class="back">
          <h3>CREATIVE</h3>
          <p>Content Text 4 ...</p>
          <a href="#" class="but">READ MORE</a> </div>
      </div>
    </div>
  </div>
</div>



PHOTOSHOP

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, eius perferendis temporibus sequi magni odit repellat iure accusamus minima fugiat.

PHOTOSHOP

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, eius perferendis temporibus sequi magni odit repellat iure accusamus minima fugiat.

READ MORE

HTML + CSS

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, eius perferendis temporibus sequi magni odit repellat iure accusamus minima fugiat.

HTML + CSS

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, eius perferendis temporibus sequi magni odit repellat iure accusamus minima fugiat.

READ MORE

ILLUSTRATOR

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, eius perferendis temporibus sequi magni odit repellat iure accusamus minima fugiat.

ILLUSTRATOR

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, eius perferendis temporibus sequi magni odit repellat iure accusamus minima fugiat.

READ MORE
SOURCE CODE 
<div class="row">
  <div class="col-sm-4">
    <div class="flip_box flip_box_3">
      <div class="rotate">
        <div class="front"> <span class="glyphicons glyph-edit"></span>
          <h3>PHOTOSHOP</h3>
          <p>Content Text 1 ...</p>
        </div>
        <div class="back">
          <h3>PHOTOSHOP</h3>
          <p>Content Text 1 ...</p>
          <a href="#" class="but">READ MORE</a> </div>
      </div>
    </div>
  </div>
  <div class="col-sm-4">
    <div class="flip_box flip_right flip_box_3">
      <div class="rotate">
        <div class="front"> <span class="glyphicons glyph-cogwheels"></span>
          <h3>HTML + CSS</h3>
          <p>Content Text 2 ...</p>
        </div>
        <div class="back">
          <h3>HTML + CSS</h3>
          <p>Content Text 2 ...</p>
          <a href="#" class="but">READ MORE</a> </div>
      </div>
    </div>
  </div>
  <div class="col-sm-4">
    <div class="flip_box flip_top flip_box_3">
      <div class="rotate">
        <div class="front"> <span class="glyphicons glyph-camera"></span>
          <h3>ILLUSTRATOR</h3>
          <p>Content Text 3 ...</p>
        </div>
        <div class="back">
          <h3>ILLUSTRATOR</h3>
          <p>Content Text 3 ...</p>
          <a href="#" class="but">READ MORE</a> </div>
      </div>
    </div>
  </div>
</div>