¡Es hora de practicar!

Colores y Dimensiones

Tip: Una buena práctica al combinar colores, como en botones por ejemplo, es no poner la letra color blanco o negro. En su lugar utiliza las tonalidades del mismo color para hacerla resaltar.

● Crea un botón color azul siguiendo estos consejos, recuerda que las tonalidades predefinidas van del 100 al 900. ● Crea un botón que se adapte según el tamaño de dispositivo.
● Cuando sea de tamaño pequeño, este botón debe abarcar el ancho de la pantalla y cuando sea un poco más grande debe tener un tamaño predeterminado.

Si no estás seguro sobre cuáles colores escoger, te recomiendo que uses Paletton, ahí podrás escoger un color y el programa te sugerirá colores que puedan combinar. (https://paletton.com/)

Display y Flexbox

Tip: Una buena práctica es utilizar el margen de cada elemento para posicionarlo con respecto a otros. Esto se logra con margin left (ml-x), margin-top (mt-x). Si usamos margin right y margin bottom lo que hacemos es mover otros elementos respecto del elemento con el que estamos trabajando.

● Crea lo que se conoce como group button de 3 buttons o más. Esto lo logras utilizando lo aprendido en display o flexbox, así como margin y padding.

Pseudo—Class Variants

Utilizando variantes como hover y active, logra crear efectos cambiando el color de los botones creados anteriormente.

● Cuando pases el cursor encima de uno de los botones deberá cambiar el fondo a un color más oscuro, de tal manera que resalte con el texto. Y al estar en estado normal, el fondo deberá ser claro y el texto, color oscuro.

Extraer componentes usando @apply

Utilizando la directiva @apply, crea un componente de “alert” con sus variaciones para que se comporte distinto según la clase que le acompañe.

Hay que crear: ● alert (default) - Utiliza un color neutro ● alert (danger) - Utiliza un color rojo ● alert (warning) - Utiliza un color amarillo o naranja ● alert (info) - Utiliza un color azul

Para desarrollar este reto tendrás que hacer uso de: ● margin ● padding ● border ● background ● text color

El código de tu componente de poderse utilizar como sigue: El código de tu componente debería verse así:

<div class = “alert”>
	Este mensaje es una alerta default.
</div>

<div class = “alert alert-danger”>
	Este mensaje es una alerta danger.
</div>


<div class = “alert alert-warning”>
	Este mensaje es una alerta warning.
</div>

<div class = “alert alert-info”>
	Este mensaje es una alerta info.
</div>