1
00:00:00,240 --> 00:00:05,400
Vamos a comenzar a darle estilos a los que viene siendo nuestro Gelder porque puedes ver que nos hace

2
00:00:05,400 --> 00:00:06,930
falta lo que es el color de fondo.

3
00:00:06,930 --> 00:00:12,900
Va a ser muy sencillo en realidad así que no sabría stays saber un poco de scroll hacia abajo que tenemos

4
00:00:12,900 --> 00:00:22,260
Gelder 6GB y luego inicio vamos a crear una clase únicamente cuando tengamos el 6GB 6GB y abrimos llaves

5
00:00:22,620 --> 00:00:29,100
por lo tanto lo que esté aquí adentro aplica únicamente cuando tenemos Eiger como aquí un poco más para

6
00:00:29,150 --> 00:00:32,370
arriba más para arriba un 6GB.

7
00:00:32,820 --> 00:00:36,940
Pero cuando tengamos tantos Eiger como inicio se aplica este otro de aquí.

8
00:00:36,970 --> 00:00:43,000
Entonces por eso lo estamos haciendo así y lo único que va a tener es que va a tener un gran color de

9
00:00:43,000 --> 00:00:50,680
3 3 3 que es en color gris y también un poco de Padín un Reem arriba 0 a la derecha 3 abajo y 0 a la

10
00:00:50,680 --> 00:00:57,220
izquierda guardamos cambios abrimos el proyecto y que se ve de esta forma y eso no afecta lo que tenemos

11
00:00:57,220 --> 00:01:03,400
en el inicio porque si recuerdas este debe tener dos clases entonces se va a ver de esta forma y se

12
00:01:03,400 --> 00:01:10,270
ve se ve bastante bien en realidad entonces puedes ver esta técnica que a veces se utiliza muchas veces

13
00:01:10,270 --> 00:01:15,880
en muchos sitios son así asá tienen un Geddes de una forma y en las páginas internas es de otra forma.

14
00:01:15,890 --> 00:01:23,500
Es algo que puedes lograr de esta forma muy sencilla hacer un poco de scroll hasta abajo y vamos a crear

15
00:01:23,500 --> 00:01:28,050
un comentario que va a decir aquí que el código CSS de aquí en adelante es para las páginas internas

16
00:01:28,480 --> 00:01:29,700
de nueva cuenta.

17
00:01:29,710 --> 00:01:33,910
Muchas personas les gusta por ejemplo crear una hoja de estilos para nosotros una hoja de estilos para

18
00:01:33,910 --> 00:01:35,210
contacto.

19
00:01:35,230 --> 00:01:41,290
No es que sea mucha mucha ventaja porque en realidad es poco el código que cada página interna va a

20
00:01:41,290 --> 00:01:41,860
tener.

21
00:01:42,220 --> 00:01:48,160
Entonces yo usualmente prefiero colocar todo en una sola hoja de estilo porque de esa forma solamente

22
00:01:48,160 --> 00:01:53,530
mantengo una hoja de estilo si tuvieran múltiples páginas pues podría llegar a tener 10 o 15 hojas de

23
00:01:53,530 --> 00:01:56,100
estilo no sabría.

24
00:01:57,550 --> 00:02:02,950
Siendo la página principal para hacer que creamos este contenido nosotros este va a ser el padre del

25
00:02:02,950 --> 00:02:03,960
contenido.

26
00:02:04,300 --> 00:02:10,770
Por lo tanto podríamos utilizar aquí contenido nosotros y poner display Grit como vimos display Flex

27
00:02:10,780 --> 00:02:18,190
como vimos anteriormente un justificante entre muchas otras cosas pero otra otro estándar que está últimamente

28
00:02:18,490 --> 00:02:20,980
grita y grita es el nuevo estándar.

29
00:02:21,370 --> 00:02:26,200
Junto a Flex Books para crear sitios web y en realidad lo hace muy sencillo junto a Flex Books puedes

30
00:02:26,200 --> 00:02:29,290
ver que en el diseño final tenemos dos secciones.

31
00:02:29,320 --> 00:02:32,820
Ambas miden lo mismo es decir del lado izquierdo tenemos la mitad.

32
00:02:32,830 --> 00:02:38,320
El otro tiene la otra mitad y en Greed se utiliza algo llamado columnas por lo tanto vamos a poner aquí

33
00:02:38,980 --> 00:02:46,150
Grit template Colombes y tal vez sea un poco extraño pero aquí es donde defines el Layo es decir digamos

34
00:02:46,150 --> 00:02:52,870
50 50 50 por ciento para la imagen 50 por ciento para el texto y si guardas cambios puedes ver que el

35
00:02:52,870 --> 00:02:59,910
contenido se va a posicionar automáticamente se quiere inspeccionar y me coloco sobre contenido a ver

36
00:02:59,920 --> 00:03:01,520
que dice Grit template columns.

37
00:03:01,540 --> 00:03:06,120
Las columnas son una columna aquí y otra causa uno de izquierda y otro a la derecha.

38
00:03:06,220 --> 00:03:12,880
Aquí por ejemplo le puedes poner 20 por ciento y 80 por ciento o digamos 100 pixeles y lo que viene

39
00:03:12,880 --> 00:03:15,220
siendo el resto digamos 90 por ciento.

40
00:03:15,220 --> 00:03:21,040
Puedes jugar con estos valores solamente que recuerda si por ejemplo no colapso aquí estoy colocando

41
00:03:21,040 --> 00:03:27,010
display grid en el padre y tengo dos elementos hijos por lo tanto tengo que tener dos columnas y solamente

