1
00:00:00,150 --> 00:00:07,080
Ora cambiamo il colore del testo dell'H-1 e l'età 3 in questo momento è

2
00:00:08,000 --> 00:00:20,160
che il colore di avvio di default scuro andrà qui e potremmo fare il colore bianco H-1 e il colore bianco H-3 e aggiornare.

3
00:00:20,550 --> 00:00:22,790
E otteniamo il testo bianco proprio così.

4
00:00:22,950 --> 00:00:29,820
Ma possiamo anche fare è combinare questi due perché sono identici e fanno H-1 virgola H-3 e

5
00:00:29,820 --> 00:00:31,660
questo renderà entrambi quelli bianchi.

6
00:00:32,010 --> 00:00:34,750
Ogni volta che abbiamo una virgola, seleziona solo gruppi diversi.

7
00:00:34,770 --> 00:00:40,820
Quindi tutti i gemelli di tutte le età e sembra esattamente lo stesso.

8
00:00:41,400 --> 00:00:50,340
Ma possiamo anche semplificarlo di più e assegnare tutto al corpo per essere di colore bianco.

9
00:00:50,340 --> 00:00:55,350
E si potrebbe pensare che ci sarebbe un problema potrebbe cambiare o pulsante potrebbe cambiare o barra di navigazione, ma

10
00:00:55,350 --> 00:00:56,790
ricorda che quelli sono più specifici.

11
00:00:56,790 --> 00:01:02,760
Abbiamo classi di Bootstrap che lo fanno rispetto a queste sono semplicemente H-1 e H-3 non hanno

12
00:01:02,760 --> 00:01:08,130
classi o ID e sono più facili da ignorare con i propri stili impostando il colore

13
00:01:08,190 --> 00:01:14,780
del corpo sul bianco della H1 e l'età tre ereditò quel colore e anche tutto il resto lo fece.

14
00:01:14,850 --> 00:01:16,030
E 'stato appena superato.

15
00:01:16,050 --> 00:01:21,730
Quindi se ispezioniamo diciamo questo pulsante e diamo un'occhiata.

16
00:01:22,650 --> 00:01:30,860
Quando lo selezioniamo e vedete che il colore è impostato su questo colore, è 3 3 3 secondo la classe Pulsante predefinito.

17
00:01:30,990 --> 00:01:38,460
Ma se continuiamo a scorrere verso il basso, vedrai che il corpo proprio qui imposta il colore al bianco e

18
00:01:38,460 --> 00:01:40,520
sembra proprio che venga cancellato.

19
00:01:40,650 --> 00:01:41,390
Tutto ok.

20
00:01:41,970 --> 00:01:44,900
Quindi, di nuovo, ha detto che entrambi erano bianchi.

21
00:01:44,910 --> 00:01:46,980
Ora lavoriamo sulla dimensione del carattere.

22
00:01:47,160 --> 00:01:48,870
Quindi sono H-1.

23
00:01:48,930 --> 00:01:51,490
Vogliamo che venga piegato, al momento non lo è.

24
00:01:51,690 --> 00:01:58,260
gli daremo un peso del font di 700 che è il modo in cui usiamo l'aggiornamento grassetto .

25
00:01:58,290 --> 00:02:03,600
Quindi questo deve essere audace e voglio che sia 5 cm che è cinque

26
00:02:06,540 --> 00:02:11,570
volte più grande di ricordare dell'elemento genitore, quindi selezioneremo ognuno di essi e

27
00:02:11,970 --> 00:02:12,860
Puoi vederlo in grassetto.

28
00:02:12,890 --> 00:02:21,100
Ora rendiamola anche più grande, quindi dimensione carattere 5 E-M.

29
00:02:21,270 --> 00:02:24,480
Adesso torna e eccoci.

30
00:02:24,680 --> 00:02:25,880
Quindi sembra più vicino.

31
00:02:25,880 --> 00:02:32,230
Ora questo rapporto tra H1 e H-3 sembra esattamente lo stesso.

32
00:02:32,250 --> 00:02:37,200
Non abbiamo bisogno di fare nulla per l'H-3, ora dobbiamo fare in modo che l'immagine si comporti come vogliamo noi.

33
00:02:37,980 --> 00:02:41,460
E per far questo ti mostrerò qualcosa che non abbiamo mai visto prima.

