Untitled

<!DOCTYPE html>
<head>
  <style media="screen">
    html {
        height: 100vh;
    }
    body {
      height: 100vh;
    }
    .flex {
      display: flex;
    }
    .flex-align-center {
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    .section {
      flex: 1;
    }
    img {
      display: block;
      height: 200px;
      width: 200px;
    }
    #balance-section {
      background: #76869e;
    }
    #history-section {
      background: #5a6981;
    }
    body {
      display: flex;
      flex-direction: column;
    }
    header, footer {
      flex-shrink: 0;
    }
    main {
      width: 100%;
    }
    footer {
      height: 50px;
    }
    .btn {
      font-size: 18px;
      font-weight: 400;
      padding: 10px 15px;
      boder: 1px solid #FFF;
      background-color: transparent;
      color: #FFF;
    }
    .section {
      min-width: 700px;
      flex-wrap: wrap;
    }
    @media all and (min-width: 700px) {
      main {
        display: flex;
        flex: 1;
      }
    }
  </style>
</head>
<body>
  <header>
    <div class="nav">
      <div class="nav-left">
        <div class="brand"><img /></div>
        <div class="nav-menu">
          <ul>
          </ul>
        </div>
      </div>
      <div class="nav-right">
        <a>Log Out</a>
      </div>
    </div>
  </header>
  <main>
    <div id="balance-section" class="flex flex-align-center section">
      <div>
        <img>
      </div>
      <button class="btn">
        Pay Your Balance
      </button>
    </div>
    <div id="history-section" class="flex flex-align-center section">
      <div><img></div>
      <button class="btn">
        Pay Your Balance
      </button>
    </div>
  </main>
  <footer>
    <div class="footer-left">

    </div>
    <div class="footer-right">

    </div>
  </footer>
</body>