1
00:00:00,150 --> 00:00:07,080
Agora vamos mudar a cor do texto do H-1 e os 3 anos agora

2
00:00:08,000 --> 00:00:20,160
é que a cor do bootstrap padrão escuro irá aqui e poderemos fazer a cor H-1 branca e a cor H-3 branca e atualizar.

3
00:00:20,550 --> 00:00:22,790
E nós obtemos texto branco assim.

4
00:00:22,950 --> 00:00:29,820
Mas também podemos fazer isso, é combinar estes dois porque eles são idênticos e fazem H-1 vírgula H-3 e

5
00:00:29,820 --> 00:00:31,660
isso fará ambos os brancos.

6
00:00:32,010 --> 00:00:34,750
Sempre que temos uma vírgula, apenas seleciona grupos diferentes.

7
00:00:34,770 --> 00:00:40,820
Então, todos os gêmeos envelhecem três e parece exatamente o mesmo.

8
00:00:41,400 --> 00:00:50,340
Mas podemos até simplificar isso e atribuir tudo no corpo para ser cor branca.

9
00:00:50,340 --> 00:00:55,350
E você pode pensar que haveria um problema que pode mudar ou o botão pode mudar ou barra de navegação, mas lembre-se

10
00:00:55,350 --> 00:00:56,790
de que esses são mais específicos.

11
00:00:56,790 --> 00:01:02,760
Nós temos aulas do Bootstrap que estão fazendo isso versus isso são simplesmente H-1 e H-3, eles não

12
00:01:02,760 --> 00:01:08,130
têm nenhuma classe ou IDs e são mais fáceis de ignorar com seus próprios estilos, definindo

13
00:01:08,190 --> 00:01:14,780
a cor do corpo em branco, o H1 e os três anos herdaram essa cor e tudo o resto também.

14
00:01:14,850 --> 00:01:16,030
Foi simplesmente anulado.

15
00:01:16,050 --> 00:01:21,730
Então, se inspecionarmos, digamos esse botão e damos uma olhada.

16
00:01:22,650 --> 00:01:30,860
Quando a selecionamos e você vê que a cor está definida para esta cor é 3 3 3 pela classe padrão do botão.

17
00:01:30,990 --> 00:01:38,460
Mas se continuarmos deslizando para baixo, você verá que o corpo aqui ajustou a cor para branco e

18
00:01:38,460 --> 00:01:40,520
simplesmente passa a ser interrompido.

19
00:01:40,650 --> 00:01:41,390
Tudo bem.

20
00:01:41,970 --> 00:01:44,900
Então, novamente, isso disse que ambos eram brancos.

21
00:01:44,910 --> 00:01:46,980
Agora vamos trabalhar no tamanho da fonte.

22
00:01:47,160 --> 00:01:48,870
Assim, são H-1.

23
00:01:48,930 --> 00:01:51,490
Queremos que seja dobrado, o que atualmente não é.

24
00:01:51,690 --> 00:01:58,260
um e daremos um peso de fonte de 700, que é como usamos a atualização em negrito .

25
00:01:58,290 --> 00:02:03,600
Então, isso precisa ser ousado e eu quero que seja 5 cms, que é

26
00:02:06,540 --> 00:02:11,570
cinco vezes maior, lembre-se do que o elemento pai, então vamos selecionar cada

27
00:02:11,970 --> 00:02:12,860
Você pode vê-lo em negrito.

28
00:02:12,890 --> 00:02:21,100
Agora, vamos também torná-lo muito maior, então tamanho da fonte 5 E-M.

29
00:02:21,270 --> 00:02:24,480
Agora volte e nós vamos.

30
00:02:24,680 --> 00:02:25,880
Então está olhando mais de perto.

31
00:02:25,880 --> 00:02:32,230
Agora, essa relação entre o H1 e o H-3 parece exatamente a mesma.

32
00:02:32,250 --> 00:02:37,200
Nós não precisamos fazer nada para o H-3 agora deve obter a imagem para se comportar da maneira que queremos.

33
00:02:37,980 --> 00:02:41,460
E para fazer isso, vou mostrar-lhe algo que não vimos antes.

