1
00:00:00,150 --> 00:00:07,080
Now let's change the text color of the H-1 and the age 3 right now is that dark default bootstrap color

2
00:00:08,000 --> 00:00:20,160
will go in here and we could do H-1 color white and H-3 color white and refresh.

3
00:00:20,550 --> 00:00:22,790
And we get white text just like that.

4
00:00:22,950 --> 00:00:29,820
But we can also do though is combine these two because they're identical and do H-1 comma H-3 and that

5
00:00:29,820 --> 00:00:31,660
will make both of those white.

6
00:00:32,010 --> 00:00:34,750
Whenever we have a comma it just selects different groups.

7
00:00:34,770 --> 00:00:40,820
So all the twins all age threes and it looks exactly the same.

8
00:00:41,400 --> 00:00:50,340
But we can even simplify this more and just assign everything in the body to be color white.

9
00:00:50,340 --> 00:00:55,350
And you might think there would be a problem might change or button might change or nav bar but remember

10
00:00:55,350 --> 00:00:56,790
that those are more specific.

11
00:00:56,790 --> 00:01:02,760
We have classes from Bootstrap that are doing that versus these are just plain H-1 and H-3 they don't

12
00:01:02,760 --> 00:01:08,130
have any classes or IDs and they're easier to override with their own styles by setting the body color

13
00:01:08,190 --> 00:01:14,780
to white the H1 and the age three inherited that color and everything else did as well.

14
00:01:14,850 --> 00:01:16,030
It was just overridden.

15
00:01:16,050 --> 00:01:21,730
So if we inspected let's say this button and we take a look.

16
00:01:22,650 --> 00:01:30,860
When we select it and you see that color is set to this color is 3 3 3 by the class Button default.

17
00:01:30,990 --> 00:01:38,460
But if we keep scrolling down you'll see that the body right here set color to white and it just happens

18
00:01:38,460 --> 00:01:40,520
to be crossed off.

19
00:01:40,650 --> 00:01:41,390
All right.

20
00:01:41,970 --> 00:01:44,900
So again that said both of them to be white.

21
00:01:44,910 --> 00:01:46,980
Now let's work on the font size.

22
00:01:47,160 --> 00:01:48,870
So are H-1.

23
00:01:48,930 --> 00:01:51,490
We want it to be folded which it's currently not.

24
00:01:51,690 --> 00:01:58,260
So that needs to be bold and I want it to be 5 cms which is five times bigger remember than the parent

25
00:01:58,290 --> 00:02:03,600
element so we'll select each one and we'll give it a font weight

26
00:02:06,540 --> 00:02:11,570
of 700 which is how we use the bold refresh.

27
00:02:11,970 --> 00:02:12,860
You can see it bold.

28
00:02:12,890 --> 00:02:21,100
Now let's also make it much larger so font size 5 E-M.

29
00:02:21,270 --> 00:02:24,480
Now go back and there we go.

30
00:02:24,680 --> 00:02:25,880
So that's looking closer.

31
00:02:25,880 --> 00:02:32,230
Now this ratio between the H1 and the H-3 looks exactly the same.

32
00:02:32,250 --> 00:02:37,200
We don't need to do anything to the H-3 must now get the image to behave the way that we want it to

33
00:02:37,220 --> 00:02:37,590
.

34
00:02:37,980 --> 00:02:41,460
And to do that I'm going to show you something that we haven't seen before.

35
00:02:41,730 --> 00:02:48,470
I'm going to move the dark to the right side and if I inspect the aged him out element or the body they'll

36
00:02:48,480 --> 00:02:52,190
see that both of them stop before the end of the page.

37
00:02:52,200 --> 00:02:53,280
So about right here.

38
00:02:53,430 --> 00:02:55,500
That's the end of the age to my document.

39
00:02:55,500 --> 00:03:02,520
So when I tell my image to cover the body and I said it's background size to cover and background position

40
00:03:02,520 --> 00:03:09,180
to be center it takes into account the size of the body and when the body ends right here it behaves

41
00:03:09,180 --> 00:03:09,860
differently.

42
00:03:10,080 --> 00:03:16,920
What we'll do to fix this is give the HTL element a height of 100 percent which means take up 100 percent

43
00:03:17,280 --> 00:03:22,420
of the container which is just the entire document window.

44
00:03:23,150 --> 00:03:30,450
Male height 100 percent and we'll go back.

45
00:03:30,840 --> 00:03:33,580
Let's make it full screen now and refresh.

46
00:03:33,950 --> 00:03:37,630
And our image works the way that we expect it to and I shrink down.

47
00:03:37,860 --> 00:03:40,260
And that looks good to me too.

48
00:03:40,260 --> 00:03:43,300
Now we have two main things left to focus on.

