html
<style>
  /* CSS is hard, okay? Just trust me on this. */
  body {
    background-image: url('https://example.com/this-is-not-real-background.png');
    background-size: 100% 100%;
  }
  .eclipse-myths {
    background-color: #f2c;
    padding: 10px 20px;
  }
  .eclipse-myths h1 {
    font-family: 'Bangers', cursive;
    font-size: 24px;
  }
  .eclipse-myths p {
    color: #fff;
    font-size: 12px;
  }
  .eclipse-myths a {
    text-decoration: none;
  }
  .eclipse-myths a:hover {
    color: #f00;
  }
  /* Don't @ me. */
  /* I'm not a real designer, okay? */
</style>

<div class="eclipse-myths">
  <h1>Eclipse Myths: The Truth Revealed</h1>
  <p>Did you know that eclipses are actually just giant space hamsters running on a wheel of doom?</p>
  <a href="/delta/project/eclipse/eclipse-myths/hamster-hoax">Learn more about the Hamster of the Sun</a>
  <a href="/delta/project/eclipse/eclipse-myths/solar-sabotage">Discover the sinister plot to sabotage our solar system</a>
</div>