Vamos a continuar trabajando con esta sección encuentra la casa de tus sueños puedes ver que entre sus
elementos está esta imagen de fondo.
También este botón que está aquí al comenzar con esta nueva sección aquí vamos a abrir el Index un poco
de scroll.
Pensar que tenemos esta sección y que voy a colocar una clase que voy a nombrar imagen contacto abrir
que se le está el portugués es que vas a poner contactocon es decir la página principal más imagen contacto
de esta forma y voy a colocar una imagen de fondo aquí pongo opacaron y Mazz a colocar la imagen o R.L
importante y dos puntos para salirnos de la carpeta de CSS.
Ahí M.G. y poner encuentra puntos JPG si guardamos cambios y abrimos el proyecto que parece un pedazo
de la imagen no aparece toda entonces que se debe de ver de esta forma le hace falta un poco más de
tamaño debe ser un poco más alta pues quiero que sea una altura de 400 píxeles por lo tanto Jaitt +40
Rubem para que sean 400 píxeles resguardamos cambios de nueva cuenta pues el que se va viendo mejor
ahora vamos a posicionar esta imagen aquí gran posición Center Center para que parezca centrada y también
vamos a poner el background sobre el cover y eso va a hacer que la imagen de fondo se vea mejor.
Ahora puedes ver que este diseño esta parte de aquí tiene el contenedor alineado a esta parte entonces
se sale totalmente igual que aquí pero lo que viene siendo las letras deben de estar dentro del contenedor
si abrimos aquí índex.
No le puedes poner aquí contenedor porque entonces cortaría la imagen hasta las orillas.
Puedes ver que la corta y se ve bastante mal.
Entonces tendremos que quitar esto y agregar un extra.
Voy a nombrar contenedor.
Cortamos pegamos aquí abajo e intentamos un poco.
De esta forma puede ser que el contenido se centra en esta parte pero crece lo que viene siendo la imagen
de fondo porque está por fuera del contenedor.
Entonces se va viendo bastante bien.
Siguiente paso es que en este selector voy a utilizar flexiva exhibes tu diseño puedes ver que está
centrado verticalmente lo puedes hacer con Flex Box.
Muy sencillo el display Flex para habilitar Flex Box y poner aquí hecho si guardas cambios puedes ver
que el contenido se va a ver más pequeño pues el que se pequeño y como centrado aquí ahorita lo solucionamos
para hacer que se centre verticalmente utilizamos items Center sólo centrã verticalmente se ve bien
y el siguiente paso queremos que tome todo el espacio disponible o al menos que vuelva a su tamaño original
no porque que quedó centrado y más pequeño aquí podamos ponerle una clase nueva que voy a nombrar contenido
contacto.
Entonces copiamos esta clase aquí pongo contenido contacto y lo voy a poner un flex 1 ahorita explicó
que es este Flex uno el que vuelve al tamaño Flex 1 es lo que se conoce como factor de crecimiento.
Puedes ver que no estaba y el contenido tomaba como cierto tamaño 1 lo que haces detecta cuánto tamaño
hay aquí disponible detecta cuántos elementos hay.
Como solamente uno realiza la división y por ejemplo si hay 1000 píxeles disponibles y solamente hay
un elemento divide en 1000 píxeles entre 1 y le asigna un tamaño de 1000 píxeles a ese elemento.
Si hubiera 2 elementos bueno tomaría 1000 píxeles lo divide entre los dos y detecta que hay 500 y 500
y se los asigna 500 a cada uno.
Es así como funciona muy sencillo en realidad el que se va viendo bien a todo este contenido va a tener
un color blanco todo el texto color Effects para que sea blanco todo el contenido se va viendo bien
y también lo que viene siendo el tamaño del texto debe ser un poco más grande.
Por lo tanto puedes ver que aquí viene un párrafo contenido contacto.
P Foncea es un poco más grande con 1.8 RAM 16 píxeles.
Cualquier cosa más grande en realidad no mucho después de que se va viendo bastante bien lo último que
nos falta es el botón.
Puedes ver que el botón tiene este aspecto que es igual a este de aquí.
Entonces colocamos lo que viene siendo dos clases Class aquí Class botón y botón amarillo y es de nueva
cuenta vamos a ver el poder de estas clases que nos permiten reutilizar y se ve bastante bien.
De esta forma tenemos ya esta nueva sección puede ser que se expanda hasta las orillas pero el contenido
queda centrado.
Gracias a este código de aquí tenemos la imagen que la aplicamos al fondo eso hace que se expanda y
el contenedor nos centro un poco y se ve bastante bien.
Con eso está lista esta sección algo que se me pasó en la anterior fue.
Los iconos.
Puedes ver que no coloques los iconos así que vamos a volver un poco hacia arriba y colocarlos así que
vamos donde el siguiente vídeo.