2FA Backup Template

by godfrzero

HTML

<div class="container">
  <div class="logo"></div>
  <div class="username">username</div>
  <ul class="codes">
    <li class="code">1236 9822</li>
    <li class="code">2</li>
    <li class="code">3</li>
    <li class="code">4</li>
    <li class="code">5</li>
    <li class="code">6</li>
    <li class="code">7</li>
    <li class="code">8</li>
    <li class="code">9</li>
    <li class="code">10</li>
  </ul>
</div>

CSS

.logo {
  background: url(https://www.gstatic.com/images/branding/googlelogo/svg/googlelogo_clr_74x24px.svg) no-repeat center;
  height: 24px;
}

.logo,
.username {
  margin: 20px;
}

.container {
  width: 210px;
  height: 340px;
  text-align: center;
  border: solid thin black;
  font: 400 14px/20px Roboto,RobotoDraft,Helvetica,Arial,sans-serif;
}

.codes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 20px;
  grid-row-gap: 25px;
  list-style-type: none;
  grid-column-gap: 20px;
  padding: 0;
}

.code {
  border-bottom: solid thin black;
}