34
00:02:41,730 --> 00:02:48,470
Sposterò il buio sul lato destro e se ispezionerò l'elemento invecchiato o il corpo vedranno

35
00:02:48,480 --> 00:02:52,190
che entrambi si fermano prima della fine della pagina.

36
00:02:52,200 --> 00:02:53,280
Quindi, proprio qui.

37
00:02:53,430 --> 00:02:55,500
Questa è la fine del mio documento.

38
00:02:55,500 --> 00:03:02,520
Così quando dico alla mia immagine di coprire il corpo e ho detto che è la dimensione dello sfondo per coprire e la

39
00:03:02,520 --> 00:03:09,180
posizione dello sfondo per essere centrata, prende in considerazione la dimensione del corpo e quando il corpo finisce proprio qui si comporta

40
00:03:09,180 --> 00:03:09,860
in modo diverso.

41
00:03:10,080 --> 00:03:16,920
Quello che faremo per risolvere questo problema è dare all'elemento HTL un'altezza del 100 percento che significa

42
00:03:17,280 --> 00:03:22,420
occupare il 100 percento del contenitore che è solo l'intera finestra del documento.

43
00:03:23,150 --> 00:03:30,450
Altezza maschile al 100% e torneremo indietro.

44
00:03:30,840 --> 00:03:33,580
Facciamo ora a schermo intero e aggiorna.

45
00:03:33,950 --> 00:03:37,630
E la nostra immagine funziona nel modo in cui ci aspettiamo e io mi ritiro.

46
00:03:37,860 --> 00:03:40,260
E questo sembra buono anche a me.

47
00:03:40,260 --> 00:03:43,300
Ora abbiamo due cose principali su cui concentrarsi.

48
00:03:43,430 --> 00:03:45,470
Il primo è il H. R. È troppo largo perché noi dovremmo essere molto più piccoli.

49
00:03:45,540 --> 00:03:50,540
E poi voglio anche concentrarmi sul carattere qui.

50
00:03:51,180 --> 00:03:54,010
Bene, inizia a scegliere l'artwork e tutto ciò che vogliamo fare è dargli un valore di 400 pixel.

51
00:03:54,570 --> 00:04:01,170
Quindi nelle nostre Cs selezioneremo h fatelo in fondo con 400 pixel.

52
00:04:01,170 --> 00:04:12,410
Eccoci.

53
00:04:12,450 --> 00:04:13,550
Un'altra cosa che farò è

54
00:04:13,560 --> 00:04:18,330
un po 'subdolo che potresti non aver notato visto che ho intenzione di entrare e dargli una Forder in cima.

55
00:04:18,330 --> 00:04:23,460
Un pixel solido.

56
00:04:23,460 --> 00:04:26,150
Quindi hanno un colore qui che è f 8 8 8.

57
00:04:26,250 --> 00:04:31,620
E poi anche un bordo inferiore che è un pixel solido e questo sarà un colore trasparente.

58
00:04:32,220 --> 00:04:41,920
Zero zero zero punto zero due.

59
00:04:41,960 --> 00:04:46,610
Quindi questo non gli darà l'effetto di un'ombra.

60
00:04:46,830 --> 00:04:49,530
Quindi fai attenzione.

61
00:04:49,990 --> 00:04:50,800
È davvero difficile da vedere.

62
00:04:50,820 --> 00:04:52,720
Non so nemmeno se catturerò il

63
00:04:52,830 --> 00:04:58,560
cast dello schermo, ma quello che abbiamo è un bordo e poi proprio sotto il bordo una

64
00:04:58,560 --> 00:05:05,970
linea grigio chiaro che fa sembrare che ci sia una leggera ombra che si mostra un po 'meglio sul colori più chiari.

65
00:05:05,970 --> 00:05:08,490
OK.

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

67
00:05:09,150 --> 00:05:13,770
non puoi vederlo abbastanza se credimi o puoi eliminare l'immagine di sfondo e sarà più facile vederla anche lì.

68
00:05:13,770 --> 00:05:15,050
Quindi concentriamoci sulle icone per le quali ho usato il divertimento fantastico.

69
00:05:16,050 --> 00:05:20,690
Quindi l'ho aperto.

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

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

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

