All Icon Animations

Wide range of icon box animations.

Outline

Outline A

<div class="icon-box icon-box-filled text-center">
  <div class="row">
    <div class="col-xs-12 col-sm-6 col-md-3 p-a-0">
      <div class="icon-box-single icon-anim-1a">
        <p class="text-uppercase h4 m-b-md p-t-md">Responsive</p>
        <div class="icon-wrapper">
          <i class="fa fa-tablet icon"></i>
        </div>
        <p class="h5 m-t-md m-b-0 p-b-md">Works on any device!</p>
      </div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3 p-a-0">
      <div class="icon-box-single icon-anim-1a">
        <p class="text-uppercase h4 m-b-md p-t-md">Smart mode</p>
        <div class="icon-wrapper">
          <i class="fa fa-bolt icon"></i>
        </div>
        <p class="h5 m-t-md m-b-0 p-b-md">Loads resources only when used.</p>
      </div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3 p-a-0">
      <div class="icon-box-single icon-anim-1a">
        <p class="text-uppercase h4 m-b-md p-t-md">Clean code</p>
        <div class="icon-wrapper">
          <i class="fa fa-code icon"></i>
        </div>
        <p class="h5 m-t-md m-b-0 p-b-md">No jokes.</p>
      </div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3 p-a-0">
      <div class="icon-box-single icon-anim-1a">
        <p class="text-uppercase h4 m-b-md p-t-md">Customizable</p>
        <div class="icon-wrapper">
          <i class="fa fa-wrench icon"></i>
        </div>
        <p class="h5 m-t-md m-b-0 p-b-md">Never was easier.</p>
      </div>
    </div>
  </div>
</div>

Responsive

Works on any device!

Smart mode

Loads resources only when used.

Clean code

No jokes.

Customizable

Never was easier.

Outline B

<div class="icon-box icon-box-filled text-center">
  <div class="row">
    <div class="col-xs-12 col-sm-6 col-md-3 p-a-0">
      <div class="icon-box-single icon-anim-1b">
        <p class="text-uppercase h4 m-b-md p-t-md">Responsive</p>
        <div class="icon-wrapper">
          <i class="fa fa-tablet icon"></i>
        </div>
        <p class="h5 m-t-md m-b-0 p-b-md">Works on any device!</p>
      </div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3 p-a-0">
      <div class="icon-box-single icon-anim-1b">
        <p class="text-uppercase h4 m-b-md p-t-md">Smart mode</p>
        <div class="icon-wrapper">
          <i class="fa fa-bolt icon"></i>
        </div>
        <p class="h5 m-t-md m-b-0 p-b-md">Loads resources only when used.</p>
      </div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3 p-a-0">
      <div class="icon-box-single icon-anim-1b">
        <p class="text-uppercase h4 m-b-md p-t-md">Clean code</p>
        <div class="icon-wrapper">
          <i class="fa fa-code icon"></i>
        </div>
        <p class="h5 m-t-md m-b-0 p-b-md">No jokes.</p>
      </div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3 p-a-0">
      <div class="icon-box-single icon-anim-1b">
        <p class="text-uppercase h4 m-b-md p-t-md">Customizable</p>
        <div class="icon-wrapper">
          <i class="fa fa-wrench icon"></i>
        </div>
        <p class="h5 m-t-md m-b-0 p-b-md">Never was easier.</p>
      </div>
    </div>
  </div>
</div>

Responsive

Works on any device!

Smart mode

Loads resources only when used.

Clean code

No jokes.

Customizable

Never was easier.

Shrink

Shrink A

