Actividad 1: Crea y ordena apartados
Profesor: Javier López
Volver
Descargar html de base
Actividad 1
Actividad 2
Resultado final
Solucionador

Actividad 1: Crea y reordena apartados
Este módulo está compuesto por dos actividades. En esta deberás crear un apartado nuevo e integrarlo con el resto dejando preparada la estructura para poder añadir la animación en la actividad 2.

Así, en esta actividad debes:

  1. Crea un <div> que contenga diferentes <div> que compartan el mismo nombre de clase (class) y que muestre cada uno una imagen (del mismo tamaño).
  2. Esta caja contenedora debe estar debajo de la futura animación y antes que el resto de apartados.
  3. Las imágenes deben colocarse una a la derecha de la otra (utilizando un único float), tal y como se aprecia en la siguiente imagen:



  4. Reordena los diferentes apartados para que los vídeos estén ubicados a la derecha del resto de elementos (texto en columnas, imágenes y #tapa_animacion se colocan a la izquierda).
  5. Separa verticalmente el apartado de los vídeos del resto de elementos.
  6. Coloca #tapa_animacion encima de la caja contenedora de las imágenes y dale una transparencia provisional (para poder apreciar su estado).
  7. Recoloca el resto de apartados para que tenga una apariencia recogida (parecida a la de este modelo).

Antes (sin CSS):

Después (ya con CSS):