1 00:00:04,050 --> 00:00:08,640 Vamos a continuar con el proyecto y vamos a finalizar por fin lo que viene siendo la página principal. 2 00:00:08,640 --> 00:00:11,490 Puedes ver que hemos hecho puesto mucho esfuerzo. 3 00:00:11,520 --> 00:00:16,920 La verdad es un diseño no es tan sencillo tienen sus complicaciones pero lo hemos llevado bastante bien 4 00:00:16,920 --> 00:00:18,750 se va viendo bastante bien. 5 00:00:18,750 --> 00:00:24,210 Siguiente paso vamos a abrir lo que se índex un poco de scroll que tenemos contenedor voy a colocar 6 00:00:24,210 --> 00:00:33,560 una clase Fuhrer y también nuestra clase de sección para que agregue un poco de separación y después 7 00:00:33,560 --> 00:00:39,830 vamos a colocar un elemento padre para tanto la navegación como el párrafo poderlo posicionar con Flex 8 00:00:39,830 --> 00:00:40,720 Books. 9 00:00:41,090 --> 00:00:47,040 Esto va a tener una clase de contenedor y contenedor Fuhrer entonces dos clases. 10 00:00:47,040 --> 00:00:52,430 Cortamos aquí pegamos y lo vamos a intentar un poco. 11 00:00:53,200 --> 00:00:56,210 Si guardamos cambios puede ser que de esta forma se va viendo bien. 12 00:00:56,210 --> 00:00:58,810 Ahora en este Seid Fuhrer puedes ver que está por fuera del contenedor. 13 00:00:58,820 --> 00:01:04,280 Si vemos el diseño pasa igual que en esta sección de arriba puede ser que el color de fondo se expande 14 00:01:04,280 --> 00:01:05,840 totalmente. 15 00:01:05,840 --> 00:01:14,700 Por lo tanto vamos a colocar aquí Furet y ponemos puntos Fuhrer y el color que vamos a utilizar es Bagram 16 00:01:14,700 --> 00:01:22,080 color puros tres es un color gris un poco más oscuro si guardamos cambios puede que se vea esta forma. 17 00:01:22,260 --> 00:01:27,510 Ahora aparece esta franja que abajo eso pasa porque le colocamos sección que se recuerda después de 18 00:01:27,510 --> 00:01:34,590 nuestras primeras utilidades y tiene un margen Boron de 2 por eso tiene esa línea abajo sin ningún problema 19 00:01:34,590 --> 00:01:43,730 la podemos reescribir aquí nada de margen Mañe Zero y eso va a eliminar esa parte ahora puedes ver que 20 00:01:43,730 --> 00:01:49,600 se sigue manteniendo una pequeña línea es porque por default todos los párrafos inspeccionamos el código 21 00:01:50,840 --> 00:01:57,270 este párrafo de aquí tiene un poco de margen el tanto arriba como abajo entonces vamos a colocar aquí 22 00:01:57,270 --> 00:02:07,310 7 Fuhrer y de hecho voy a agregar una clase mejor en una clase de copyright. 23 00:02:08,800 --> 00:02:14,750 Y podemos darle estilos por sí solo con copyright margen cero para eliminarlo. 24 00:02:14,820 --> 00:02:20,180 Bueno vemos cambios abrimos el proyecto y puede ser que se elimina lo que viene siendo esa esa franja 25 00:02:21,380 --> 00:02:27,650 siguiente paso puedes ver que si vemos el diseño tenemos un poco de separación aquí arriba y aquí abajo 26 00:02:28,430 --> 00:02:31,270 por lo tanto abrimos este contenedor Fuhrer 27 00:02:33,870 --> 00:02:42,630 y lo pegamos aquí junto al contenedor Fuhrer y primero un Padín Badín espadín tres RAAM es decir tres 28 00:02:42,630 --> 00:02:45,660 arriba y abajo y cero izquierda y derecha. 29 00:02:45,870 --> 00:02:50,640 Entonces guardamos cambios y puede ser que agregamos un poco de espacio hacia adentro esa es la ventaja 30 00:02:51,060 --> 00:02:57,540 o esa es la característica del espacio hacia adentro y después vamos a colocar aquí un display Flex 31 00:02:58,860 --> 00:03:07,320 display Flex y recuerda justificó en space between se va a colocar un elemento del lado izquierdo otro 32 00:03:07,320 --> 00:03:10,670 del lado derecho es muy sencillo la verdad. 33 00:03:10,790 --> 00:03:17,150 Crear el foro se va viendo bastante bien y finalmente aquí vamos a colocar el copyright un color color 34 00:03:18,430 --> 00:03:20,500 y ponemos color blanco. 35 00:03:20,670 --> 00:03:26,480 Guardamos cambios abrimos el proyecto desde el que se ve bastante bien lo que es el Proyecto Ara algo 36 00:03:26,480 --> 00:03:31,250 importante esta lista es la que es la página principal no es responsive esta página web porque no hemos 37 00:03:31,250 --> 00:03:36,350 visto lo que son los MIDI Aquaris lo veremos un poco más adelante una vez finalizado el proyecto estaremos 38 00:03:36,350 --> 00:03:41,840 viendo qué son los mini Aquaris pero está listo esta parte y se ve bastante bien en una computadora 39 00:03:41,900 --> 00:03:43,430 en una televisión. 40 00:03:43,430 --> 00:03:50,150 Entonces estaremos viendo cómo hacerlo compatible con un dispositivo móvil más adelante la primera página 41 00:03:50,150 --> 00:03:55,130 usualmente es la que más contenido tiene pero de aquí en adelante va a ser mucho más sencillo reutilizar 42 00:03:55,130 --> 00:04:00,890 elementos así que el proceso de desarrollo va a ser más rápido para las páginas internas. 43 00:04:01,040 --> 00:04:04,400 Vamos a continuar en el siguiente video con la página de nosotros.