Vamos a continuar con el proyecto de Flex Box estaremos avanzando lo más posible vamos a crear esta
parte del Giro me gusta mucho cómo se ve con esta imagen de fondo un poco más oscuro diseño y desarrollo
freelancer aquí podrías colocar tu nombre coloco el nombre de la ciudad donde estoy.
Muchas personas contratan freelancers de otros lugares por lo tanto pongo aquí mi ciudad y este pequeño
icono con el botón de contactar a formular está abajo.
Pero de nuevo la idea es mostrarte lo básico y si te gusta este diseño excusã y extiende.
No abrirá el Index y después del Jaider voy a colocar un día DIV con una clase que se me giró así es
como se le conoce a ese elemento y mencionó anteriormente que todos los elementos deben tener un contenedor
Flex Box contenedor giro y que me colocaron H-1B a poner diseño y desarrollo.
Freelancer quedan más espacios rompe y voy a colocar mi ciudad pero puedes colocar la tuya.
No es obligatorio poner la mía y aquí abajo colocamos un enlace que de momento va a tener el signo de
dólar y una clase de botón para poder reutilizar ese botón tenemos el botón éste que arriba y otro en
el formulario.
Es una clase hace buen sentido.
Aquí contactarte texto entonces si guardamos cambios tenemos esto muy sencillo de momento.
Primero vamos a agregar el ícono es lo más fácil.
Si abrimos la página de fondo son dos máquinas icons existe una que se llama Marker que es muy similar
a los pines de Google Google Photos Google Maps Marker entonces aquí va a estar haz click aquí.
Y nada más presionas en esta parte y se va copiar los programas aquí.
Abrimos lo que es el proyecto desde el que aparece el mapa en esta parte empezamos a darle un poco de
estilos a este giro hacia abajo.
Primero voy a escribir lo que es el giro a dar una altura fija de 450 pixeles también podríamos poner
24 4:45 Reem cualquiera de las dos opciones es exactamente igual ahorita ya lo hemos habilitado y voy a
colocar un background image.
Si copias del proyecto en los archivos del curso Kieny M.G. viene la imagen que estaremos utilizando.
Si lo descargaste pirata pues espero que las personas que lo comparte hayan puesto el material pues
que lo comparta bien y aquí voy a poner dos puntos diagonal y M.G. y Gyro puntos JPG.
Me gusta mucho la parte de estudio cool que autocompletado de esta forma los archivos pues de momento
esta parte edita volvemos a este selector.
Voy a crear un after.
Este es un segundo elemento es decir no existe pero podemos agregar un color de fondo que hace que se
vea de esta forma.
Si tú ves esta imagen es más clara mucho más clara y podríamos crear este mismo efecto que tengo aquí
con Photoshop pero si nuestros clientes no Photoshop.
Si vas a estar cambiando las imágenes muy seguido pues es tiempo perdido entonces puedes aplicar lo
mismo con CSS.
Por eso lo hago de esta forma requiere poco código.
Siempre que utilizas un after tienes que poner un content pero normal si vas a poner un color de fondo
tiene que ir vacío y aquí vamos a colocar el color de fondo background color puedes ver que es un color
negro pero transparencia con transparencia.
Por lo tanto RGB y le pasas los colores que en este caso el negro es un Proceres y una transparencia
de .7 después vamos a colocar un top que va a tener posición absoluta.
Por lo tanto el padre tiene que llevar posición relativa esto es relativo aquí y lo voy a posicionar
contó cero Leff Zero right Zero y Bottom Zero.
De esa forma va a tomar todo el espacio que haya disponible pues se colocan todo lo que es el contenido
quiere dejar un espacio pero es por el encabezado ahorita lo estaremos corrigiendo el siguiente paso
que voy a hacer es centrar todo este contenido puedes ver qué queda de esta forma está centrado vertical
y horizontalmente en el mismo curso en este curso te mostré cómo alinear verticalmente con they've Holzer
Flags Books lo hace mucho muy sencillo entonces siempre el padre en este caso el padre va a hacer este
giro porque si vemos el HTML este giro va a ser el padre y va a centrar todo el libro que tiene todos
los elementos en lugar de ir centrando uno por uno vamos a tomar todos y centrar los de una sola vez
entonces ese espacio que ves ahí se arregla esa separación se soluciona con display Flex.
Además componer eso ya hace sea corta esa parte de aquí y vemos que ya se ve bastante bien entonces
para centrar ponemos Justified Content y en este caso va a ser Center se van a permitir centrarlo de
esta forma pues el que queda centrado convencido anteriormente es como si fuera un tex aligncenter en
el otro te mencioné que alinee items actuaba como el tex aligncenter o Margin Serrato pero recuerda
porque habíamos utilizado Fleck dirección columna aquí estoy utilizando Flex dirección root por default.
Por lo tanto aquí si le pusiera Center lo que es mi navegación también estaría centrada entonces yo
Estefi content Center te va a permitir centrar un elemento horizontalmente ahora si lo quieres sentar
verticalmente aquí utilizas light item Center centrã puedes ver que eso lo vas a entrar recuerda Estados
porque estamos utilizando Flex como Rob Flex direction Rob nos permite utilizarlo de esta forma voy
a eliminar la imagen centrista les puedo dar un poco de confusión.
Entonces cuando está como Roh el Center justifique tanta encenderlos centrã horizontalmente y eso funciona
bastante bien.
Si está como Column no se puede centrarse queda centrado verticalmente porque le estamos cambiando la
dirección por Roh Flex corre de izquierda a derecha pero cuando lo cambias a Kolo es de arriba hacia
abajo.
Por lo tanto esto justifica contén y alinea items también se invierten y ahora ellos Estefany content
sirve para centrar verticalmente porque por ejemplo si lo quisieras aquí abajo tendrías que utilizar
Flex.
Como vimos anteriormente o Fleck seestá es el de foll.
Entonces si lo haces así como con Column tendrías que colocar Center aquí y alinee items Center también
tendría el mismo resultado que si fuera robo coloq. porque en ambos se está centrando.
Entonces es muy muy importante recuérdalo no se te olvide que cuando lo cambias de Fleksy dirección
a Colom esto también cambia si los dejas así no cambian.
Eliminar esta parte puedes ver que tenemos este contenedor Girri que tiene todo el texto.
Vamos a seleccionar escribir un poco de eso si es ese sobre él colocar aquí un color nueva cuenta de
colocar.
Puedes ver que si le pongo color Way no se ve bien por qué pasa esto.
Bueno estamos generando un elemento que vendría siendo este after que tiene este color oscuro ese color
queda sobre nuestro contenido.
Entonces tenemos que traernos ese contenido.
Este contenedor para que quede arriba del es como si fuera un sandwich en el que colocas un pan y luego
encima pones jamón o jitomate o algo así.
Entonces quedan unos elementos arriba de otros no se pueden ver pero tienes que traerlos hacia arriba
y eso se logra primero utilizando posición relativa y segundo con un zì índex cualquier número mayor
a cero.
Va a servir zumo no va a servir el que ya se lo traía hacerfrente cuando inspecciona aquí este contenido
hasta arriba de lo que viene haciendo a nuestro after.
Entonces se va viendo bastante bien ahora utilizamos anteriormente lo que era justificó entendia el
Lanna item Center pero eso va a centrar lo que viene siendo el elemento para centrar el texto.
Le puedes habilitar aquí display Fleksy y hacer un montón de cosas o sea le puedes poner contenedor
Jiro display Flex puedes ver que los coloca hacia los lados.
Como dije ese es el orden de Flex box de la izquierda derecha.
Entonces para cambiarlos tendrías que poner Flex direction Golum y después utilizar para alinear horizontalmente
recuerda que ella cambia y si anteriormente utilizaba ha sido Estefi content Center para centrar.
Pues al cambiar ya utiliza salan alike item Center eso lo centrarían puedes ver que aquí son tres líneas
y estamos utilizando Flex Box y está bien pero hay cosas que con Flex Box los puedes hacer más sencillas
y hay cosas que no y estas tres líneas sería lo mismo que si las quitó y pongo Tex Alpine Center básicamente
lo mismo puedes ver que no cambia en realidad nada.
Entonces yo por eso digo que estaremos utilizando como una mezcla de las dos.
Algunas personas me han regañado porque dicen que estoy utilizando mezcla de texto a encender con Flex
box y no debe de hacerse así pero ya he visto el ejemplo que hay unos que los puedes hacer con tres
líneas otros con una lo voy a utilizar de esta forma pero que la policía no llegue a mi casa entonces
lo voy a dejar esta forma puedes ver que se ve bastante bien el siguiente paso es el Lico no puede ser
que aquí está mucho más grande y es de otro color.
Vamos a crear una nueva una nueva variable un color que yo ya elegí hacia arriba y que voy a ponerlo
como color primario primario y el color primario va a ser F.F C 1 0 7 entonces ya tenemos el color amarillo
aquí scroll hacia abajo nuevamente y copio este contenedor Giro y luego voy a seleccionar lo que se
se icono ahí seleccionar el icono de etiqueta y el icono al fondo que iba a poner un Foncillas lo voy
a hacer más grande tal vez 4 Reem 40 píxeles no mucho más 55 Meyssan 50 creo que se ve bien y el color
entonces color bar primario y puedes ver que aparece correctamente se va viendo mucho mejor aquí tiene
esta parte de aquí si lo ves bien puedes ver que no está bien centrado como que hay más espacio que
arriba y eso pasa porque los Jedis tienen margen esa zona naranja es un margen aquí arriba y que voy
a poner un H1 y 8 voy a poner a todos H1 H2 y H3 vamos a utilizar todos esos margin 0 se va a eliminar
el mar y cara así queda mucho más centrado se ve mejor no igual que este porque nos falta al botón que
es el último paso para que se vea bien lo que es nuestro nuestro giro vamos a copiar en la clase de
botón.
Espero no equivocarme un botón y puedes ver que es otro color es un color como azul o como agua no sé
y vamos a poner aquí con lo que era un color primario secundario y voy a ponerlo aquí cero cero nueve
siete a siete hacia abajo y utilizamos nuestra variable y este va a ser como va a un color vagaron color
bar secundario
y voy a colocarle también un Padín de un Reem y digamos cinco Reem el botón más grande se ve mucho mejor
si quisieras colocarle un margen aquí arriba no se puede por default todos los elementos que son Enke
tienen un display inline en ellos no puedes colocarle un marco top pero lo puedes convertir a Display
en block y eso si te lo va a permitir el display block y un margen top de Android.
Eso te dará un poco de separación entre el texto y el botón y aquí voy a colocar un color de nueva cuenta
a ser de color blanco para texto voy a quitarle esa línea.
A mí nunca me ha gustado esas líneas de correction para que las quite la línea aquí es el texto en mayúsculas
Tex Transform o percas con mayúsculas viendo bastante bien y lo único que nos falta es hacer del texto
un poco más grande más gruesa la letra y las esquinas redondeadas entonces found what 700 son las letras
más gruesas un Foncillas vamos a ponerle 1.6 RAM.
Vamos a ver nada más grande 2.2 cm de Nueva cuenta será mucho mejor y un borde Radius digamos de .5
RAM que de esta forma se ve bastante bastante bien tenemos ya lista esta parte en la parte superior
de nuestro proyecto sabiendo bien el siguiente paso es crear esta parte el contenedor con nuestros servicios
tenemos tres servicios todos estos responsivo pues bastante bien y no utilizar Weeds esta parte tampoco
ésta tenemos utilizando Flex una propia eczemas Flex.
Nada más abrir aquí lo que viene siendo el giro mejor dicho en índex HTML después del Giro y voy a colocar
una etiqueta que se llame Main.
Este es el contenido principal por lo tanto Moine punto y como dije esto ya Kolla tiene Emet servicios
y contenedor son dos clases diferentes estaremos escribiendo contenedores.
Básicamente tiene todos de color blanco con esta sombra las esquinas redondeadas contenedor y después
voy a colocar un HD2 que va a decir nuestros servicios y que vamos a colocar cada uno de estos servicios.
El diseño final cada uno es un dibujo y como mencioné anteriormente para aplicar Flex Box tienes que
aplicarlo al padre por lo tanto vamos a crearle un contenedor de servicios contenedor servicios y después
servicio y en él por ejemplo poner una CH3 que va a decir diseño web diseño web y luego cada uno de
estos iconos también va a tener va a estar con Fuleco Box entonces tiene que tener también su propio
padre iconos y después estar copiando cada uno de los iconos sólito lo hacemos después este texto es
un Ipsum copiarlo de aquí pues se utiliza la página de Loreen como párrafo entonces esto es la página
de Loreen aquí abajo nada más presionas por ejemplo un párrafo y le quitas que inicie con Lore Ipsum
si deseas amautas generar y aquí te aparece un poco de código que puedes utilizar en tus sitios web
o en diseño.
El siguiente paso es este lápiz que está aquí entonces puedes buscar a quien MICONS y ese lo tengo identificado
como Open Spain enmuchos la verdad es que me gustó lo copiamos copiar aquí también y aquí dentro de
iconos voy a colocar ese icono para el diseño.
Entonces tenemos nuestros servicios de diseño web el icono y el texto lo voy a copiar este servicio
lo copió y voy a crear varias copias
y cambiar el nombre de los servicios.
Por ejemplo el segundo de mis aplicaciones móviles aplicaciones móviles nuevamente el social media
y me faltan los iconos que tengo Android y el de la manzana Android
parece Android damos clic y lo copio entonces este es el primero este es el segundo y me faltaba uno
de
copiamos este mejor dicho lo damos clic y pegamos aquí copiamos aquí pego y me faltas de social media
que tiene los signos de Twitter y Facebook entonces Twitter
click aquí nuevamente vuelvo aquí abajo y Facebook entonces cualquiera de los dos me gustó más que el
cuadro
estoy aquí copio y pego acá.
Suardi cambios y tenemos todo este contenido falta aplicarle mucho CSS a esta parte que primero si recuerdas
aquí le pusimos contenedor sale aquí abajo el contenedor es más genérico pero bueno aquí abajo contenedor
iba a ponerlo más de 1200 pixeles es el mismo ancho que lo habíamos definido en la navegación y puedes
ver que dice Max with 1200 podrías crear también una variable no nada más se restringen a colores.
También puedes ponerle aquí como ancho pantalla y poner aquí 1200 píxeles y por ejemplo copiar esta
propiedad donde tienes tu navegación aquí utilizar Bahr y ponerle el ancho de pantalla de esa forma.
Si quieres cambiar el ancho de pantalla pues es muy fácil hacerlo pero no se limita solamente a eso
puedes aplicarlo por ejemplo para los patines para los márgen se está reutilizando la misma cantidad
de y no márgen que tu diseño sea más consistente.
Lo mismo pasaría abajo utilizando lo mismo que es lo que se ve se aplica correctamente.
Entonces los custom properties no se limitan únicamente a colores cualquier elemento de CSS puede ser
parte de un custom properties.
Colores altos lo que sean valores como perque o aligncenter o o píxeles todo puede ser parte de un custom
Property donde se les quiera poner en marcha en cero auto para centrarlo con de Nueva cuenta podríamos
centrarlo con Flex Box requeriría más líneas Marien ser auto lo hacen en una sola y aquí voy a poner
Bagram color que va a ser guay de nueva cuenta el color blanco blanco en esta parte y el que tengo estas
HD2 SH3 eso los voy a centrar aquí voy a poner H 2 8 3 Tek Solines Center para que lo centre horizontalmente.
De nueva cuenta podríamos utilizar Flex Books pero en este caso al menos éste no tiene contenedor padre
lo que nuestros servicios tienen el main pero no lo voy a utilizar así entonces después voy a colocar
aquí un Padín de digamos 3 remplazan 30 píxeles y un borde Radius de 10 píxeles que sería igual a hombre
mostrar un poco hacia adentro y tiene las esquinas redondeadas aquí deben agregarle un poco de margen
hacia arriba pues el que aquí un poco de separación amarillento que es se lo voy a poner aquí a servicios
para que no lo tenga el contenedor sino que lo tenga más bien servicios marchitó dose Reem es más terrestres
hoy se ve mejor entonces volvemos al contenedor y después ver que tiene esta sombra aquí abajo se ve
bastante bien.
Me gusta mucho hay una página que se +7 es Matic la ha utilizado a lo largo de todo el curso usamos
el boxeador que es el último te permita generarlo visualmente pero para que quede horizontalmente el
vertical le defines qué tan lejos va la forma vertical hacia arriba o hacia abajo más o menos hoy creo
que se ve bien cambiar un poco estos valores se va viendo bastante bien si quieres puedes poner que
tan intenso la sombra y el color aquí más o menos creo que ahí se ve bien puedes venir y cambiar los
valores después no hay problema lo apegar todo aquí el contenedora volvemos al proyecto del que tengo
mi sombra en esta parte que nada más se ve abajo arriba no tengo nada algo que me falta es que en este
servicio también voy a colocar puede poner la margin 3 alto para que tenga 3 arriba y abajo puede ser
que en el proyecto final tiene esta separación aquí entonces quiero agregar de una vez y lo siguiente
que vamos a hacer es darle algunos estilos a lo que vienen siendo estos encabezados pues ver que este
de nuestros servicios y sobretodo tienen colores diferentes si escarola hacia arriba que oponer H3 iba
a tener un color un color Bahr secundario lugar Caprica el color secundario se ve bastante bien pero
el texto debe ser más grande y por default cese se le aplican width de 700 Watts de 700 Banguat de 400
y un Foncillas de 1.6 WebM 2.2 Reem con el cambio que hicimos debe ser un texto mucho más grande terrestres
Green lo que se ve mejor entonces se va viendo bastante bien en el siguiente video vamos a continuar
y finalizar y ahora si este proyecto para finalizar lo que viene siendo la construcción de este pequeño
sitio web.