Cuando hacemos clic en estos enlaces de aquí vamos a abrir un template que va a ser este de aquí puedes
ver que tenemos el título de la casa una imagen bastante grande para que las personas puedan ver y después
tenemos el precio de este lado sus características y una descripción vamos a abrir lo que viene siendo
nuestro código aquí vamos a poner en anuncios un poco de scroll hacia arriba y tampoco de scroll hacia
abajo entonces tenemos que ver propiedad vamos a seleccionar todos los enlaces se selecciona si presionas
comande o controlde que vamos a enlazar hacia un archivo llamado anuncio anuncio o punto HTML entonces
todos nos van a llevar al mismo lugar al mismo archivo no hay problema ahorita al final hacemos un repaso
de por qué y cómo puedes hacer más dinámico anuncio apuntó HTML y vamos a abrir también nosotros que
este es un buen templete para el inicio por lo tanto copiamos y pegamos entonces si das click por ejemplo
aquí en alguno de estos te lleva al template de anuncio apuntó HTML con el contenido de nosotros.
Primer paso vamos a limpiar el contenido previo eliminamos todo dejamos nada más el joderia el Führer
vamos a colocar aquí una H1 y puede ser que no coloque ningún tipo de fondo wait €300 y alinear centrar
texto y le damos un nombre a esta propiedad por ejemplo casa en venta en la playa que no pusimos ninguno
pero bueno bueno casa en venta frente al bosque será un poco más relacionado a nuestros anuncios y después
podemos ver que si abrimos esta parte puede ser que esta imagen toma todo el contenido disponible es
por eso que no coloques ningún Dip ni nada para que no quede centrado.
CMG ponemos aquí y M.G. La imagen que voy hace más destacada apuntó JPG imagen anuncio.
Si guardamos cambio si abrimos el proyecto puedes ver que tenemos una imagen que toma todo el espacio
que haya disponible y se va a ver de esta forma porque si recuerdas habíamos puesto ni este pequeño
código que hace que la imagen tome máximo todo el espacio que hay disponible pero no se pase de ahí
y se ve bastante bien.
Siguiente paso es que puedes ver que tenemos lo que viene siendo el precio y también los iconos por
lo tanto vamos a comenzar a trabajar en esa parte vamos a definirle sus Moine.
Por lo tanto Mayne y algunas clases vamos a poner el contenedor y también la sección que es una utilidad
que creamos y vamos a crear una clase llamada contenido centrado.
Ahorita la explicamos de qué se trata esta clase.
Después vamos a crear un que va a decir resúmen y ponemos los humean propiedad que nos envió a medias
y llevamos a un párrafo que va a decir con una clase precio aquí ponemos tres millones y después vamos
a crear los iconos y los iconos los vamos a copiar del índex usar un poco de scroll es que aquí tenemos
los iconos vemos todo esto y lo pegamos aquí vamos a tener el precio y los iconos si guardas cambios
si abres el proyecto puedes ver que los iconos se expanden totalmente y toman todo el espacio que haya
disponible.
Enseguida lo solucionamos y después de este Dib tenemos el resumen de propiedad va a crear un comentario
ponemos un comentario y vamos a crear aquí lo que viene siendo la descripción que vamos a copiar de
nueva cuenta un poco del orden Ipsum pegamos aquí ponemos upe y cerramos el pie y ponemos impe y cerramos
el PE entonces guardamos cambios de nueva cuenta abrimos el proyecto y tenemos la descripción.
El primer paso que voy a hacer es aquí por ejemplo puede ser que coloque iconos características este
selector ya lo tenemos definido aquí pero puedes ver que está tomando todo el espacio disponible.
Lo que voy a hacer es acotarlo un poco y decirle Max Willett 500 píxeles queda ahí no se pase que sea
máximo 500 píxeles eso no nos va a afectar lo que viene siendo la página principal del que se sigue
viendo bien.
Entonces se va a ver un poco más pequeño más comprimido porque de otra forma quedaban los iconos y dos
letras muy separados y tal vez se iba a prestar a que no iban a entender muy bien las personas de qué
se trata.
El siguiente paso es que puedes ver que lo que es el precio y los iconos deben estar en el mismo nivel
por eso que yo creé este resumen propiedad.
Por lo tanto vamos a dar scroll y puedes ver que aquí tenemos lo que son las páginas internas que vamos
a ponerle a un comentario que diga nosotros es el código de nosotros y este va a ser el de anunció anunció
y solamente ponemos resúmen propiedad y de nueva cuenta.
Puedes ver que si abrimos el diseño uno está la izquierda otro a la derecha ya podría se puede decir
que ya es algo que deberías hacer.
Display Flex y Estefi content spaces between de esa forma se coloca uno del lado izquierdo otro del
lado derecho.
Ahora puedes ver que aquí se ve un poco extraño nos pasó lo mismo que había pasado anteriormente si
recuerdas en la imagen de contacto imagen contactos y recuerdas tuvimos que poner este Flex 1 porque
el contenido se comprime.
Entonces le ponemos un flex 1 para que crezca nuevamente entonces vamos a darle scroll hacia arriba
vamos a poner iconos características y aquí nada más le ponemos Flex 1 para que crezca pero siempre
siendo limitado por estos 500 después que vuelve a su tamaño original.
Ahora no está bien alineado porque puede ser que el precio quede así como muy arriba.
Entonces vamos a dar vuelta hacia abajo estamos viendo como arriba para abajo pero bueno ya es lo último
items Center recuerda intense alinea verticalmente mientras que yo estoy contén horizontalmente y parece
ser que se ve de esta forma y queda bastante bien.
Ahora este contenido queda como muy ancho en realidad de leer está como mucho espacio de aquí hasta
acá.
En el caso de nosotros no hubo problema porque tenemos esta imagen aquí que apoya hace que sea más fácil
de leer en anuncios.
No hay problema tenemos estas estos Kars pero por ejemplo un anuncio de aquí es un poco pesado de leer
cuando lo ves tan ancho.
Es por eso que yo he definido voy a cerrar este archivo en este y éste es definido esta clase que dice
contenido centrado.
Aquí tenemos un contenedor de 1200 píxeles pero podemos hacerlo un poco más pequeño para que no tome
tanto.
Por lo tanto vamos a las utilidades vamos a crear una más un poco de scroll y aquí vamos a poner el
punto contenido centrado y vamos a ponerle un Max Wit de 800 píxeles y queda ahí no se puede ser queda
más al centro más fácil de leer y se ve mucho mejor.
Estaremos utilizando esta clase para las páginas restantes blogs y contactos así que por eso creamos
una vez.
Después ver que se ve bastante bien lo importante es la casa y puedes ver que tomas la mayor cantidad
de espacio y se ve bastante bien lista una sección más puedes ver que estamos avanzando muy rápido de
nueva cuenta dignísima a tomar más tiempo que las otras pero una vez que terminas la de inicio siempre
se acelera un proceso o siempre se acelera el proceso un poco más.
Algo importante es que todos estos anuncios se conoce como algo estático puedes ver que todos nos llevan
hacia la misma casa para hacerlo un poco más dinámico usualmente se requiere el uso de una base de datos
y la creación de un sistema de administración que con la parte o con lo que veamos de PHP y Meucci cual
podrá realizarlo sin ningún problema con eso está lista esta parte el siguiente vamos a continuar con
el blog así que continuamos en el siguiente video.