html
<style>
  body {
    font-family: monospace;
  }
  .container {
    padding: 10px;
    border: 8px solid #333;
    margin: 0 auto;
  }
  .code {
    font-size: 20px;
  }
  .title {
    font-size: 40px;
    font-weight: bold;
  }
  .subpage {
    border: 4px solid #333;
  }
  .subpage a {
    text-decoration: none;
    color: #333;
  }
  .subpage a:hover {
    color: #666;
  }
</style>
<div class="container">
  <h1 class="title">The Sibling Code: Stealing the Show</h1>
  <div class="code">
    <pre>
      <code>
        &lt;html&gt;
  &lt;body&gt;
    &lt;div&gt;
      &lt;span style="color: #f00;"&gt;&lt;!-- Red alert! --&gt;&lt;/span&gt;
      &lt;!-- The art of sibling coding: stealing the spotlight, the show, the snack stash --&gt;
    &lt;/div&gt;
  &lt;/body&gt;
&lt;/html&gt;
      </code>
    </pre>
  </div>
  <div class="subpage">
    <h2 class="subpage">Sibling Code Subroutines</h2>
    <p>Here are some of the most epic sibling codes:</p>
    <ul>
      <li>
        <a href="/sister-sites/underfoot/the-sibling-code/sibling-super-skillz">Sibling Super Skillz</a>
      </li>
      <li>
        <a href="/sister-sites/underfoot/the-sibling-code/sibling-hacks">Sibling Hacks</a>
      </li>
      <li>
        <a href="/sister-sites/underfoot/the-sibling-code/stealing-the-snack">Stealing the Snack</a>
      </li>
    </ul>
  </div>
</div>