<div class="icon-box icon-box-filled text-center">
  <div class="row">
    <div class="col-xs-12 col-sm-6 col-md-3 p-a-0">
      <div class="icon-box-single icon-anim-2a">
        <p class="text-uppercase h4 m-b-md p-t-md">Responsive</p>
        <div class="icon-wrapper">
          <i class="fa fa-tablet icon"></i>
        </div>
        <p class="h5 m-t-md m-b-0 p-b-md">Works on any device!</p>
      </div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3 p-a-0">
      <div class="icon-box-single icon-anim-2a">
        <p class="text-uppercase h4 m-b-md p-t-md">Smart mode</p>
        <div class="icon-wrapper">
          <i class="fa fa-bolt icon"></i>
        </div>
        <p class="h5 m-t-md m-b-0 p-b-md">Loads resources only when used.</p>
      </div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3 p-a-0">
      <div class="icon-box-single icon-anim-2a">
        <p class="text-uppercase h4 m-b-md p-t-md">Clean code</p>
        <div class="icon-wrapper">
          <i class="fa fa-code icon"></i>
        </div>
        <p class="h5 m-t-md m-b-0 p-b-md">No jokes.</p>
      </div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3 p-a-0">
      <div class="icon-box-single icon-anim-2a">
        <p class="text-uppercase h4 m-b-md p-t-md">Customizable</p>
        <div class="icon-wrapper">
          <i class="fa fa-wrench icon"></i>
        </div>
        <p class="h5 m-t-md m-b-0 p-b-md">Never was easier.</p>
      </div>
    </div>
  </div>
</div>

Responsive

Works on any device!

Smart mode

Loads resources only when used.

Clean code

No jokes.

Customizable

Never was easier.

Shrink B

<div class="icon-box icon-box-filled text-center">
  <div class="row">
    <div class="col-xs-12 col-sm-6 col-md-3 p-a-0">
      <div class="icon-box-single icon-anim-2b">
        <p class="text-uppercase h4 m-b-md p-t-md">Responsive</p>
        <div class="icon-wrapper">
          <i class="fa fa-tablet icon"></i>
        </div>
        <p class="h5 m-t-md m-b-0 p-b-md">Works on any device!</p>
      </div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3 p-a-0">
      <div class="icon-box-single icon-anim-2b">
        <p class="text-uppercase h4 m-b-md p-t-md">Smart mode</p>
        <div class="icon-wrapper">
          <i class="fa fa-bolt icon"></i>
        </div>
        <p class="h5 m-t-md m-b-0 p-b-md">Loads resources only when used.</p>
      </div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3 p-a-0">
      <div class="icon-box-single icon-anim-2b">
        <p class="text-uppercase h4 m-b-md p-t-md">Clean code</p>
        <div class="icon-wrapper">
          <i class="fa fa-code icon"></i>
        </div>
        <p class="h5 m-t-md m-b-0 p-b-md">No jokes.</p>
      </div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3 p-a-0">
      <div class="icon-box-single icon-anim-2b">
        <p class="text-uppercase h4 m-b-md p-t-md">Customizable</p>
        <div class="icon-wrapper">
          <i class="fa fa-wrench icon"></i>
        </div>
        <p class="h5 m-t-md m-b-0 p-b-md">Never was easier.</p>
      </div>
    </div>
  </div>
</div>

Responsive

Works on any device!

Smart mode

Loads resources only when used.

Clean code

No jokes.

Customizable

Never was easier.

Particles

Particles A

<div class="icon-box icon-box-filled text-center">
  <div class="row">
    <div class="col-xs-12 col-sm-6 col-md-3 p-a-0">
      <div class="icon-box-single icon-anim-3a">
        <p class="text-uppercase h4 m-b-md p-t-md">Responsive</p>
        <div class="icon-wrapper">
          <i class="fa fa-tablet icon"></i>
        </div>
        <p class="h5 m-t-md m-b-0 p-b-md">Works on any device!</p>
      </div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3 p-a-0">
      <div class="icon-box-single icon-anim-3a">
        <p class="text-uppercase h4 m-b-md p-t-md">Smart mode</p>
        <div class="icon-wrapper">
          <i class="fa fa-bolt icon"></i>
        </div>
        <p class="h5 m-t-md m-b-0 p-b-md">Loads resources only when used.</p>
      </div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3 p-a-0">
      <div class="icon-box-single icon-anim-3a">
        <p class="text-uppercase h4 m-b-md p-t-md">Clean code</p>
        <div class="icon-wrapper">
          <i class="fa fa-code icon"></i>
        </div>
        <p class="h5 m-t-md m-b-0 p-b-md">No jokes.</p>
      </div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3 p-a-0">
      <div class="icon-box-single icon-anim-3a">
        <p class="text-uppercase h4 m-b-md p-t-md">Customizable</p>
        <div class="icon-wrapper">
          <i class="fa fa-wrench icon"></i>
        </div>
        <p class="h5 m-t-md m-b-0 p-b-md">Never was easier.</p>
      </div>
    </div>
  </div>
