untitled

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mobile Legends Fan Page</title>

  <style>
    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      font-family: Arial, sans-serif;
      color: white;
      background: #10141d;
    }

    header {
      padding: 20px 8%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: #171e2b;
    }

    .logo {
      color: #f5c76b;
      font-weight: bold;
      letter-spacing: 2px;
    }

    nav a {
      color: white;
      text-decoration: none;
      margin-left: 20px;
    }

    nav a:hover {
      color: #f5c76b;
    }

    .hero {
      min-height: 500px;
      padding: 80px 20px;
      display: grid;
      place-items: center;
      text-align: center;
      background: linear-gradient(135deg, #26334b, #10141d);
    }

    .hero h1 {
      margin: 15px 0;
      font-size: clamp(44px, 8vw, 80px);
      text-transform: uppercase;
    }

    .hero p {
      max-width: 600px;
      color: #d6dce7;
      line-height: 1.7;
    }

    .button {
      display: inline-block;
      margin-top: 20px;
      padding: 14px 24px;
      border-radius: 5px;
      background: #f5c76b;
      color: #17120a;
      text-decoration: none;
      font-weight: bold;
    }

    section {
      padding: 60px 8%;
    }

    h2 {
      color: #f5c76b;
    }

    .cards {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 18px;
    }

    .card {
      padding: 24px;
      border: 1px solid #ffffff25;
      border-radius: 10px;
      background: #171e2b;
    }

    .card p,
    .about p {
      color: #b8c0ce;
      line-height: 1.7;
    }

    .about {
      background: #ffffff08;
    }

    footer {
      padding: 24px;
      border-top: 1px solid #ffffff25;
      color: #9ba5b5;
      text-align: center;
    }

    @media (max-width: 700px) {
      header {
        align-items: flex-start;
        flex-direction: column;
        gap: 15px;
      }

      nav a {
        margin: 0 14px 0 0;
      }

      .cards {
        grid-template-columns: 1fr;
      }
    }
  </style>
</head>

<body>
  <header>
    <div class="logo">MLBB • FAN PAGE</div>

    <nav>
      <a href="#beranda">Beranda</a>
      <a href="#fitur">Fitur</a>
      <a href="#tentang">Tentang</a>
    </nav>
  </header>

  <main>
    <section class="hero" id="beranda">
      <div>
        <p>5V5 • MOBA • BERTARUNGLAH BERSAMA</p>
        <h1>Legends<br>Never Die</h1>
        <p>
          Masuki Land of Dawn, pilih hero favoritmu, dan susun strategi
          bersama tim untuk meraih kemenangan.
        </p>
        <a class="button" href="#fitur">JELAJAHI ARENA</a>
      </div>
    </section>

    <section id="fitur">
      <h2>Kenali Arena</h2>

      <div class="cards">
        <article class="card">
          <h3>⚔️ Pertarungan 5v5</h3>
          <p>Bekerja sama dengan tim dan gunakan strategi untuk menang.</p>
        </article>

        <article class="card">
          <h3>🛡️ Pilih Peranmu</h3>
          <p>Pilih peran seperti Tank, Mage, Marksman, Assassin, atau Support.</p>
        </article>

        <article class="card">
          <h3>🏆 Naik Peringkat</h3>
          <p>Asah kemampuanmu dan tantang diri di mode ranked.</p>
        </article>
      </div>
    </section>

    <section class="about" id="tentang">
      <h2>Tentang Mobile Legends</h2>
      <p>
        Ini adalah fan page sederhana bertema Mobile Legends: Bang Bang.
        Kamu bisa mengubah teks, warna, dan tampilannya sesuai keinginan.
      </p>
    </section>
  </main>

  <footer>
    Fan page tidak resmi • Dibuat untuk latihan HTML dan CSS
  </footer>
</body>
</html>