PÁGINA DE INICIO

ENCABEZADO
1.- En el HTML colocar 2 clases en Header para aplicar únicamente estilos a la
página inicio:
<header class="site-header inicio">

2.- Vamos a la hoja de estilos y añadimos efectos a la anterior clase de estilos

creados. Previamente debemos colocar el enlace de estilos en el encabezado
con la redirección correspondiente.

3.- Creamos un contenedor para centrar el contenido <div class="contenedor">

que va a rodear hasta después de h1 y le añadimos un comentario para
diferenciarlo
4.- Añadimos un nuevo div <div class="barra"> debajo del anterior pero que ira
hasta debajo de nav. Y con esto ya podemos posicionar y con mayor facilidad
con Flexbox

5.- Regresamos a la hoja de estilos y le damos estilos al encabezado a través

de contenidos globales
6.- Habilitamos flexbox en la hoja de estilos y con esto logramos que el logo se
encuentre al lado del menú, añadimos otras propiedades para posicionarlo
mejor. justify-content: space-between; permite alinear a la izquierda y la
derecha

7.- Como hay dos áreas de navegación creamos la clase class="navegacion"

y le damos estilos a los enlaces:

8.- Aplicamos un seudoselector para quitar el espacio hacia la derecha del

último botón

9.- Colocamos el seudoselector hover para aplicar el efecto de color sobre los
botones siguiendo el orden correspondiente.
Si queremos aplicar todos los efectos logrados podemos copiar la clase
“navegación” y copiarla para el menú que se encuentra en la parte del footer.
Esa es la ventaja de las clases que se pueden reutilizar en múltiples elementos.

CAMBIANDO LA FUENTE
https://fonts.google.com/
En nuestra hoja de estilo utilizamos el selector BODY, estando en la página de
googlefonts, seleccionamos la familia LATO y cargamos las siguientes
tipografías: Light 300, Regular 400, Bold 700 y Black 900 seleccionamos el
código que nos emite y lo copiamos debajo del título:

Por último, copiamos la familia de la tipografía en la hoja de estilo

NORMALIZE
Para evitar que cada navegador añada sus propios estilos y afecte el diseño se
debe normalizar los estilos de css. Normalize es una librería que estandariza la
visibilidad del diseño en todos los navegadores. Nos vamos a
https://necolas.github.io/normalize.css/, descargamos y copiamos el contenido
en un nuevo archivo denominado NORMALIZE.CSS y pegamos todo el
contenido. Ahora añadimos el nuevo archivo en nuestro encabezado de HTML.

PIXELES Y REM
La razón del cambio es porque la visibilidad del sitio se puede ver en diferentes
dispositivos y los em hacen que los contenidos se vean mucho mejor. En la
hoja de estilos aun inicio colocamos la etiqueta html y colocamos el tamaño
más apropiado para el tamaño de las letras
Modificamos las medidas en el menú de navegación de acuerdo a lo siguiente:

Para que la tipografía de los contenidos no se vea tan pequeña añadimos un

font-size: 1.6rem; en la parte del body

POSICIONANDO EL TEXTO SUPERIOR EN LA PARTE INFERIOR

Debemos crear una clase para alinear los hijos que sería la barra y el h1.
Creamos una segunda clase denominado class="contenido-header" dentro la
clase contenedor
Ahora aplicamos el flexbox antes de la barra de acuerdo al siguiente detalle:

Para que el texto se visibilice mejor por el color que lleva y le damos un
posicionamiento de acuerdo a la imagen:

Por último, para evitar problemas con los tamaños de letras es importante
definir en “globales” un sistema de tamaños de acuerdo al siguiente detalle:

SECCION NOSOTROS
Añadimos la clase contenedor y se aplica los estilos de centrado ya definidos

Añadimos la clase sección en utilidades en la hoja de estilos y en el HTML

para dar un espacio más apropiado a las 3 columnas
El siguiente paso es crear más HTML para aplicar flexbox, creamos un
contenedor para los div de las columnas a través de una clase div
class="iconos-nosotros" que será el padre para los 3 iconos. Aplicamos
también una clase para cada div que se llamará icono tal como se observa en
la imagen:

Nos vamos a la hoja de estilos y añadimos los siguientes elementos:

Para mejorar y colocar de manera general el interlineado colocamos un
interlineado añadimos line-height: 2;

Ahora modificamos las minúsculas a mayúsculas el nombre de los iconos

Para el título de MAS SOBRE NOSTROS añadimos nuestros frameworks en la

clase h2 bajo la siguiente estructura: class="fw-300 centrar-texto"

Ahora creamos los frameworks respectivos dentro de utilidades, la ventaja de

este procedimiento es que podremos reutilizarlos en otras secciones.
CASAS Y DEPARTAMENTOS
Copiamos class="fw-300 centrar-texto" en el título de Casa y Departamentos
y añadimos también el contenedor de acuerdo a las propiedades anteriormente
definidas