</div>

Responsive

Works on any device!

Smart mode

Loads resources only when used.

Clean code

No jokes.

Customizable

Never was easier.

Particles B

<div class="icon-box icon-box-filled text-center">
  <div class="row">
    <div class="col-xs-12 col-sm-6 col-md-3 p-a-0">
      <div class="icon-box-single icon-anim-3b">
        <p class="text-uppercase h4 m-b-md p-t-md">Responsive</p>
        <div class="icon-wrapper">
          <i class="fa fa-tablet icon"></i>
        </div>
        <p class="h5 m-t-md m-b-0 p-b-md">Works on any device!</p>
      </div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3 p-a-0">
      <div class="icon-box-single icon-anim-3b">
        <p class="text-uppercase h4 m-b-md p-t-md">Smart mode</p>
        <div class="icon-wrapper">
          <i class="fa fa-bolt icon"></i>
        </div>
        <p class="h5 m-t-md m-b-0 p-b-md">Loads resources only when used.</p>
      </div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3 p-a-0">
      <div class="icon-box-single icon-anim-3b">
        <p class="text-uppercase h4 m-b-md p-t-md">Clean code</p>
        <div class="icon-wrapper">
          <i class="fa fa-code icon"></i>
        </div>
        <p class="h5 m-t-md m-b-0 p-b-md">No jokes.</p>
      </div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3 p-a-0">
      <div class="icon-box-single icon-anim-3b">
        <p class="text-uppercase h4 m-b-md p-t-md">Customizable</p>
        <div class="icon-wrapper">
          <i class="fa fa-wrench icon"></i>
        </div>
        <p class="h5 m-t-md m-b-0 p-b-md">Never was easier.</p>
      </div>
    </div>
  </div>
</div>

Responsive

Works on any device!

Smart mode

Loads resources only when used.

Clean code

No jokes.

Customizable

Never was easier.

Border

Border A

<div class="icon-box icon-box-filled text-center">
  <div class="row">
    <div class="col-xs-12 col-sm-6 col-md-3 p-a-0">
      <div class="icon-box-single icon-anim-4a">
        <p class="text-uppercase h4 m-b-md p-t-md">Responsive</p>
        <div class="icon-wrapper">
          <i class="fa fa-tablet icon"></i>
        </div>
        <p class="h5 m-t-md m-b-0 p-b-md">Works on any device!</p>
      </div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3 p-a-0">
      <div class="icon-box-single icon-anim-4a">
        <p class="text-uppercase h4 m-b-md p-t-md">Smart mode</p>
        <div class="icon-wrapper">
          <i class="fa fa-bolt icon"></i>
        </div>
        <p class="h5 m-t-md m-b-0 p-b-md">Loads resources only when used.</p>
      </div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3 p-a-0">
      <div class="icon-box-single icon-anim-4a">
        <p class="text-uppercase h4 m-b-md p-t-md">Clean code</p>
        <div class="icon-wrapper">
          <i class="fa fa-code icon"></i>
        </div>
        <p class="h5 m-t-md m-b-0 p-b-md">No jokes.</p>
      </div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3 p-a-0">
      <div class="icon-box-single icon-anim-4a">
        <p class="text-uppercase h4 m-b-md p-t-md">Customizable</p>
        <div class="icon-wrapper">
          <i class="fa fa-wrench icon"></i>
        </div>
        <p class="h5 m-t-md m-b-0 p-b-md">Never was easier.</p>
      </div>
    </div>
  </div>
