Lista de colores en HTML

¡Hola, hola, mis queridos soñadores! ¿Cómo están? Para el Origireto, hice un diseño sencillo, pero diferente para los retos, debido a que la consigna así lo ameritaba para diferenciar microrrelatos de relatos y además, agregar el número del mes en que han sido usados.

Debido a esto, me tomé a la tarea de hacer una listita que pudiera editar de manera sencilla y como le gustó a la organizadora, la voy a publicar por si alguien quiere usarla.

Para descargarla completa, clic aquí, que además, les dejo un listado con colores que utilicé.

Y si quieren ver más modelitos de tablillas e índices, pueden hacerlo por aquí.

Este es el código básico, con el relleno blanco y nada más. Si quieren cambiarle el color a los cuadritos, lo que deben hacer es cambiarle el valor a esta partecita del código:

background: #fff;
Sí, justo lo que está marcado en negrita. Ahí es donde buscan el color del código en HTML, copian y pegan.

Como algunos están en el Origireto, yo hice los cuadritos para los relatos y los microrrelatos, así si no se animan a editar el código o les parece más sencillo copiar y pegar, aquí tienen el resultado:

Codigo relato: #79C6EC
Código micrrorelato: #FFFD83

Por último y ya para ir cerrando ese mini tutorial, para colocar un número o un símbolo en el cuadrito, es tan fácil como escribir algo antes del

del código. Les marcaré exactamente dónde deben hacerlo:

Texto

El div que está marcado en rojo es al que me refería, entonces, si queremos escribir algo en el cuadrito, lo correcto es escribir antes de ese texto ¿no? Quedaría de esta manera:

1

Texto

El número lo escribí en negrita para que puedan verlo mejor y darse cuenta de dónde hacer el agregado de texto. Esto, si le cambian el witdh, que es el ancho, pueden hacerlo ajustando el texto que ustedes quieran, no sólo un número, dependerá de qué es lo que deseen hacer para poder adaptarlo a su gusto.

Y es tan sencillo como eso. Arriba tienen todos los packs de códigos para descargar y si necesitan ayuda con algo aquí, pueden dejarlo por los comentarios.

Un abrazo!

¿Te gustó la entrada?

Haz clic en los corazones ¡y vota!

Votos / 5. Votos: