1
00:00:00,150 --> 00:00:20,160
Maintenant, nous allons changer la couleur du texte de la H-1 et l'âge 3 maintenant est que la couleur bootstrap par défaut sombre entrera ici et nous pourrions faire H-1 couleur blanc et H-3 couleur blanche et rafraîchir.

2
00:00:20,550 --> 00:00:22,790
Et nous obtenons du texte blanc comme ça.

3
00:00:22,950 --> 00:00:31,660
Mais nous pouvons aussi faire si est de combiner ces deux parce qu'ils sont identiques et H-1 virgule H-3 et qui fera les deux de ces blancs.

4
00:00:32,010 --> 00:00:34,750
Chaque fois que nous avons une virgule, il suffit de sélectionner différents groupes.

5
00:00:34,770 --> 00:00:40,820
Donc tous les jumeaux tous les trois ans et il ressemble exactement la même chose.

6
00:00:41,400 --> 00:00:50,340
Mais nous pouvons même simplifier ce plus et tout simplement assigner tout dans le corps à la couleur blanche.

7
00:00:50,340 --> 00:00:56,790
Et vous pourriez penser qu'il y aurait un problème pourrait changer ou bouton peut changer ou barre de navigation, mais rappelez-vous que ceux-ci sont plus spécifiques.

8
00:00:56,790 --> 00:01:14,780
Nous avons des classes de Bootstrap qui font cela par rapport à ceux-ci sont tout simplement H-1 et H-3, ils n'ont pas de classes ou d'ID et ils sont plus faciles à ignorer avec leurs propres styles en définissant la couleur du corps à blanc le H1 Et l'âge trois hérité de cette couleur et tout le reste a fait aussi bien.

9
00:01:14,850 --> 00:01:16,030
Il a été écrasé.

10
00:01:16,050 --> 00:01:21,730
Donc, si nous inspectons, disons ce bouton et nous jetons un coup d'oeil.

11
00:01:22,650 --> 00:01:30,860
Lorsque nous le sélectionnons et que vous voyez que la couleur est réglée sur cette couleur est 3 3 3 par la classe Bouton par défaut.

12
00:01:30,990 --> 00:01:40,520
Mais si nous continuons à faire défiler vers le bas, vous verrez que le corps ici mis la couleur au blanc et il arrive juste d'être rayé.

13
00:01:40,650 --> 00:01:41,390
D'accord.

14
00:01:41,970 --> 00:01:44,900
Encore une fois, ils ont dit qu'ils étaient tous deux blancs.

15
00:01:44,910 --> 00:01:46,980
Maintenant, travaillons sur la taille de la police.

16
00:01:47,160 --> 00:01:48,870
Il en est de même pour H-1.

17
00:01:48,930 --> 00:01:51,490
Nous voulons qu'il soit plié ce qu'il n'est pas actuellement.

18
00:01:51,690 --> 00:02:11,570
Donc cela doit être audacieux et je veux qu'il soit de 5 cms qui est cinq fois plus grand rappelez-vous que l'élément parent afin que nous allons sélectionner chacun et nous allons lui donner un poids de la police de 700 qui est la façon dont nous utilisons l'actualisation en gras .

19
00:02:11,970 --> 00:02:12,860
Vous pouvez le voir en gras.

20
00:02:12,890 --> 00:02:21,100
Maintenant, nous allons aussi faire beaucoup plus grand pour la taille de police 5 E-M.

21
00:02:21,270 --> 00:02:24,480
Maintenant, revenez en arrière et nous y allons.

22
00:02:24,680 --> 00:02:25,880
Donc ça regarde de plus près.

23
00:02:25,880 --> 00:02:32,230
Maintenant, ce rapport entre le H1 et le H-3 semble exactement le même.

24
00:02:32,250 --> 00:02:37,590
Nous n'avons pas besoin de faire quoi que ce soit pour le H-3 doit maintenant obtenir l'image de se comporter de la façon dont nous le voulons.

25
00:02:37,980 --> 00:02:41,460
Et pour ce faire, je vais vous montrer quelque chose que nous n'avons pas vu auparavant.