49
00:03:43,430 --> 00:03:45,470
The first one is the H.R..

50
00:03:45,540 --> 00:03:50,540
It's way too wide for us supposed to be a lot smaller.

51
00:03:51,180 --> 00:03:54,010
And then I also want to focus on the font here.

52
00:03:54,570 --> 00:04:01,170
Well start picking the artwork and all we want to do is give it a with of 400 pixels.

53
00:04:01,170 --> 00:04:12,410
So in our C Ss We'll select h do it at the bottom with is 400 pixels.

54
00:04:12,450 --> 00:04:13,550
There we go.

55
00:04:13,560 --> 00:04:18,330
Another thing that I'll do that's a little bit sneaky that you may not have noticed as I'm going to

56
00:04:18,330 --> 00:04:23,460
go in here and give it a Forder on top.

57
00:04:23,460 --> 00:04:26,150
One pixel solid.

58
00:04:26,250 --> 00:04:31,620
Then they have a color here which is f 8 8 8.

59
00:04:32,220 --> 00:04:41,920
And then a border bottom as well which is one pixel solid and this will be a transparent color.

60
00:04:41,960 --> 00:04:46,610
Zero zero zero zero point two.

61
00:04:46,830 --> 00:04:49,530
So this won't give it the effect of a shadow.

62
00:04:49,990 --> 00:04:50,800
So pay attention.

63
00:04:50,820 --> 00:04:52,720
It's really hard to see.

64
00:04:52,830 --> 00:04:58,560
I don't even know if I will pick up on the screen cast but what we have is a border and then right below

65
00:04:58,560 --> 00:05:05,970
the border a light gray line that makes it look like there's a slight shadow it shows up a little bit

66
00:05:05,970 --> 00:05:08,490
better over the lighter colors.

67
00:05:08,900 --> 00:05:09,140
OK.

68
00:05:09,150 --> 00:05:13,770
So you can't see that enough if trust me or you can get rid of the background image and it'll be easier

69
00:05:13,770 --> 00:05:15,050
to see there as well.

70
00:05:16,050 --> 00:05:20,690
Next let's focus on the icons which I used fun awesome for.

71
00:05:20,690 --> 00:05:21,510
So I have it open.

72
00:05:21,500 --> 00:05:21,780
Fun.

73
00:05:21,780 --> 00:05:22,320
Awesome.

74
00:05:22,350 --> 00:05:23,180
I know.

75
00:05:23,570 --> 00:05:25,980
And we'll just get the CD in here as well.

76
00:05:26,370 --> 00:05:30,970
If you click on get started there's a CDN that you could just copy there.

77
00:05:30,990 --> 00:05:39,390
Put that in our application and also just do that up top save and then we'll take a look at the actual

78
00:05:39,380 --> 00:05:40,370
icons.

79
00:05:40,980 --> 00:05:45,030
And the first one that we know that we used is a PA.

80
00:05:45,930 --> 00:05:51,310
And to do it all we need is high class ECOs F A F A dash PA.

81
00:05:51,660 --> 00:05:53,630
So I put that inside the button.

82
00:05:54,030 --> 00:05:59,350
So if we go to the button right before I get started I added that in.

83
00:05:59,430 --> 00:06:04,590
Now if we go back and refresh you can see if we have a little button there and we have a palm print

84
00:06:05,120 --> 00:06:08,820
next we have two icons here for sign up and log in.

85
00:06:09,500 --> 00:06:11,760
And those two I remember what they are.

86
00:06:11,790 --> 00:06:19,550
I'm just going to do that here next to sign up after we write up know you want to add in another icon

87
00:06:19,560 --> 00:06:19,750
.

88
00:06:19,860 --> 00:06:29,180
Except this time class is not F-8 PA but F.A. dash user dash Plus which gives us that icon with the

89
00:06:29,190 --> 00:06:34,880
plus sign and log in is the same thing without the plus.

90
00:06:34,920 --> 00:06:40,160
So a dash user and we have those two icons.

91
00:06:40,250 --> 00:06:44,840
There's one other thing that I did that you may not have noticed which is the text shadow.

92
00:06:45,030 --> 00:06:52,650
So there's a shadow around all the text here and see it there can see it over here.

93
00:06:52,640 --> 00:07:01,350
It's around the H-1 and the H-3 and tech shadow is something we can set with the SS text dash shadow

94
00:07:01,370 --> 00:07:01,630
.

95
00:07:02,060 --> 00:07:04,010
And there's kind of a lot of pieces to it.

96
00:07:04,130 --> 00:07:08,040
So you can see here we're sitting the offset X the offset y.

97
00:07:08,120 --> 00:07:11,680
So how far away from the words should the shadow go.

98
00:07:11,810 --> 00:07:16,240
Then we're also setting the radius of that blurs So basically how thick should it be.

