Continuamos trabajando con el proyecto y vamos a darle estilos a lo que viene siendo el menú puedes
ver que esta barra superior tiene el logo del lado izquierdo.
El menú del lado derecho y es por eso que anteriormente creamos esta barra porque estaremos utilizando
algo llamado Flex box.
Es el nuevo estándar para posicionar elementos junto a algo llamado CSS Grit que también estaremos utilizando
un poco y puede ser que tenemos toda esta barra y tenemos este enlace y después así es como funciona
Flex Box tienes tu barra aplicás Flex Box y solamente afecta al primer nivel que vendría siendo este
a este NAB y eso nos va a permitir posicionar lo que viene siendo el logotipo del lado izquierdo y el
menú del lado derecho.
Entonces vamos a verlo vamos a copiar esta barra y tenemos que poner punto barra y militas Flex Box
poniendo Display y logo Flex de esa forma le dices ok.
Todo lo demás tratarlo como es.
Existen elementos que se conocen como inline.
Otros como blog pero esta parte de aquí en la barra quiero utilizar Flex y de esta forma lo habilitã
si lo colocas únicamente en este elemento y puedes ver que por ejemplo una vez que guardas cambios coloca
lo que es el logotipo del lado izquierdo y el menú al lado derecho.
Pero tenemos que posicionarlo un poco mejor.
Puedes ver que el diseño está del lado derecho.
Existen algunas propiedades para alinear horizontalmente vamos a poner aquí Estefi Content y existen
diferentes propiedades.
Voy a hacer un poco de espacio aquí voy a colocar un poco más hacia abajo voy a minimizar esto.
Ahí creo que se va a ver bien este lo voy a cerrar.
Entonces vamos a poner aquí yo estoy contento y vamos a poner Flex en solo un poco extraño este fin.
Pero si guardas cambios puedes ver que lo va a posicionar del lado derecho en algunos casos tal vez
eso quieres posicionar el elemento del lado derecho así como existe Flex existe estar.
Este es el de foll por lo tanto da igual si lo tienes o no. No hay ningún cambio.
Entonces si pones display Flex no pongas Flex restart.
Así de esta forma porque es el de fona entonces no cambia nada de nueva cuenta Flex Gym hacia la derecha
Flex start hacia la izquierda y también existen otro par de propiedades muy comunes por ejemplo Center
para mostrar el contenido al centro y también por ejemplo puedes ver que en el diseño queremos el logotipo
del lado izquierdo y lo que viene siendo el menú del lado derecho.
Existen unas propiedades llaman Espais puedes ver que hay tres opciones poner una Arrom si guardas cambios.
Esto es lo que hace es dejar un espacio aquí y ese mismo espacio que deja aquí lo deja en esta parte
aquí también y acá también.
Entonces va a distribuir los elementos de forma proporcional y dejar cierto espacio el otro es Espais
ibili y esto es lo que hace es similar al otro.
También deja la misma cantidad de espacio aquí aquí y acá el que nos interesa es el Space Between.
Este va a permitirte alinear uno a la izquierda y otro a la derecha que se ve bastante bien.
Ahora si vemos el diseño que estamos tratando de recrear puedes ver que para empezar aquí hay un poco
de espacio hacia arriba eso lo vas a lograr usualmente de dos formas existen dos muy comunes una es
margine pero vamos a ver que por ejemplo si le pones un margen digamos margin top.
Esto quiere decir margin top Marien hacia arriba es decir la separación arriba digamos que le pones
30 píxeles guardás cambios puedes ver que eso nos genera una línea aquí nos genera una línea porque
básicamente estamos en la barra y el 6GB es parte de este contenido por lo tanto agregamos un marino
y eso empuja todo el contenido hacia abajo la que nos va a servir para esto es un axioma Padín top top
elimina lo que es el espacio y se agrega una separación aquí que se ve bastante bien un poquito más
adelante que estemos trabajando con los botones puedes ver que tenemos algunos botones veremos Paddy
encimar y más a fondo.
Ahí es donde se van a explicar un poco mejor.
Pero básicamente puedes abrir este estudio Padín Tov significa como espacio hacia adentro del elemento
mientras que el margenes la separación con otro elemento hacia afuera.
Así lo podemos dejar de momento ahora puedes ver que tenemos aquí una navegación aquí abajo tenemos
otra navegación entonces para no utilizar la etiqueta como tal del NAP podemos definirlo una clase y
ponerle Clas y ponerle en navegación y de hecho voy a utilizar la misma clase porque el diseño es exactamente
el mismo aquí abajo entonces vamos a abrir aquí Stiles a poner aquí un comentario nuevamente sin navegación
que la clase explica exactamente qué es este código.
Voy a poner aquí va a ser más fácil de ver en esta parte aquí punto navegación y voy a darle estilos
a los enlaces.
Ahora a mí me gusta mucho utilizar esta técnica que te estoy mostrando puedes ver que tengo el scroll
hacia arriba una clase que he definido define una clase y después selecciono los elementos que son hijos
de esta clase en lugar de por ejemplo darle aquí una clase a cada uno de ellos clase enlace a mí me
gusta más bien crear por ejemplo un selector para el elemento padre y después seleccionar los hijos
por medio del nombre de su etiqueta HTML.
Creo que es una muy buena forma y el código sigue viéndose organizado y se sigue viendo bien.
Ahora puedes ver que en el diseño tenemos colores blanco vamos a poner aquí existen diferentes formas
en las que puedes colocar colores aquí por ejemplo pones color puedes utilizar UIT-T y se va a colocar
un color blanco y puedes ver que dice Guayas. que se coloca blanco.
Si le das eliminar aquí pones dos puntos y luego espacio empiezan a aparecer muchos colores todos estos
colores son los que puedes utilizar y son soportados por el navegador existen una gran variedad ahora
debido a que estos colores usualmente son muy intensos casi no se recomienda usarlos.
Existen otras opciones.
Si lo voy a dejar porque es color blanco y solamente hay un blanco no pero por ejemplo si inspecciona
tu código las inspeccionar inspecciona este enlace puedes ver que tiene color y si das clic en el recuadro
del color te aparece este elemento que se conoce como color Piquer.
Aquí vas a encontrar diferentes opciones para el color blanco.
Puedes ver que en hexadecimal es este valor por lo tanto puedes copiarlo y pegarlo aquí.
UIT-T es igual que tener un signo de gato aquí y puros valores en F.
Este es el color el número en hexadecimal y solamente requieres poner el signo de gato numeral y después
dos colores.
Esa es una forma de hacerlo pero si das click aquí puedes ver que te aparece en valores en RGB a entonces
para utilizarlo de esta forma sería RG BHA y le pones el primer color 255 255 255 y al final 1-No si
guardas cambios puedes ver que es lo mismo pero esta opción se ve más complicada.
La ventaja que tiene RGB es que al final le puedes pasar lo con lo que se conoce como transparencia
o alfa Channel.
Este número va del 0 al 1 es decir puedes utilizar punto y algo si le pones .3 puedes ver que el color
es más transparente entonces tienes cierta transparencia esa es la ventaja es un poco más complicado
pero tiene esta ventaja.
Además se describe aquí viene HCl a entonces de la misma forma que tiene ese Regev a tienes RGB solamente
que no tienes acceso a la fachada.
Si guardas cambios puedes ver que es lo mismo y de la misma forma está HCl mientras que RGB compone
el color por rojo verde y azul y nos genera este color HCl utiliza algo que se conoce como elegió saturación
y líquenes.
Entonces puedes ver que el color es un poco diferente pero para el color blanco es este valor nuestros
que están aquí sería cero cero y 100 por ciento a 0 por ciento y 100.
De esta forma queda también existe acceso a la alfa Channel de esta forma .3 digamos y queda de esta
forma ahora todo esto suena como un poco confuso es más fácil de todo sin dudas hexadecimal.
Pero bueno quería mostrarte que existen diferentes opciones para aplicar colores si quieres acceso a
la transparencia lo puedes hacer por medio de RGB ah y también por medio de HCl.
Finalmente vamos a ponerle aquí un texto de Coronation no puedes ver que lo que viene siendo nuestros
enlaces tienen esta línea en la parte inferior.
Esto ya lo puedo cerrar tienen esta línea en la parte inferior nuestro diseño no lo tiene muchos sitios
web tienen enlaces pero no tienen esa línea a mí nunca me ha gustado en realidad para removerla poner
texto ecorregión impones no. Eso va a eliminar esa línea debajo.
Pero si te gusta puedes eliminar esta línea y se va a mantener esa línea y como dije anteriormente a
mí no me gusta mucho en realidad les queda de esta forma y también lo que viene siendo el tamaño de
la Fuente.
Vamos a poner un Foncillas digamos 18 píxeles para ser la fuente un poco más grande.
Puedes ver que aquí viene la fuente un poco más grande.
Por ejemplo si quisieras tener un poco de separación entre cada uno de ellos puedes ponerle un margen
Riet en rayistas margen a la derecha es decir separación con el siguiente elemento digamos 20 píxeles
guardar cambios y puedes ver que va a tener un poco de separación.
Ahora si le das a inspeccionar este último elemento va a tener también un margen lo puedes ver en esa
zona color naranja eso usualmente hace que el diseño se vea un poco desproporcionado.
Por lo tanto puedes aplicarle el margen right a todos los elementos y decirle al último que tengo que
le pones dos puntos.
Last of Taipe que es esto le pones margen cero.
Guardamos cambios inspeccionada aquí que eliminamos esa franja naranja y la aplica un margen de 20 píxeles
es decir margen a la derecha separación de 20 píxeles entre cada elemento del lado de la derecha pero
a lo último elegimos Last of Taipe y a éste no le aplica se lo removemos ahora este que tiene aquí a
dos puntos.
Last offtopic se le conoce como pseudo selectores es decir no es un selector como tal pero son propiedades
muy útiles que te permiten entre otras cosas seleccionar el último elemento o the first of Time y agregarle
al primer elemento lo que viene siendo el margen right de cero es decir sin separación en el primer
elemento por mucho si lo quieres en un ejemplo más del mundo real más que este aún el pseudo selector
más común en enlaces es uno que se conoce como Jabber aquí.
Ah y luego dos puntos Jover importante que lo que viene siendo el pseudo selector.
Los dos puntos deben de estar pegados a la etiqueta no debe de haber ningún color ningún espacio y que
va a poner color para cambiar el color y vamos a poner un color que sea más siete uno uno cero cero
sin color verde que puede ser definido aquí ahora una forma en la que puedes obtener estos colores en
hexadecimal es visitando algún sitio web una paleta de colores o también en programas como Photoshop
ilustrador o Adobe xD.
Ahí puedes obtener los colores de tus diseños muy fácilmente y usualmente te generan hexadecimal.
Entonces como dije este es el pseudo selector más común de todos este lo que hace es que cuando doy
a ver aquí es decir que me pongo sobre estos elementos cambia de color y seguramente si has navegado
un sitio web en la última media hora tiene un efecto como éste en algún lugar es muy común que lo tenga.
Entonces este es por mucho el más común.
Este es uno muy útil así que aquí los tienes ahora puedes ver que tenemos la navegación aquí en la de
abajo no se ve de esta forma pero si recuerdas tenemos una clase llamada navegación por lo tanto puedo
copiar esta clase y al siguiente NAP y pegarla y puedes ver que estamos utilizando nuestra clase y se
está aplicando los estilos.
Esa es la ventaja de las clases que puedes utilizar en múltiples elementos y no hay necesidad de volver
a escribir todo el código.
Una vez más el vídeo se nos fue muy largo no importa estamos avanzando bastante bien.
Ya para finalizar lo que me gustaría mostrarte es esta barra puedes ver que estamos posicionando el
elemento del lado izquierdo otro del lado derecho utilizando este contén este Icontec te permite alinear
lo que viene siendo horizontalmente pero existe uno que te permite alinear verticalmente se llama alike
items para items y por ejemplo si le pones Flex en eso va alinearlo hacia la parte inferior de este
elemento puede ser que esta línea hacia abajo Fleksy estarlo líneas hacia arriba hacia arriba pero el
que vamos a utilizar es Center que se nos va alinear verticalmente perfectamente aquí y quedan alineados
tanto el logo como los enlaces de nueva cuenta se nos olvidó un poco largo pero bueno estamos avanzando
en el siguiente vídeo veamos cómo cambiar la fuente de nuestro diseño.
Puedes ver que este diseño de esta fuente es un poco diferente así que veámoslo en el siguiente vídeo.