Crea una página web siguiendo la temática descrita: HTML5
Las capas principales serán las siguientes: logotipo, menú, contenido y pie.
- La capa logotipo deberá contener el logotipo de la residencia, que podéis diseñar vosotros.
- La capa menú tendrá los siguientes ítems: inicio, actividades, horarios y contratación. Los enlaces tendrán borde y color de fondo que deberá cambiar mediante CSS al poner el ratón sobre dicho enlace.
- La capa contenido será variable y dependerá de la opción elegida en el menú.
- En el pie se ubicará los datos de la residencia: nombre, dirección, teléfono y email de contacto. También pondréis vuestro nombre y apellidos como autores y el logotipo de creative common con un enlace al texto legal.
Las capas logotipo, menú y pie estarán siempre presentes en cualquiera de las opciones que elijamos del menú. La capa contenidos variará según la opción seleccionada de la capa menú. Utiliza los ejemplos del apartado '2.- Información de interés' para saber como ocultar las capas de contenido que no quieres que se visualicen. La capa contenido mostrará una de las siguientes capas:
- Capa de Inicio: Incluirá un banner de la residencia y un párrafo de presentación. Esta será la opción por defecto. Podéis usar la herramienta canvas.
- Capa de Actividades: Incluir un título 'Actividades' y una galería de imágenes, una por actividad. Al menos deberán aparecer 4 actividades. Bajo la imagen aparecerá el nombre de la actividad. Se podrán distribuir en varias filas y/o columnas de forma que el diseño sea lo más atractivo posible. Al pasar el ratón sobre cada imagen, ésta realizará un efecto por CSS. Este efecto podrá ser: agrandarse, cambiar de blanco y negro a color, girar, etc...
- Capa de Horarios: Incluirá un título 'Horarios' y debajo una tabla con el horario. El horario mostrará en la cabecera de las columnas de lunes a viernes y en la cabecera de las filas las siguientes horas: 17:00, 18:00, 19:00. Deberán aparecer entre 6 y 10 actividades (por lo que se podrán repetir).
- Capa de Contratación: Incluirá un título 'Contratación', una imagen bajo el título y a la derecha de estos dos elementos un formulario de contratación con información básica (Nombre y apellidos, Correo Electrónico, Teléfono, Actividad, Comentarios y botón de Enviar(sin funcionalidad)). El componente de Actividad será un desplegable donde se podrá seleccionar las actividades, las mismas que aparezcan en la capa actividades. No se pide que el formulario funcione tan sólo crear el diseño.
Se valorará no dejar los estilos predeterminados y dar una estética lo más atractiva posible. Se han de modificar también los estilos de la tabla y del formulario. También es importante que nuestro código sea legible, ordenado y esté bien explicado. Todo esto lo tenéis más detallado en el apartado '3.- Evaluación de la tarea'.
La web estará desarrollada en un único archivo HTML que se llamará index.html y en él no se creará ningún estilo ni etiquetas o atributos que den formato, solamente la referencia a un archivo CSS externo que se llamará style.css. Este archivo contendrá toda la funcionalidad dada desde CSS. Las imágenes que se necesiten se almacenarán en una carpeta llamada /img.
