FLIPcards

For Leanna. inspired by W3Schools.

by trentHarlem

HTML

<div class="container">


<!-- Copy this for every card -->
  <div class="flip-card">
  <div class="flip-card-inside">
    <div class="front">
      <h2>One Pill</h2>
    </div>
    <div class="back">
      <div class="content">
      <p>Makes you Larger.</p> 
      </div>
    </div>
  </div>
</div>
<!-- Copy this for every card and change content -->
  <div class="flip-card">
  <div class="flip-card-inside">
    <div class="front">
      <h2>And One Pill</h2>
    </div>
    <div class="back">
      <div class="content">
       <p>Makes you small.</p>
       </div>
    </div>
  </div>
</div>

  <div class="flip-card">
  <div class="flip-card-inside">
    <div class="front">
      <h2>And the ones that mother gives you..</h2>
    </div>
    <div class="back">
       <div class="content">
       <p>Don't do anything at all.</p>
       </div>
    </div>
  </div>
</div>

 <div class="flip-card">
  <div class="flip-card-inside">
    <div class="front">
      <h2>FRONT</h2>
    </div>
    <div class="back">
       <div class="content">
       <p>Back of card.</p>
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
       </div>
    </div>
  </div>
</div>



</div>

CSS

body {
  font-family: system-ui;
  background-color: white;

}

.container {
  display: flex;
  flex-wrap: wrap;
}

.flip-card {
  /* background-color: white; */
  width: 300px;
  height: 200px;
  perspective: 1000px;
  margin-bottom: 10px;
}

.flip-card-inside {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inside {
  transform: rotateY(180deg);
}

.front,
.back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.front {
  background-color: dodgerblue;
  color: whitesmoke;
  text-shadow: 0 0 2px black;
  background: radial-gradient(circle, rgba(88, 150, 250, 1) 0%, rgba(44, 55, 255, 1) 100%);

}

.back {
  /* background-color: green; */
  color: white;
  transform: rotateY(180deg);
  /* background: rgb(0,128,0); */
  background: radial-gradient(circle, rgba(4, 120, 4, 1) 0%, rgba(1, 75, 5, 1) 100%);

}

.flip-card-inside .back .content {
  text-align: left;
  margin-left: 20px;
  padding: 5px;
}