html
<style>
  body {
    background-color: #ff0033;
    font-family: "Helvetica Neue", sans-serif;
  }
  .container {
    width: 800px;
    margin: 0 auto;
    padding: 16px;
    background-color: #ffffff;
  }
  h1, h2, h3, h4, h5, h6 {
    font-weight: bold;
    text-transform: uppercase;
    color: #000000;
  }
  h1 {
    font-size: 24px;
  }
  p {
    margin: 0;
  }
  a {
    text-decoration: none;
  }
  .link {
    color: #000000;
  }
  .button {
    background-color: #000000;
    border: 4px solid #000000;
    border-radius: 0;
    font-size: 24px;
  }
  .image {
    background-image: url('https://placehold.it/800/600');
  }
</style>

<div class="container">
  <h1>Sponges</h1>
  <p>Sponges are the unsung heroes of the kitchen.</p>
  <p>But have you ever stopped to think about the existential implications of being a sponge?</p>
  <p>Do you exist solely to absorb and serve?</p>
  <p>Or are you a sponge with a soul?</p>
  <p>We'll explore these questions and more on the following pages:</p>
  <ul>
    <li><a class="link" href="/sponges/absorption">Absorption</a></li>
    <li><a class="link" href="/sponges/soulsearching">Soul Searching</a></li>
    <li><a class="link" href="/sponges/porosities">Porosities</a></li>
  </ul>
  <button class="button">Learn more about sponges</button>
  <img class="image" src="https://placehold.it/800/600" alt="Sponges">
</div>