Soma Academy | Shortcode Flipbox

Disable Preloader

Flip Box

Hover Effect

Project Title

Learning takes practice, feedback and time. Explore the subjects, practical activities and support available to help you plan your studies.

Project Title

Parents and learners can contact the office about a visit, programme information or application progress. Include the learner’s name and the programme of interest.

Project Title

Find a programme that fits your learning goals. Ask the admissions team about entry requirements, study schedules and the next available intake.


<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

Prepare your application with the documents requested for your chosen programme. Admissions staff confirm the requirements and explain the next step.

Project Title

Visit the learning environment before making your decision. Arrange a campus enquiry and ask about classroom facilities, student support and daily schedules.

Project Title

Fees, payment arrangements and any extra costs are confirmed by the admissions office. Ask for the current fee structure for the specific programme and intake.


<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

Learning takes practice, feedback and time. Explore the subjects, practical activities and support available to help you plan your studies.

Project Title

Learning takes practice, feedback and time. Explore the subjects, practical activities and support available to help you plan your studies.

Project Title

Learning takes practice, feedback and time. Explore the subjects, practical activities and support available to help you plan your studies.


<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>

Flip Box

Hover Effect

Project Title

Project Title

Project Title

Project Title

Project Title

Project Title

Click Effect

Project Title

Project Title

Project Title

Project Title

Project Title

Project Title

Random Effect

Project Title

Project Title

Project Title

Project Title

Project Title

Project Title

PHP Learning

Web Development

Spoken English