1
00:00:00,150 --> 00:00:07,080
Ahora cambiemos el color del texto de la H-1 y la edad de 3

2
00:00:08,000 --> 00:00:20,160
en este momento es que el color de arranque predeterminado oscuro entrará aquí y podríamos hacer H-1 color blanco y H-3 color blanco y refrescar.

3
00:00:20,550 --> 00:00:22,790
Y recibimos texto blanco así como así.

4
00:00:22,950 --> 00:00:29,820
Pero también podemos hacer una combinación de estos dos porque son idénticos y tienen H-1 coma H-3 y eso

5
00:00:29,820 --> 00:00:31,660
hará que ambos sean blancos.

6
00:00:32,010 --> 00:00:34,750
Cada vez que tenemos una coma, simplemente selecciona diferentes grupos.

7
00:00:34,770 --> 00:00:40,820
Entonces todos los gemelos tienen tres años y se ven exactamente iguales.

8
00:00:41,400 --> 00:00:50,340
Pero incluso podemos simplificar esto más y solo asignar todo en el cuerpo para que sea de color blanco.

9
00:00:50,340 --> 00:00:55,350
Y podría pensar que podría haber un problema que podría cambiar o que el botón podría cambiar o una barra de navegación, pero

10
00:00:55,350 --> 00:00:56,790
recuerde que esos son más específicos.

11
00:00:56,790 --> 00:01:02,760
Tenemos clases de Bootstrap que están haciendo eso frente a estos son simplemente H-1 y H-3 que no tienen

12
00:01:02,760 --> 00:01:08,130
ninguna clase o ID y son más fáciles de anular con sus propios estilos al establecer el

13
00:01:08,190 --> 00:01:14,780
color del cuerpo en blanco el H1 y los tres años heredaron ese color y todo lo demás también lo hizo.

14
00:01:14,850 --> 00:01:16,030
Simplemente fue anulado.

15
00:01:16,050 --> 00:01:21,730
Entonces, si inspeccionamos, digamos este botón y echamos un vistazo.

16
00:01:22,650 --> 00:01:30,860
Cuando lo seleccionamos y ve que el color está configurado en este color es 3 3 3 por la clase Botón predeterminado.

17
00:01:30,990 --> 00:01:38,460
Pero si seguimos desplazándonos hacia abajo verás que el cuerpo aquí establece el color en blanco

18
00:01:38,460 --> 00:01:40,520
y resulta que está tachado.

19
00:01:40,650 --> 00:01:41,390
Todo bien.

20
00:01:41,970 --> 00:01:44,900
Entonces, una vez más, dijo que ambos eran blancos.

21
00:01:44,910 --> 00:01:46,980
Ahora trabajemos en el tamaño de la fuente.

22
00:01:47,160 --> 00:01:48,870
Entonces son H-1.

23
00:01:48,930 --> 00:01:51,490
Queremos que se pliegue, lo que no es actualmente.

24
00:01:51,690 --> 00:01:58,260
un peso de fuente de 700, que es la forma en que usamos la actualización en negrita .

25
00:01:58,290 --> 00:02:03,600
Entonces, debe ser audaz y quiero que sea de 5 cm, que es cinco veces

26
00:02:06,540 --> 00:02:11,570
más grande que el elemento principal, así que seleccionaremos cada uno y le daremos

27
00:02:11,970 --> 00:02:12,860
Puedes verlo en negrita.

28
00:02:12,890 --> 00:02:21,100
Ahora hagámoslo mucho más grande para el tamaño de fuente 5 E-M.

29
00:02:21,270 --> 00:02:24,480
Ahora regresa y ahí vamos.

30
00:02:24,680 --> 00:02:25,880
Así que eso es mirar más de cerca.

31
00:02:25,880 --> 00:02:32,230
Ahora, esta relación entre el H1 y el H-3 se ve exactamente igual.

32
00:02:32,250 --> 00:02:37,200
No es necesario que hagamos nada al H-3 para que la imagen se comporte como queremos.

33
00:02:37,980 --> 00:02:41,460
Y para hacer eso, voy a mostrarte algo que no hemos visto antes.

34
00:02:41,730 --> 00:02:48,470
Voy a mover el lado oscuro al lado derecho y si inspecciono el elemento envejecido o el cuerpo verán

