El siguiente paso es que equipo desde el que tengo icono si vemos el diseño final puedes ver que todo
el contenido está centrado una forma en la que puedes entrar muy fácilmente es colocando texto Line
Center.
Puedes ver que dentro del icono tenemos una imagen de texto.
De todos modos va a alinear una imagen.
También tenemos un H3 y un párrafo por lo tanto esta función o mejor dicho esta propiedad va a alinear
el contenido lo va a centrar de la misma forma que tiene esta exhaló encender puedes alinear contenido
hacia la izquierda este es el default puedes ser que se alinea a la izquierda tenemos Tex a la end right
lo va a alinear a la derecha como si fuera un documento de Word y también está yo Tiffany lo va a justificar
que yo nunca lo he utilizado nunca me ha gustado como se ve para este caso Center es la mejor opción
y puede ser que se vea centrado y se ve bien.
Ahora los párrafos puedes ver que están muy interlineado es muy pequeño anteriormente habíamos utilizado
en el H1 un link Eight H1B a buscarlo.
Aquí tenemos un link it podríamos hacerlo más general y colocarlo aquí en el body un link de dos y eso
va a incrementar un poco interlineado va a ser que se vea sea más fácil de leer y puedes ver que se
ve mucho mejor.
Puedes ver que hay dos cosas que nos hacen falta primero este texto que dice más sobre nosotros puedes
ver que el diseño aquí está sentado y los que vienen siendo estos Jeri Desde aquí puedes ver que están
en mayúsculas.
Vamos a empezar con estos de aquí de abajo creo que es más sencillo.
Puedes ver que actualmente estamos utilizando una CH3 tenemos H3 y tenemos este icono Podemos de nueva
cuenta utilizar la misma técnica que hemos hecho anteriormente.
Punto y luego la H3 tenemos diferentes H3 en todo el diseño pero no todos tienen como padre el icono
y eso solamente va a ser que afecte a estos de aquí.
Como dije es una técnica que a mi me gusta mucho utilizar TACs Transform porque te permite escribir
o modificar hacia mayúsculas.
Ahora tal vez digas bueno y por qué no vienes mejor aquí le pones seguridad en mayúsculas.
El detalle de esto es que por ejemplo puedes hacerlo de esta forma y se va a ver en mayúsculas pero
qué tal que tienes 40 GB en todo tu sitio web y tu cliente te dice a ver ahora quiero verlo en minúsculas
vas a tener que ir a escribir cada uno de ellos por lo tanto es mejor escribirlos de esta forma y modificarlos
con CSS con propiedad de Tex Transform Tex Transform toma diferentes opciones hacer que te extrasolar
bien aquí capitalista esto te va a permitir colocar la primera letra de cada palabra en mayúsculas.
Entonces si necesitas algo así esto es la forma en que lo haces.
Que voy a poner aquí o es en mayúscula otra forma en la que puedes verificar los diferentes valores
que toma cada una de Xaquín quienen navegador por ejemplo botón derecho Inspeccionar Elemento y presiona
aquí esta flecha y selecciona el elemento y aquí en esta parte por ejemplo puedes eliminar o percas
y con las flechas hacia abajo ir viendo las diferentes opciones lograr que los paletadas en minúsculas
no no realiza ninguna transformación on set remueve el valor.
Usualmente estas dos no las uso Lower Keys para hacerlo minúsculas o Perquis para hacerlo mayúsculas
y capitalice para mí son las tres que vas a usar más en todos tus proyectos.
Entonces capital recuerda la primera letra mayúscula Lower Keys todas minúsculas y percas todas mayúsculas.
Entonces no hay necesidad de que vengas y escribas cada uno de tus Gdynia en mayúsculas.
Puedes utilizarse para lograrlo finalmente puedes ver que la parte que dice más sobre nosotros está
centrada pero hay algo importante.
Puedes ver que este texto está más delgada la letra que en este y si recuerdas anteriormente abrimos
el Index habíamos cargado esta fuente de Google Fonts lato cargamos tres anchos 300 400 700 y 900 y
usualmente cuando tienes un gentil un encabezado se asigna por default automáticamente 700 son un poco
más negritas los encabezados se asignan automáticamente 700.
A mí me gustaría que fuera más delgada esta letra y hay distintas formas de hacerlo saber un poco de
scroll puedes ver que aquí tenemos este H2 le podría dar una clase Class encabezado nosotros y copiarlo
aquí y por ejemplo ponerlo en esta parte y esa propiedad la cambias el ancho con fondo wait y aquí le
pones por ejemplo 300 eso lo va a hacer más delgada la letra puedes ver que queda más delgada por default
está aplicado como 700 por lo tanto es lo mismo tenerla o no. Yo quiero que sea más delgada por lo tanto
€300 pues el que se ve bien y también por ejemplo si la quieres más gruesa podría ser 900 letras mucho
más gruesa es importante que los números que apliques aquí sepas que tu fuente lo soporte porque si
le pones 900 y no cargaste la fuente de 900 no se van a ver entonces es que queda más negrita ahora
para centrar.
Si recuerdas anteriormente era Tex aligncenter y eso lo va a centrar y se va a ver correctamente despuésdel
que es exactamente lo mismo con el talle que quiere ser 300 es que de esta forma se ve bien.
Ahora esta es una forma y la otra como mencioné anteriormente hoy en día los Frend Works de utilidades
se están tomando mucho en mucho campo y están ganando mucha aceptación.
Puedo decir que utilidades y generar tus propias utilidades va a pegar este selector y digamos que le
pones punto doble Q300.
Esto va a ser weight €300 o lo puedes poner F doble o 300 FOM Way 300.
Así es como esos frameworks nombran estas utilidades y en lugar de por ejemplo utilizar un framework
podrías crear el tuyo de esta forma entonces Estiria aquí por ejemplo podrías crear otra clase que diga
centrar texto y aplicarle este Akil texana texana entera.
Entonces puedes ver que tenemos diferentes utilidades ya fondue 300 se texto a copiar esto y vamos a
poner aquí un poco de scroll en lugar de tener este encabezado a nosotros tendremos un fondo Huay 300
y también central texto pero cuál es la ventaja de esto.
Bueno tenemos dos clases que podemos reutilizar a lo largo de todo el diseño.
La cantidad de código será menor CSS aplicando algo así puede ser que el resultado sea el adecuado y
tenemos estas utilidades y estaremos creando un poquito más algunas más para este proyecto.
Entonces puedes ver que el diseño se va viendo bastante bien y si abrimos aquí ya tenemos listo esta
parte.
Si continuamos puedes ver que tenemos estas casas.
Esta parte es de las más complicadas de este diseño así que veamos a partir del siguiente video.