Vamos a comenzar a darle un poco de estilos hacia esta parte al final del video tendremos esta parte
finalizaba lo que Cerqueda así que estaremos trabajando con él nos abrió el HTML aquí voy a colocar
un par de clases Class y vamos a ponerle Sait Gelder y voy a agregar una segunda clase que sea mi inicio.
Por qué lo hago de esta forma porque puedes ver que el Gelder en la página principal es de esta forma
es de diseño y abrimos los otros por ejemplo nosotros puedes ver que el Jader eres un poco diferente
estaremos reutilizando algunas partes puedes ver que lo que es el logo y el menú son iguales pero existen
otras que son diferentes y es una técnica que te mostraré.
Por lo tanto quiero agregar dos clases para aplicarle estilos únicamente hacia la página de inicio.
Entonces tenemos 12 lectores aquí vamos a ver lo que se está expuesto CSS y algo que a mí me gusta hacer
es agregar comentarios y pequeños bloques me gusta organizar mi código de arriba hacia abajo pero también
agregar algunos comentarios y comentase en CSS.
De esta forma diagonal y luego pones un asterisco y aquí pones lo que quieres agregar por ejemplo Gelder
y cierras el comentario con asterisco diagonal y aquí vamos a poner nuestro selector.
Puedes ver qué dice soit Gelder y luego inicio.
En este caso ver que son dos clases en el mismo nivel 6GB.
Este va a ser la primera pero recuerda tenemos inicio inicio.
Puedes ver que estoy aplicándoles dos clases o un elemento que tenga las dos clases cuando tengas dos
clases juntas de esta forma y quieras darle estilos a las dos.
De esta forma es la que lo haces en todo el proyecto.
Esta es la única vez que vamos a utilizar dos clases pero igual quería mostrarlo y vamos a ponerle un
background image puedes ponerle patrones y ponerle R.L y por ejemplo para agregar la imagen de fondo.
Puedes ver que tengo aquí imágenes y tenemos una imagen que dice Gelaber entonces Jader apuntó JPG.
Esta es la imagen ahora lo que viene siendo en mi hoja mi hoja de estilos está quien se S.S. y quiero
abrir y M.G. Si pongo y M.G. aquí va a abrirme como si tuviera una carpeta de imágenes dentro de CSS
pero están en el mismo nivel.
Por lo tanto tengo que salirme de este directorio es muy sencillo en realidad solamente dos puntos diagonal
y luego entras ahí MG y después agregas Gelder punto JPG.
Entonces si guardas cambios ves el proyecto puedes ver que poco pero se ve una imagen aquí se ve como
muy pequeña nada más una pequeña porción.
Si vemos el diseño final puedes ver que esta imagen es bastante grande podemos hacer que este tamaño
que lo que viene siendo nuestro Gelder en la página de inicio sea más alto.
Para ello existe una propiedad que se llama Jaitt y la podemos poner ID y digamos que le ponemos 800
píxeles.
Entonces guardamos cambios si puedes ver que coloca una imagen bastante grande.
Ahora 800 píxeles en algunas pantallas puede ser que sea mucho en algunas otras puede ser que sea menos
por ejemplo aquí puede ser que tenga un poco de scroll.
Existe una función que va detectar el tamaño de tu pantalla y va a ser que la altura sea de ese tamaño.
Entonces vas a poner de 100 BH.
Esto quiere decir BYU por Jaitt.
Es decir la altura de la pantalla pues puedes ver que esto va a cubrir lo que viene siendo la altura
de mi pantalla y eso es lo que queremos para esta página de inicio que sea más alta.
Ahora abrimos de nueva cuenta el proyecto BYU por ahí es un poco extraño porque toma la altura de la
pantalla por ejemplo si yo pongo o si tuviera una altura de este tamaño digamos de aquí aquí esta va
a ser por Jaitt muy pequeño en realidad.
Entonces le podemos decir ok.
Mide el 100 por ciento de la pantalla pero mínimo tienes que tener esta altura porque de otra forma
nuestro diseño se va a ver mal se va a ver feo como en este caso puedes ver que se ve un poco cortada
las letras del mensaje que tenemos aquí y para ello existe una propiedad que se denomina Jaitt milka
y le puedes poner aquí digamos 600 pixeles.
Qué hace este mensaje.
Bueno dice Ok aplicarle un bio por geis que tome toda la altura pero si el usuario tiene una pantalla
muy pequeña mínimo van a medir 600 píxeles entonces esa es su altura o su tamaño mínimo pero máximo
va a medir toda la pantalla.
Puedes ver que nuestra imagen no se ve como muy bien lo que es la casa lo importante es la casa en realidad
queda mucho espacio aquí entonces podemos posicionarla ahora puede ser que estoy pensando vagaron.
También podrías ponerle Baglioni Mazz backgrounds un poco más genérico porque vagaron puedes ponerle
un color de fondo es decir aquí Red 2.El Red y poner un color rojo.
Pero si le pones Varoni Mazz solamente le puedes poner imágenes desde el que se ve la imagen pero si
pones RET no se va a ver el color rojo porque Red no es una imagen.
Entonces podés ponerle Bagram y éste acepta colores e imágenes o Granny Mazz que solamente toma imágenes
o existe también Bagram color que solamente toma colores.
Lo voy a dejar como Bargnani Mazz y vamos a posicionar esta imagen para posicionarla se utiliza una
propiedad que se conoce como gran posición y existen muchas propiedades que le puedes pasar pero yo
quiero utilizar Center y Center es decir Muéstrame la imagen desde el centro y expande a todo lo que
es el contenido.
Ahora puedes ver que la casa ahora si se ve un poco más complicado de ver si abrimos lo que es el diseño
puede ser que aquí se ve completa y aquí se ve no se sabe qué es exactamente.
Podemos decirle muéstrame esta imagen pero que solamente tome toda la altura y ancho que haya disponible
y para ello también existe una propiedad que se llama vagaron 6 y puedes poner aquí cóver es una propiedad
que va a forzar que tome todo el espacio disponible tanto en altura como en ancho pero siempre guardando
las proporciones y puedes ver que se ve bastante bien la imagen.