</div>

Responsive

Works on any device!

Smart mode

Loads resources only when used.

Clean code

No jokes.

Customizable

Never was easier.

Border B

<div class="icon-box icon-box-filled text-center">
  <div class="row">
    <div class="col-xs-12 col-sm-6 col-md-3 p-a-0">
      <div class="icon-box-single icon-anim-4b">
        <p class="text-uppercase h4 m-b-md p-t-md">Responsive</p>
        <div class="icon-wrapper">
          <i class="fa fa-tablet icon"></i>
        </div>
        <p class="h5 m-t-md m-b-0 p-b-md">Works on any device!</p>
      </div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3 p-a-0">
      <div class="icon-box-single icon-anim-4b">
        <p class="text-uppercase h4 m-b-md p-t-md">Smart mode</p>
        <div class="icon-wrapper">
          <i class="fa fa-bolt icon"></i>
        </div>
        <p class="h5 m-t-md m-b-0 p-b-md">Loads resources only when used.</p>
      </div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3 p-a-0">
      <div class="icon-box-single icon-anim-4b">
        <p class="text-uppercase h4 m-b-md p-t-md">Clean code</p>
        <div class="icon-wrapper">
          <i class="fa fa-code icon"></i>
        </div>
        <p class="h5 m-t-md m-b-0 p-b-md">No jokes.</p>
      </div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3 p-a-0">
      <div class="icon-box-single icon-anim-4b">
        <p class="text-uppercase h4 m-b-md p-t-md">Customizable</p>
        <div class="icon-wrapper">
          <i class="fa fa-wrench icon"></i>
        </div>
        <p class="h5 m-t-md m-b-0 p-b-md">Never was easier.</p>
      </div>
    </div>
  </div>
</div>

Responsive

Works on any device!

Smart mode

Loads resources only when used.

Clean code

No jokes.

Customizable

Never was easier.

Corner

Corner A

<div class="icon-box icon-box-filled text-center">
  <div class="row">
    <div class="col-xs-12 col-sm-6 col-md-3 p-a-0">
      <div class="icon-box-single icon-anim-5a">
        <p class="text-uppercase h4 m-b-md p-t-md">Responsive</p>
        <div class="icon-wrapper">
          <i class="fa fa-tablet icon"></i>
        </div>
        <p class="h5 m-t-md m-b-0 p-b-md">Works on any device!</p>
      </div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3 p-a-0">
      <div class="icon-box-single icon-anim-5a">
        <p class="text-uppercase h4 m-b-md p-t-md">Smart mode</p>
        <div class="icon-wrapper">
          <i class="fa fa-bolt icon"></i>
        </div>
        <p class="h5 m-t-md m-b-0 p-b-md">Loads resources only when used.</p>
      </div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3 p-a-0">
      <div class="icon-box-single icon-anim-5a">
        <p class="text-uppercase h4 m-b-md p-t-md">Clean code</p>
        <div class="icon-wrapper">
          <i class="fa fa-code icon"></i>
        </div>
        <p class="h5 m-t-md m-b-0 p-b-md">No jokes.</p>
      </div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3 p-a-0">
      <div class="icon-box-single icon-anim-5a">
        <p class="text-uppercase h4 m-b-md p-t-md">Customizable</p>
        <div class="icon-wrapper">
          <i class="fa fa-wrench icon"></i>
        </div>
        <p class="h5 m-t-md m-b-0 p-b-md">Never was easier.</p>
      </div>
    </div>
  </div>
</div>

Responsive

Works on any device!

Smart mode

Loads resources only when used.

Clean code

No jokes.

Customizable

