1
00:00:03,420 --> 00:00:08,220
Vemos como darle estilos a la sección de nosotros primer paso que vamos a hacer es abrir el estudio

2
00:00:08,220 --> 00:00:15,760
COV hacer más grande esta parte y abrir el Index voy a crear un nuevo archivo que voy a nombrar nosotros

3
00:00:15,760 --> 00:00:22,380
puntua HTML puede ser que ese enlace ya lo hemos creado copió toda la parte del Führer y las pegamos

4
00:00:22,380 --> 00:00:24,710
aquí.

5
00:00:24,750 --> 00:00:32,870
También voy a copiar lo que viene siendo parte del Jader toda esta parte desde aquí desde el género

6
00:00:32,880 --> 00:00:39,600
hasta el dock Tippi toda esta parte de aquí es necesaria si guardamos cambios y damos clic por ejemplo

7
00:00:39,600 --> 00:00:46,640
aquí en nosotros nuestro diseño que estamos creando en nosotros tenemos el género y el Führer vamos

8
00:00:46,670 --> 00:00:52,440
a comenzar vamos a abrir lo que viene siendo nuestro proyecto y aquí dentro de entre el Javer y el Führer

9
00:00:52,530 --> 00:00:59,220
vamos a colocar un Moine con la clase contenedor para que el contenido esté centrado en H2 con la clase

10
00:00:59,540 --> 00:01:07,980
central texto ya la creamos anteriormente sobre nosotros y debido a que vamos a estar utilizando puedes

11
00:01:07,980 --> 00:01:14,420
ver que si vemos este diseño pequeño puede ser que se coloca la imagen arriba el texto abajo y másgrande

12
00:01:14,600 --> 00:01:19,790
izquierda y derecha te voy a mostrar cómo crear un grid muy sencillo similar al de vuestra por ejemplo

13
00:01:19,970 --> 00:01:25,730
se cree que una clase llamada Grid y esto Grid por ejemplo nos va a permitir que si recuerdas anteriormente

14
00:01:25,730 --> 00:01:31,780
teníamos el blog y cursos habíamos creado un contenido principal y teníamos esta clase y luego esta

15
00:01:31,790 --> 00:01:37,330
otra podemos hacerlo incluso un poco más dinámico por así decirlo más utilizable.

16
00:01:37,340 --> 00:01:43,610
Por lo tanto nuestro contenedor va a ser el grid y vamos a colocar dos chips con la clase Columna 6

17
00:01:45,170 --> 00:01:55,000
Columna 6 por 2 para que nos genere 2 que vamos a poner una imagen imagen Megía diagonal nosotros puntos

18
00:01:55,030 --> 00:01:56,400
JPG.

19
00:01:56,520 --> 00:02:03,840
Aquí ponemos imagen nosotros guardamos cambios si abrimos el proyecto puedes ver que aparece la imagen

20
00:02:03,880 --> 00:02:10,770
que de esta forma vamos a copiar un poco del orden Ipsum porque requerimos dos párrafos después vamos

21
00:02:10,770 --> 00:02:20,120
a colocar y a pegar el contenido y digamos que este sería el primer párrafo para seleccionar cualquier

22
00:02:20,120 --> 00:02:33,610
parte en realidad este sería el primero digamos de aquí a aquí puede ser y ponemos el segundo Spee en

23
00:02:33,660 --> 00:02:39,530
segundo iría destaca resguardamos cambios y abrimos el proyecto pues el que tenemos nuestro párrafo

24
00:02:39,710 --> 00:02:46,400
queda más o menos de esta forma se me fue una s más elfinal entonces el que queda esta forma se fue

25
00:02:46,430 --> 00:02:50,870
viendo bien incluso para un dispositivo móvil puede ser que es correcto no tenemos que hacer nada tenemos

26
00:02:50,870 --> 00:02:56,530
que enfocarnos en la parte más grande por lo tanto vamos a abrir el estilo a usar escarola hasta arriba

27
00:02:56,980 --> 00:03:04,840
y por ejemplo aquí después de utilidades vamos a crear un pequeño comentario que va a decir grid en

28
00:03:04,860 --> 00:03:09,750
el dispositivo más pequeño de nuestro Grit no va a hacer nada por lo tanto MQ solamente en un dispositivo

29
00:03:09,750 --> 00:03:16,780
más grande y obviamente podrías hacerlo como hace vostra vez que es decir múltiples clases para distintos

30
00:03:16,780 --> 00:03:17,320
tamaños.

31
00:03:17,320 --> 00:03:19,360
Esto es un poco más sencillo en ese aspecto.

32
00:03:20,170 --> 00:03:26,520
Entonces Grit cuando sea que tengamos esa clase como padre vamos a tener Flex y también yo estoy contento.

33
00:03:26,640 --> 00:03:33,090
Beduina es lo mismo que hemos visto anteriormente pero ahora en la clase de grit y después vamos a poner

34
00:03:33,090 --> 00:03:35,130
aquí columnas 6.

35
00:03:35,130 --> 00:03:42,300
Es decir cuando tengamos esta clase se va a aplicar un flex cero cero como vimos anteriormente y un

36
00:03:42,300 --> 00:03:49,170
cal que va a decir 50 por ciento menos hombreee eso nos va a permitir que se posicione uno frente al

37
00:03:49,170 --> 00:03:51,710
otro pues es que si guardamos cambios queda de esta forma.

38
00:03:52,240 --> 00:03:59,270
Y si estuviera más pequeño no aplicaría esta medida QWERTY y se posiciona uno debajo del otro muy sencillo

39
00:03:59,270 --> 00:04:03,690
agrietó obviamente estaremos agregando más clases conforme pasen los videos ahora tal vez digas bueno

40
00:04:03,680 --> 00:04:05,370
y por qué columna 6.

41
00:04:05,410 --> 00:04:14,000
Bueno usualmente estos Firework como Bootstrap utilizan 12 columnas y en diseño web por ejemplo 12 columnas

42
00:04:14,000 --> 00:04:19,730
es como el equivalente a poder lograr cualquier diseño por así decirlo obviamente tiene sus limitaciones

43
00:04:20,480 --> 00:04:27,320
pero es un número con el que la mayoría de los diseños pueden ser logrados para lograr como cierto cierto

44
00:04:27,320 --> 00:04:29,030
diseño que se ve bastante bien.

45
00:04:29,350 --> 00:04:34,520
Entonces tenemos 6 y 6 entre las dos sería el 100 por ciento por lo tanto cada una sería 50 y 50 por

46
00:04:34,520 --> 00:04:41,330
ciento así que estaremos creando más columnas y un poco más adelante más clases aquí para hacer nuestro

47
00:04:41,330 --> 00:04:42,740
grito un poco más dinámico.

48
00:04:43,710 --> 00:04:48,870
Esta parte está lista si damos clic en cursos puedes ver que tenemos este diseño para los cursos así

49
00:04:48,870 --> 00:04:50,510
que vamos a crearlo en el siguiente video.