Creamos las cards y para posicionar cada elemento creamos un div para
posteriormente aplicar flexbox con class="contenedor-anuncios", también
debemos colocar una clase llamada anuncio a cada div y una nueva clase
para el texto de la cards denominado class="contenido-anuncio"

Ahora añadimos los estilos a las clases creadas

Para mejorar el tamaño de las imágenes aplicamos la etiqueta img en la
categoría GLOBALES lo que permitirá que las imágenes sean responsive

Para lograr el espacio entre las cards añadimos justify-content: space-

between;

Añadimos borde a la tarjeta o cards

Ahora trabajamos en el padding y el espacio dentro de la cards

Daremos estilo a los botones y precios en los anuncios, comenzamos con los
precios, creamos una clase class="precio" y la añadimos a los restantes 2
precios
Creamos el estilo correspondiente

Trabajamos los botones y creamos las clases correspondientes

Creamos los estilos para los botones en la hoja de estilos después del apartado
UTILIDADES y antes de HEADER

Antes de aplicar display: inline-block debemos añadir un snipe en el inicio de

css con la etiqueta html encima de Font size, este código evita que no se
aumenten los pixeles cuando el padding se incremente y se conoce también
como box-sizing.
Centramos los textos del botón y creamos una utilidad para display block la
cual también debemos añadir en los enlaces de html referentes al botón azul
para que funcione

Para mover a la derecha el botón VER TODAS sin afectar a los demás
botones, debemos crear una clase ver-todas y rodear el botón amarillo
Al final añadimos los estilos correspondientes:

Añadiremos los iconos faltantes utilizando la etiqueta de las listas utilizando la

clase iconos-caracteristicas y copiamos 2 veces después de precio y antes
del botón correspondiente a la casa en venta

Añadimos los estilos correspondientes antes de los estilos de ver.todas de

acuerdo a la imagen:
IMAGEN DE CONTACTO
Primero creamos la clase "imagen-contacto"

Aplicamos los estilos

Para centrar los textos dentro la imagen añadimos una nueva clase

Utilizamos flexbox

Creamos una nueva clase

Añadimos el estilo correspondiente denominado flex 1 que se considera como

factor de crecimiento distribuyendo proporcionalmente los contenidos dentro la
imagen
Finalmente, solo falta el efecto sobre el botón para ello copiamos el estilo que
añadimos en el botón azul class="boton boton-azul"

NUESTRO BLOG
Creamos por fuera un div que contenga una class sección-inferior para poder
trabajarlo en css y un contenedor para centrarlo que rodeara todo incluso los
testimonios, añadimos las imágenes. Debemos también añadir la clase blog
para trabajar con css y añadir la sección class testimoniales.

Aplicamos el css correspondiente

El siguiente paso es modificar en el index las entradas de blog, article debe

tener una clase class="entrada-blog" y añadimos un div que va a rodear la
imagen class="imagen". Por último, también creamos un div para el texto que
dirá class texto-entrada. Todo esto porque aplicaremos flexbox
Ahora aplicamos los estilos css

Para simular el efecto de enlace sobre los títulos del texto del párrafo del blog
regresamos al archivo HTML con la etiqueta a
Para colocarlo en negro y sin subrayado trabajamos con .texto-entrada a en la
hoja de estilos añadiendo lo siguiente:

Para la línea inferior del título trabajamos con un seudoelemento que no se

puede seleccionar con las siguientes características: (para más información
visita https://developer.mozilla.org/es/docs/Web/CSS/Pseudo-elements )

Para cambiar el color de las etiquetas em que son 8, las seleccionamos y la

cambiamos por spam

Aplicamos estilo y los textos seleccionados cambiaran de color

Por ultimo añadimos class="fw-300 centrar-texto" para centrar el título de
nuestro blog y el de testimonios y la etiqueta sección como se observa en la
grafica

TESTIMONIOS
Creamos una clase testimonios que encierre al blockquote y el autor

Ahora le añadimos los estilos css correspondientes

FOOTER
Le añadimos una clase al footer class="site-footer seccion" y creamos un
elemento padre tanto para la navegación como para el párrafo y posicionarlo
con flexbox
Aplicamos su hoja de estilos

Para afectar los derechos de autor y quitar el espacio que aparece debajo,
creamos una clase class="copyright"

Aplicamos su estilo

PÁGINA DE NOSOTROS
Realizamos las modificaciones necesarias eliminando y reutilizando las partes
que nos servirán de página de inicio. Ahora comenzamos a utilizar los estilos:

Aplicamos flexbox y css grid para el estilo y posicionamiento de las dos

columnas con el siguiente estilo:
PÁGINA DE PROPIEDADES
Creamos el archivo anuncios.html realizamos los cambios necesarios y
añadimos 3 casas más con diferentes propiedades, al visibilizar los cambios las
imágenes se encuentran en 6 columnas y la arreglamos por medio de la hoja
de estilos.

MOSTRAR UNA PROPIEDAD

Creamos un nuevo archivo llamado anuncio.html, copiamos en contenido de
Nosotros borramos y dejamos solo el encabezado y pie, añadimos en el
archivo las siguientes clases:

Añadimos los iconos de las propiedades por medio de las listas anteriormente
creadas
Controlamos el espaciado de los iconos para que ocupen todo el espacio y flex:
1 para no comprimir en exceso el espaciado:

Para que estén alineadas el precio y los iconos colocamos el siguiente estilo

Mejoramos el contenido a través de la creación de una nueva utilidad dentro de

nuestro apartado de “utilidades” en la hoja de estilos lo que permitirá una mejor
visibilidad del párrafo.

PAGINA BLOG
Copiamos todo el contenido de la página Nosotros y eliminamos todo lo que
está dentro de main, eliminamos también img y colocamos el h1 dentro de
main.

Abrimos la página index y copiamos las 2 entradas (article) y los pegamos

debajo de h1, copiar una vez más para tener en total 4 artículos.
Modificamos el enlace y cambiamos a donde nos corresponda con
entrada.html
Del enlace a href, Realizamos similar proceso en la página del index.

PAGINA ENTRADA
Creamos la página entrada.html y copiamos el contenido de la página anuncio
pues es muy similar a de la entrada, modificamos el texto del encabezado, la
imagen destacada, añadimos la clase texto entrada, copiamos el texto
correspondiente del escritor de la página index y colocamos 2 párrafos más
para simular un artículo de blog.

PAGINA CONTACTO
Creamos la página contacto.html y copiamos dentro de ella todo el contenido
de la página entrada, eliminamos parte del contenido y añadimos un h1 e img
para que nos quede así:

Añadimos un main y un h2 para definir los contenedores y dentro de él,

creamos los 3 formularios, en el caso del primero añadimos los campos
respectivos y luego aplicamos css para que los mismos se coloques de forma
proporcional.
Creamos el segundo formulario y añadimos la opción fieldset que sirve para
agrupar los elementos de cada formulario

Creamos el tercer formulario y le añadimos un botón para el envió

correspondiente y para aplicarle css más adelante.

APLICANDO ESTILOS A LOS FORMULARIOS

Comenzaremos dándole estilos a los inputs de los 3 formularios
Añadimos estilos a información personal, regresamos al html y creamos una
clase para el form class="contacto", justo debajo del texto, Llena el formulario
de contacto y aplicamos los siguientes estilos.

Ahora queremos afectar los botones de selección de Contacto, para ello

creamos en el html un div class="forma-contacto" debajo de Como desea ser
contactado añadiendo el siguiente estilo:

Vemos que no existe una buena visibilidad y creamos un selector de atributo

nuevo que diga input
Para terminar, trabajamos sobre los efectos del botón submit, le quitamos el
borde y añadimos un efecto hover sobre el botón.

RESPONSIVE WEB DESING

HEADER
Colocamos un witdh en el contenedor pues chocan las orillas

Comenzamos con los botones en especial con VER TODAS para que crezca al
100%, los demás botones no crecen porque están atorados gracias al grid
Aplicamos Media Querys para mejorar la apariencia de los botones respecto de
sus contenidos

Trabajamos también la barra pues están pegados uno al lado del otro, la idea
es que el logo este arriba y la navegación abajo. Eliminamos y movemos
contenidos para que nos quede de la siguiente forma:

Centramos el contenido de logo y navegación y aplicamos un media query para

que el contenido se vaya a la izquierda cuando estemos en un dispositivo más
grande.

Ahora trabajamos la parte del menú, afectamos la posición t también el tamaño

de la tipografía.
SOBRE NOSOTROS
Vamos a mejorar los iconos de esta sección reorganizando la estructura de la
siguiente manera:

CASA Y DEPARTAMENTOS
Aplicamos Media Query para que no funcione en móvil y se vea bien en grande
con la siguiente estructura:

BANNER
SECCION INFERIOR
La rodeamos con Media Query y la estructura nos quedara así:

OPCION B: Si queremos que las notas del blog sean más grandes podemos
ajustar la estructura de los media uqerys de la siguiente forma:

FOOTER
NOSOTROS

MENU HAMBURGUESA
En el index colocamos un div con la clase mobile-menu y este debe tener un
enlace hacia navegación id añadiendo el símbolo de gato y creamos este id
como navegación la idea es que cuando hagamos clic se enlace a esta
sección, colocamos la imagen teniendo al final la siguiente estructura:

Para mejorar la apariencia en el área de navegación insertamos los siguientes

estilos:
Aunque es un poco ortodoxa la navegación pues tenemos que eliminar
#navegacion de la barra de dirección y actualizamos la página funciona, más
adelante la mejoraremos con JavaScript. Por último, copiamos los menús
creados a las páginas restantes: