1 00:00:00,240 --> 00:00:04,880 Cuando hacemos clic en estos enlaces de aquí vamos a abrir un template que va a ser este de aquí puedes 2 00:00:04,880 --> 00:00:10,950 ver que tenemos el título de la casa una imagen bastante grande para que las personas puedan ver y después 3 00:00:10,950 --> 00:00:16,590 tenemos el precio de este lado sus características y una descripción vamos a abrir lo que viene siendo 4 00:00:16,590 --> 00:00:21,960 nuestro código aquí vamos a poner en anuncios un poco de scroll hacia arriba y tampoco de scroll hacia 5 00:00:21,960 --> 00:00:31,380 abajo entonces tenemos que ver propiedad vamos a seleccionar todos los enlaces se selecciona si presionas 6 00:00:31,390 --> 00:00:40,530 comande o controlde que vamos a enlazar hacia un archivo llamado anuncio anuncio o punto HTML entonces 7 00:00:40,530 --> 00:00:47,190 todos nos van a llevar al mismo lugar al mismo archivo no hay problema ahorita al final hacemos un repaso 8 00:00:47,190 --> 00:00:54,940 de por qué y cómo puedes hacer más dinámico anuncio apuntó HTML y vamos a abrir también nosotros que 9 00:00:54,940 --> 00:01:00,480 este es un buen templete para el inicio por lo tanto copiamos y pegamos entonces si das click por ejemplo 10 00:01:00,480 --> 00:01:06,520 aquí en alguno de estos te lleva al template de anuncio apuntó HTML con el contenido de nosotros. 11 00:01:06,540 --> 00:01:12,860 Primer paso vamos a limpiar el contenido previo eliminamos todo dejamos nada más el joderia el Führer 12 00:01:13,460 --> 00:01:23,410 vamos a colocar aquí una H1 y puede ser que no coloque ningún tipo de fondo wait €300 y alinear centrar 13 00:01:23,550 --> 00:01:30,260 texto y le damos un nombre a esta propiedad por ejemplo casa en venta en la playa que no pusimos ninguno 14 00:01:30,270 --> 00:01:36,420 pero bueno bueno casa en venta frente al bosque será un poco más relacionado a nuestros anuncios y después 15 00:01:36,420 --> 00:01:40,440 podemos ver que si abrimos esta parte puede ser que esta imagen toma todo el contenido disponible es 16 00:01:40,440 --> 00:01:45,750 por eso que no coloques ningún Dip ni nada para que no quede centrado. 17 00:01:45,920 --> 00:01:55,540 CMG ponemos aquí y M.G. La imagen que voy hace más destacada apuntó JPG imagen anuncio. 18 00:01:55,930 --> 00:02:00,940 Si guardamos cambio si abrimos el proyecto puedes ver que tenemos una imagen que toma todo el espacio 19 00:02:00,940 --> 00:02:06,970 que haya disponible y se va a ver de esta forma porque si recuerdas habíamos puesto ni este pequeño 20 00:02:06,970 --> 00:02:14,080 código que hace que la imagen tome máximo todo el espacio que hay disponible pero no se pase de ahí 21 00:02:14,510 --> 00:02:16,170 y se ve bastante bien. 22 00:02:16,560 --> 00:02:22,330 Siguiente paso es que puedes ver que tenemos lo que viene siendo el precio y también los iconos por 23 00:02:22,330 --> 00:02:27,250 lo tanto vamos a comenzar a trabajar en esa parte vamos a definirle sus Moine. 24 00:02:27,250 --> 00:02:34,930 Por lo tanto Mayne y algunas clases vamos a poner el contenedor y también la sección que es una utilidad 25 00:02:34,960 --> 00:02:39,060 que creamos y vamos a crear una clase llamada contenido centrado. 26 00:02:39,220 --> 00:02:43,180 Ahorita la explicamos de qué se trata esta clase. 27 00:02:43,180 --> 00:02:48,880 Después vamos a crear un que va a decir resúmen y ponemos los humean propiedad que nos envió a medias 28 00:02:49,920 --> 00:02:59,840 y llevamos a un párrafo que va a decir con una clase precio aquí ponemos tres millones y después vamos 29 00:02:59,840 --> 00:03:05,840 a crear los iconos y los iconos los vamos a copiar del índex usar un poco de scroll es que aquí tenemos 30 00:03:05,840 --> 00:03:14,180 los iconos vemos todo esto y lo pegamos aquí vamos a tener el precio y los iconos si guardas cambios 31 00:03:14,180 --> 00:03:18,170 si abres el proyecto puedes ver que los iconos se expanden totalmente y toman todo el espacio que haya 32 00:03:18,170 --> 00:03:19,460 disponible. 33 00:03:19,460 --> 00:03:26,270 Enseguida lo solucionamos y después de este Dib tenemos el resumen de propiedad va a crear un comentario 34 00:03:27,660 --> 00:03:34,460 ponemos un comentario y vamos a crear aquí lo que viene siendo la descripción que vamos a copiar de 35 00:03:34,460 --> 00:03:45,150 nueva cuenta un poco del orden Ipsum pegamos aquí ponemos upe y cerramos el pie y ponemos impe y cerramos 36 00:03:45,150 --> 00:03:51,050 el PE entonces guardamos cambios de nueva cuenta abrimos el proyecto y tenemos la descripción. 37 00:03:51,070 --> 00:03:56,590 El primer paso que voy a hacer es aquí por ejemplo puede ser que coloque iconos características este 38 00:03:56,590 --> 00:04:00,970 selector ya lo tenemos definido aquí pero puedes ver que está tomando todo el espacio disponible. 39 00:04:00,970 --> 00:04:07,450 Lo que voy a hacer es acotarlo un poco y decirle Max Willett 500 píxeles queda ahí no se pase que sea 40 00:04:07,460 --> 00:04:12,100 máximo 500 píxeles eso no nos va a afectar lo que viene siendo la página principal del que se sigue 41 00:04:12,100 --> 00:04:12,630 viendo bien. 42 00:04:13,800 --> 00:04:18,060 Entonces se va a ver un poco más pequeño más comprimido porque de otra forma quedaban los iconos y dos 43 00:04:18,060 --> 00:04:24,420 letras muy separados y tal vez se iba a prestar a que no iban a entender muy bien las personas de qué 44 00:04:24,420 --> 00:04:25,360 se trata. 45 00:04:25,440 --> 00:04:30,000 El siguiente paso es que puedes ver que lo que es el precio y los iconos deben estar en el mismo nivel 46 00:04:31,070 --> 00:04:35,120 por eso que yo creé este resumen propiedad. 47 00:04:35,120 --> 00:04:40,690 Por lo tanto vamos a dar scroll y puedes ver que aquí tenemos lo que son las páginas internas que vamos 48 00:04:40,690 --> 00:04:49,330 a ponerle a un comentario que diga nosotros es el código de nosotros y este va a ser el de anunció anunció 49 00:04:50,720 --> 00:04:54,180 y solamente ponemos resúmen propiedad y de nueva cuenta. 50 00:04:54,180 --> 00:05:00,450 Puedes ver que si abrimos el diseño uno está la izquierda otro a la derecha ya podría se puede decir 51 00:05:00,450 --> 00:05:01,870 que ya es algo que deberías hacer. 52 00:05:02,900 --> 00:05:10,890 Display Flex y Estefi content spaces between de esa forma se coloca uno del lado izquierdo otro del 53 00:05:10,890 --> 00:05:11,520 lado derecho. 54 00:05:11,520 --> 00:05:16,650 Ahora puedes ver que aquí se ve un poco extraño nos pasó lo mismo que había pasado anteriormente si 55 00:05:16,650 --> 00:05:22,560 recuerdas en la imagen de contacto imagen contactos y recuerdas tuvimos que poner este Flex 1 porque 56 00:05:22,560 --> 00:05:24,020 el contenido se comprime. 57 00:05:24,070 --> 00:05:30,040 Entonces le ponemos un flex 1 para que crezca nuevamente entonces vamos a darle scroll hacia arriba 58 00:05:30,040 --> 00:05:38,850 vamos a poner iconos características y aquí nada más le ponemos Flex 1 para que crezca pero siempre 59 00:05:39,690 --> 00:05:44,230 siendo limitado por estos 500 después que vuelve a su tamaño original. 60 00:05:44,430 --> 00:05:48,340 Ahora no está bien alineado porque puede ser que el precio quede así como muy arriba. 61 00:05:48,840 --> 00:05:53,250 Entonces vamos a dar vuelta hacia abajo estamos viendo como arriba para abajo pero bueno ya es lo último 62 00:05:54,450 --> 00:06:02,390 items Center recuerda intense alinea verticalmente mientras que yo estoy contén horizontalmente y parece 63 00:06:02,390 --> 00:06:04,620 ser que se ve de esta forma y queda bastante bien. 64 00:06:05,190 --> 00:06:10,800 Ahora este contenido queda como muy ancho en realidad de leer está como mucho espacio de aquí hasta 65 00:06:10,800 --> 00:06:11,700 acá. 66 00:06:11,700 --> 00:06:16,980 En el caso de nosotros no hubo problema porque tenemos esta imagen aquí que apoya hace que sea más fácil 67 00:06:16,980 --> 00:06:18,690 de leer en anuncios. 68 00:06:18,690 --> 00:06:25,350 No hay problema tenemos estas estos Kars pero por ejemplo un anuncio de aquí es un poco pesado de leer 69 00:06:25,350 --> 00:06:26,890 cuando lo ves tan ancho. 70 00:06:26,970 --> 00:06:35,340 Es por eso que yo he definido voy a cerrar este archivo en este y éste es definido esta clase que dice 71 00:06:35,340 --> 00:06:36,860 contenido centrado. 72 00:06:37,020 --> 00:06:42,180 Aquí tenemos un contenedor de 1200 píxeles pero podemos hacerlo un poco más pequeño para que no tome 73 00:06:42,180 --> 00:06:43,280 tanto. 74 00:06:43,380 --> 00:06:49,740 Por lo tanto vamos a las utilidades vamos a crear una más un poco de scroll y aquí vamos a poner el 75 00:06:49,740 --> 00:06:58,140 punto contenido centrado y vamos a ponerle un Max Wit de 800 píxeles y queda ahí no se puede ser queda 76 00:06:58,150 --> 00:07:02,030 más al centro más fácil de leer y se ve mucho mejor. 77 00:07:02,160 --> 00:07:07,490 Estaremos utilizando esta clase para las páginas restantes blogs y contactos así que por eso creamos 78 00:07:07,510 --> 00:07:08,540 una vez. 79 00:07:08,790 --> 00:07:12,810 Después ver que se ve bastante bien lo importante es la casa y puedes ver que tomas la mayor cantidad 80 00:07:12,810 --> 00:07:19,230 de espacio y se ve bastante bien lista una sección más puedes ver que estamos avanzando muy rápido de 81 00:07:19,230 --> 00:07:25,050 nueva cuenta dignísima a tomar más tiempo que las otras pero una vez que terminas la de inicio siempre 82 00:07:25,050 --> 00:07:28,960 se acelera un proceso o siempre se acelera el proceso un poco más. 83 00:07:29,040 --> 00:07:33,240 Algo importante es que todos estos anuncios se conoce como algo estático puedes ver que todos nos llevan 84 00:07:33,240 --> 00:07:38,910 hacia la misma casa para hacerlo un poco más dinámico usualmente se requiere el uso de una base de datos 85 00:07:39,210 --> 00:07:45,530 y la creación de un sistema de administración que con la parte o con lo que veamos de PHP y Meucci cual 86 00:07:45,780 --> 00:07:51,240 podrá realizarlo sin ningún problema con eso está lista esta parte el siguiente vamos a continuar con 87 00:07:51,240 --> 00:07:53,830 el blog así que continuamos en el siguiente video.