34
00:02:41,730 --> 00:02:48,470
Eu vou mover o escuro para o lado direito e se eu inspecionar o elemento de idade ele fora ou o

35
00:02:48,480 --> 00:02:52,190
corpo, eles verão que ambos pararam antes do final da página.

36
00:02:52,200 --> 00:02:53,280
Então, aqui mesmo.

37
00:02:53,430 --> 00:02:55,500
Esse é o fim da idade para o meu documento.

38
00:02:55,500 --> 00:03:02,520
Então, quando eu digo a minha imagem para cobrir o corpo e eu disse que é o tamanho do fundo para cobrir e a

39
00:03:02,520 --> 00:03:09,180
posição do fundo para se centrar, leva em consideração o tamanho do corpo e quando o corpo acaba aqui, ele se comporta de

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

41
00:03:10,080 --> 00:03:16,920
O que faremos para corrigir isso é dar ao elemento HTL uma altura de 100 por cento, o

42
00:03:17,280 --> 00:03:22,420
que significa ocupar 100% do contêiner, que é apenas a janela inteira do documento.

43
00:03:23,150 --> 00:03:30,450
Altura masculina 100 por cento e voltaremos.

44
00:03:30,840 --> 00:03:33,580
Vamos fazer a tela cheia agora e atualizar.

45
00:03:33,950 --> 00:03:37,630
E nossa imagem funciona do jeito que esperamos e eu diminui.

46
00:03:37,860 --> 00:03:40,260
E isso parece ser bom para mim também.

47
00:03:40,260 --> 00:03:43,300
Agora, temos duas coisas principais a serem focadas.

48
00:03:43,430 --> 00:03:45,470
O primeiro é o H. R. É muito amplo para nós, suposto ser muito menor.

49
00:03:45,540 --> 00:03:50,540
E então eu também quero me concentrar na fonte aqui.

50
00:03:51,180 --> 00:03:54,010
Bem, começar a escolher a obra de arte e tudo o que queremos fazer é dar uma com de 400 pixels.

51
00:03:54,570 --> 00:04:01,170
Então, no nosso C Ss, selecionaremos h na parte inferior com 400 pixels.

52
00:04:01,170 --> 00:04:12,410
Aqui vamos nós.

53
00:04:12,450 --> 00:04:13,550
Outra coisa que vou fazer,

54
00:04:13,560 --> 00:04:18,330
é um pouco esburacada, que você não tenha notado que eu vou entrar aqui e dar uma Forder no topo.

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

56
00:04:23,460 --> 00:04:26,150
Então eles têm uma cor aqui que é f 8 8 8.

57
00:04:26,250 --> 00:04:31,620
E, em seguida, também um fundo de borda que é um pixel sólido e esta será uma cor transparente.

58
00:04:32,220 --> 00:04:41,920
Zero zero zero zero ponto dois.

59
00:04:41,960 --> 00:04:46,610
Então, isso não lhe dará o efeito de uma sombra.

60
00:04:46,830 --> 00:04:49,530
Então, preste atenção.

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

62
00:04:50,820 --> 00:04:52,720
Eu nem sei se eu vou

63
00:04:52,830 --> 00:04:58,560
pegar no elenco de tela, mas o que temos é uma borda e, logo, logo abaixo da borda,

64
00:04:58,560 --> 00:05:05,970
uma linha cinza clara que faz parecer que há uma leve sombra que se mostra um pouco melhor em relação à cores mais claras.

65
00:05:05,970 --> 00:05:08,490
ESTÁ BEM.

66
00:05:08,900 --> 00:05:09,140
Então,

67
00:05:09,150 --> 00:05:13,770
você não pode ver isso o suficiente se confiar em mim ou você pode se livrar da imagem de fundo e será mais fácil de ver lá também.

68
00:05:13,770 --> 00:05:15,050
Em seguida, vamos nos concentrar nos ícones com os quais eu usei divertido.

69
00:05:16,050 --> 00:05:20,690
Então eu tenho isso aberto.

70
00:05:20,690 --> 00:05:21,510
Diversão.

71
00:05:21,500 --> 00:05:21,780
Impressionante.

72
00:05:21,780 --> 00:05:22,320
Eu sei.

73
00:05:22,350 --> 00:05:23,180
E também receberemos o CD aqui.

