<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>X-MEN: BLACKOUT</title>
  <link rel="stylesheet" href="style.css">

  <!-- Comic-style font -->
  <link href="https://fonts.googleapis.com/css2?family=Bangers&display=swap" rel="stylesheet">
</head>

<body>
  <div class="site-layout">

    <!-- Sidebar Navigation -->
    <nav class="sidebar">
      <h2>⚡ NAV</h2>
      <ul>
        <li><a href="issue1.html">▶ Issue #1</a></li>
        <li><a href="characters.html">🦸 Character Bios</a></li>
        <li><a href="map.html">🗺️ World Map</a></li>
        <li><a href="team.html">💀 Villain Team</a></li>
        <li><a href="extras.html">📎 Extras</a></li>
        <li><a href="contact.html">📬 Contact</a></li>
      </ul>

      <div class="mini-ads">
        <img src="ad1.gif" alt="Fake Ad 1">
        <img src="ad2.gif" alt="Ad 2">
      </div>
    </nav>

    <!-- Main Content -->
    <div class="main-content">

      <!-- Floating Stickers for Clutter Vibes -->
      <img src="sticker-new.png" class="sticker top-left" alt="NEW!">
      <img src="sticker-blam.png" class="sticker bottom-right" alt="BLAM!">

      <header>
        <h1>X-MEN: BLACKOUT</h1>
        <p class="tagline">“It started with a blackout… now the world’s never going back.”</p>
      </header>

      <div class="launch-section">
        <a href="issue1.html" class="launch-button">▶ LAUNCH ISSUE #1</a>
      </div>

      <!-- Cluttered Comic Ad Zone -->
      <div class="ad-row">
        <img src="comic-ad1.png" alt="Ad 1">
        <img src="comic-ad2.png" alt="Ad 2">
        <img src="comic-ad3.png" alt="Ad 3">
      </div>

      <!-- Random Promo Image Drop -->
      <img src="promo-splash.png" class="floating-img" alt="Promo Splash">

      <footer>
        <p>© 2025 X-Men: Blackout – A Fan Project • Built with Neocities</p>
      </footer>

    </div>
  </div>
</body>
</html>
.marquee-banner {
  background: #00ccff;
  color: black;
  font-weight: bold;
  font-size: 18px;
  padding: 10px;
  border-
  .music-player {
  background: black;
  color: yellow;
  padding: 10px;
  border: 2px solid red;
  font-size: 14px;
  box-shadow: 3px 3px 0 #333;
  margin-top: 20px;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Character Bios — X-Men: Blackout</title>
  <link rel="stylesheet" href="style.css" />
  <link href="https://fonts.googleapis.com/css2?family=Bangers&display=swap" rel="stylesheet" />
</head>

<body>
  <div class="site-layout">

    <!-- Sidebar Navigation (same as homepage) -->
    <nav class="sidebar">
      <h2>⚡ NAV</h2>
      <ul>
        <li><a href="issue1.html">▶ Issue #1</a></li>
        <li><a href="characters.html" class="active-link">🦸 Character Bios</a></li>
        <li><a href="map.html">🗺️ World Map</a></li>
        <li><a href="team.html">💀 Villain Team</a></li>
        <li><a href="extras.html">📎 Extras</a></li>
        <li><a href="contact.html">📬 Contact</a></li>
      </ul>
      <div class="mini-ads">
        <img src="ad1.gif" alt="Fake Ad 1" />
        <img src="ad2.gif" alt="Ad 2" />
      </div>
    </nav>

    <!-- Main Content -->
    <main class="main-content">
      <header>
        <h1>Character Bios</h1>
        <p>Select a character to read their full bio</p>
      </header>

      <section class="character-grid">
        <!-- Example character card -->
        <a href="bios/hemlocke.html" class="char-card" title="Hemlocke - The Tomboyish Toxic Terror">
          <img src="chars/hemlocke.png" alt="Hemlocke" />
          <h3>Hemlocke</h3>
        </a>

        <a href="bios/morticia.html" class="char-card" title="Morticia - The Obsessive Mastermind">
          <img src="chars/morticia.png" alt="Morticia" />
          <h3>Morticia</h3>
        </a>

        <a href="bios/pitviper.html" class="char-card" title="Pitviper - The Venomous Right Hand">
          <img src="chars/pitviper.png" alt="Pitviper" />
          <h3>Pitviper</h3>
        </a>

        <!-- Add more character cards below -->
      </section>
    </main>
  </div>
</body>
</html>
.bio-content {
  display: flex;
  gap: 30px;
  margin-top: 20px;
}

.bio-img {
  width: 250px;
  border: 4px solid yellow;
  box-shadow: 5px 5px 0 black;
  border-radius: 12px;
}

.bio-content article {
  max-width: 600px;
  color: #111;
  background: #fef9e6;
  padding: 20px;
  border: 3px solid #f30000;
  box-shadow: 4px 4px 0 black;
  border-radius: 12px;
  font-family: 'Arial', sans-serif;
}

.back-btn {
  display: inline-block;
  margin-top: 25px;
  font-weight: bold;
  font-family: 'Bangers', cursive;
  color: #f30000;
  text-decoration: none;
  font-size: 18px;
  border: 3px solid #f30000;
  padding: 8px 15px;
  box-shadow: 3px 3px 0 black;
  border-radius: 8px;
  transition: background-color 0.2s;
}

.back-btn:hover {
  background-color: #f30000;
  color: yellow;
  box-shadow: 4px 4px 0 black;
}