99
00:07:16,500 --> 00:07:21,430
And then the color and the shadow that I'm using is a little bit complicated.

100
00:07:21,480 --> 00:07:26,930
There's a lot of pieces so I'm going to go and type it one piece at a time in the CSSA file.

101
00:07:26,970 --> 00:07:34,620
So inside of the content div will add text dash shadow and then the first one will do.

102
00:07:34,620 --> 00:07:44,250
Zero pixels 4 pixels 3 pixels and I'll make it really obvious to start by making it red and if I refresh

103
00:07:45,500 --> 00:07:48,210
there's the shadow that we're adding first.

104
00:07:48,260 --> 00:07:57,860
Now go and add the second one with a comma and indent a little bit and then we want 0 pixels 8 pixels

105
00:07:59,910 --> 00:08:06,460
13 pixels and then onto orange here and take a look at that one.

106
00:08:07,350 --> 00:08:13,890
You can see we have this more blurred one underneath it's bright orange and then there's a third shadow

107
00:08:15,480 --> 00:08:23,810
which is 0 pixels which remember this first number is the X offset and then the y offset 18 pixels and

108
00:08:23,820 --> 00:08:27,540
then 23 pixels is the radius and we'll make this one yellow

109
00:08:32,120 --> 00:08:35,490
and we can see we have the bright red titre shadow.

110
00:08:35,490 --> 00:08:37,730
And then the orange one that's a little bit further away.

111
00:08:37,830 --> 00:08:41,670
And then the yellow one that is a lot more blurred and a lot wider.

112
00:08:41,700 --> 00:08:43,650
So we want to change those colors.

113
00:08:43,640 --> 00:08:45,370
We don't want to be working with that.

114
00:08:45,450 --> 00:08:48,160
So the colors are a little bit less exciting.

115
00:08:48,210 --> 00:08:49,900
The first one.

116
00:08:50,160 --> 00:08:54,740
Zero zero zero zero 0.4.

117
00:08:54,770 --> 00:09:01,550
Next one very similar instead of 0.4 0.1.

118
00:09:01,910 --> 00:09:06,210
And then one more that's also 0.1.

119
00:09:06,210 --> 00:09:10,870
So using R.G. B-A we're just setting different shades of gray.

120
00:09:11,970 --> 00:09:12,560
And there we go.

121
00:09:12,600 --> 00:09:16,510
So much less exciting but hopefully you can still see it here.

122
00:09:16,560 --> 00:09:21,010
It's a lot more subtle but it just adds a little bit of depth to the page.

123
00:09:21,060 --> 00:09:21,330
Great.

124
00:09:21,330 --> 00:09:22,830
So that's all we need to do.

125
00:09:23,250 --> 00:09:26,040
Let me go back and just wrap a few things up.

126
00:09:26,040 --> 00:09:31,200
The big point I want to make here is that we can use bootstrap and rely on it but we're not relying

127
00:09:31,200 --> 00:09:32,300
on all of its styles.

128
00:09:32,340 --> 00:09:36,540
So yes we kept the nav bar the same although in the last video I showed you how you could change the

129
00:09:36,540 --> 00:09:40,760
nav bar color but we changed the fonts we added background images.

130
00:09:40,770 --> 00:09:45,960
So we really just use bootstrap as the underlying foundation and then we add in all the styles on top

131
00:09:46,430 --> 00:09:47,730
and it didn't take much.

132
00:09:47,850 --> 00:09:52,540
But I think we made something that looks relatively respectable with just a few lines of code.

133
00:09:52,640 --> 00:09:56,580
And let's be honest half of all fat this one text Shadowline right there.

134
00:09:56,750 --> 00:09:57,310
Awesome.

135
00:09:57,440 --> 00:10:00,230
So we made the site looks relatively good.

136
00:10:00,270 --> 00:10:01,900
We're done with bootstrap for now.

137
00:10:01,980 --> 00:10:05,460
We're then moving on to Javascript in the next unit which is really exciting.

138
00:10:05,690 --> 00:10:10,680
We will be moving away from creating sites and things that look nice for a little bit just so that we

139
00:10:10,670 --> 00:10:12,670
can focus purely on Javascript.

140
00:10:12,810 --> 00:10:16,910
But then we'll bring everything back together and make some beautiful sites that actually do things

141
00:10:17,040 --> 00:10:18,560
that don't just look nice.

142
00:10:18,570 --> 00:10:22,160
So that's coming up soon hopefully enjoyed bootstrap enjoyed this unit.

143
00:10:22,350 --> 00:10:25,900
And as always I recommend that you download the code if you have any questions.

144
00:10:25,890 --> 00:10:27,950
It's in the description of this video.

145
00:10:27,960 --> 00:10:29,060
All right I'll see the next unit