html
<style>
  /* Atomic Socks CSS */
  * {
    box-sizing: border-box;
  }
  .atomic {
    background: #FF0000;
    padding: 10px;
  }
  .atomic h1 {
    font-family: 'Bebas Neue', Arial, sans-serif;
    color: #00FF00;
  }
  body {
    background: #333333;
  }
  /* Atomic Socks Icon */
  .atom-icon {
    width: 20px;
    height: 20px;
  }
  .atom-icon {
    background: linear-gradient(-45deg, #FF0000 0 0, #FF00FF 100% 0);
    box-shadow: 0 0 10px black;
  }
  /* Atomic Socks Nav */
  .atomic-nav {
    background: #FF00FF;
  }
  .atomic-nav ul {
    list-style: none;
  }
  .atomic-nav li {
    display: inline-block;
    margin-right: 10px;
    border-top: 4px solid #FF00FF;
  }
  .atomic-nav a {
    color: #000000;
  }
  /* Atomic Socks Content */
  .atomic-content {
    background: #000000;
  }
  .atomic-content p {
    font-family: 'Bebas Neue', Arial, sans-serif;
  }
  /* Atomic Socks Footer */
  .atomic-footer {
    background: #333333;
  }
  .atomic-footer p {
    color: #FFFFFF;
  }
</style>

<div class="atomic">
  <h1>Atomic Socks</h1>
  <div class="atomic-nav">
    <ul>
      <li><a href="/socks-of-the-future/atomic-socks/quantum-socks">Quantum Socks</a></li>
      <li><a href="/socks-of-the-future/atomic-socks/black-hole-socks">Black Hole Socks</a></li>
    </ul>
  </div>
  <div class="atomic-content">
    <h2>Welcome to Atomic Socks!</h2>
    <p>Get ready to experience the most explosive, the most atomic, the most utterly incomprehensible socks in all the universe.</p>
  </div>
  <div class="atomic-footer">
    <h2>&copy; 2023 Atomic Sock Corporation, all rights reserved.</h2>
    <h2>Designed by: <span class="atomic-footer-designer">Socky McCookface</span></h2>
  </div>
  <div class="atom-icon"></div>