<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8" />
   <title>1/20 - This is the word</title>
   <link href='https://fonts.googleapis.com/css?family=Open+Sans&subset=greek,latin' rel='stylesheet' type='text/css'>
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
   <style type="text/css">
      html, body {
         padding: 0;
         margin: 0;
         height: 100%;
         position: relative;
         font-family: 'Open Sans', sans-serif;
         background-color: #fcfcfc;
      }
      .card {
         position: absolute;
         margin: auto;
         top: 0;
         right: 0;
         bottom: 0;
         left: 0;
         width: 100%;
         height: 100%;
         max-width: 580px;
         max-height: 348px;
         background-color: #D9D9D9;
         border-radius: 4px;
         padding: 16px;
         box-sizing: border-box;
         border-bottom: 1px solid #ccc;
      }
      .headerbar, .footerbar {
         color: #878787;
         position: absolute;
         height: 40px;
      }
      .headerbar .homebutton {
         width: 40px;
         height: 100%;
         font-size: 1.3em;
      }
      .headerbar a {
         color: #878787;
         text-decoration: none;
      }
      .footerbar {
         left: 0;
         bottom: 0;
         right: 0;
         padding-left: 16px;
      }
      .contents {
         text-align: center;
         display: block;
         height: 100%;
         width: 100%;
         padding: 40px 0;
         box-sizing: border-box;
      }
      .flip {
         display: table;
         height: 100%;
         width: 100%;
         text-decoration: none;
         color: #242424;
      }
      .word {
         display: table-cell;
         vertical-align: middle;
         font-size: 4em;
      }
   </style>
</head>
<body>
   <div class="card">
      <div class="headerbar">
         <a href="#" class="homebutton"><i class="fa fa-home"></i></a>
      </div>
      <div class="contents">
         <a href="#" class="flip">
            <span class="word">This is a really long word</span>
         </a>
      </div>
      <div class="footerbar">
         <div class="progress">
            <span class="current">1</span>&nbsp;of&nbsp;<span class="total">20</span>
         </div>
      </div>
   </div>
</body>
</html>

Add mock of card front
Add mock of card front