Never was easier.

Corner B

<div class="icon-box icon-box-filled text-center">
  <div class="row">
    <div class="col-xs-12 col-sm-6 col-md-3 p-a-0">
      <div class="icon-box-single icon-anim-5b">
        <p class="text-uppercase h4 m-b-md p-t-md">Responsive</p>
        <div class="icon-wrapper">
          <i class="fa fa-tablet icon"></i>
        </div>
        <p class="h5 m-t-md m-b-0 p-b-md">Works on any device!</p>
      </div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3 p-a-0">
      <div class="icon-box-single icon-anim-5b">
        <p class="text-uppercase h4 m-b-md p-t-md">Smart mode</p>
        <div class="icon-wrapper">
          <i class="fa fa-bolt icon"></i>
        </div>
        <p class="h5 m-t-md m-b-0 p-b-md">Loads resources only when used.</p>
      </div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3 p-a-0">
      <div class="icon-box-single icon-anim-5b">
        <p class="text-uppercase h4 m-b-md p-t-md">Clean code</p>
        <div class="icon-wrapper">
          <i class="fa fa-code icon"></i>
        </div>
        <p class="h5 m-t-md m-b-0 p-b-md">No jokes.</p>
      </div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3 p-a-0">
      <div class="icon-box-single icon-anim-5b">
        <p class="text-uppercase h4 m-b-md p-t-md">Customizable</p>
        <div class="icon-wrapper">
          <i class="fa fa-wrench icon"></i>
        </div>
        <p class="h5 m-t-md m-b-0 p-b-md">Never was easier.</p>
      </div>
    </div>
  </div>
</div>

Responsive

Works on any device!

Smart mode

Loads resources only when used.

Clean code

No jokes.

Customizable

Never was easier.

Glow

Glow A

<div class="icon-box icon-box-filled text-center">
  <div class="row">
    <div class="col-xs-12 col-sm-6 col-md-3 p-a-0">
      <div class="icon-box-single icon-anim-6a">
        <p class="text-uppercase h4 m-b-md p-t-md">Responsive</p>
        <div class="icon-wrapper">
          <i class="fa fa-tablet icon"></i>
        </div>
        <p class="h5 m-t-md m-b-0 p-b-md">Works on any device!</p>
      </div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3 p-a-0">
      <div class="icon-box-single icon-anim-6a">
        <p class="text-uppercase h4 m-b-md p-t-md">Smart mode</p>
        <div class="icon-wrapper">
          <i class="fa fa-bolt icon"></i>
        </div>
        <p class="h5 m-t-md m-b-0 p-b-md">Loads resources only when used.</p>
      </div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3 p-a-0">
      <div class="icon-box-single icon-anim-6a">
        <p class="text-uppercase h4 m-b-md p-t-md">Clean code</p>
        <div class="icon-wrapper">
          <i class="fa fa-code icon"></i>
        </div>
        <p class="h5 m-t-md m-b-0 p-b-md">No jokes.</p>
      </div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3 p-a-0">
      <div class="icon-box-single icon-anim-6a">
        <p class="text-uppercase h4 m-b-md p-t-md">Customizable</p>
        <div class="icon-wrapper">
          <i class="fa fa-wrench icon"></i>
        </div>
        <p class="h5 m-t-md m-b-0 p-b-md">Never was easier.</p>
      </div>
    </div>
  </div>
</div>

Responsive

Works on any device!

Smart mode

Loads resources only when used.

Clean code

No jokes.

Customizable

Never was easier.

Move

Move A

