Flamingo Travel

pantalla principal proyecto

Descripción

Luego de probar crear un simulador de envío de emails, quise probar una estética distinta para darle uso a los contenidos aprendidos. Así fue que hice el proyecto Flamingo Travel, un simulador de contacto para una agencia de viajes.

Secciones

pagina principal Nuestra página principal nos muestra el logotipo y nombre de nuestra empresa, junto con una imagen de un paisaje invitándonos a viajar.
Debajo, tenemos el formulario de consulta en el que debemos dejar nuestro correo de contacto, el viaje que nos interesa y la consulta que queremos hacer.

validaciones Si bien el único campo con un formato específico es el de correo de contacto, que nos mostrará una alerta con el mensaje "El email ingresado no es válido" si no cumple con el formato correcto, todos los campos son obligatorios.
De esta forma, si por ejemplo dejamos vacío el input de consulta, nos saldrá también una alerta.
Hasta que los tres campos no estén completos y correctos, no se habilitará el botón para Enviar consulta.

proyecto habilitado Cuando los campos son completados con los datos correctamente, se nos habilita entonces el botón para "Enviar consulta", deshabilitado hasta ese momento.

spinner de carga Probando otro tipo de spinners, en este proyecto se optó por un spinner de carga circular para avisarle al usuario que su solicitud de consulta está siendo enviada y que debe esperar unos segundos.

consulta enviada Una vez que se terminó de enviar la consulta, al usuario le saldrá una alerta en verde avisando que el proceso se finalizó correctamente, por lo que el spinner desaparecerá y el formulario se limpiará para que pueda enviarse una nueva consulta de ser requerido.
* Este proyecto fue realizado teniendo en cuenta las buenas prácticas del diseño web responsivo.

Tecnologías utilizadas