35
00:02:48,480 --> 00:02:52,190
que ambos se detienen antes del final de la página.

36
00:02:52,200 --> 00:02:53,280
Entonces aquí.

37
00:02:53,430 --> 00:02:55,500
Ese es el final de la edad de mi documento.

38
00:02:55,500 --> 00:03:02,520
Así que cuando le digo a mi imagen que cubra el cuerpo y le digo que es el tamaño de fondo para cubrir y

39
00:03:02,520 --> 00:03:09,180
la posición de fondo para ser centro, toma en cuenta el tamaño del cuerpo y cuando el cuerpo termina aquí se comporta de

40
00:03:09,180 --> 00:03:09,860
manera diferente.

41
00:03:10,080 --> 00:03:16,920
Lo que haremos para solucionarlo es darle al elemento HTL una altura del 100 por ciento, lo que significa que debe

42
00:03:17,280 --> 00:03:22,420
ocupar el 100 por ciento del contenedor, que es solo la ventana completa del documento.

43
00:03:23,150 --> 00:03:30,450
Altura masculina 100 por ciento y volveremos.

44
00:03:30,840 --> 00:03:33,580
Hagamos que sea pantalla completa ahora y refresque.

45
00:03:33,950 --> 00:03:37,630
Y nuestra imagen funciona de la manera en que lo esperamos y me encojo.

46
00:03:37,860 --> 00:03:40,260
Y eso también se ve bien para mí.

47
00:03:40,260 --> 00:03:43,300
Ahora tenemos dos cosas principales para enfocarnos.

48
00:03:43,430 --> 00:03:45,470
El primero es el H. R. Es demasiado amplio para nosotros, se supone que es mucho más pequeño.

49
00:03:45,540 --> 00:03:50,540
Y luego también quiero centrarme en la fuente aquí.

50
00:03:51,180 --> 00:03:54,010
Bueno, comienza a elegir la obra de arte y todo lo que queremos hacer es darle una de 400 píxeles.

51
00:03:54,570 --> 00:04:01,170
Entonces, en nuestro C Ss, seleccionaremos h en la parte inferior con 400 píxeles.

52
00:04:01,170 --> 00:04:12,410
Aquí vamos.

53
00:04:12,450 --> 00:04:13,550
Otra cosa que haré es

54
00:04:13,560 --> 00:04:18,330
un poco furtiva que quizás no hayas notado ya que voy a entrar aquí y le doy un Forder en la parte superior.

55
00:04:18,330 --> 00:04:23,460
Un pixel sólido

56
00:04:23,460 --> 00:04:26,150
Entonces tienen un color aquí que es f 8 8 8.

57
00:04:26,250 --> 00:04:31,620
Y luego un borde inferior que es un píxel sólido y este será un color transparente.

58
00:04:32,220 --> 00:04:41,920
Cero cero cero punto cero dos.

59
00:04:41,960 --> 00:04:46,610
Entonces esto no le dará el efecto de una sombra.

60
00:04:46,830 --> 00:04:49,530
Entonces presta atención.

61
00:04:49,990 --> 00:04:50,800
Es realmente difícil de ver.

62
00:04:50,820 --> 00:04:52,720
Ni siquiera sé si voy a

63
00:04:52,830 --> 00:04:58,560
retomar el elenco de la pantalla, pero lo que tenemos es un borde y luego, justo debajo del borde,

64
00:04:58,560 --> 00:05:05,970
una línea gris clara que hace que parezca que hay una pequeña sombra que se muestra un poco mejor sobre el colores más claros.

65
00:05:05,970 --> 00:05:08,490
DE ACUERDO.

66
00:05:08,900 --> 00:05:09,140
Entonces

67
00:05:09,150 --> 00:05:13,770
no puedes ver eso lo suficiente si confías en mí o puedes deshacerte de la imagen de fondo y será más fácil verla allí también.

68
00:05:13,770 --> 00:05:15,050
Luego, centrémonos en los iconos que utilicé, divertidos y divertidos.

69
00:05:16,050 --> 00:05:20,690
Así que lo tengo abierto.

70
00:05:20,690 --> 00:05:21,510
Divertido.

71
00:05:21,500 --> 00:05:21,780
Increíble.

72
00:05:21,780 --> 00:05:22,320
Lo sé.

