Este pequeño sitio web presenta la manada gatuna que habita en casa en formato de tabla de manera dinámica, con colores, imágenes y el agregado que era estrella en este proyecto: animaciones.
Además, se aprovechó a incluir JavaScript para manejo de eventos y timers.
Secciones
La pantalla principal nos muestra el título de la página, una pequeña descripción de la misma, y la lista de los ocho mininos con su nombre, género, calificación de qué tan mimosos son, y un link para ver más sobre cada uno.
El contenido siempre se centra en el medio con un fondo blanco para dar énfasis al color violáceo de la página. Por lo tanto, si se quiere ver más datos de la tabla que no están a primera vista, se habilita un scroll hacia abajo.
Cuando se clickea la opción de "Leer más" en la tabla, somos redirigidos a una página particular de cada gato, donde el énfasis esta en su nombre con una imagen tipo caricatura y una pequeña descripción de sus características principales. Además, sumamos un dato curioso de cada uno de ellos. ¡Cada gato tiene su página!
Cada vez que se ingresa a una página, incluyendo la página principal, el contenido principal de ella ingresa desde arriba con un efecto de fade-in que le aporta dinamismo. Además, los títulos también tienen su propia animación.
Cuando ya leimos la información de nuestro gato seleccionado en su subpágina, podemos cerrar la misma con el botón correspondiente en la esquina superior derecha. Al clickearlo, con JavaScript escuchamos el evento y este contenido se desvanece con una animación de fade-out hacia arriba dándole paso, luego de un segundo, a la redirección a la página principal para leer sobre otro minino de desearlo.
* Este proyecto fue realizado teniendo en cuenta las buenas prácticas del diseño web responsivo.