1
00:00:04,010 --> 00:00:07,090
Hello everyone and welcome back to our bootstrap course.

2
00:00:07,100 --> 00:00:12,530
In this lecture we're going to be finishing the styling for a header here in order to show the text

3
00:00:12,530 --> 00:00:17,300
and the button of the product information overtop this image here.

4
00:00:17,300 --> 00:00:21,360
So let's go ahead and open our CSX and hide the output.

5
00:00:21,620 --> 00:00:21,860
OK.

6
00:00:21,880 --> 00:00:22,250
Excellent.

7
00:00:22,250 --> 00:00:29,630
So right now we have the header CSX and the header image CFS which allow the image to be shown at 100

8
00:00:29,660 --> 00:00:32,060
percent the screen size.

9
00:00:32,120 --> 00:00:34,610
And now we're going to also add some Morsi assets.

10
00:00:34,610 --> 00:00:41,540
So for the header and its container image specifically we're going to style the positioning.

11
00:00:42,170 --> 00:00:48,110
So when you styled something like this it means you are styling the container inside of the header.

12
00:00:48,140 --> 00:00:53,570
So if you go back to the e-mail you see here we have a header and then we have a container inside of

13
00:00:53,570 --> 00:00:54,290
the header.

14
00:00:54,410 --> 00:01:02,630
And by styling header space dot container we're finding every element in the header that has the class

15
00:01:02,630 --> 00:01:03,860
Container.

16
00:01:03,860 --> 00:01:07,970
If there's a container outside the header this styling will not be applied to it.

17
00:01:08,470 --> 00:01:08,720
OK.

18
00:01:08,780 --> 00:01:12,920
I'm going to hide e-mail now and go ahead and style this header.

19
00:01:12,920 --> 00:01:18,140
So I'm going to change the position to a relative or rather set its position to relative because often

20
00:01:18,140 --> 00:01:20,810
four elements the default position is relative.

21
00:01:20,960 --> 00:01:26,300
But regardless you still want to declare it like this position relative.

22
00:01:26,450 --> 00:01:26,750
OK.

23
00:01:26,750 --> 00:01:30,440
And also I'm going to change it is the index to two.

24
00:01:30,480 --> 00:01:33,470
Now remember the z index is the depth of the element.

25
00:01:33,490 --> 00:01:35,270
So 1 is the default.

26
00:01:35,270 --> 00:01:41,810
So for example this text right here that I see on the page it has a depth of 1 because it's all on the

27
00:01:41,810 --> 00:01:46,780
same depth the white background will have a depth of zero.

28
00:01:46,880 --> 00:01:52,210
If I change these the index to It means I'm pushing an element in front of all the others.

29
00:01:52,310 --> 00:01:56,660
If I change it to three I would push that element even further in front of all the others.

30
00:01:57,080 --> 00:02:04,320
So the larger number wins out in terms of being shown first or at the top most of the screen.

31
00:02:04,420 --> 00:02:11,420
So I'm going to go to my e-mail here and see that I have this one container and this container contains

32
00:02:11,480 --> 00:02:13,310
all of my text.

33
00:02:13,310 --> 00:02:20,150
So by giving it the C position or z index to that means I'm moving all the text to be in front of the

34
00:02:20,150 --> 00:02:21,540
image.

35
00:02:22,100 --> 00:02:23,080
OK great.

36
00:02:23,090 --> 00:02:26,690
So I'm going to go ahead and toggle the e-mail here.

37
00:02:26,690 --> 00:02:29,210
So this will move all the text on top of the image.

38
00:02:29,270 --> 00:02:37,490
I'm also going to style the headers overly class so any element with the class overlay in the header

39
00:02:37,750 --> 00:02:39,500
will have this positioning.

40
00:02:39,500 --> 00:02:40,640
Now what is overlay.

41
00:02:40,670 --> 00:02:46,220
Well I'm going to toggle this process for a second the overlay is this div right here.

42
00:02:46,310 --> 00:02:52,270
So you'll notice it's inside of the header but it's above all of the other elements in the code.

43
00:02:52,280 --> 00:02:55,280
And it does not contain anything inside of itself.

44
00:02:55,370 --> 00:02:59,540
It has its own empty div so it's style that empty div.

45
00:02:59,540 --> 00:03:03,680
What we're going to do is position it to absolute.

46
00:03:03,680 --> 00:03:09,860
This is the same positioning that we gave to the image itself because we want this overlay to be a light

47
00:03:09,860 --> 00:03:13,400
black overlay on top of the image.

48
00:03:13,400 --> 00:03:16,330
So a grey overlay to make the image a bit darker.

49
00:03:16,400 --> 00:03:20,370
So that way the text is more readable on top the image and you'll see the effect.

50
00:03:20,420 --> 00:03:22,410
Once we preview it in the output.

51
00:03:22,710 --> 00:03:23,270
OK.

52
00:03:23,390 --> 00:03:30,200
So I'm setting it to position absolute exactly the same as the image here but I'm going to change its

53
00:03:30,470 --> 00:03:35,780
actual positioning to be zero pixels from the top and zero pixels from the left.

54
00:03:35,810 --> 00:03:41,680
So that means it will begin at the very top most corner in terms of its creation.

55
00:03:41,710 --> 00:03:46,880
So we'll be created at the topmost left corner and it should actually size it.

56
00:03:46,880 --> 00:03:48,720
I have to set its width and height.

57
00:03:48,740 --> 00:03:53,330
So I'm going to set its height 200 percent which means it will be 100 percent of its parent and its

58
00:03:53,330 --> 00:03:54,620
parent is the body.

59
00:03:54,800 --> 00:04:00,650
And we set the body to have a height of 100 percent of the HMO which means that percentage hey will

