Flip Box

  1. Home
  2. Pages
  3. Page Title

Hover Effect

Project Title

Project Title

An intermittent fault is easier to assess with a clear description. Note the steps that trigger it and any warning shown on the screen.

Read More

Project Title

Project Title

Ask what the repair includes, which parts are being replaced and what after-service cover applies. The team will explain the agreed work when your item is ready.

Read More

Project Title

Project Title

Describe the fault, the device model and when the problem started. This helps the repair team plan an assessment and explain what to bring.

Read More 

<div class="card effect__hover">
  <div class="card__front bg-theme-colored">
    <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">Perfect Wedding</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">Perfect Wedding</h4>
            <p>.........</p>
            <a href="#" class="btn btn-default mt-10"> Read More </a>
           </div>
        </div>
      </div>
    </div>
  </div>
</div>


<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">Perfect Wedding</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">Perfect Wedding</h4>
            <p>......</p>
            <a href="#" class="btn btn-default mt-10"> Read More </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">Perfect Wedding</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">Perfect Wedding</h4>
            <p>..........</p>
            <a href="#" class="btn btn-default mt-10"> Read More </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Click Effect

Project Title

Project Title

A repair quotation follows diagnosis. Parts, labour and any collection arrangements are confirmed with you before paid work proceeds.

Read More

Project Title

Project Title

Share your location and a working contact number when requesting collection. Availability and transport charges depend on the route and the equipment involved.

Read More

Project Title

Project Title

An intermittent fault is easier to assess with a clear description. Note the steps that trigger it and any warning shown on the screen.

Read More 

<div class="card effect__click">
  <div class="card__front bg-theme-colored">
    <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">Perfect Wedding</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">Perfect Wedding</h4>
            <p>..........</p>
            <a href="#" class="btn btn-default mt-10"> Read More </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">Perfect Wedding</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">Perfect Wedding</h4>
            <p>..........</p>
            <a href="#" class="btn btn-default mt-10"> Read More </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">Perfect Wedding</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">Perfect Wedding</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"> Read More </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Random Effect

Project Title

Project Title

An intermittent fault is easier to assess with a clear description. Note the steps that trigger it and any warning shown on the screen.

Read More

Project Title

Project Title

An intermittent fault is easier to assess with a clear description. Note the steps that trigger it and any warning shown on the screen.

Read More

Project Title

Project Title

An intermittent fault is easier to assess with a clear description. Note the steps that trigger it and any warning shown on the screen.

Read More 

<div class="card effect__random" data-id="1">
  <div class="card__front bg-theme-colored">
    <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">Perfect Wedding</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">Perfect Wedding</h4>
            <p>..........</p>
            <a href="#" class="btn btn-default mt-10"> Read More </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">Perfect Wedding</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">Perfect Wedding</h4>
            <p>...........</p>
            <a href="#" class="btn btn-default mt-10"> Read More </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">Perfect Wedding</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">Perfect Wedding</h4>
            <p>............</p>
            <a href="#" class="btn btn-default mt-10"> Read More </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>