Vamos a comenzar a darle estilos a los que viene siendo nuestro Gelder porque puedes ver que nos hace
falta lo que es el color de fondo.
Va a ser muy sencillo en realidad así que no sabría stays saber un poco de scroll hacia abajo que tenemos
Gelder 6GB y luego inicio vamos a crear una clase únicamente cuando tengamos el 6GB 6GB y abrimos llaves
por lo tanto lo que esté aquí adentro aplica únicamente cuando tenemos Eiger como aquí un poco más para
arriba más para arriba un 6GB.
Pero cuando tengamos tantos Eiger como inicio se aplica este otro de aquí.
Entonces por eso lo estamos haciendo así y lo único que va a tener es que va a tener un gran color de
3 3 3 que es en color gris y también un poco de Padín un Reem arriba 0 a la derecha 3 abajo y 0 a la
izquierda guardamos cambios abrimos el proyecto y que se ve de esta forma y eso no afecta lo que tenemos
en el inicio porque si recuerdas este debe tener dos clases entonces se va a ver de esta forma y se
ve se ve bastante bien en realidad entonces puedes ver esta técnica que a veces se utiliza muchas veces
en muchos sitios son así asá tienen un Geddes de una forma y en las páginas internas es de otra forma.
Es algo que puedes lograr de esta forma muy sencilla hacer un poco de scroll hasta abajo y vamos a crear
un comentario que va a decir aquí que el código CSS de aquí en adelante es para las páginas internas
de nueva cuenta.
Muchas personas les gusta por ejemplo crear una hoja de estilos para nosotros una hoja de estilos para
contacto.
No es que sea mucha mucha ventaja porque en realidad es poco el código que cada página interna va a
tener.
Entonces yo usualmente prefiero colocar todo en una sola hoja de estilo porque de esa forma solamente
mantengo una hoja de estilo si tuvieran múltiples páginas pues podría llegar a tener 10 o 15 hojas de
estilo no sabría.
Siendo la página principal para hacer que creamos este contenido nosotros este va a ser el padre del
contenido.
Por lo tanto podríamos utilizar aquí contenido nosotros y poner display Grit como vimos display Flex
como vimos anteriormente un justificante entre muchas otras cosas pero otra otro estándar que está últimamente
grita y grita es el nuevo estándar.
Junto a Flex Books para crear sitios web y en realidad lo hace muy sencillo junto a Flex Books puedes
ver que en el diseño final tenemos dos secciones.
Ambas miden lo mismo es decir del lado izquierdo tenemos la mitad.
El otro tiene la otra mitad y en Greed se utiliza algo llamado columnas por lo tanto vamos a poner aquí
Grit template Colombes y tal vez sea un poco extraño pero aquí es donde defines el Layo es decir digamos
50 50 50 por ciento para la imagen 50 por ciento para el texto y si guardas cambios puedes ver que el
contenido se va a posicionar automáticamente se quiere inspeccionar y me coloco sobre contenido a ver
que dice Grit template columns.
Las columnas son una columna aquí y otra causa uno de izquierda y otro a la derecha.
Aquí por ejemplo le puedes poner 20 por ciento y 80 por ciento o digamos 100 pixeles y lo que viene
siendo el resto digamos 90 por ciento.
Puedes jugar con estos valores solamente que recuerda si por ejemplo no colapso aquí estoy colocando
display grid en el padre y tengo dos elementos hijos por lo tanto tengo que tener dos columnas y solamente
agregó una se ve extraño no es nada malo aplicar 100 pixeles.
Si tengo por ejemplo 3 columnas y agregó Muchas más columnas aquí tampoco va a funcionar por lo tanto
tienes que revisar cuantos elementos hijos hay y de ahí definir tus columnas.
Nuestro caso va a ser 50 por 150 por ciento.
Ahora si ese grieta agrega también si le puedes poner un F.R una Ferrey y tal vez galvánica es un F.R
bueno se quiere decir una fracción.
Básicamente lo que hace es tomar todo el contenido y los divide una fracción para ti y la otra fracción
para ti son dos fracciones por lo tanto mitad y mitad.
Esta es una alternativa a 50 por ciento 50 por ciento.
Existe otra opción que se llama repeat y puedes ganar por ejemplo dos que me dan 50 por ciento y puede
ser que el resultado es exactamente el mismo se ve confuso si pero créeme que con la práctica podrás
entenderlo y te va a ahorrar mucho tiempo.
Finalmente también existe una F.R y bien podría ser repeat 2 de 100 pixeles y sería de esta forma voy
a dejarlo aquí como repite 2 una Ferre puede ser que son como si fueran dos columnas de 50 50.
Ahora anteriormente en Flags Books cuando posicionaban los elementos con un poquito de separación agregamos
un margen Riet en lugar de poner margenes o PADI en cualquier cosa.
Si ese es Grit identifica ese problema y agrega una propiedad llamada Grid con un gap y aquí le pones
por ejemplo 20 píxeles que será igual a 2 fring y eso nos va a agregar separación entre cada columna
quiero que tenga una separación y puede ser que nos crea la separación y la verdad bastante bien bastante
fácil de utilizar puede ser que con solamente tres líneas podemos posicionar elementos de esta forma
y tenemos mucho más control que por ejemplo Flex Box y también que anteriormente con float finalmente
tenemos texto nosotros sí tenemos este blog se ve un poco diferente puede ser que por default se ve
de esta forma queremos que se vea si entonces primero vamos a poner aquí texto nosotros luego el blog
4 sanarlo y a un fondo Huay va a ser una fuente más gruesa así que le ponemos 900 podríamos crear una
utilidad.
Como vimos anteriormente pero solamente se va a utilizar este 900 aquí entonces Foncea es también 2
Rubem para hacer un poco más grande un margen de cero por default tiene un poco de margen del lado izquierdo
y un par de digamos tres Rubem arriba y cero si guardamos cambios que se ve de esta forma eliminamos
el margen el pequeño margen que había del lado izquierdo por eso resetean el Marien a cero y agregamos
un poco de Padín arriba y abajo arriba y abajo pero si se ve de esta forma ahora se ve un poco desbalanceado
porque aquí tenemos espacio arriba y abajo no hay nada hay dos opciones o le agregamos por ejemplo un
Padín hacia abajo nada más es decir arriba cero a la derecha 0 abajo 3 Reem y a la izquierda cero que
queda un poco más balanceada aquí podría ser bien un Reem queda un poco mejor balanceado el texto aquí
el espacio abajo y arriba es el mismo o eliminamos un poco de texto.
En mi opinión creo que de esta forma se ve bien así que también es un detalle importante.
Entonces puedes ver que bien se ve la página y la verdad es que tomó muy poco ya tomar o hacer esta
página debido a que ya tenemos una buena cantidad de clases y de código previamente escrito con eso
está lista esta sección en el siguiente video vamos a continuar ahora con anuncios así que veámoslo
en el siguiente video.