Colores y Tipografías

🎯 Objetivo

Dominar sistemas de color (Hex, RGB, HSL) y Google Fonts. Tu sitio tendrá personalidad.

⚔️ Implementación

/* COLORES HEX */
.ninja { color: #FF6600; }  /* Naranja */
.texto { color: #333; }      /* Gris oscuro */

/* RGB */
.caja { background: rgb(255, 102, 0); }

/* RGBA (con transparencia) */
.overlay { background: rgba(0, 0, 0, 0.5); } /* Negro 50% */

/* HSL (Hue, Saturation, Lightness) */
.moderno { color: hsl(24, 100%, 50%); }

/* GRADIENTES */
.hero {
  background: linear-gradient(to right, #3498db, #2ecc71);
  background: radial-gradient(circle, #fff, #000);
}

/* TIPOGRAFÍA */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap');

body {
  font-family: 'Poppins', Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #333;
}

h1 {
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* SOMBRAS */
.card {
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

🎯 Reto Ninja

✅ Checklist de Dominio