<footer class="pt-3">

  <img src="https://mdbootstrap.com/img/illustrations/Halloween.jpg" class="img-fluid" alt="Halloween" id="animate-click"

    data-mdb-animation="slide-out-down"

    data-mdb-animation-start="onClick"

    data-mdb-animation-reset="true"/>

  <div style="background-color: #323284;">

    <div class="container text-center">

      <div class="row">

        <div class="col-12 mt-5" data-mdb-toggle="animation"

        data-mdb-animation-target="#animate-click">

          <h1 class="display-2 font-weight-bold" style="color: #f38326; letter-spacing: 5px;">Clik here to move the Pumpkins</h1>

        </div>

        <div>

          <div class="row my-5 pt-4">

            <div class="col-md-6 col-lg-4">

              <h2 class="mb-4 mb-lg-5" style="color: #fbba16;">| Trick or Treat</h2>

              <p class="text-white px-lg-4 mb-5 mb-lg-0">Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia rem inventore ea aliquid, optio incidunt asperiores a consequatur animi consectetur error suscipit quis accusamus accusantium impedit quia alias sequi.</p>

            </div>

            <div class="col-md-6 col-lg-4">

              <h2 class="mb-4 mb-lg-5" style="color: #fbba16;">| After Party</h2>

              <p class="text-white px-lg-4 mb-5 mb-lg-0">Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia rem inventore ea aliquid, optio incidunt asperiores a consequatur animi consectetur error suscipit quis accusamus accusantium impedit quia alias sequi.</p>

            </div>

            <div class="col-md-12 col-lg-4">

              <h2 class="mb-4 mb-lg-5" style="color: #fbba16;">| Cheers Witches</h2>

              <p class="text-white px-lg-4">Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia rem inventore ea aliquid, optio incidunt asperiores a consequatur animi consectetur error suscipit quis accusamus accusantium impedit quia alias sequi.</p>

            </div>

          </div>

        </div>

      </div>

    </div>

  </div>

</footer>