73
00:05:22,350 --> 00:05:23,180
Y también tendremos el CD aquí.

74
00:05:23,570 --> 00:05:25,980
Si hace clic en comenzar, hay un CDN que puede copiar allí.

75
00:05:26,370 --> 00:05:30,970
Ponlo en nuestra aplicación y también

76
00:05:30,990 --> 00:05:39,390
hazlo arriba guarda y luego echaremos un vistazo a los iconos reales.

77
00:05:39,380 --> 00:05:40,370
Y el primero que sabemos que usamos es un PA.

78
00:05:40,980 --> 00:05:45,030
Y para hacerlo, todo lo que necesitamos es un ECO de clase alta F A F A dash PA.

79
00:05:45,930 --> 00:05:51,310
Así que lo puse dentro del botón.

80
00:05:51,660 --> 00:05:53,630
Entonces, si vamos al botón justo antes de comenzar, lo agregué.

81
00:05:54,030 --> 00:05:59,350
Ahora, si volvemos y actualizamos, puede ver si tenemos un pequeño botón allí y tenemos

82
00:05:59,430 --> 00:06:04,590
una huella de la mano. Aquí tenemos dos iconos para registrarse e iniciar sesión.

83
00:06:05,120 --> 00:06:08,820
Y esos dos recuerdo lo que son.

84
00:06:09,500 --> 00:06:11,760
Voy a hacer eso aquí al lado para suscribirme después de que escribamos que desea agregar otro ícono.

85
00:06:11,790 --> 00:06:19,550
Excepto que esta clase de tiempo no es F-8 PA sino F. A. dash user dash Plus que nos da ese ícono con el signo más e inicia sesión

86
00:06:19,860 --> 00:06:29,180
es lo mismo sin el más.

87
00:06:29,190 --> 00:06:34,880
Entonces, un usuario de tablero y tenemos esos dos iconos.

88
00:06:34,920 --> 00:06:40,160
Hay otra cosa que hice que puede que no hayas notado cuál es la sombra de texto.

89
00:06:40,250 --> 00:06:44,840
Entonces, hay una sombra alrededor de todo el texto aquí y verlo allí puede verlo aquí.

90
00:06:45,030 --> 00:06:52,650
Está alrededor de la H-1 y la H-3 y la sombra tecnológica es algo que podemos establecer con la sombra del tablero de texto SS.

91
00:06:52,640 --> 00:07:01,350
Y hay un montón de piezas para eso.

92
00:07:02,060 --> 00:07:04,010
Así que pueden ver aquí que estamos sentados en el desplazamiento X el desplazamiento y.

93
00:07:04,130 --> 00:07:08,040
Entonces, qué tan lejos de las palabras debe ir la sombra.

94
00:07:08,120 --> 00:07:11,680
Luego, también estamos configurando el radio de esas faltas de definición, así que, básicamente, qué tan grueso debería ser.

95
00:07:11,810 --> 00:07:16,240
Y luego el color y la sombra que estoy usando es un poco complicado.

96
00:07:16,500 --> 00:07:21,430
Hay muchas piezas, así que voy a escribirlas una a una en el archivo CSSA.

97
00:07:21,480 --> 00:07:26,930
Por lo tanto, dentro del contenido div se agregará la sombra del tablero de texto y luego la primera hará.

98
00:07:26,970 --> 00:07:34,620
Cero píxeles 4 píxeles 3 píxeles y haré que sea realmente

99
00:07:34,620 --> 00:07:44,250
obvio comenzar a hacerlo rojo y si actualizo la sombra que estamos agregando primero.

100
00:07:45,500 --> 00:07:48,210
Ahora vaya y agregue el segundo con

101
00:07:48,260 --> 00:07:57,860
una coma y sangría un poco y luego queremos 0 píxeles, 8 píxeles y 13 píxeles y luego en naranja aquí y echemos un vistazo a ese.

102
00:07:59,910 --> 00:08:06,460
naranja brillante y luego hay una tercera sombra que es 0 píxeles que recuerda que este primer

103
00:08:07,350 --> 00:08:13,890
número es el desplazamiento X y luego el desplazamiento y 18 píxeles y luego 23 píxeles es

104
00:08:15,480 --> 00:08:23,810
el radio y lo haremos haz que este sea amarillo y podemos ver que tenemos la sombra del título rojo brillante.

