<div class="card effect__hover">
  <div class="card__front bg-black" >
    <div class="card__text">
      <div class="display-table-parent">
        <div class="display-table">
          <div class="display-table-cell">
            <div class="icon-box mb-0"> <a href="#" class="icon mb-0"> <i class="text-white pe-7s-users font-72"></i> </a>
              <h3 class="icon-box-title text-uppercase text-white">Title Here</h3>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="card__back" data-bg-color="#e0e0e0">
    <div class="card__text">
      <div class="display-table-parent p-30">
        <div class="display-table">
          <div class="display-table-cell">
            <h4 class="text-uppercase">Title Here</h4>
            <p>......</p>
            <a href="#" class="btn btn-default mt-10"> اطلاعات بیشتر </a> 
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="card effect__hover">
  <div class="card__front" data-bg-color="#dedede">
    <div class="card__text">
      <div class="display-table-parent">
        <div class="display-table">
          <div class="display-table-cell">
            <div class="icon-box mb-0"> <a href="#" class="icon mb-0"> <i class="pe-7s-users font-72"></i> </a>
              <h3 class="icon-box-title text-uppercase">Title Here</h3>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="card__back" data-bg-color="#e0e0e0">
    <div class="card__text">
      <div class="display-table-parent p-30">
        <div class="display-table">
          <div class="display-table-cell">
            <h4 class="text-uppercase">Title Here</h4>
            <p>..........</p>
            <a href="#" class="btn btn-default mt-10"> اطلاعات بیشتر </a> 
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="card effect__click">
  <div class="card__front bg-black">
    <div class="card__text">
      <div class="display-table-parent">
        <div class="display-table">
          <div class="display-table-cell">
            <div class="icon-box mb-0"> <a href="#" class="icon mb-0"> <i class="text-white pe-7s-users font-72"></i> </a>
              <h3 class="icon-box-title text-uppercase text-white">Title Here</h3>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="card__back" data-bg-color="#e0e0e0">
    <div class="card__text">
      <div class="display-table-parent p-30">
        <div class="display-table">
          <div class="display-table-cell">
            <h4 class="text-uppercase">Title Here</h4>
            <p>..........</p>
            <a href="#" class="btn btn-default mt-10"> اطلاعات بیشتر </a> 
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="card effect__click">
  <div class="card__front" data-bg-color="#dedede">
    <div class="card__text">
      <div class="display-table-parent">
        <div class="display-table">
          <div class="display-table-cell">
            <div class="icon-box mb-0"> <a href="#" class="icon mb-0"> <i class="pe-7s-users font-72"></i> </a>
              <h3 class="icon-box-title text-uppercase">Title Here</h3>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="card__back" data-bg-color="#e0e0e0">
    <div class="card__text">
      <div class="display-table-parent p-30">
        <div class="display-table">
          <div class="display-table-cell">
            <h4 class="text-uppercase">Title Here</h4>
            <p>Sed gravida, ligula eget aliquam elementum, justo nisl mattis neque, in molestie ipsum dolor eu justo. Duis nec aliquam nulla. Sed interdum orci non mi porttitor, a dapibus ante varius.</p>
            <a href="#" class="btn btn-default mt-10"> اطلاعات بیشتر </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="card effect__random" data-id="2">
  <div class="card__front bg-black">
    <div class="card__text">
      <div class="display-table-parent">
        <div class="display-table">
          <div class="display-table-cell">
            <div class="icon-box mb-0"> <a href="#" class="icon mb-0"> <i class="text-white pe-7s-users font-72"></i> </a>
              <h3 class="icon-box-title text-uppercase text-white">Title Here</h3>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="card__back" data-bg-color="#e0e0e0">
    <div class="card__text">
      <div class="display-table-parent p-30">
        <div class="display-table">
          <div class="display-table-cell">
            <h4 class="text-uppercase">Title Here</h4>
            <p>...........</p>
            <a href="#" class="btn btn-default mt-10"> اطلاعات بیشتر </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="card effect__random" data-id="3">
  <div class="card__front" data-bg-color="#dedede">
    <div class="card__text">
      <div class="display-table-parent">
        <div class="display-table">
          <div class="display-table-cell">
            <div class="icon-box mb-0"> <a href="#" class="icon mb-0"> <i class="pe-7s-users font-72"></i> </a>
              <h3 class="icon-box-title text-uppercase">Title Here</h3>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="card__back" data-bg-color="#e0e0e0">
    <div class="card__text">
      <div class="display-table-parent p-30">
        <div class="display-table">
          <div class="display-table-cell">
            <h4 class="text-uppercase">Title Here</h4>
            <p>............</p>
            <a href="#" class="btn btn-default mt-10"> اطلاعات بیشتر </a> 
          </div>
        </div>
      </div>
    </div>
  </div>
</div>