<div class="icon-box icon-box-filled text-center">
  <div class="row">
    <div class="col-xs-12 col-sm-6 col-md-3 p-a-0">
      <div class="icon-box-single icon-anim-7a">
        <p class="text-uppercase h4 m-b-md p-t-md">Responsive</p>
        <div class="icon-wrapper">
          <i class="fa fa-tablet icon"></i>
        </div>
        <p class="h5 m-t-md m-b-0 p-b-md">Works on any device!</p>
      </div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3 p-a-0">
      <div class="icon-box-single icon-anim-7a">
        <p class="text-uppercase h4 m-b-md p-t-md">Smart mode</p>
        <div class="icon-wrapper">
          <i class="fa fa-bolt icon"></i>
        </div>
        <p class="h5 m-t-md m-b-0 p-b-md">Loads resources only when used.</p>
      </div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3 p-a-0">
      <div class="icon-box-single icon-anim-7a">
        <p class="text-uppercase h4 m-b-md p-t-md">Clean code</p>
        <div class="icon-wrapper">
          <i class="fa fa-code icon"></i>
        </div>
        <p class="h5 m-t-md m-b-0 p-b-md">No jokes.</p>
      </div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3 p-a-0">
      <div class="icon-box-single icon-anim-7a">
        <p class="text-uppercase h4 m-b-md p-t-md">Customizable</p>
        <div class="icon-wrapper">
          <i class="fa fa-wrench icon"></i>
        </div>
        <p class="h5 m-t-md m-b-0 p-b-md">Never was easier.</p>
      </div>
    </div>
  </div>
</div>

Responsive

Works on any device!

Smart mode

Loads resources only when used.

Clean code

No jokes.

Customizable

Never was easier.

Move B

<div class="icon-box icon-box-filled text-center">
  <div class="row">
    <div class="col-xs-12 col-sm-6 col-md-3 p-a-0">
      <div class="icon-box-single icon-anim-7b">
        <p class="text-uppercase h4 m-b-md p-t-md">Responsive</p>
        <div class="icon-wrapper">
          <i class="fa fa-tablet icon"></i>
        </div>
        <p class="h5 m-t-md m-b-0 p-b-md">Works on any device!</p>
      </div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3 p-a-0">
      <div class="icon-box-single icon-anim-7b">
        <p class="text-uppercase h4 m-b-md p-t-md">Smart mode</p>
        <div class="icon-wrapper">
          <i class="fa fa-bolt icon"></i>
        </div>
        <p class="h5 m-t-md m-b-0 p-b-md">Loads resources only when used.</p>
      </div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3 p-a-0">
      <div class="icon-box-single icon-anim-7b">
        <p class="text-uppercase h4 m-b-md p-t-md">Clean code</p>
        <div class="icon-wrapper">
          <i class="fa fa-code icon"></i>
        </div>
        <p class="h5 m-t-md m-b-0 p-b-md">No jokes.</p>
      </div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3 p-a-0">
      <div class="icon-box-single icon-anim-7b">
        <p class="text-uppercase h4 m-b-md p-t-md">Customizable</p>
        <div class="icon-wrapper">
          <i class="fa fa-wrench icon"></i>
        </div>
        <p class="h5 m-t-md m-b-0 p-b-md">Never was easier.</p>
      </div>
    </div>
  </div>
</div>

Responsive

Works on any device!

Smart mode

Loads resources only when used.

Clean code

No jokes.

Customizable

Never was easier.

Move C

<div class="icon-box icon-box-filled text-center">
  <div class="row">
    <div class="col-xs-12 col-sm-6 col-md-3 p-a-0">
      <div class="icon-box-single icon-anim-7c">
        <p class="text-uppercase h4 m-b-md p-t-md">Responsive</p>
        <div class="icon-wrapper">
          <i class="fa fa-tablet icon"></i>
        </div>
        <p class="h5 m-t-md m-b-0 p-b-md">Works on any device!</p>
      </div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3 p-a-0">
      <div class="icon-box-single icon-anim-7c">
        <p class="text-uppercase h4 m-b-md p-t-md">Smart mode</p>
        <div class="icon-wrapper">
          <i class="fa fa-bolt icon"></i>
        </div>
        <p class="h5 m-t-md m-b-0 p-b-md">Loads resources only when used.</p>
      </div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3 p-a-0">
      <div class="icon-box-single icon-anim-7c">
        <p class="text-uppercase h4 m-b-md p-t-md">Clean code</p>
        <div class="icon-wrapper">
          <i class="fa fa-code icon"></i>
        </div>
        <p class="h5 m-t-md m-b-0 p-b-md">No jokes.</p>
      </div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3 p-a-0">
      <div class="icon-box-single icon-anim-7c">
        <p class="text-uppercase h4 m-b-md p-t-md">Customizable</p>
        <div class="icon-wrapper">
          <i class="fa fa-wrench icon"></i>
        </div>
        <p class="h5 m-t-md m-b-0 p-b-md">Never was easier.</p>
      </div>
    </div>
  </div>