74
00:05:23,570 --> 00:05:25,980
Se você clicar em começar, há um CDN que você poderia copiar lá.

75
00:05:26,370 --> 00:05:30,970
Coloque isso em nosso aplicativo e também faça

76
00:05:30,990 --> 00:05:39,390
isso no topo da economia e então vamos dar uma olhada nos ícones reais.

77
00:05:39,380 --> 00:05:40,370
E o primeiro que sabemos que usamos é um PA.

78
00:05:40,980 --> 00:05:45,030
E para fazer tudo o que precisamos é de classe alta ECOs F A F A dash PA.

79
00:05:45,930 --> 00:05:51,310
Então coloco isso dentro do botão.

80
00:05:51,660 --> 00:05:53,630
Então, se vamos ao botão logo antes de começar, adicionei isso em.

81
00:05:54,030 --> 00:05:59,350
Agora, se voltarmos e atualizarmos, você pode ver se temos um pequeno botão e temos uma

82
00:05:59,430 --> 00:06:04,590
impressão de palma em seguida, temos dois ícones aqui para se inscrever e fazer login.

83
00:06:05,120 --> 00:06:08,820
E aqueles dois eu lembro do que são.

84
00:06:09,500 --> 00:06:11,760
Eu só vou fazer isso aqui ao lado do registro depois que escrevemos, você quer adicionar outro ícone.

85
00:06:11,790 --> 00:06:19,550
Exceto que esta classe de tempo não é F-8 PA, mas F. UMA. dash user dash Plus, que nos dá esse ícone com o sinal de mais e log in

86
00:06:19,860 --> 00:06:29,180
é a mesma coisa sem o plus.

87
00:06:29,190 --> 00:06:34,880
Então, um usuário de tablaturas e nós temos esses dois ícones.

88
00:06:34,920 --> 00:06:40,160
Há uma outra coisa que fiz, que talvez não tenha notado qual é a sombra do texto.

89
00:06:40,250 --> 00:06:44,840
Então, há uma sombra em torno de todo o texto aqui e vê-lo pode ver aqui.

90
00:06:45,030 --> 00:06:52,650
É ao redor do H-1 e a sombra H-3 e tecnologia é algo que podemos definir com a sombra do traço de texto SS.

91
00:06:52,640 --> 00:07:01,350
E há um monte de peças para ele.

92
00:07:02,060 --> 00:07:04,010
Então você pode ver aqui que estamos sentando o deslocamento X o deslocamento y.

93
00:07:04,130 --> 00:07:08,040
Então, o quão longe das palavras deve ir a sombra.

94
00:07:08,120 --> 00:07:11,680
Então, também estamos definindo o raio daqueles borrões Então, basicamente, como deve ser grosso.

95
00:07:11,810 --> 00:07:16,240
E então, a cor e a sombra que estou usando são um pouco complicadas.

96
00:07:16,500 --> 00:07:21,430
Há muitas peças, então vou entrar e digitar uma peça de cada vez no arquivo CSSA.

97
00:07:21,480 --> 00:07:26,930
Então, dentro do div de conteúdo, adicionará sombra de tabelas de texto e depois o primeiro fará.

98
00:07:26,970 --> 00:07:34,620
Parâmetros zero de 4 pixels 3 pixels e tornarei realmente óbvio começar

99
00:07:34,620 --> 00:07:44,250
por torná-lo vermelho e se eu atualizar, há a sombra que estamos adicionando primeiro.

100
00:07:45,500 --> 00:07:48,210
Agora vá e adicione o segundo com

101
00:07:48,260 --> 00:07:57,860
uma vírgula e recuar um pouco e então queremos 0 pixels 8 pixels 13 pixels e depois laranja aqui e dê uma olhada nisso.

102
00:07:59,910 --> 00:08:06,460
da laranja brilhante e, depois, há uma terceira sombra, que é de 0 pixels, que lembra que este

103
00:08:07,350 --> 00:08:13,890
primeiro número é o deslocamento X e, em seguida, o deslocamento Y 18 pixels e depois 23 pixels

104
00:08:15,480 --> 00:08:23,810
é o raio e nós iremos faça com que este seja amarelo e podemos ver que temos a sombra do título vermelho brilhante.

