CASAS ECONÓMICAS

La subpágina de las casas económicas contiene una cabecera con el título

‘CASAS ECONÓMICAS’, el logo de la página y el desplegable que
contiene el aside y desde donde se podrá navegar de una página secundaria
a otra. Para conseguir esto se ha creado un archivo CSS y un archivo
JavaScript comunes con la subpágina de casas sostenibles.
Después de esta cabecera encontramos las imágenes de las casas ofrecidas
y al pasar el ratón por encima de las fotos te muestra la información de
cada casa.

Aquí se muestra un ejemplo de cómo quedaría la página y como se ve en la

foto número 6, al pasar el ratón por encima se muestra la información de
las viviendas.
Dentro del aside se encuentra el logo y una barra de navegación de cada
subpágina para poder navegar por ellas.

Y con esta foto se ve la barra de navegación de la página

CSS DE CASAS SOSTENIBLES Y
CASAS ECONÓMICAS

Hemos creado un único archivo .css que sirve tanto para la subpágina de
casas sostenibles como para casas económicas ya que es lo mismo, pero
cambiando el contenido de las casas.
Primero se han creado varias clases e identificadores para poder darles
cierto formato.

Para comenzar se da estilos al body, se define la fuente y el margen del

cuerpo de la página y se establece un relleno de cero y un fondo de color
#f4f4f4.
Seguidamente a #main-header se fija el encabezado en la parte superior de
la página al hacer scroll, se aplica una transición suave en altura, color de
fondo y opacidad y se utiliza flexbox para alinear elementos en el
encabezado.
Al logo se le establece un tamaño, altura y margen.
El contenido del encabezado .contenido_header utiliza flexbox para alinear
y justificar elementos y define un ancho y relleno del 100% menos 40px, y
un relleno interno.
Por otro lado, el texto del encabezado #texto-header establece estilos como
el color, tamaño, fuente y posición, también aplica una transición en
tamaño, altura, fuente y margen y la clase active ajusta el tamaño del texto
cuando está activa.
Los estilos activos (#texto-header.active, #main-header.active) define
estilos adicionales para el encabezado y texto cuando las cases active están
presentes.
Para poner las fotos se configura una cuadrícula de fotos y se definen
estilos para las imágenes y sus contenidos, aplicando una transición. La
clase .casas define el estilo del contenedor de descripción flotante que se
muestra al hacer hover en una imagen.
A los botones de navegación (nav-btn) se les establecen cierto tamaño de
fuente, color o cursor.
En cuanto al menú lateral (nav, menú-lateral, close-btn) se define el estilo
que se muestre al hacer clic en el botón navegación. La clase visible ajusta
la transición de aparición/desaparición del menú. También se define estilos
al botón de cierre.
Se establecen estilos a la lista de enlaces dentro del menú lateral y también
para los enlaces de la lista, como el color, tamaño de fuente y decoración
de texto.

ANEXO:
Informe individual:
Ya tenemos el proyecto muy avanzado y me esta gustando mucho como va
quedando. Esta es la segunda entrega y ya se va viendo el resultado final
aunque quedan cosas por cambiar y mejorar pero estoy segura de que poco
a poco lo sacaremos adelante y quedará una muy buena página.