<div class="container">
  <h2>Basic Infographic</h2>
</div>

<div class="container">
  <div class="row">
    <div class="col-md-8 col-md-offset-2 step1">
      <div class="row box shape-1 animated bounceInLeft">
        <div class="col-xs-7 col-sm-4 col-md-4 shape">
          <div class="number">
            <h1>01</h1>
          </div>
        </div>
        <div class="col-xs-5 col-xs-offset-1 col-sm-4 col-sm-offset-1 col-md-4 col-md-offset-1">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in rhoncus arcu, et volutpat mauris.</p>
        </div>
        <div class="hidden-xs col-sm-4 col-md-4 text-center">
          <i class="material-icons md-56">&#xE873;</i>
        </div>
      </div>
    </div>
    <div class="col-md-8 col-md-offset-2 step2">
      <div class="row box shape-2 animated bounceInRight">
        <div class="col-xs-7 col-sm-4 col-md-4 shape">
          <div class="number">
            <h1>02</h1>
          </div>
        </div>
        <div class="col-xs-5 col-xs-offset-1 col-sm-4 col-sm-offset-1 col-md-4 col-md-offset-1">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in rhoncus arcu, et volutpat mauris.</p>
        </div>
        <div class="hidden-xs col-sm-4 col-md-4 text-center">
          <i class="material-icons md-56">&#xE6DF;</i>
        </div>
      </div>
    </div>
    <div class="col-md-8 col-md-offset-2 step3">
      <div class="row box shape-3 animated bounceInLeft">
        <div class="col-xs-7 col-sm-4 col-md-4 shape">
          <div class="number">
            <h1>03</h1>
          </div>
        </div>
        <div class="col-xs-5 col-xs-offset-1 col-sm-4 col-sm-offset-1 col-md-4 col-md-offset-1">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in rhoncus arcu, et volutpat mauris.</p>
        </div>
        <div class="hidden-xs col-sm-4 col-md-4 text-center">
          <i class="material-icons md-56">&#xE6C5;</i>
        </div>
      </div>
    </div>
    <div class="col-md-8 col-md-offset-2 step4">
      <div class="row box shape-4 animated bounceInRight">
        <div class="col-xs-7 col-sm-4 col-md-4 shape">
          <div class="number">
            <h1>04</h1>
          </div>
        </div>
        <div class="col-xs-5 col-xs-offset-1 col-sm-4 col-sm-offset-1 col-md-4 col-md-offset-1">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in rhoncus arcu, et volutpat mauris.</p>
        </div>
        <div class="hidden-xs col-sm-4 col-md-4 text-center">
          <i class="material-icons md-56">&#xE6E1;</i>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="container continue">
  <div class="row">
    <div class="col-md-8 col-md-offset-2">
      <a href="#" class="btn btn-primary btn-block btn-lg animated fadeIn">Continue</a>
    </div>
  </div>
</div>
.box {
  -webkit-box-shadow: 0px 12px 6px -6px rgba(41,41,41,0.25);
  -moz-box-shadow: 0px 12px 6px -6px rgba(41,41,41,0.25);
  box-shadow: 0px 12px 6px -6px rgba(41,41,41,0.25);  padding: 0;
}

.step1 {
  z-index: 999;
}

.step2 .animated {
  -webkit-animation-delay: 1s; 
  animation-delay: 1s;
  position: relative;
  top: -6px;
}

.step3 .animated {
  -webkit-animation-delay: 2s; 
  animation-delay: 2s;
  z-index: -3;
  position:relative;
  top: -12px;
}

.step4 .animated {
  -webkit-animation-delay: 3s; 
  animation-delay: 3s;
  z-index: -5;
  position: relative;
  top: -18px;
}

.shape {
	width: 150px;
	height: 120px;
	-webkit-transform: skew(20deg);
  -moz-transform: skew(20deg);
  -o-transform: skew(20deg);
  -webkit-box-shadow: 0px 12px 30px -6px rgba(41,41,41,0.25);
  -moz-box-shadow: 0px 12px 30px -6px rgba(41,41,41,0.25);
  box-shadow: 0px 12px 30px -6px rgba(41,41,41,0.25);
  top: 10px;
  left: 8px;
  text-align: center;
}

.shape-1 .shape{
  background: #e74c3c;
}

.shape-1 .material-icons {
  color: #e74c3c;
}

.shape-2 .shape{
  background: #34495e;
}

.shape-2 .material-icons { 
  color: #34495e;
}

.shape-3 .shape {
  background: #f39c12;
}

.shape-3 .material-icons { 
  color: #f39c12;
}

.shape-4 .shape {
  background: #3498db;
}

.shape-4 .material-icons { 
  color: #3498db;
}

.number {
  -webkit-transform: skew(-20deg);
	-moz-transform: skew(-20deg);
  -o-transform: skew(-20deg);
}

h1 {
  color: #fff;
  font-weight: 700;
  letter-spacing: 2px;
  padding-top: 8px;
  transform:scale(2,3); 
  -webkit-transform:scale(2,3); 
  -moz-transform:scale(2,3); 
  -ms-transform:scale(2,3); 
  -o-transform:scale(2,3); 
}

.box p {
  font-weight: 300;
  padding-top: 25px;
}

/* Not required */

html {
  font-family: 'Roboto', sans-serif;
}

h2 {
  margin: 40px 0;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 3px;
}

.md-56 {
  font-size: 56px;
  padding-top: 30px;
}
.continue .btn {
  margin-top: 40px;
  -webkit-animation-delay: 4s; 
  animation-delay: 4s;
}

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css
  2. https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css
  3. https://fonts.googleapis.com/icon?family=Material+Icons
  4. https://fonts.googleapis.com/css?family=Roboto

External JavaScript

This Pen doesn't use any external JavaScript resources.