105
00:08:23,820 --> 00:08:27,540
Puedes ver que tenemos esta más borrosa debajo de su

106
00:08:32,120 --> 00:08:35,490
Y luego el naranja que está un poco más lejos.

107
00:08:35,490 --> 00:08:37,730
Y luego el amarillo que es mucho más borroso y mucho más ancho.

108
00:08:37,830 --> 00:08:41,670
Entonces queremos cambiar esos colores.

109
00:08:41,700 --> 00:08:43,650
No queremos trabajar con eso.

110
00:08:43,640 --> 00:08:45,370
Entonces los colores son un poco menos emocionantes.

111
00:08:45,450 --> 00:08:48,160
El primero.

112
00:08:48,210 --> 00:08:49,900
Cero cero cero cero 0. 4.

113
00:08:50,160 --> 00:08:54,740
El siguiente muy similar en lugar de 0. 4 0. 1.

114
00:08:54,770 --> 00:09:01,550
Y luego uno más que también es 0. 1.

115
00:09:01,910 --> 00:09:06,210
Entonces usando R. GRAMO. B-A solo estamos configurando diferentes tonos de gris.

116
00:09:06,210 --> 00:09:10,870
Y ahí vamos.

117
00:09:11,970 --> 00:09:12,560
Mucho menos emocionante pero espero que todavía puedas verlo aquí.

118
00:09:12,600 --> 00:09:16,510
Es mucho más sutil pero solo agrega un poco de profundidad a la página.

119
00:09:16,560 --> 00:09:21,010
Estupendo.

120
00:09:21,060 --> 00:09:21,330
Entonces eso es todo lo que tenemos que hacer.

121
00:09:21,330 --> 00:09:22,830
Déjame volver y solo envolver algunas cosas.

122
00:09:23,250 --> 00:09:26,040
El gran punto que quiero hacer aquí es

123
00:09:26,040 --> 00:09:31,200
que podemos usar el arranque y confiar en él, pero no confiamos en todos sus estilos.

124
00:09:31,200 --> 00:09:32,300
Así que sí, mantuvimos la barra de navegación

125
00:09:32,340 --> 00:09:36,540
igual, aunque en el último video te mostré cómo podrías cambiar el color de la barra de navegación, pero cambiamos las fuentes en las que agregamos imágenes de fondo.

126
00:09:36,540 --> 00:09:40,760
Así que realmente solo usamos bootstrap como la base subyacente y

127
00:09:40,770 --> 00:09:45,960
luego agregamos todos los estilos en la parte superior y no tomó mucho.

128
00:09:46,430 --> 00:09:47,730
Pero creo que hicimos algo que parece relativamente respetable con solo unas pocas líneas de código.

129
00:09:47,850 --> 00:09:52,540
Y seamos honestos, la mitad de todo lo gordo de este texto Shadowline justo allí.

130
00:09:52,640 --> 00:09:56,580
Increíble.

131
00:09:56,750 --> 00:09:57,310
Así que hicimos que el sitio se vea relativamente bueno.

132
00:09:57,440 --> 00:10:00,230
Hemos terminado con bootstrap por ahora.

133
00:10:00,270 --> 00:10:01,900
Luego pasamos a Javascript en la próxima unidad, lo cual es realmente emocionante.

134
00:10:01,980 --> 00:10:05,460
Nos alejaremos de la creación de sitios y de cosas

135
00:10:05,690 --> 00:10:10,680
que se vean bien por un tiempo para que podamos centrarnos exclusivamente en Javascript.

136
00:10:10,670 --> 00:10:12,670
cosas que no solo se vean bien.

137
00:10:12,810 --> 00:10:16,910
Pero luego reuniremos todo de nuevo y haremos algunos sitios hermosos que realmente hagan

138
00:10:17,040 --> 00:10:18,560
Así que eso está por venir. Espero que disfrutes con el arranque. Disfruté esta unidad.

139
00:10:18,570 --> 00:10:22,160
Y como siempre, le recomiendo que descargue el código si tiene alguna pregunta.

140
00:10:22,350 --> 00:10:25,900
Está en la descripción de este video.

141
00:10:25,890 --> 00:10:27,950
Está bien, veré la próxima unidad

142
00:10:27,960 --> 00:10:29,060