73
00:05:22,350 --> 00:05:23,180
E avremo anche il CD qui.

74
00:05:23,570 --> 00:05:25,980
Se fai clic su Inizia, c'è una CDN che potresti copiare lì.

75
00:05:26,370 --> 00:05:30,970
Mettilo nella nostra applicazione e

76
00:05:30,990 --> 00:05:39,390
anche solo salvalo e poi daremo un'occhiata alle icone reali.

77
00:05:39,380 --> 00:05:40,370
E il primo che sappiamo che abbiamo usato è un PA.

78
00:05:40,980 --> 00:05:45,030
E per fare tutto ciò di cui abbiamo bisogno sono ECO di alta classe F A F A dash PA.

79
00:05:45,930 --> 00:05:51,310
Così l'ho messo dentro il bottone.

80
00:05:51,660 --> 00:05:53,630
Quindi se andiamo al pulsante giusto prima di iniziare l'ho aggiunto.

81
00:05:54,030 --> 00:05:59,350
Ora, se torniamo indietro e aggiorniamo, possiamo vedere se abbiamo un piccolo pulsante lì

82
00:05:59,430 --> 00:06:04,590
e abbiamo una stampa palmare, quindi qui abbiamo due icone per iscriverti e accedere.

83
00:06:05,120 --> 00:06:08,820
E quei due ricordo quello che sono.

84
00:06:09,500 --> 00:06:11,760
Lo farò qui accanto per iscriverti dopo aver scritto sappiamo di voler aggiungere un'altra icona.

85
00:06:11,790 --> 00:06:19,550
Tranne che questa classe temporale non è F-8 PA ma F. UN. dash dash utente Plus che ci dà quell'icona con il segno più e il login è

86
00:06:19,860 --> 00:06:29,180
la stessa cosa senza il vantaggio.

87
00:06:29,190 --> 00:06:34,880
Quindi un utente dash e abbiamo queste due icone.

88
00:06:34,920 --> 00:06:40,160
C'è un'altra cosa che ho fatto che potresti non aver notato quale è l'ombra del testo.

89
00:06:40,250 --> 00:06:44,840
Quindi c'è un'ombra intorno a tutto il testo qui e lo vedo lì può vederlo qui.

90
00:06:45,030 --> 00:06:52,650
È intorno all'H-1 e all'H-3 e l'ombra tecnica è qualcosa che possiamo impostare con l'ombra del trattino di testo SS.

91
00:06:52,640 --> 00:07:01,350
E c'è un sacco di pezzi in esso.

92
00:07:02,060 --> 00:07:04,010
Quindi puoi vedere qui siamo seduti con l'offset X l'offset y.

93
00:07:04,130 --> 00:07:08,040
Quindi, quanto lontano dalle parole dovrebbe andare l'ombra.

94
00:07:08,120 --> 00:07:11,680
Quindi stiamo anche impostando il raggio di quelle sfocature Quindi, in pratica, quanto dovrebbe essere spessa.

95
00:07:11,810 --> 00:07:16,240
E poi il colore e l'ombra che sto usando sono un po 'complicati.

96
00:07:16,500 --> 00:07:21,430
Ci sono molti pezzi quindi andrò e scriverò un pezzo alla volta nel file CSSA.

97
00:07:21,480 --> 00:07:26,930
Quindi all'interno del content div aggiungerà il dash del testo e poi il primo farà.

98
00:07:26,970 --> 00:07:34,620
Zero pixel 4 pixel 3 pixel e renderò davvero ovvio

99
00:07:34,620 --> 00:07:44,250
iniziare rendendolo rosso e se aggiorno c'è l'ombra che stiamo aggiungendo prima.

100
00:07:45,500 --> 00:07:48,210
Ora vai e aggiungi il secondo con

101
00:07:48,260 --> 00:07:57,860
una virgola e il rientro un po 'e poi vogliamo 0 pixel 8 pixel 13 pixel e poi su arancione qui e dare un'occhiata a quello.

102
00:07:59,910 --> 00:08:06,460
è arancione brillante e poi c'è una terza ombra che è 0 pixel che ricordano

103
00:08:07,350 --> 00:08:13,890
questo primo numero è l'offset X e quindi l'offset y 18 pixel e poi 23