26
00:02:41,730 --> 00:02:52,190
Je vais déplacer l'obscurité vers la droite et si je l'inspecte l'élément vieilli ou le corps, ils verront que les deux s'arrêtent avant la fin de la page.

27
00:02:52,200 --> 00:02:53,280
Donc, ici.

28
00:02:53,430 --> 00:02:55,500
C'est la fin de l'âge de mon document.

29
00:02:55,500 --> 00:03:09,860
Donc, quand je dis à mon image de couvrir le corps et j'ai dit que c'est la taille du fond à couvrir et position de fond pour être centre, il prend en compte la taille du corps et lorsque le corps se termine ici, il se comporte différemment.

30
00:03:10,080 --> 00:03:22,420
Ce que nous allons faire pour résoudre ce problème est de donner à l'élément HTL une hauteur de 100 pour cent, ce qui signifie prendre jusqu'à 100 pour cent du conteneur qui est juste la fenêtre entière du document.

31
00:03:23,150 --> 00:03:30,450
Hauteur masculine de 100 pour cent et nous reviendrons.

32
00:03:30,840 --> 00:03:33,580
Rendons-le plein écran maintenant et actualiser.

33
00:03:33,950 --> 00:03:37,630
Et notre image fonctionne comme on s'y attend et je me rétrécis.

34
00:03:37,860 --> 00:03:40,260
Et ça me semble bien aussi.

35
00:03:40,260 --> 00:03:43,300
Maintenant, nous avons deux choses principales à se concentrer sur.

36
00:03:43,430 --> 00:03:45,470
Le premier est le H.R ..

37
00:03:45,540 --> 00:03:50,540
C'est trop large pour nous censés être beaucoup plus petit.

38
00:03:51,180 --> 00:03:54,010
Et puis je veux aussi me concentrer sur la police ici.

39
00:03:54,570 --> 00:04:01,170
Bien commencer à cueillir l'œuvre d'art et tout ce que nous voulons faire est de lui donner un avec de 400 pixels.

40
00:04:01,170 --> 00:04:12,410
Donc, dans notre C Ss Nous allons sélectionner h le faire au bas avec est de 400 pixels.

41
00:04:12,450 --> 00:04:13,550
Voilà.

42
00:04:13,560 --> 00:04:23,460
Une autre chose que je vais faire, c'est un peu sournois que vous n'avez peut-être pas remarqué que je vais aller ici et lui donner un Forder sur le dessus.

43
00:04:23,460 --> 00:04:26,150
Un pixel solide.

44
00:04:26,250 --> 00:04:31,620
Alors ils ont une couleur qui est f 8 8 8.

45
00:04:32,220 --> 00:04:41,920
Et puis un fond de la frontière aussi bien qui est un pixel solide et ce sera une couleur transparente.

46
00:04:41,960 --> 00:04:46,610
Zéro zéro zéro point zéro.

47
00:04:46,830 --> 00:04:49,530
Donc cela ne lui donnera pas l'effet d'une ombre.

48
00:04:49,990 --> 00:04:50,800
Faites donc attention.

49
00:04:50,820 --> 00:04:52,720
C'est vraiment difficile à voir.

50
00:04:52,830 --> 00:05:08,490
Je ne sais même pas si je vais ramasser sur le cast d'écran mais ce que nous avons est une frontière et puis juste en dessous de la frontière une ligne gris clair qui fait ressembler il ya une légère ombre il se montre un peu mieux sur le Des couleurs plus claires.

51
00:05:08,900 --> 00:05:09,140
D'ACCORD.

52
00:05:09,150 --> 00:05:15,050
Donc vous ne pouvez pas voir que suffisamment si vous me faites confiance ou vous pouvez vous débarrasser de l'image de fond et il sera plus facile de voir là aussi.

53
00:05:16,050 --> 00:05:20,690
Ensuite, nous allons nous concentrer sur les icônes que j'ai utilisé amusant génial pour.

54
00:05:20,690 --> 00:05:21,510
Alors je l'ai ouvert.

55
00:05:21,500 --> 00:05:21,780
Amusement.

56
00:05:21,780 --> 00:05:22,320
Impressionnant.

