johnnie guilbert !

Layout CSS

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Johnnie Guilbert Inspired Layout</title>
  <style>
    /* Reset & Base Styles */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      background-color: #0d0d0d;
      color: #e0e0e0;
      font-family: 'Courier New', Courier, monospace;
      min-height: 100vh;
      overflow-x: hidden;
      position: relative;
    }

    /* Dark Red Edge Stars */
    body::before, body::after {
      content: "★";
      position: fixed;
      font-size: 2.5rem;
      color: #5a0000;
      text-shadow: 0 0 10px #ff0000, 0 0 20px #800000;
      z-index: 10;
      pointer-events: none;
    }
    /* Top Left Star */
    body::before {
      top: 20px;
      left: 20px;
    }
    /* Top Right Star */
    body::after {
      top: 20px;
      right: 20px;
    }

    /* Bottom Stars (Container) */
    .edge-stars-bottom::before, .edge-stars-bottom::after {
      content: "★";
      position: fixed;
      font-size: 2.5rem;
      color: #5a0000;
      text-shadow: 0 0 10px #ff0000, 0 0 20px #800000;
      z-index: 10;
      bottom: 20px;
      pointer-events: none;
    }
    .edge-stars-bottom::before { left: 20px; }
    .edge-stars-bottom::after { right: 20px; }

    /* Header with Johnnie Guilbert Image Placeholder */
    .hero-header {
      width: 100%;
      height: 450px;
      /* Replace the URL below with your actual cool black image of Johnnie */
      background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), #0d0d0d), 
                  url('https://images.unsplash.com/photo-1514525253161-7a46d19cd819?q=80&w=1000') no-repeat center center;
      background-size: cover;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      border-bottom: 4px solid #1a1a1a;
      position: relative;
    }

    .hero-header h1 {
      font-size: 3.5rem;
      text-transform: uppercase;
      letter-spacing: 4px;
      color: #ffffff;
      text-shadow: 2px 2px 4px #000000, 0 0 15px #5a0000;
    }

    /* Chain Overlay Effect */
    .chain-container {
      position: absolute;
      top: 100%;
      left: 0;
      width: 100%;
      height: 150px;
      display: flex;
      justify-content: space-around;
      pointer-events: none;
      z-index: 5;
    }

    /* Simple CSS representation of vertical chain strands going down */
    .chain-strand {
      width: 12px;
      height: 100%;
      background: repeating-linear-gradient(
        to bottom,
        #444 0px,
        #444 10px,
        transparent 10px,
        transparent 15px,
        #222 15px,
        #222 25px,
        transparent 25px,
        transparent 30px
      );
      opacity: 0.7;
      box-shadow: 0 0 8px rgba(0, 0, 0, 0.8);
    }

    /* Main Content Area */
    .main-content {
      max-width: 800px;
      margin: 180px auto 80px auto; /* Margin top leaves space for the chains */
      padding: 20px;
      background: rgba(15, 15, 15, 0.9);
      border: 1px solid #222;
      box-shadow: 0 0 20px rgba(90, 0, 0, 0.15);
      border-radius: 4px;
    }

    .main-content h2 {
      color: #990000;
      margin-bottom: 15px;
      border-bottom: 1px dashed #444;
      padding-bottom: 5px;
    }

    .main-content p {
      line-height: 1.6;
      margin-bottom: 15px;
    }
  </style>
</head>
<body>

  <!-- Extra element to hold the bottom corner stars -->
  <div class="edge-stars-bottom"></div>

  <!-- Hero Header -->
  <header class="hero-header">
    <h1>Johnnie Guilbert</h1>
    
    <!-- Chains going down from the header -->
    <div class="chain-container">
      <div class="chain-strand"></div>
      <div class="chain-strand" style="height: 120%;"></div>
      <div class="chain-strand"></div>
      <div class="chain-strand" style="height: 85%;"></div>
      <div class="chain-strand"></div>
    </div>
  </header>

  <!-- Main Grid / Body Content -->
  <main class="main-content">
    <h2>Welcome to the Dark Side</h2>
    <p>This layout uses CSS pseudo-elements to lock dark red glowing stars perfectly into the edges of your screen. The header features a dark grunge overlay over a placeholder background image.</p>
    <p>The chains dropping down from the top are built using CSS repeating gradients, giving them a raw, industrial vibe that perfectly accompanies the aesthetic.</p>
  </main>

</body>
</html>