<div class="container" id="wrapper" ontouchstart="this.classList.toggle('hover');">
  <div data-aos="zoom-in" data-aos-duration="1500" data-aos-delay="200" id="card">
    <div class="front">
      <i class="fa fa-battery-0"></i>
      <h1>energy</h1>
      <p class="p1">/ˈenərjē/</p>
      <p class="p2">the strength and vitality required for sustained physical or mental activity. "changes in the levels of vitamins can affect energy and well-being"</p>
    </div>

    <div class="back">
      <h1>the sun's energy</h1>
      <p class="p3">provides light and warmth to our planet in order to sustain and develop life.</p>
    </div>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="assets/js/bs-animation.js"></script>
<script src="assets/js/main.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.1.1/aos.js"></script>

body {
  padding: 0;
  margin: 0;
  overflow: hidden;
  background-color: rgba(23, 50, 103, 0.39);
  font-family: "Roboto", sans-serif;
}

#card {
  width: 25%;
  height: 485px;
  margin: 140px auto;
  background-color: #333453;
  text-align: center;
  padding: 15px;
  border-radius: 15px;
  box-shadow: 8px 8px 5px #999;
}

#card:hover {
  cursor: pointer;
}

#card i {
  font-size: 65px;
  color: #95969e;
  margin-bottom: 15px;
  margin-top: 45px;
}

#card h1 {
  font-size: 36px;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 15px;
  text-align: center;
  font-weight: bold;
  margin-left: 15px;
}

.p1 {
  color: #95969e;
  font-size: 18px;
}

.p2 {
  color: #95969e;
  font-size: 18px;
  margin-top: 70px;
  padding: 0px 20px;
}

.back {
  padding: 15px;
  background-color: orange;
  color: #fff;
  border-top-right-radius: 15px;
  border-top-left-radius: 15px;
}

.back h1 {
  font-size: 36px;
  text-transform: uppercase;
  letter-spacing: 10px;
  text-align: center;
  font-weight: bold;
  margin-left: 15px;
  margin-top: 70px;
}

.p3 {
  font-size: 18px;
  margin-top: 40px;
  padding: 0px 20px;
}

/* FLIP ANIMATION STYLING DO NOT CHANGE OR ALTER */

/* entire container, keeps perspective */
#wrapper {
  perspective: 1000px;
}
/* flip the pane when hovered */
#wrapper:hover #card,
#wrapper.hover #card {
  transform: rotateY(180deg);
}

#wrapper,
.front,
.back {
  width: 100%;
  height: auto;
}

/* flip speed goes here */
#card {
  transition: 1.3s;
  transform-style: preserve-3d;

  position: relative;
}

/* hide back of pane during swap */
.front,
.back {
  backface-visibility: hidden;

  position: absolute;
  top: 0;
  left: 0;
}

/* front pane, placed above back */
.front {
  z-index: 2;
  /* for firefox 31 */
  transform: rotateY(0deg);
}

/* back, initially hidden pane */
.back {
  transform: rotateY(180deg);
}