105
00:08:23,820 --> 00:08:27,540
Você pode ver que temos uma imagem mais borrada embaixo

106
00:08:32,120 --> 00:08:35,490
E então a laranja que está um pouco mais longe.

107
00:08:35,490 --> 00:08:37,730
E então, o amarelo que é muito mais desfocado e muito mais largo.

108
00:08:37,830 --> 00:08:41,670
Então queremos mudar essas cores.

109
00:08:41,700 --> 00:08:43,650
Nós não queremos trabalhar com isso.

110
00:08:43,640 --> 00:08:45,370
Então, as cores são um pouco menos emocionantes.

111
00:08:45,450 --> 00:08:48,160
O primeiro.

112
00:08:48,210 --> 00:08:49,900
Zero zero zero zero 0. 4.

113
00:08:50,160 --> 00:08:54,740
Um próximo, em vez de 0. 4 0. 1.

114
00:08:54,770 --> 00:09:01,550
E então mais um que também é 0. 1.

115
00:09:01,910 --> 00:09:06,210
Então usando R. G. B-A estamos apenas definindo diferentes tons de cinza.

116
00:09:06,210 --> 00:09:10,870
E nós vamos lá.

117
00:09:11,970 --> 00:09:12,560
Muito menos excitante, mas espero que você ainda possa vê-lo aqui.

118
00:09:12,600 --> 00:09:16,510
É muito mais sutil, mas apenas adiciona um pouco de profundidade à página.

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

120
00:09:21,060 --> 00:09:21,330
Então é tudo o que precisamos fazer.

121
00:09:21,330 --> 00:09:22,830
Deixe-me voltar e apenas embrulhe algumas coisas.

122
00:09:23,250 --> 00:09:26,040
O grande ponto que quero fazer aqui é

123
00:09:26,040 --> 00:09:31,200
que podemos usar o bootstrap e confiar nisso, mas não confiamos em todos os seus estilos.

124
00:09:31,200 --> 00:09:32,300
Então, sim, mantivemos a barra de navegação

125
00:09:32,340 --> 00:09:36,540
do mesmo, embora no último vídeo mostrei como você poderia alterar a cor da barra de navegação, mas mudamos as fontes que adicionamos imagens de fundo.

126
00:09:36,540 --> 00:09:40,760
Então, realmente, simplesmente usamos o bootstrap como base fundamental e,

127
00:09:40,770 --> 00:09:45,960
em seguida, adicionamos todos os estilos no topo e não levou muito.

128
00:09:46,430 --> 00:09:47,730
Mas acho que fizemos algo que parece relativamente respeitável com apenas algumas linhas de código.

129
00:09:47,850 --> 00:09:52,540
E vamos ser honestos metade de tudo gordo, esse texto, Shadowline, ali mesmo.

130
00:09:52,640 --> 00:09:56,580
Impressionante.

131
00:09:56,750 --> 00:09:57,310
Então, o site pareceu relativamente bom.

132
00:09:57,440 --> 00:10:00,230
Terminamos com o bootstrap por enquanto.

133
00:10:00,270 --> 00:10:01,900
Em seguida, vamos para Javascript na próxima unidade, o que é realmente emocionante.

134
00:10:01,980 --> 00:10:05,460
Nós estaremos afastando-nos da criação de sites e coisas

135
00:10:05,690 --> 00:10:10,680
que ficam bonitas um pouco para que possamos nos concentrar apenas em Javascript.

136
00:10:10,670 --> 00:10:12,670
fazem coisas que não se parecem legais.

137
00:10:12,810 --> 00:10:16,910
Mas, então, vamos trazer tudo de volta e fazer alguns sites bonitos que realmente

138
00:10:17,040 --> 00:10:18,560
Então, isso está chegando, espero que o bootstrap tenha gostado desta unidade.

139
00:10:18,570 --> 00:10:22,160
E, como sempre, recomendo que você baixe o código se tiver alguma dúvida.

140
00:10:22,350 --> 00:10:25,900
Está na descrição deste vídeo.

141
00:10:25,890 --> 00:10:27,950
Tudo bem, eu vejo a próxima unidade

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