</div>

Responsive

Works on any device!

Smart mode

Loads resources only when used.

Clean code

No jokes.

Customizable

Never was easier.

Move D

<div class="icon-box icon-box-filled text-center">
  <div class="row">
    <div class="col-xs-12 col-sm-6 col-md-3 p-a-0">
      <div class="icon-box-single icon-anim-7d">
        <p class="text-uppercase h4 m-b-md p-t-md">Responsive</p>
        <div class="icon-wrapper">
          <i class="fa fa-tablet icon"></i>
        </div>
        <p class="h5 m-t-md m-b-0 p-b-md">Works on any device!</p>
      </div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3 p-a-0">
      <div class="icon-box-single icon-anim-7d">
        <p class="text-uppercase h4 m-b-md p-t-md">Smart mode</p>
        <div class="icon-wrapper">
          <i class="fa fa-bolt icon"></i>
        </div>
        <p class="h5 m-t-md m-b-0 p-b-md">Loads resources only when used.</p>
      </div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3 p-a-0">
      <div class="icon-box-single icon-anim-7d">
        <p class="text-uppercase h4 m-b-md p-t-md">Clean code</p>
        <div class="icon-wrapper">
          <i class="fa fa-code icon"></i>
        </div>
        <p class="h5 m-t-md m-b-0 p-b-md">No jokes.</p>
      </div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3 p-a-0">
      <div class="icon-box-single icon-anim-7d">
        <p class="text-uppercase h4 m-b-md p-t-md">Customizable</p>
        <div class="icon-wrapper">
          <i class="fa fa-wrench icon"></i>
        </div>
        <p class="h5 m-t-md m-b-0 p-b-md">Never was easier.</p>
      </div>
    </div>
  </div>
</div>

Responsive

Works on any device!

Smart mode

Loads resources only when used.

Clean code

No jokes.

Customizable

Never was easier.

Dashes

Dashes A

<div class="icon-box icon-box-filled text-center">
  <div class="row">
    <div class="col-xs-12 col-sm-6 col-md-3 p-a-0">
      <div class="icon-box-single icon-anim-8a">
        <p class="text-uppercase h4 m-b-md p-t-md">Responsive</p>
        <div class="icon-wrapper">
          <i class="fa fa-tablet icon"></i>
        </div>
        <p class="h5 m-t-md m-b-0 p-b-md">Works on any device!</p>
      </div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3 p-a-0">
      <div class="icon-box-single icon-anim-8a">
        <p class="text-uppercase h4 m-b-md p-t-md">Smart mode</p>
        <div class="icon-wrapper">
          <i class="fa fa-bolt icon"></i>
        </div>
        <p class="h5 m-t-md m-b-0 p-b-md">Loads resources only when used.</p>
      </div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3 p-a-0">
      <div class="icon-box-single icon-anim-8a">
        <p class="text-uppercase h4 m-b-md p-t-md">Clean code</p>
        <div class="icon-wrapper">
          <i class="fa fa-code icon"></i>
        </div>
        <p class="h5 m-t-md m-b-0 p-b-md">No jokes.</p>
      </div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3 p-a-0">
      <div class="icon-box-single icon-anim-8a">
        <p class="text-uppercase h4 m-b-md p-t-md">Customizable</p>
        <div class="icon-wrapper">
          <i class="fa fa-wrench icon"></i>
        </div>
        <p class="h5 m-t-md m-b-0 p-b-md">Never was easier.</p>
      </div>
    </div>
  </div>
