juandaveth / bictia-taller3-trabajoenequipo

Completar el taller de otro compañero en Bicita

Solución del Taller 3 de otro compañero

Estos son los requisitos a completar de tu página asignada:

1. Debe crear un efecto de cubo 3d para las imágenes
2. Debe tener un formulario de contacto que valide que el usuario debe completar los campos
3. Crear un menú desplegable
4. Mejorar el diseño web
5. Agregar campos de entrada (inputs) que permitan al usuario agregar el nombre de cada nuevo usuario. Una vez estos se envíen deben mostrarse en nuestro documento HTML con un buen diseño CSS

Para navegar mejor el código, usar esta sección como una hoja de ruta y referirse a cada uno de los requrimientos y su lista numerada. Por ejemplo, el paso "3.3 Se crean los estilos para el menú", está en el Requerimiento 3 - Numeral 3.

Requerimiento 1: Imágenes con efecto 3D

La forma de visualizar el efecto 3D será a través de la sección Galería.

1. Se crearán unas tarjetas que contendrán las imágenes de la galería.
2. La tarjeta tendrá un frente y un reverso que mostrará el efecto 3D.
3. Al hacer hover se crea la rotación de la tarjeta.

Requerimiento 2: Formulario de contacto

Para validar los datos del formulario se siguió el siguiente proceso:

1. Se toman los elementos a manipular en JS.
2. Se incluyen los campos a enviar, con sus respectivas funciones de validación.
3. Se valida que no se hayan enviado vacío ninguno de los campos.

Requerimiento 3: Menú desplegable

Dado que el requerimiento 4 implica mejoras en diseño web, incluir un menú desplegable hará mejor la experiencia de usuario. Así fue el proceso:

1. Se creó un div con las otras secciones que tendrá la página.
2. Mediante un checkbox se despliegan los contenidos del div.
3. Se crean los estilos para el menú.
4. Se agrega un ícono de menú y se estila.
5. Cuando se despliegue se permite que cierre el menú y desparezca.

Requerimiento 4: Mejor diseño web

Lo primero que se hará es mejorar el diseño web, empezando por el home.

1. La primera imagen que ve el usuario es alusiva a la fundación.
2. También se mejoraron las secciones principales.

Requerimiento 5: Sección para agregar Aliados

En esta sección se crearán nuevos divs donde están insertados los datos de las empresas que quieres ser aliadas de la fundación. Así fue el proceso:

1. Se crean los inputs a agregar como aliado.
2. Seleccionar el formulario por su id="formularioAliados".
3. Prevenir que envíe el nombre del aliado vacío