<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Domain Rakyat</title>
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet">
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Poppins', sans-serif;
    }
    body {
      background: #f9f9f9;
      color: #333;
    }
    header {
      background: #e60000;
      color: white;
      padding: 1rem 2rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    header h1 {
      font-size: 1.8rem;
    }
    nav a {
      color: white;
      margin-left: 1.5rem;
      text-decoration: none;
      font-weight: 600;
    }
    .hero {
      background: url('https://source.unsplash.com/1600x600/?indonesia,news') center/cover;
      height: 400px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      text-shadow: 0 2px 4px rgba(0,0,0,0.6);
    }
    .hero h2 {
      font-size: 2.5rem;
      max-width: 600px;
      text-align: center;
    }
    .container {
      display: grid;
      grid-template-columns: 3fr 1fr;
      gap: 2rem;
      padding: 2rem;
    }
    .card {
      background: white;
      border-radius: 10px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
      overflow: hidden;
      margin-bottom: 2rem;
    }
    .card img {
      width: 100%;
      height: 200px;
      object-fit: cover;
    }
    .card-content {
      padding: 1rem;
    }
    .card-content h3 {
      margin-bottom: 0.5rem;
    }
    aside {
      padding-top: 1rem;
    }
    aside h4 {
      margin-bottom: 1rem;
    }
    footer {
      background: #222;
      color: white;
      text-align: center;
      padding: 1rem 0;
      margin-top: 2rem;
    }
  </style>
</head>
<body>
  <header>
    <h1>DomainRakyat.com</h1>
    <nav>
      <a href="#">Beranda</a>
      <a href="#">Politik</a>
      <a href="#">Ekonomi</a>
      <a href="#">Teknologi</a>
      <a href="#">Budaya</a>
    </nav>
  </header>
  <div class="hero">
    <h2>Berita Independen untuk Suara Rakyat</h2>
  </div>
  <div class="container">
    <main>
      <div class="card">
        <img src="https://source.unsplash.com/600x400/?protest,indonesia" alt="Berita 1">
        <div class="card-content">
          <h3>Judul Berita Utama Hari Ini</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vel sem a felis tempor pretium.</p>
        </div>
      </div>
      <div class="card">
        <img src="https://source.unsplash.com/600x400/?jakarta,city" alt="Berita 2">
        <div class="card-content">
          <h3>Ekonomi Terkini: Pergerakan Harga Pasar</h3>
          <p>Nam commodo, sapien ut convallis dapibus, metus libero porttitor nulla, a fringilla lorem sem sed augue.</p>
        </div>
      </div>
    </main>
    <aside>
      <h4>Trending Hari Ini</h4>
      <ul>
        <li><a href="#">5 Fakta Kasus Politik Terbaru</a></li>
        <li><a href="#">Kenali Teknologi AI di Indonesia</a></li>
        <li><a href="#">Tips Bertahan di Masa Krisis</a></li>
      </ul>
    </aside>
  </div>
  <footer>
    &copy; 2025 DomainRakyat.com - Media Suara Independen Rakyat
  </footer>
</body>
</html>