<div class="site-container">
  <header class="site-header">My site</header>
  <main class="site-content">
    <h1>Please log in</h1>
    <button>Log in here</button>
  </main>
  <footer class="site-footer"></footer>
</div>
.site-header {
  padding: 20px;
  background-color: orange;
}

.site-content {
  display: block;
  padding: 20px 0;
  margin: 0 auto;
  max-width: 800px;
}

.site-footer {
  background: linear-gradient(to bottom, purple, rebeccapurple);
  padding: 50px 0;
}

body {
  margin: 0;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.