57
00:05:22,350 --> 00:05:23,180
Je connais.

58
00:05:23,570 --> 00:05:25,980
Et nous allons obtenir le CD ici aussi.

59
00:05:26,370 --> 00:05:30,970
Si vous cliquez sur commencer, il ya un CDN que vous pouvez copier là-bas.

60
00:05:30,990 --> 00:05:40,370
Mettez cela dans notre application et aussi juste faire que le haut sauvegarder et puis nous allons jeter un oeil à l'icône réelle.

61
00:05:40,980 --> 00:05:45,030
Et le premier que nous savons que nous avons utilisé est un PA.

62
00:05:45,930 --> 00:05:51,310
Et pour faire tout ce dont nous avons besoin est de haute classe ECO F A F Un tableau de bord PA.

63
00:05:51,660 --> 00:05:53,630
Donc j'ai mis ça à l'intérieur du bouton.

64
00:05:54,030 --> 00:05:59,350
Donc, si nous allons au bouton juste avant que je commence, j'ai ajouté que dans.

65
00:05:59,430 --> 00:06:08,820
Maintenant, si nous revenons et rafraîchir, vous pouvez voir si nous avons un petit bouton là et nous avons une copie de palm après nous avons deux icônes ici pour vous inscrire et vous connecter.

66
00:06:09,500 --> 00:06:11,760
Et ces deux je me rappelle ce qu'ils sont.

67
00:06:11,790 --> 00:06:19,750
Je vais juste faire cela ici à côté de vous inscrire après que nous écrivons vous savez que vous voulez ajouter dans une autre icône.

68
00:06:19,860 --> 00:06:34,880
Sauf cette classe de temps n'est pas F-8 PA mais F.A. dash user dash Plus qui nous donne cette icône avec le signe plus et se connecter est la même chose sans le plus.

69
00:06:34,920 --> 00:06:40,160
Donc, un tiret utilisateur et nous avons ces deux icônes.

70
00:06:40,250 --> 00:06:44,840
Il ya une autre chose que j'ai fait que vous n'auriez peut-être pas remarqué qui est l'ombre du texte.

71
00:06:45,030 --> 00:06:52,650
Donc il ya une ombre autour de tout le texte ici et le voir il peut le voir ici.

72
00:06:52,640 --> 00:07:01,630
C'est autour du H-1 et du H-3 et l'ombre de la technologie est quelque chose que nous pouvons définir avec l'ombre du tableau de bord des textes SS.

73
00:07:02,060 --> 00:07:04,010
Et il y a beaucoup de choses à faire.

74
00:07:04,130 --> 00:07:08,040
Donc vous pouvez voir ici nous sommes assis le décalage X le décalage y.

75
00:07:08,120 --> 00:07:11,680
Alors à quelle distance des mots doit aller l'ombre.

76
00:07:11,810 --> 00:07:16,240
Ensuite, nous sommes également fixer le rayon de cette flou Donc, fondamentalement, comment devrait être épaisse.

77
00:07:16,500 --> 00:07:21,430
Et puis la couleur et l'ombre que j'utilise est un peu compliqué.

78
00:07:21,480 --> 00:07:26,930
Il y a beaucoup de morceaux, donc je vais aller le taper un morceau à la fois dans le fichier CSSA.

79
00:07:26,970 --> 00:07:34,620
Donc à l'intérieur de la div de contenu ajoutera l'ombre tableau de bord de texte et puis le premier fera.

80
00:07:34,620 --> 00:07:48,210
Zero pixels 4 pixels 3 pixels et je vais le rendre vraiment évident pour commencer par le rendre rouge et si je rafraîchir il ya l'ombre que nous ajoutons d'abord.

81
00:07:48,260 --> 00:08:06,460
Maintenant, allez ajouter le deuxième avec une virgule et un retrait un peu et puis nous voulons 0 pixels 8 pixels 13 pixels et puis sur orange ici et jetez un oeil à celui-là.

82
00:08:07,350 --> 00:08:35,490
Vous pouvez voir que nous avons cette plus floue en dessous est orange vif et puis il ya une ombre troisième qui est de 0 pixels qui se souviennent de ce premier nombre est le décalage X, puis le décalage y 18 pixels et puis 23 pixels est le rayon et nous allons Faites-en un jaune et nous pouvons voir que nous avons l'ombre titre rouge vif.

