<svg class="card" width="900" height="600" viewbox="0 0 900 600">

  <g class="theback">

    <rect width="90%" height="80%" fill="white" />

    <text id="textBuffer2" x="30%" y="45%" font-size="32">Insert definition here.</text>

  </g>

  <g class="thefront">

    <rect width="90%" height="80%" fill="#f2f6a7" />

    <line class="redLine" x1="0" y1="15%" x2="90%" y2="15%" stroke="red" stroke-width="2"> </line>

    <line class="greyLine" x1="0" y1="25%" x2="90%" y2="25%" stroke="#d3d3d3" stroke-width="1"> </line>
    <line class="greyLine" x1="0" y1="35%" x2="90%" y2="35%" stroke="#d3d3d3" stroke-width="1"> </line>
    <line class="greyLine" x1="0" y1="45%" x2="90%" y2="45%" stroke="#d3d3d3" stroke-width="1"> </line>
    <line class="greyLine" x1="0" y1="55%" x2="90%" y2="55%" stroke="#d3d3d3" stroke-width="1"> </line>
    <line class="greyLine" x1="0" y1="65%" x2="90%" y2="65%" stroke="#d3d3d3" stroke-width="1"> </line>
    <line class="greyLine" x1="0" y1="75%" x2="90%" y2="75%" stroke="#d3d3d3" stroke-width="1"> </line>

    <text id="textBuffer1" x="30%" y="45%" font-size="32">Insert word here.</text>

  </g>

</svg>
* {
  margin: 0;
  padding: 0;
}

html,
body {
  background-color: #333;
  width: 100%;
  height: 100%;
  margin: 0;
  border: 0;
  outline: 0;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
}

.thefront {
  visibility: visible;
}

.thefront:hover {
  transform: rotate(0deg); /* hack to prevent flickering */
  visibility: hidden;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.