Vamos a posicionar lo que viene siendo el formulario sobre esta imagen puedes ver que en el ejemplo
final tampoco arriba de él dándole efecto como si estuviera encimados y creo yo que se ve bien.
Así que vamos a ver cómo hacerlo primer paso puedes ver qué definimos columnas 12 aquí no le definimos
columnas a éste pero vamos a poner las columnas y le ponemos 10 porque puedes ver que tenemos un poco
de espacio de este lado un poco de este lado por lo tanto no toma las dos es solamente toma 10 para
al chico en unas 10 y que va a poner columnas 10 ahora columnas 10 columnas 10 nos lleva a realizar
la siguiente operación tenemos un 100 por ciento que es el ancho si lo dividimos entre 12 que son las
cantidad de columnas que nos da 8.3 se multiplicó por 10 que son las columnas que requiero tienes que
medir 80 y 3.3 entonces Fleck cero cero Calc 80 y 3.3 por ciento menos un ram entonces vamos a guardar
cambios habrá algo más.
Voy a dar un poco de scroll y voy a colocar Contacto con tacto de esta forma para agregar los estilos
Aun así guardamos cambios vamos a ver algo vamos a ver que por ejemplo si lo abres se posiciona lo que
es el formulario de este lado eso pasa porque de momento nuestro Grit estamos perdiendo o nos hace falta
el Flex.
Por lo tanto Flex Rapp para que no se vayan los elementos hacia la derecha sino que se posicionen aquí
abajo.
Ahora si las inspeccionará aquí puedes ver que este que dice columnas ya sí está tomando no todo el
espacio disponible solamente una parte pero primero vamos a extraerlo hacia arriba puedes ver que encontacto
tenemos formulario contacto y que vamos a poner punto formulario contacto y puedes ver que en el diseño
final está el formulario sobre la imagen.
Para ello vamos a utilizar un margen negativo.
Ahora si vemos este diseño desde pequeño puede ser que aquí no está encimados solamente acá.
Por lo tanto mi idea Cuadri MQ y ponemos 7 6 8 pixeles tenemos el selector y el margin todo va a ser
menos 10 lo va a extraer o lo va a jalar hacia arriba.
Ahora medio se cumple no porque si lo extraño es arriba pero no se ve bien este tiene un bacana un color
y este no entonces aquí vamos a ponerle por fuera a aplicar a todos los Miyako seris un Bagram color
que va a decir por la CFE para que sea un color blanco si abrimos el proyecto pues de esta forma no
queda bien porque este está centrado este Norita lo solucionamos pero puede ser que tenemos un poco
de paz y en este también en este PADI hacia adentro va aplicar desde el dispositivo más pequeño vamos
a abrir y ponemos Pauling en todas las direcciones 5 Reem tener un poco de espacio hacia adentro en
el diseño que estamos construyendo desde el que se ve bien y si vemos el diseño lo único que nos falta
centrarlo ahora cómo lo vamos a centrar no veremos por ejemplo lo que viene siendo el grid puedes ver
que tenemos justificante n-Space y eso nos permite que el contenido se distribuya de cierta forma y
eso es lo que le da vida al Grid.
Entonces no podemos cambiar aquí pero sí podemos crear una nueva clase digamos por ejemplo aquí en contacto
donde tenemos el grid ponerle centrar columnas igual que con más me gusta por ejemplo centras tus columnas
por ejemplo si esa clase está presente pues vamos a tener un justificante que va a decir centrã en caso
de que se presente esa clase lo va a centrar y puede ser que €60.
Es por eso que el padre de éste también le aplicamos un poco de Grid para poder centrarã más la derribã
no se centra porque toma todo el espacio disponible pero la de abajo solamente toma 10 de las 12 columnas
y se centra bastante bien.
Vamos a darle estilos a lo que es el formulario y puede ser que el formulario tenemos nuestros laBolsa
alineados de esta forma.
Eso es algo que puedes lograr muy fácil con Flex Box vamos a dar un poco de scroll pues es el que tenemos
este va a ser nuestro selector padre y después cada uno de estos tiene como padre el campo es decir
demostra estas clases por eso la importancia de campo ponemos punto campo y vamos a aplicarle display
Flex.
Muy importante también este fait content Espais birwin para que se coloque el lector por un lado y los
inputs por el otro lado se va viendo bien.
Siguiente paso es que puedes ver que quedan muy juntos entonces voy a poner aquí mismo margin Boron
y digamos que va a ser tres modos Reem creo que es el número.
Se nos va a dar separación hacia abajo en cada uno de los inputs.
Ahora vamos a trabajar con los Leibowitz le vamos a dar a los legos una base por lo tanto copio este
selector que pongo level y muy importante por ejemplo aquí pues es que ya tengo tres lectores ese se
considera como el máximo.
No recomiendo que agregues más pero en algunos casos tendrás que agregar más.
3.
En mi opinión es el máximo así que trato de usualmente o es por eso que creamos clases como ésta para
que nuestros electores no sean tan grandes.
Por eso recomiendo que esta forma de hacer la arquitectura de tu HTML CSS sea más fácil de mantener
Fleck 0 0 y su base va a ser de 80 pixeles por lo tanto chorree y puede ser que de esta forma losfondos
los Levels de este lado si los revisas por ejemplo aquí les hace inspeccionar inspecciones este levo
puede ser que queda muy pequeño el limpio del otro lado sería bueno por ejemplo tener el árbol darle
una base de 8 Reem y que esté IMPO tomar el resto no sería algo bueno bueno es muy fácil la verdad.
Con Flex Box puedes copiar aquí y en lugar este le vas a poner imput.
Si recuerdas tenemos un par de imputs uno para Tex y uno para mail y tenemos nuestro selector.
Nop y luego corchetes Taipe submit es decir que no sean submit entonces sí Flex 1 y eso va a hacer que
crezca y tome todo el espacio que hay disponible.
Puedes ver cómo se posicionan estos dos y crecen todo el espacio disponible gracias a este Flex 1 ahora
aquí por ejemplo voy a poner una coma formulario de contacto y voy a seleccionar el texto àrea porque
puedes ver que se quedó pequeño entonces guardamos cambios y vemos que crece.
Faltan un par de cosas por ejemplo el color de borde no es igual y el segundo estos son un poco más
grandes.
Entonces primer paso Border y un pixel sol y el color gris que hemos estado utilizando como separador
va a ser el mismo que queda esta forma y un poco de Padín en todas las direcciones son REM y de esta
forma ahora vamos a hacer ese texto un poco más grande.
Por lo tanto copio este selector y lo pongo aquí afuera de otra forma la altura por ejemplo Joie 200
píxeles que será 20 Reem.
También aplicaría los inputs y no queremos eso solamente que afecte el texto area despuésdel que se
va viendo bien.
Y por último puedes ver que tenemos este de enviar por lo tanto copiamos de nueva cuenta este y cuando
se presente enviar.
Vamos a tener display Flex y de nueva cuenta para podernos posicionar podremos utilizar contén y digamos
Center para que lo muestre en el centro o en este caso el diseño tiene que ser Flex porque puedes ver
que en el diseño final debe estar a la derecha.
Entonces queda este lado.
Ahora puedes ver que nos hacen falta los estilos este tiene el color del botón primario.
Por lo tanto a contacto y aquí para de clases Class veten y veten primario si guardamos cambios.
De esta forma ahora por ejemplo cuando dejó ver aquí puede ser que no cambia la mano.
Como vimos anteriormente TN y por ejemplo aquí le puedes poner punto veten punto veten Jover y cursor
Poynter cursor puede Interval hacer que aparezca esta mano.
Ahora por ejemplo anteriormente habíamos visto que los botones por ejemplo aquí en la página de inicio
en un dispositivo pequeño tomaban todo el espacio disponible.
Si abres contactos puedes ver que no lo toma.
Eso pasa porque estamos aplicando por ejemplo a quién enviar un display Flex y nosotros habíamos definido
el botón como un display Block es decir el padre tiene display Flex y eso le da como cierto ancho y
el block trata de crecer pero no puede porque el padre solamente tiene este tamaño así de tamaño como
cómo el botón está el padre.
Por lo tanto aquí podríamos ponerle al final una propiedad que diga Fleck cero cero 100 por ciento y
eso va a forzar al padre a crecer porque el hijo necesita crecer de esta forma.
Y puede ser que cuando lo haga grande puede ser que el botón se mantiene porque sigo teniendo esto y
se hereda.
Por lo tanto aquí pongo un flex cero cero y su ancho va a ser definido de forma automática entonces
que de esta forma y se ve bastante bien ahora estas propiedades aquí no afectan a los botones que ya
tenemos porque como no utilizan Flex blocks aquellos otros botones estas propiedades simplemente van
a ser ignoradas.
Si abres por ejemplo la página principal puedes ver que las nuevas propiedades no afectan y se sigue
viendo igual pero ya tenemos un botón que también va a crecer o hacerse más pequeño utilizando Flex
Box y de ahora en adelante por ejemplo podremos utilizar esta clase en elementos normales o que tengan
Flex MUX y se va a ver bastante bien.
Puedes ver que el diseño está listo tenemos la página principal nosotros cursos contacto página principal.
Todo está listo utilizando un enfoque de móvil first.
Ahora si te quedan dudas o si por ejemplo crees que este código es grande y complejo es algo que tal
vez digas bueno yo no lo puedo hacer solo repite lo que es este proyecto creo que te va a aclarar mucho
más las cosas ahora que ya se ha lanzado hasta aquí.
Repítelo trata de crear otro proyecto pero en el siguiente vídeo estaremos tomando lo que o mejor dicho
en el siguiente capítulo estaremos tomando lo que fue el proyecto anterior y lo haremos responsivo y
práctica haremos un poco más en el siguiente y vamos a revisar el Deployment subirlo a un servidor para
que puedas compartir lo que has aprendido hasta aquí.