.maincontainer{
  position absolute;
  width 250px;
  height 320px;
  background none;
  top 50%;
  left 50%;
  transform translate(-50%, -50%);

}

 
.thecard{
  position relative;
  top 0;
  left 0;
  width 100%;
  height 100%;
  border-radius 10px;
  transform-style preserve-3d;
  transition all 0.8s ease;
}

 
.thecardhover{
  transform rotateY(180deg);
}

 
 .thefront{
  position absolute;
  top 0;
  left 0;
  width 100%;
  height 100%;
  border-radius 10px;
  backface-visibility hidden;
  overflow hidden;
  background #ffc728;
  color #000;
}

 
.theback{
  position absolute;
  top 0;
  left 0;
  width 100%;
  height 100%;
  border-radius 10px;
  backface-visibility hidden;
  overflow hidden;
  background #fafafa;
  color #333;
  text-align center;
  transform rotateY(180deg);
}


This block (starts here) is merely styling for the flip card, and is NOT an essential part of the flip code 
.thefront h1, .theback h1{
  font-family 'zilla slab', sans-serif;
  padding 30px;
  font-weight bold;
  font-size 24px;
  text-align center;
}

.thefront p, .theback p{
  font-family 'zilla slab', sans-serif;
  padding 30px;
  font-weight normal;
  font-size 12px;
  text-align center;
}