Hasta aquí se va viendo bastante bien el diseño pero quiero darle ahora estilos a los que viene siendo
la parte de aquí arriba.
Puedes ver que los enlaces tienen diferente color están en el diseño final del lado derecho el logotipo
del lado izquierdo y este mensaje está en la parte inferior debería estar acá abajo que viene siendo
de estudio y vamos a abrir el índex aquí dentro del Geddes vamos a colocar un nuevo DIV vamos a colocar
un Dib que va a tener una clase llamada contenedor contenedor por qué.
Porque si vemos el diseño este contenido está centrado en el que está centrado aquí.
Y tenemos un poco de espacio en las orillas.
Entonces vamos a crear un contenedor que va a centrar todo el contenido de la página.
Muchas páginas que visites hoy en día tienen contenido centrado y este va a rodear hasta después del
H1 y después también vamos a colocar otro nuevo Dib que va a ser una barra es decir lo que está aquí
arriba y para ello aquí voy a colocar una Bodipo ponemos aquí barra y damos tap eso nos da crear un
creado con una casi llamada barra cor.to aquí pero este solamente va a llegar hasta de aquí y vamos
a intentar un poco el código Seleccionamos aquí lo intentamos.
Es importante que formatea tu código de esta forma porque si por algo te falta una etiqueta de cierre
HTML no te va a decir hoy aquí te falta una etiqueta de cierre porque HTML no sabe donde quieres cerrar
la etiqueta pero si lo tienes tu código bien alineado vas a poder ver lo que viene siendo estas líneas
y ver dónde se cierra cada cada etiqueta.
Ahora si por ejemplo puedes ver que tenemos este Dib y aquí abajo tenemos otro puedes comentar lo que
vienen siendo estos elementos digamos ponerle aquí un comentario en HTML que es un poco diferente a
CSS en CSS si recuerdas ese asterisco diagonal asterisco logo asterisco diagonal en HTML es este signo
de menor luego pones un signo de exclamación dos iones y aquí le pones por ejemplo que es el contenedor
y eso te va a permitir identificar qué es la etiqueta que cierra este de aquí pero obviamente bueno
si tienes tu código bien inventado vas a poder identificar bastante bien.
Con eso tenemos listo lo que es este HTML que agregamos más elementos eso porque vamos a posicionar
la barra de esta forma puedes ver que tenemos el logotipo de este lado tenemos lo que es la navegación
de este lado y estaremos utilizando algo llamado Flags Box.
Enseguida lo vemos que ya te permite hoy en día posicionar elementos y es muy sencillo de utilizar.
Ahora puedes ver que tenemos este contenedor de aquí como mencioné este contenido debe estar centrado
en la pantalla aquí puedes ver que está muy hacia la izquierda vamos a darle estilos a esta parte primero
aquí arriba voy a crear unos estilos que yo voy a nombrar como globales siempre me gusta organizar mi
código de esta forma es decir lo que es global que se reutiliza múltiples veces lo dejo arriba y voy
escribiendo código en cada bloque de lo que voy realizando sobre el punto contenedor y abrimos llaves
para poder centrar este contenido voy a ponerlo a una altura máxima es decir Max with 1200 píxeles qué
va a hacer este Max width va a decir Ok toma todo el espacio que tengas disponible siempre y cuando
no te pases de 1200 píxeles si guardas cambios inspecciona tu código aquí y por ejemplo le haces lo
colocas aquí abajo inspeccionan lo que viene siendo el GDR y después el contenedor puedes ver que tenemos
esta franja anaranjada de este lado sólo un poco más pequeño porque está aquí con mucho sol.
Tenemos esa franja bastante grande aplicándole toda la altura que pueda disponer pero una vez que llega
a 1206 bueno ya de ahí no me puedo pasar porque tengo un max width de 1200 píxeles pero de nueva cuenta
puede ser que está muy a la izquierda y para que esté centrado se utiliza una propiedad que se conoce
como Margin y se pone se pone en marcha en Leff auto margin right auto y eso lo que hace es bueno el
tamaño que haya de margen hacia la izquierda debe ser automático y en la CA también y eso lo va a centrar
ahora puede ser que tenga un margen Leff y margen right una forma también muy recomendada es utilizar
la propiedad llamada Margie son únicamente Margie y esta toma cuatro propiedades cuatro valores porque
es lo que se conoce como atajo o surjan.
Entonces este funciona de la siguiente forma El primero el primer parámetro que le pasas es como si
fuera un reloj es decir como si fueran las 12 del día.
Qué margen va a tener arriba bueno arriba va a tener cero porque no nos interesa alinear verticalmente
únicamente hacia los lados a la derecha quiero que tenga auto ese vendría siendo a las 3 de la tarde
importante que haya espacios entre cada uno de ellos porque si lo dejas pegado este solamente es un
valor.
De esta forma son dos el siguiente es como si fuera a las seis de la tarde es decir el margen hacia
abajo también hacia abajo no nos interesa mucho por lo tanto cero y hacia la izquierda queremos que
sea auto para que esté centrado el contenido.
Entonces si guardas cambios y abres tu proyecto puedes ver que se mantiene centrado y este código que
está aquí este margen cero auto voy a darle.
Quieres hacer este de aquí con dos líneas y este de aquí es exactamente el mismo.
Pues el que tenemos auto este arriba.
Como dije es como si fuera un reloj las 12 del día 0 arriba a la derecha vendría siendo este auto 0
abajo y a la izquierda auto vendría siendo este acá.
Ahora que tengo 0 auto cero auto esta forma cuando tienes 2 y luego dos valores que se repiten de esta
forma puedes eliminarlo y puedes ver que queda mucho más compacto esta versión que está este código.
Sí es importante tenerlo muy en cuenta porque así es como vas a centrar la mayoría de elementos no todos
porque veremos distintas formas de centrar pero un contenedor así es como se centra y puedes ver que
el contenido queda centrado y tenemos espacio en las orillas entonces ya se va viendo más como este
diseño había dicho que vamos a finalizar este GT.
En este video ya va muy largo el video así que en el siguiente vídeo vamos a finalizar así así que continuamos
en el siguiente vídeo.