42
00:03:27,010 --> 00:03:31,170
agregó una se ve extraño no es nada malo aplicar 100 pixeles.

43
00:03:31,390 --> 00:03:37,120
Si tengo por ejemplo 3 columnas y agregó Muchas más columnas aquí tampoco va a funcionar por lo tanto

44
00:03:37,390 --> 00:03:41,840
tienes que revisar cuantos elementos hijos hay y de ahí definir tus columnas.

45
00:03:41,920 --> 00:03:45,620
Nuestro caso va a ser 50 por 150 por ciento.

46
00:03:45,820 --> 00:03:51,740
Ahora si ese grieta agrega también si le puedes poner un F.R una Ferrey y tal vez galvánica es un F.R

47
00:03:52,020 --> 00:03:53,980
bueno se quiere decir una fracción.

48
00:03:53,980 --> 00:03:59,590
Básicamente lo que hace es tomar todo el contenido y los divide una fracción para ti y la otra fracción

49
00:03:59,590 --> 00:04:02,350
para ti son dos fracciones por lo tanto mitad y mitad.

50
00:04:02,350 --> 00:04:06,340
Esta es una alternativa a 50 por ciento 50 por ciento.

51
00:04:06,370 --> 00:04:12,440
Existe otra opción que se llama repeat y puedes ganar por ejemplo dos que me dan 50 por ciento y puede

52
00:04:12,440 --> 00:04:17,170
ser que el resultado es exactamente el mismo se ve confuso si pero créeme que con la práctica podrás

53
00:04:17,170 --> 00:04:19,750
entenderlo y te va a ahorrar mucho tiempo.

54
00:04:19,750 --> 00:04:29,130
Finalmente también existe una F.R y bien podría ser repeat 2 de 100 pixeles y sería de esta forma voy

55
00:04:29,130 --> 00:04:38,660
a dejarlo aquí como repite 2 una Ferre puede ser que son como si fueran dos columnas de 50 50.

56
00:04:38,790 --> 00:04:44,760
Ahora anteriormente en Flags Books cuando posicionaban los elementos con un poquito de separación agregamos

57
00:04:44,760 --> 00:04:49,250
un margen Riet en lugar de poner margenes o PADI en cualquier cosa.

58
00:04:49,350 --> 00:04:55,800
Si ese es Grit identifica ese problema y agrega una propiedad llamada Grid con un gap y aquí le pones

59
00:04:55,800 --> 00:05:01,890
por ejemplo 20 píxeles que será igual a 2 fring y eso nos va a agregar separación entre cada columna

60
00:05:01,900 --> 00:05:08,010
quiero que tenga una separación y puede ser que nos crea la separación y la verdad bastante bien bastante

61
00:05:08,880 --> 00:05:13,980
fácil de utilizar puede ser que con solamente tres líneas podemos posicionar elementos de esta forma

62
00:05:13,980 --> 00:05:22,610
y tenemos mucho más control que por ejemplo Flex Box y también que anteriormente con float finalmente

63
00:05:22,930 --> 00:05:27,880
tenemos texto nosotros sí tenemos este blog se ve un poco diferente puede ser que por default se ve

64
00:05:27,880 --> 00:05:34,760
de esta forma queremos que se vea si entonces primero vamos a poner aquí texto nosotros luego el blog

65
00:05:34,770 --> 00:05:42,770
4 sanarlo y a un fondo Huay va a ser una fuente más gruesa así que le ponemos 900 podríamos crear una

66
00:05:42,770 --> 00:05:43,240
utilidad.

67
00:05:43,250 --> 00:05:49,740
Como vimos anteriormente pero solamente se va a utilizar este 900 aquí entonces Foncea es también 2

68
00:05:49,740 --> 00:05:54,510
Rubem para hacer un poco más grande un margen de cero por default tiene un poco de margen del lado izquierdo

69
00:05:55,020 --> 00:06:00,750
y un par de digamos tres Rubem arriba y cero si guardamos cambios que se ve de esta forma eliminamos

70
00:06:00,750 --> 00:06:06,180
el margen el pequeño margen que había del lado izquierdo por eso resetean el Marien a cero y agregamos

71
00:06:06,180 --> 00:06:12,240
un poco de Padín arriba y abajo arriba y abajo pero si se ve de esta forma ahora se ve un poco desbalanceado

72
00:06:12,630 --> 00:06:18,060
porque aquí tenemos espacio arriba y abajo no hay nada hay dos opciones o le agregamos por ejemplo un

73
00:06:18,060 --> 00:06:26,700
Padín hacia abajo nada más es decir arriba cero a la derecha 0 abajo 3 Reem y a la izquierda cero que

74
00:06:26,700 --> 00:06:32,660
queda un poco más balanceada aquí podría ser bien un Reem queda un poco mejor balanceado el texto aquí

75
00:06:32,660 --> 00:06:37,070
el espacio abajo y arriba es el mismo o eliminamos un poco de texto.

76
00:06:37,180 --> 00:06:41,860
En mi opinión creo que de esta forma se ve bien así que también es un detalle importante.

77
00:06:42,100 --> 00:06:47,860
Entonces puedes ver que bien se ve la página y la verdad es que tomó muy poco ya tomar o hacer esta

78
00:06:47,860 --> 00:06:54,550
página debido a que ya tenemos una buena cantidad de clases y de código previamente escrito con eso

79
00:06:54,550 --> 00:07:00,040
está lista esta sección en el siguiente video vamos a continuar ahora con anuncios así que veámoslo

80
00:07:00,040 --> 00:07:00,930
en el siguiente video.