60
00:04:00,650 --> 00:04:09,290
work if you tried to sell an element with a percentage but its parent or any of its parents its grandparents

61
00:04:09,320 --> 00:04:17,280
any of its ancestors did not have a a positioning of with or height.

62
00:04:17,390 --> 00:04:23,840
So for example if you tried to sell a height to be 20 percent but none of its parents had a height explicitly

63
00:04:23,840 --> 00:04:27,320
declared then that would not work.

64
00:04:27,440 --> 00:04:29,200
The percentage sizing.

65
00:04:29,240 --> 00:04:34,300
So that is why we set the heightened width of it's absolute most parent.

66
00:04:34,610 --> 00:04:34,810
OK.

67
00:04:34,820 --> 00:04:38,310
We also want to do the same for the width to set it to 100 percent.

68
00:04:38,360 --> 00:04:43,370
We're going to give this give the background color black.

69
00:04:43,370 --> 00:04:47,570
So what we've done is created a device or a box and the box empty.

70
00:04:47,570 --> 00:04:55,670
But we set its height and with 100 percent of the screen and then we set it's background color to black

71
00:04:55,670 --> 00:05:02,670
which means it'll be a box of 100 percent of its parent which is the body which is the screen.

72
00:05:04,200 --> 00:05:08,920
And then we set it back on color to fill it with a black color.

73
00:05:08,920 --> 00:05:16,800
What we're also going to add is the opacity now opacity is a number that is a decimal from 0 to 1.

74
00:05:16,830 --> 00:05:22,880
So zero would mean absolute opacity which means the div would be completely transparent.

75
00:05:22,980 --> 00:05:24,300
It would be invisible.

76
00:05:24,300 --> 00:05:28,540
One would mean that the div would be completely shown.

77
00:05:28,560 --> 00:05:31,360
So it would not be transparent at all.

78
00:05:31,520 --> 00:05:33,210
It would be completely opaque.

79
00:05:33,210 --> 00:05:38,310
Zero point five means the element would be half transparent.

80
00:05:38,340 --> 00:05:41,460
So it would be half invisible.

81
00:05:41,460 --> 00:05:46,980
Zero point seven means it would be slightly more visible than transparent.

82
00:05:47,010 --> 00:05:49,600
But it would still have a bit of a faded effect.

83
00:05:49,710 --> 00:05:51,730
So we have to see how that looks like in the output.

84
00:05:51,760 --> 00:05:56,430
But again set the opacity to zero point seven and you can test this number to find the best one that

85
00:05:56,430 --> 00:06:01,530
works for you in this specific case by zero point seven is a good design.

86
00:06:01,620 --> 00:06:07,740
We're also going to set the Zi index of the overlay to 1 which means that it will be on top of the image

87
00:06:07,770 --> 00:06:10,360
because the images the index is zero.

88
00:06:10,470 --> 00:06:15,570
So we'll be on top of the image but it will still be behind the container which has all the text.

89
00:06:15,570 --> 00:06:19,770
So let's go ahead and preview how this looks like in the output.

90
00:06:19,860 --> 00:06:26,580
So I'm going to click on the output and as you can see now I have my background image with my text on

91
00:06:26,580 --> 00:06:29,650
top and my button on top.

92
00:06:29,670 --> 00:06:29,890
OK.

93
00:06:29,910 --> 00:06:30,150
Great.

94
00:06:30,150 --> 00:06:32,570
Now you can see this text is still gray.

95
00:06:32,640 --> 00:06:36,150
So I'm going to go ahead and change that by opening this.

96
00:06:36,150 --> 00:06:37,340
Yes yes.

97
00:06:37,680 --> 00:06:45,340
And hiding output and to give the H1 a color you call H1 by its element name.

98
00:06:45,360 --> 00:06:48,110
Notice that we're not calling it by its class name.

99
00:06:48,210 --> 00:06:53,330
We're just calling it by its element name which you can do for all of the elements.

100
00:06:53,370 --> 00:06:58,860
So I'm going to give us each one color or wait which will change its text color to white.

101
00:06:58,890 --> 00:07:07,150
Now I can go to the output and I'll see that you text will now be white and instead of that great color.

102
00:07:07,260 --> 00:07:08,190
Okay excellent.

103
00:07:08,190 --> 00:07:13,340
So now we have set up our header with a background image and a darker overlay.

104
00:07:13,350 --> 00:07:18,180
You'll notice the image looks a bit darker than it did previously because we added an overlay and as

105
00:07:18,180 --> 00:07:20,550
well we have our button here and our text.

106
00:07:20,580 --> 00:07:24,690
Now this isn't looking exactly perfect but that's fine it's good enough for now and we can add extra

107
00:07:24,690 --> 00:07:26,400
styling at the end.

108
00:07:26,490 --> 00:07:31,500
You don't have to do all your styling immediately because as you build your website the styling might

109
00:07:31,500 --> 00:07:32,180
change.

110
00:07:32,190 --> 00:07:34,880
So you don't want to sell too much too early.

111
00:07:34,990 --> 00:07:35,750
OK.

112
00:07:35,760 --> 00:07:39,720
Other than that that is everything we're going to cover in this lecture in the next lecture.

113
00:07:39,720 --> 00:07:43,020
We're going to go ahead and work more on the HCM El.

114
00:07:43,110 --> 00:07:46,050
We are going to fill out after the header.

115
00:07:46,230 --> 00:07:49,050
We are now going to fill out the pricing header and the container.

116
00:07:49,080 --> 00:07:54,240
So this will contain pricing information and pricing options about our product.

117
00:07:54,240 --> 00:07:56,820
Thank you all for watching and we will see you in the next lecture.