FLIP CARD
Run 
<!<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML</title>
<style>
  .outer-card {
    
	  width: 300px;
	  height: 200px;
	  perspective: 1000px;
	  }
    .inner-card {
	  position: relative;
	  width: 100%;
	  height: 100%;
	  text-align: center;
	  transition: transform 0.8s;
	  transform-style: preserve-3d;
	  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3);
	}
	.outer-card:hover .inner-card {
	   transform: rotateY(180deg);
	}
	.font-face, .font-back {
	  position: absolute;
	  width: 100%;
	  height: 100%;
	  -webkit-backface-visibility: hidden; /* Safari */
	  backface-visibility: hidden;
	  }
	  
	 .font-face {
	    background-color: cyan;
        color: black;
	 }
	 
	 .back-face {
	  background-color:  blue;
	  color: white;
	  transform: rotateY(180deg);
	}
	button {
	  background-color: cyan;
	  padding: 12px;
	}

</style>
</head>
<body>
   <div class="outer-card">
	   <div class="inner-card">
		 <div class="font-face">
		   <img src="https://s3.ap-south-1.amazonaws.com/s3.studytonight.com/tutorials/uploads/pictures/1628516205-101156.png">
		 </div>
		 <div class="back-face">
		   <h2> The back-face </h2>
		   <p> Back face of card </p>
		   <button> Click me </button>
		   <p> The flip card is useful </p>
		   <p> Footer </p>
		 </div>
	   </div>
    </div>
</body>
</html>