104
00:08:15,480 --> 00:08:23,810
pixel è il raggio e noi rendi questo giallo e possiamo vedere che abbiamo l'ombra del titolo rosso brillante.

105
00:08:23,820 --> 00:08:27,540
Potete vedere che abbiamo questo più sfocato sotto

106
00:08:32,120 --> 00:08:35,490
E poi quello arancione che è un po 'più lontano.

107
00:08:35,490 --> 00:08:37,730
E poi quello giallo che è molto più sfocato e molto più ampio.

108
00:08:37,830 --> 00:08:41,670
Quindi vogliamo cambiare quei colori.

109
00:08:41,700 --> 00:08:43,650
Non vogliamo lavorare con questo.

110
00:08:43,640 --> 00:08:45,370
Quindi i colori sono un po 'meno eccitanti.

111
00:08:45,450 --> 00:08:48,160
Il primo.

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

113
00:08:50,160 --> 00:08:54,740
Il prossimo è molto simile invece di 0. 4 0. 1.

114
00:08:54,770 --> 00:09:01,550
E poi un altro è anche 0. 1.

115
00:09:01,910 --> 00:09:06,210
Quindi usando R. G. B-A stiamo solo impostando diverse sfumature di grigio.

116
00:09:06,210 --> 00:09:10,870
E noi andiamo.

117
00:09:11,970 --> 00:09:12,560
Molto meno eccitante, ma spero che tu possa ancora vederlo qui.

118
00:09:12,600 --> 00:09:16,510
È molto più sottile ma aggiunge un po 'di profondità alla pagina.

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

120
00:09:21,060 --> 00:09:21,330
Quindi questo è tutto ciò che dobbiamo fare.

121
00:09:21,330 --> 00:09:22,830
Lasciami tornare e avvolgere solo alcune cose.

122
00:09:23,250 --> 00:09:26,040
Il punto principale che voglio sottolineare qui è che possiamo

123
00:09:26,040 --> 00:09:31,200
utilizzare il bootstrap e fare affidamento su di esso, ma non stiamo facendo affidamento su tutti i suoi stili.

124
00:09:31,200 --> 00:09:32,300
Quindi sì, abbiamo mantenuto la barra di navigazione

125
00:09:32,340 --> 00:09:36,540
la stessa anche se nell'ultimo video ti ho mostrato come puoi cambiare il colore della barra di navigazione ma abbiamo cambiato i caratteri che abbiamo aggiunto alle immagini di sfondo.

126
00:09:36,540 --> 00:09:40,760
Quindi usiamo solo il bootstrap come base sottostante e quindi

127
00:09:40,770 --> 00:09:45,960
aggiungiamo tutti gli stili in cima e non ci sono voluti molto.

128
00:09:46,430 --> 00:09:47,730
Ma penso che abbiamo creato qualcosa che sembra relativamente rispettabile con solo poche righe di codice.

129
00:09:47,850 --> 00:09:52,540
E siamo onesti, la metà di tutto il grasso questo testo Shadowline proprio lì.

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

131
00:09:56,750 --> 00:09:57,310
Quindi abbiamo reso il sito relativamente buono.

132
00:09:57,440 --> 00:10:00,230
Abbiamo finito con il bootstrap per ora.

133
00:10:00,270 --> 00:10:01,900
Passeremo quindi a Javascript nella prossima unità che è davvero eccitante.

134
00:10:01,980 --> 00:10:05,460
Ci allontaneremo dalla creazione di siti e cose che

135
00:10:05,690 --> 00:10:10,680
sembrano belle per un po 'solo per poterci concentrare esclusivamente su Javascript.

136
00:10:10,670 --> 00:10:12,670
cose che non sono solo belle.

137
00:10:12,810 --> 00:10:16,910
Ma poi riporteremo tutto insieme e realizzeremo dei bellissimi siti che fanno

138
00:10:17,040 --> 00:10:18,560
Quindi questo sta arrivando presto si spera che il bootstrap abbia goduto di questa unità.

139
00:10:18,570 --> 00:10:22,160
E come sempre ti consiglio di scaricare il codice se hai qualche domanda.

140
00:10:22,350 --> 00:10:25,900
È nella descrizione di questo video.

141
00:10:25,890 --> 00:10:27,950
Bene, vedrò la prossima unità

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