<div class="container">
  <p>
    At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.
  </p>
  <p>
    On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty.
  </p>
  <h2>Email us:</h2>
  <ul>
    <li>
      <a href="mailto:hello@forecastr.com?subject=General%20Questions">General Questions</a>
    </li>
    <li>
      <a href="mailto:support@forecastr.com?subject=Technical%20Support%20Questions">Technical Support Questions</a>
    </li>
    <li>
      <a href="mailto:sales@forecastr.com?subject=Sales%20Questions">Sales Questions</a>
    </li>
  </ul>
</div>

<footer class="page-footer">
  <span>made by </span>
  <a href="https://georgemartsoukos.com/" target="_blank">
    <img width="24" height="24" src="https://assets.codepen.io/162656/george-martsoukos-small-logo.svg" alt="George Martsoukos logo">
  </a>
</footer>
body {
  font: 18px/24px sans-serif;
  background: #fafafa;
}

.container {
  max-width: 1100px;
  padding: 0 15px;
  margin: 0 auto;
}


/* FOOTER STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.page-footer {
  position: fixed;
  right: 0;
  bottom: 50px;
  display: flex;
  align-items: center;
  padding: 5px;
  z-index: 1;
}

.page-footer a {
  display: flex;
  margin-left: 4px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.