<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Entidades y Emojis en HTML5</title>
  <style>
    body { font-family: Arial, Helvetica, sans-serif; padding: 25px; line-height: 1.6; background: #f8fafc; }
    .card-simbolos { max-width: 520px; background: white; border: 1px solid #cbd5e1; border-radius: 8px; padding: 22px; }
    .item-simbolo { font-size: 1.05rem; margin-bottom: 8px; }
    .emoji-grande { font-size: 1.8rem; vertical-align: middle; }
    code { background: #f1f5f9; padding: 2px 6px; border-radius: 4px; color: #0284c7; }
  </style>
</head>
<body>

  <div class="card-simbolos">
    <h3 style="margin-top: 0; color: #0f172a;">Caracteres Especiales y Entidades</h3>

    <div class="item-simbolo">
      <strong>Código seguro:</strong> Para mostrar <code>&lt;h1&gt;</code> usamos: <code>&amp;lt;h1&amp;gt;</code>.
    </div>

    <div class="item-simbolo">
      <strong>Divisas:</strong> 100 &euro; (Euro), 50 &pound; (Libra), 200 &yen; (Yen).
    </div>

    <div class="item-simbolo">
      <strong>Matemáticas:</strong> &radic;16 = 4 &nbsp;&bull;&nbsp; 5 &ne; 10 &nbsp;&bull;&nbsp; &pi; &asymp; 3.1416
    </div>

    <div class="item-simbolo">
      <strong>Navegación:</strong> Siguiente lección &raquo; &nbsp;|&nbsp; &larr; Regresar al inicio
    </div>

    <hr style="border: 0; border-top: 1px solid #e2e8f0; margin: 15px 0;">

    <div class="item-simbolo">
      <strong>Emojis Unicode en HTML5:</strong><br>
      <span class="emoji-grande">&#128640;</span> &nbsp; Cohete espacial (<code>&amp;#128640;</code>)<br>
      <span class="emoji-grande">&#128187;</span> &nbsp; Computadora personal (<code>&amp;#128187;</code>)<br>
      <span class="emoji-grande">&#129302;</span> &nbsp; Robot inteligente (<code>&amp;#129302;</code>)
    </div>

    <p style="margin-top: 15px; font-size: 0.85rem; color: #64748b;">
      &copy; 2026 Kilopolis &amp; Asociados &reg;. Todos los derechos reservados.
    </p>
  </div>

</body>
</html>