1 00:00:00,270 --> 00:00:04,950 Vamos a posicionar lo que viene siendo el formulario sobre esta imagen puedes ver que en el ejemplo 2 00:00:04,950 --> 00:00:10,830 final tampoco arriba de él dándole efecto como si estuviera encimados y creo yo que se ve bien. 3 00:00:11,290 --> 00:00:18,230 Así que vamos a ver cómo hacerlo primer paso puedes ver qué definimos columnas 12 aquí no le definimos 4 00:00:18,230 --> 00:00:24,590 columnas a éste pero vamos a poner las columnas y le ponemos 10 porque puedes ver que tenemos un poco 5 00:00:24,590 --> 00:00:32,520 de espacio de este lado un poco de este lado por lo tanto no toma las dos es solamente toma 10 para 6 00:00:32,570 --> 00:00:41,440 al chico en unas 10 y que va a poner columnas 10 ahora columnas 10 columnas 10 nos lleva a realizar 7 00:00:41,440 --> 00:00:48,520 la siguiente operación tenemos un 100 por ciento que es el ancho si lo dividimos entre 12 que son las 8 00:00:48,790 --> 00:00:55,390 cantidad de columnas que nos da 8.3 se multiplicó por 10 que son las columnas que requiero tienes que 9 00:00:55,390 --> 00:01:05,050 medir 80 y 3.3 entonces Fleck cero cero Calc 80 y 3.3 por ciento menos un ram entonces vamos a guardar 10 00:01:05,050 --> 00:01:06,280 cambios habrá algo más. 11 00:01:06,280 --> 00:01:14,860 Voy a dar un poco de scroll y voy a colocar Contacto con tacto de esta forma para agregar los estilos 12 00:01:14,860 --> 00:01:20,240 Aun así guardamos cambios vamos a ver algo vamos a ver que por ejemplo si lo abres se posiciona lo que 13 00:01:20,240 --> 00:01:27,780 es el formulario de este lado eso pasa porque de momento nuestro Grit estamos perdiendo o nos hace falta 14 00:01:27,780 --> 00:01:28,460 el Flex. 15 00:01:28,470 --> 00:01:33,960 Por lo tanto Flex Rapp para que no se vayan los elementos hacia la derecha sino que se posicionen aquí 16 00:01:33,960 --> 00:01:35,100 abajo. 17 00:01:35,100 --> 00:01:42,250 Ahora si las inspeccionará aquí puedes ver que este que dice columnas ya sí está tomando no todo el 18 00:01:42,250 --> 00:01:49,020 espacio disponible solamente una parte pero primero vamos a extraerlo hacia arriba puedes ver que encontacto 19 00:01:49,150 --> 00:01:59,990 tenemos formulario contacto y que vamos a poner punto formulario contacto y puedes ver que en el diseño 20 00:01:59,990 --> 00:02:02,710 final está el formulario sobre la imagen. 21 00:02:02,750 --> 00:02:06,950 Para ello vamos a utilizar un margen negativo. 22 00:02:06,950 --> 00:02:13,070 Ahora si vemos este diseño desde pequeño puede ser que aquí no está encimados solamente acá. 23 00:02:13,070 --> 00:02:21,960 Por lo tanto mi idea Cuadri MQ y ponemos 7 6 8 pixeles tenemos el selector y el margin todo va a ser 24 00:02:21,960 --> 00:02:27,580 menos 10 lo va a extraer o lo va a jalar hacia arriba. 25 00:02:27,580 --> 00:02:33,090 Ahora medio se cumple no porque si lo extraño es arriba pero no se ve bien este tiene un bacana un color 26 00:02:33,150 --> 00:02:42,450 y este no entonces aquí vamos a ponerle por fuera a aplicar a todos los Miyako seris un Bagram color 27 00:02:43,160 --> 00:02:49,630 que va a decir por la CFE para que sea un color blanco si abrimos el proyecto pues de esta forma no 28 00:02:49,630 --> 00:02:54,370 queda bien porque este está centrado este Norita lo solucionamos pero puede ser que tenemos un poco 29 00:02:54,370 --> 00:03:00,770 de paz y en este también en este PADI hacia adentro va aplicar desde el dispositivo más pequeño vamos 30 00:03:00,880 --> 00:03:07,890 a abrir y ponemos Pauling en todas las direcciones 5 Reem tener un poco de espacio hacia adentro en 31 00:03:07,900 --> 00:03:13,880 el diseño que estamos construyendo desde el que se ve bien y si vemos el diseño lo único que nos falta 32 00:03:13,880 --> 00:03:21,490 centrarlo ahora cómo lo vamos a centrar no veremos por ejemplo lo que viene siendo el grid puedes ver 33 00:03:21,490 --> 00:03:28,510 que tenemos justificante n-Space y eso nos permite que el contenido se distribuya de cierta forma y 34 00:03:28,510 --> 00:03:30,060 eso es lo que le da vida al Grid. 35 00:03:30,070 --> 00:03:37,720 Entonces no podemos cambiar aquí pero sí podemos crear una nueva clase digamos por ejemplo aquí en contacto 36 00:03:38,080 --> 00:03:46,140 donde tenemos el grid ponerle centrar columnas igual que con más me gusta por ejemplo centras tus columnas 37 00:03:46,200 --> 00:03:52,840 por ejemplo si esa clase está presente pues vamos a tener un justificante que va a decir centrã en caso 38 00:03:52,840 --> 00:03:56,120 de que se presente esa clase lo va a centrar y puede ser que €60. 39 00:03:56,200 --> 00:04:01,990 Es por eso que el padre de éste también le aplicamos un poco de Grid para poder centrarã más la derribã 40 00:04:02,020 --> 00:04:07,900 no se centra porque toma todo el espacio disponible pero la de abajo solamente toma 10 de las 12 columnas 41 00:04:07,900 --> 00:04:09,860 y se centra bastante bien. 42 00:04:09,900 --> 00:04:13,860 Vamos a darle estilos a lo que es el formulario y puede ser que el formulario tenemos nuestros laBolsa 43 00:04:13,860 --> 00:04:15,720 alineados de esta forma. 44 00:04:15,750 --> 00:04:21,010 Eso es algo que puedes lograr muy fácil con Flex Box vamos a dar un poco de scroll pues es el que tenemos 45 00:04:21,010 --> 00:04:27,040 este va a ser nuestro selector padre y después cada uno de estos tiene como padre el campo es decir 46 00:04:27,040 --> 00:04:34,140 demostra estas clases por eso la importancia de campo ponemos punto campo y vamos a aplicarle display 47 00:04:34,140 --> 00:04:34,760 Flex. 48 00:04:34,780 --> 00:04:41,610 Muy importante también este fait content Espais birwin para que se coloque el lector por un lado y los 49 00:04:41,610 --> 00:04:45,100 inputs por el otro lado se va viendo bien. 50 00:04:45,110 --> 00:04:49,430 Siguiente paso es que puedes ver que quedan muy juntos entonces voy a poner aquí mismo margin Boron 51 00:04:50,730 --> 00:04:54,830 y digamos que va a ser tres modos Reem creo que es el número. 52 00:04:54,960 --> 00:04:58,890 Se nos va a dar separación hacia abajo en cada uno de los inputs. 53 00:04:59,000 --> 00:05:04,960 Ahora vamos a trabajar con los Leibowitz le vamos a dar a los legos una base por lo tanto copio este 54 00:05:04,990 --> 00:05:11,990 selector que pongo level y muy importante por ejemplo aquí pues es que ya tengo tres lectores ese se 55 00:05:11,990 --> 00:05:14,010 considera como el máximo. 56 00:05:14,150 --> 00:05:18,350 No recomiendo que agregues más pero en algunos casos tendrás que agregar más. 57 00:05:18,380 --> 00:05:18,780 3. 58 00:05:18,800 --> 00:05:25,040 En mi opinión es el máximo así que trato de usualmente o es por eso que creamos clases como ésta para 59 00:05:25,580 --> 00:05:28,410 que nuestros electores no sean tan grandes. 60 00:05:28,580 --> 00:05:35,560 Por eso recomiendo que esta forma de hacer la arquitectura de tu HTML CSS sea más fácil de mantener 61 00:05:36,540 --> 00:05:43,650 Fleck 0 0 y su base va a ser de 80 pixeles por lo tanto chorree y puede ser que de esta forma losfondos 62 00:05:44,070 --> 00:05:49,240 los Levels de este lado si los revisas por ejemplo aquí les hace inspeccionar inspecciones este levo 63 00:05:49,270 --> 00:05:56,680 puede ser que queda muy pequeño el limpio del otro lado sería bueno por ejemplo tener el árbol darle 64 00:05:56,680 --> 00:06:02,920 una base de 8 Reem y que esté IMPO tomar el resto no sería algo bueno bueno es muy fácil la verdad. 65 00:06:02,920 --> 00:06:08,480 Con Flex Box puedes copiar aquí y en lugar este le vas a poner imput. 66 00:06:08,600 --> 00:06:14,950 Si recuerdas tenemos un par de imputs uno para Tex y uno para mail y tenemos nuestro selector. 67 00:06:15,150 --> 00:06:23,180 Nop y luego corchetes Taipe submit es decir que no sean submit entonces sí Flex 1 y eso va a hacer que 68 00:06:23,180 --> 00:06:25,130 crezca y tome todo el espacio que hay disponible. 69 00:06:25,130 --> 00:06:32,620 Puedes ver cómo se posicionan estos dos y crecen todo el espacio disponible gracias a este Flex 1 ahora 70 00:06:32,710 --> 00:06:37,290 aquí por ejemplo voy a poner una coma formulario de contacto y voy a seleccionar el texto àrea porque 71 00:06:37,290 --> 00:06:42,920 puedes ver que se quedó pequeño entonces guardamos cambios y vemos que crece. 72 00:06:42,930 --> 00:06:47,970 Faltan un par de cosas por ejemplo el color de borde no es igual y el segundo estos son un poco más 73 00:06:47,970 --> 00:06:48,560 grandes. 74 00:06:49,930 --> 00:06:56,970 Entonces primer paso Border y un pixel sol y el color gris que hemos estado utilizando como separador 75 00:06:56,980 --> 00:07:05,560 va a ser el mismo que queda esta forma y un poco de Padín en todas las direcciones son REM y de esta 76 00:07:05,560 --> 00:07:08,650 forma ahora vamos a hacer ese texto un poco más grande. 77 00:07:08,650 --> 00:07:15,760 Por lo tanto copio este selector y lo pongo aquí afuera de otra forma la altura por ejemplo Joie 200 78 00:07:15,760 --> 00:07:17,320 píxeles que será 20 Reem. 79 00:07:17,320 --> 00:07:23,350 También aplicaría los inputs y no queremos eso solamente que afecte el texto area despuésdel que se 80 00:07:23,350 --> 00:07:24,820 va viendo bien. 81 00:07:25,140 --> 00:07:32,230 Y por último puedes ver que tenemos este de enviar por lo tanto copiamos de nueva cuenta este y cuando 82 00:07:32,230 --> 00:07:34,210 se presente enviar. 83 00:07:34,210 --> 00:07:42,680 Vamos a tener display Flex y de nueva cuenta para podernos posicionar podremos utilizar contén y digamos 84 00:07:42,680 --> 00:07:50,220 Center para que lo muestre en el centro o en este caso el diseño tiene que ser Flex porque puedes ver 85 00:07:50,220 --> 00:07:52,400 que en el diseño final debe estar a la derecha. 86 00:07:52,590 --> 00:07:54,080 Entonces queda este lado. 87 00:07:54,160 --> 00:07:59,560 Ahora puedes ver que nos hacen falta los estilos este tiene el color del botón primario. 88 00:07:59,860 --> 00:08:09,770 Por lo tanto a contacto y aquí para de clases Class veten y veten primario si guardamos cambios. 89 00:08:09,800 --> 00:08:13,190 De esta forma ahora por ejemplo cuando dejó ver aquí puede ser que no cambia la mano. 90 00:08:13,190 --> 00:08:25,720 Como vimos anteriormente TN y por ejemplo aquí le puedes poner punto veten punto veten Jover y cursor 91 00:08:25,730 --> 00:08:31,070 Poynter cursor puede Interval hacer que aparezca esta mano. 92 00:08:31,080 --> 00:08:36,030 Ahora por ejemplo anteriormente habíamos visto que los botones por ejemplo aquí en la página de inicio 93 00:08:36,030 --> 00:08:39,460 en un dispositivo pequeño tomaban todo el espacio disponible. 94 00:08:39,510 --> 00:08:42,270 Si abres contactos puedes ver que no lo toma. 95 00:08:42,270 --> 00:08:49,260 Eso pasa porque estamos aplicando por ejemplo a quién enviar un display Flex y nosotros habíamos definido 96 00:08:49,260 --> 00:08:56,520 el botón como un display Block es decir el padre tiene display Flex y eso le da como cierto ancho y 97 00:08:56,520 --> 00:09:02,850 el block trata de crecer pero no puede porque el padre solamente tiene este tamaño así de tamaño como 98 00:09:02,850 --> 00:09:05,220 cómo el botón está el padre. 99 00:09:05,400 --> 00:09:12,910 Por lo tanto aquí podríamos ponerle al final una propiedad que diga Fleck cero cero 100 por ciento y 100 00:09:12,930 --> 00:09:16,580 eso va a forzar al padre a crecer porque el hijo necesita crecer de esta forma. 101 00:09:18,030 --> 00:09:22,130 Y puede ser que cuando lo haga grande puede ser que el botón se mantiene porque sigo teniendo esto y 102 00:09:22,130 --> 00:09:22,640 se hereda. 103 00:09:22,640 --> 00:09:31,660 Por lo tanto aquí pongo un flex cero cero y su ancho va a ser definido de forma automática entonces 104 00:09:31,830 --> 00:09:38,420 que de esta forma y se ve bastante bien ahora estas propiedades aquí no afectan a los botones que ya 105 00:09:38,420 --> 00:09:44,090 tenemos porque como no utilizan Flex blocks aquellos otros botones estas propiedades simplemente van 106 00:09:44,090 --> 00:09:45,430 a ser ignoradas. 107 00:09:45,530 --> 00:09:50,480 Si abres por ejemplo la página principal puedes ver que las nuevas propiedades no afectan y se sigue 108 00:09:50,480 --> 00:09:57,400 viendo igual pero ya tenemos un botón que también va a crecer o hacerse más pequeño utilizando Flex 109 00:09:57,400 --> 00:10:03,980 Box y de ahora en adelante por ejemplo podremos utilizar esta clase en elementos normales o que tengan 110 00:10:04,000 --> 00:10:07,450 Flex MUX y se va a ver bastante bien. 111 00:10:07,600 --> 00:10:14,380 Puedes ver que el diseño está listo tenemos la página principal nosotros cursos contacto página principal. 112 00:10:14,380 --> 00:10:17,670 Todo está listo utilizando un enfoque de móvil first. 113 00:10:17,980 --> 00:10:23,500 Ahora si te quedan dudas o si por ejemplo crees que este código es grande y complejo es algo que tal 114 00:10:23,500 --> 00:10:29,440 vez digas bueno yo no lo puedo hacer solo repite lo que es este proyecto creo que te va a aclarar mucho 115 00:10:29,440 --> 00:10:31,610 más las cosas ahora que ya se ha lanzado hasta aquí. 116 00:10:31,930 --> 00:10:38,290 Repítelo trata de crear otro proyecto pero en el siguiente vídeo estaremos tomando lo que o mejor dicho 117 00:10:38,290 --> 00:10:44,120 en el siguiente capítulo estaremos tomando lo que fue el proyecto anterior y lo haremos responsivo y 118 00:10:44,260 --> 00:10:50,200 práctica haremos un poco más en el siguiente y vamos a revisar el Deployment subirlo a un servidor para 119 00:10:50,200 --> 00:10:52,300 que puedas compartir lo que has aprendido hasta aquí.