83
00:08:35,490 --> 00:08:37,730
Et puis l'orange qui est un peu plus loin.

84
00:08:37,830 --> 00:08:41,670
Et puis le jaune qui est beaucoup plus flou et beaucoup plus large.

85
00:08:41,700 --> 00:08:43,650
Nous voulons donc changer ces couleurs.

86
00:08:43,640 --> 00:08:45,370
Nous ne voulons pas travailler avec cela.

87
00:08:45,450 --> 00:08:48,160
Les couleurs sont donc un peu moins excitantes.

88
00:08:48,210 --> 00:08:49,900
Le premier.

89
00:08:50,160 --> 00:08:54,740
Zéro zéro zéro zéro 0,4.

90
00:08:54,770 --> 00:09:01,550
Le suivant très similaire au lieu de 0,4 0,1.

91
00:09:01,910 --> 00:09:06,210
Et puis un autre qui est aussi 0.1.

92
00:09:06,210 --> 00:09:10,870
Ainsi en utilisant R.G. B-A nous mettons juste différentes nuances de gris.

93
00:09:11,970 --> 00:09:12,560
Et voilà.

94
00:09:12,600 --> 00:09:16,510
Tellement moins excitant mais j'espère que vous pouvez toujours le voir ici.

95
00:09:16,560 --> 00:09:21,010
C'est beaucoup plus subtil, mais il ajoute un peu de profondeur à la page.

96
00:09:21,060 --> 00:09:21,330
Génial.

97
00:09:21,330 --> 00:09:22,830
Donc c'est tout ce que nous devons faire.

98
00:09:23,250 --> 00:09:26,040
Permettez-moi de revenir en arrière et d'envelopper quelques choses.

99
00:09:26,040 --> 00:09:32,300
Le gros point que je veux faire ici est que nous pouvons utiliser bootstrap et compter sur elle, mais nous ne sommes pas en s'appuyant sur tous ses styles.

100
00:09:32,340 --> 00:09:40,760
Donc oui, nous avons gardé la barre de navigation de la même bien que dans la dernière vidéo, je vous ai montré comment vous pouvez changer la couleur de la barre de navigation, mais nous avons changé les polices, nous avons ajouté des images d'arrière-plan.

101
00:09:40,770 --> 00:09:47,730
Donc, nous utilisons vraiment bootstrap que la fondation sous-jacente, puis nous ajoutons dans tous les styles sur le dessus et il n'a pas fallu beaucoup.

102
00:09:47,850 --> 00:09:52,540
Mais je pense que nous avons fait quelque chose qui semble relativement respectable avec juste quelques lignes de code.

103
00:09:52,640 --> 00:09:56,580
Et soyons honnêtes moitié de toute la graisse de ce Shadowline un texte juste là.

104
00:09:56,750 --> 00:09:57,310
Impressionnant.

105
00:09:57,440 --> 00:10:00,230
Donc, nous avons fait le site semble relativement bon.

106
00:10:00,270 --> 00:10:01,900
Nous avons terminé avec bootstrap pour l'instant.

107
00:10:01,980 --> 00:10:05,460
Nous passons ensuite à Javascript dans l'unité suivante qui est vraiment excitant.

108
00:10:05,690 --> 00:10:12,670
Nous allons nous éloigner de créer des sites et des choses qui semblent bien pour un peu juste afin que nous puissions nous concentrer uniquement sur le Javascript.

109
00:10:12,810 --> 00:10:18,560
Mais alors nous allons rapporter tout ensemble et faire de beaux sites qui font réellement des choses qui ne se contentent pas d'être jolies.

110
00:10:18,570 --> 00:10:22,160
Donc c'est à venir bientôt j'espère apprécié bootstrap apprécié cette unité.

111
00:10:22,350 --> 00:10:25,900
Et comme toujours je vous recommande de télécharger le code si vous avez des questions.

112
00:10:25,890 --> 00:10:27,950
C'est dans la description de cette vidéo.