1
00:00:03,250 --> 00:00:07,790
Solo viendo bastante bien nuestro diseño y vamos a continuar ahora con esta parte que dice Casas y de

2
00:00:07,790 --> 00:00:15,330
paso en venta Sammir en HTML y un poco de scroll entonces es que llegamos así a esta parte.

3
00:00:15,330 --> 00:00:22,160
Ahora que tenemos este HD2 podemos poner un Clas y se recuerda que damos dos clases de Way 300 y también

4
00:00:22,330 --> 00:00:29,390
centrar texto si guardamos cambios abrimos el proyecto y que se utilizan las clases o se reutilizan.

5
00:00:29,520 --> 00:00:35,910
También puede ser que tenemos que colocar esto dentro del contenedor Clas y ponemos lo que viene siendo

6
00:00:35,910 --> 00:00:43,660
una sección nueva cuenta y también un contenedor se va a centrar el contenido y se va a ir viendo mucho

7
00:00:43,660 --> 00:00:44,800
mejor.

8
00:00:44,800 --> 00:00:48,820
Siguiente paso puedes ver que cada uno de estos elementos tiene este diseño en especial es muy común

9
00:00:48,820 --> 00:00:56,470
ver un diseño de este tipo se le conocen muchas veces como kart o karts existen en muchos frameworks

10
00:00:57,280 --> 00:01:02,580
así que veamos cómo hacerlos primero de nueva cuenta para posicionar cada elemento vamos a crear un

11
00:01:02,580 --> 00:01:10,650
tipo div class y vamos a nombrarlo contenedor anuncios esto para poder aplicar flexivos recuerda solamente

12
00:01:10,860 --> 00:01:16,050
se aplica al primer nivel de hijos y vamos a seleccionar todos estos tips.

13
00:01:16,050 --> 00:01:20,680
Intentar un poco y pegarlo aquí como el cierre de este día.

14
00:01:20,990 --> 00:01:26,730
Ahora también cada uno de estos tips que tenemos aquí que no tenían clase van a tener una clase llamada

15
00:01:26,730 --> 00:01:36,060
anuncio Class llamada anunció finalmente puedes ver que cada una de estas tenemos las imágenes y después

16
00:01:36,060 --> 00:01:43,650
los textos tenemos la imagen aquí pero todos los textos los vamos a poner dentro de un llamado contenido

17
00:01:44,160 --> 00:01:47,290
anuncio para poder aplicar un poco de CSS.

18
00:01:47,310 --> 00:01:55,520
Cortamos aquí y lo pegamos y vamos a intentar un poco el código lo mismo con los demás o de copiar está

19
00:01:55,540 --> 00:02:09,210
aquí a quienes antes de H3 corto pego e intentamos esta forma y vamos a colocar este aquí pegamos aquí

20
00:02:09,210 --> 00:02:14,730
de nueva cuenta cortamos pegamos e intentamos.

21
00:02:14,730 --> 00:02:21,110
De esta forma queda la nueva estructura para la sección de anuncios y casas de En venta salida de esta

22
00:02:21,110 --> 00:02:26,010
es usar un poco de scroll y de nueva cuenta un comentario más que va a decir aquí anuncios

23
00:02:30,270 --> 00:02:33,180
y vamos a seleccionar lo que viene siendo el padre de todos.

24
00:02:33,250 --> 00:02:40,920
Aquí contenedora anuncios de nueva cuenta vamos a aplicar Flex Books cada quien Display y vamos a habilitar

25
00:02:40,920 --> 00:02:47,730
Flex Box display Flex entonces guardamos cambios abrimos el proyecto y puede ser que se de esta forma.

26
00:02:47,730 --> 00:02:53,790
Queda este scroll hacia los lados pero eso pasa porque las imágenes son muy grandes en realidad tenemos

27
00:02:53,790 --> 00:02:58,460
que hacer estos elementos más pequeños igual que como hicimos aquí arriba entonces puede ver que tenemos

28
00:02:58,460 --> 00:03:06,240
aquí anuncio y vamos a colocarlo aquí punto a anuncio de nueva cuenta Flex Basis y vamos a colocar Calc

29
00:03:06,480 --> 00:03:13,970
33.3 por ciento menos RAM para que tome 33.3 por ciento y remueva 10 píxeles.

30
00:03:14,220 --> 00:03:17,540
Si guardamos cambios puedes ver que se sigue viendo de esta forma.

31
00:03:17,760 --> 00:03:19,610
Ahora por qué pasa esto.

32
00:03:19,630 --> 00:03:24,870
Bueno esto en realidad está pasando más que nada por las imágenes son bastante grandes y tenemos que

33
00:03:24,870 --> 00:03:29,610
hacer una forma de que las imágenes se hagan también más pequeñas o grandes de acuerdo al contenido.

34
00:03:29,790 --> 00:03:36,120
Es muy sencillo de hacer y queremos aplicarlo en todas las imágenes por lo tanto a quién globales vas

35
00:03:36,150 --> 00:03:38,260
a poner y M.G..

36
00:03:38,760 --> 00:03:43,110
Y esta es una etiqueta que va a seleccionar o mejor dicho es un selector que va a seleccionar todas

37
00:03:43,110 --> 00:03:49,100
las etiquetas de imágenes eso va a afectar todas las imágenes la del logo la de los anuncios y va a

38
00:03:49,140 --> 00:03:52,180
aplicarle o va a ser que todas las imágenes sean responsive.

39
00:03:53,070 --> 00:04:00,190
Max UIT-T y le ponemos 100 por ciento entonces guardamos cambios y puedes ver que se posicionan correctamente.

40
00:04:00,360 --> 00:04:07,760
Entonces ves que puedes ver que se ve bastante bien y éste este selector CSS está en todos mis proyectos.

41
00:04:07,770 --> 00:04:13,130
Esto es una declaración que utilizo siempre igual que todas estas aquí pero esta nunca falta.

42
00:04:13,210 --> 00:04:18,500
Qué se me permite que todas mis imágenes sean responsivo y puedes ver que lo que ya está no lo afecta

43
00:04:18,930 --> 00:04:22,920
pero las que eran muy grandes hace que se ajusten al contenedor.

44
00:04:22,920 --> 00:04:30,050
Gracias a ese Max with se va viendo bien bastante bien puedes ver que no hace falta aquí por ejemplo

45
00:04:30,050 --> 00:04:37,550
la separación ya tenemos lo que viene siendo el Calc este de aquí pero si recuerdas anteriormente habíamos

46
00:04:37,550 --> 00:04:39,500
utilizado Estefany content Espais dituen.

47
00:04:39,500 --> 00:04:45,310
Por lo tanto lo copiamos y lo pegamos pues el que nos genera la separación y se ve bastante bien.