</div>

Responsive

Works on any device!

Smart mode

Loads resources only when used.

Clean code

No jokes.

Customizable

Never was easier.

Dashes B

<div class="icon-box icon-box-filled text-center">
  <div class="row">
    <div class="col-xs-12 col-sm-6 col-md-3 p-a-0">
      <div class="icon-box-single icon-anim-8b">
        <p class="text-uppercase h4 m-b-md p-t-md">Responsive</p>
        <div class="icon-wrapper">
          <i class="fa fa-tablet icon circle-block"></i>
        </div>
        <p class="h5 m-t-md m-b-0 p-b-md">Works on any device!</p>
      </div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3 p-a-0">
      <div class="icon-box-single icon-anim-8b">
        <p class="text-uppercase h4 m-b-md p-t-md">Smart mode</p>
        <div class="icon-wrapper">
          <i class="fa fa-bolt icon circle-block"></i>
        </div>
        <p class="h5 m-t-md m-b-0 p-b-md">Loads resources only when used.</p>
      </div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3 p-a-0">
      <div class="icon-box-single icon-anim-8b">
        <p class="text-uppercase h4 m-b-md p-t-md">Clean code</p>
        <div class="icon-wrapper">
          <i class="fa fa-code icon circle-block"></i>
        </div>
        <p class="h5 m-t-md m-b-0 p-b-md">No jokes.</p>
      </div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3 p-a-0">
      <div class="icon-box-single icon-anim-8b">
        <p class="text-uppercase h4 m-b-md p-t-md">Customizable</p>
        <div class="icon-wrapper">
          <i class="fa fa-wrench icon circle-block"></i>
        </div>
        <p class="h5 m-t-md m-b-0 p-b-md">Never was easier.</p>
      </div>
    </div>
  </div>
</div>

Responsive

Works on any device!

Smart mode

Loads resources only when used.

Clean code

No jokes.

Customizable

Never was easier.

Image

Image Outside

<div class="feedback text-center">
  <div class="circle-img">
    <img class="circle-block" src="/img/feedback/48.jpg" alt="Anna Hopkins">
    <div class="img-icon img-icon-anim-1 circle-block">
      <div class="image-overlay circle-block">
        <h3 class="img-hover-title">Anna Hopkins</h3>
        <p>Reviewer <a href="#">hopkins.com</a></p>
      </div>
    </div>
  </div>
  <div class="feedback-text text-center">
    <blockquote>Life is a series of experiences, each of which makes us bigger, even though it is hard to realize this. For the world was built to develop character, and we must learn that the setbacks and griefs which we endure help us in our marching onward</blockquote>
    <div class="author">
      <span class="author-name">Anna Hopkins</span>
      <span class="author-info">Microsoft</span>
    </div>
  </div>
</div>

Image Inside

<div class="feedback text-center">
  <div class="circle-img">
    <img class="circle-block" src="/img/feedback/88.jpg" alt="Felix Romero">
    <div class="img-icon img-icon-anim-2 circle-block">
      <div class="image-overlay circle-block">
        <h3 class="img-hover-title">Felix Romero</h3>
        <p>Blogger, Journalist <a href="#">romero.com</a></p>
      </div>
    </div>
  </div>
  <div class="feedback-text text-center">
    <blockquote>Is it so bad, then, to be misunderstood? Pythagoras was misunderstood, and Socrates, and Jesus, and Luther, and Copernicus, and Galileo, and Newton, and every pure and wise spirit that ever took flesh. To be great is to be misunderstood</blockquote>
    <div class="author">
      <span class="author-name">Felix Romero</span>
      <span class="author-info">IBM</span>
    </div>
  </div>
</div>