1
00:00:02,410 --> 00:00:06,020
Before we dive deeper into more CSS concepts,

2
00:00:06,020 --> 00:00:09,260
let's style our content

3
00:00:09,260 --> 00:00:12,590
of our hero-content div here a bit more.

4
00:00:12,590 --> 00:00:15,030
So we'll focus on the h1, the paragraph,

5
00:00:15,030 --> 00:00:17,630
and the anchor element in here.

6
00:00:17,630 --> 00:00:20,320
Let's get started with the h1 element,

7
00:00:20,320 --> 00:00:23,230
and for this I'm back in the style CSS file

8
00:00:23,230 --> 00:00:26,240
and I'll again use our descendant combinator.

9
00:00:26,240 --> 00:00:29,530
So we'll refer to the hero-content ID

10
00:00:29,530 --> 00:00:34,260
and then to the h1 element in this container.

11
00:00:34,260 --> 00:00:37,650
First, the color of the text should be white

12
00:00:38,720 --> 00:00:42,800
and we'll transform the text to uppercase again,

13
00:00:42,800 --> 00:00:46,033
as we did it for our page logo.

14
00:00:47,610 --> 00:00:51,840
Besides that, I would like to increase the font size to,

15
00:00:51,840 --> 00:00:54,660
let's say, 50 pixels here.

16
00:00:54,660 --> 00:00:55,940
Let's see what this looks like.

17
00:00:55,940 --> 00:00:57,290
Yeah, I think this is better.

18
00:00:57,290 --> 00:01:00,170
The font family does not look perfect here.

19
00:01:00,170 --> 00:01:02,860
I would like to use another font family

20
00:01:02,860 --> 00:01:07,580
we imported already here in our index.html file.

21
00:01:07,580 --> 00:01:11,630
This time I would like to use this Raleway family.

22
00:01:11,630 --> 00:01:16,170
So for this, we will add the font-family property in here

23
00:01:19,260 --> 00:01:23,270
and set it to Raleway in quotation marks,

24
00:01:23,270 --> 00:01:28,200
and our fallback again will be a sans-serif font.

25
00:01:28,200 --> 00:01:31,670
And you notice already from previous lectures,

26
00:01:31,670 --> 00:01:33,670
the h1 element, by default,

27
00:01:33,670 --> 00:01:36,550
gets a margin applied by the browser.

28
00:01:36,550 --> 00:01:37,650
Can see this here,

29
00:01:37,650 --> 00:01:40,890
this 41.5 pixels here.

30
00:01:40,890 --> 00:01:43,760
And I would like to get rid of this margin

31
00:01:43,760 --> 00:01:47,043
and set it to zero like this.

32
00:01:48,120 --> 00:01:50,970
Let's now continue with our paragraph.

33
00:01:50,970 --> 00:01:54,280
Again, I'll use our descendant combinator.

34
00:01:54,280 --> 00:01:58,727
So, #hero-content p {

35
00:02:00,160 --> 00:02:03,600
And there I'll again use a white color

36
00:02:03,600 --> 00:02:06,840
and I'll use text-transform: uppercase

37
00:02:06,840 --> 00:02:10,690
to turn all the letters into uppercase ones.

38
00:02:10,690 --> 00:02:13,340
I'll also add a fixed font size,

39
00:02:13,340 --> 00:02:15,960
so not the default one applied by the browser.

40
00:02:15,960 --> 00:02:17,810
Oops, sorry, not font-family,

41
00:02:17,810 --> 00:02:19,630
font-size, it is.

42
00:02:19,630 --> 00:02:23,130
And this should be smaller than the h1 font size,

43
00:02:23,130 --> 00:02:25,083
so maybe 24 pixels here.

44
00:02:27,390 --> 00:02:28,860
Let's see.

45
00:02:28,860 --> 00:02:29,970
Yep, this looks good.

46
00:02:29,970 --> 00:02:32,890
But the font weight here is too big,

47
00:02:32,890 --> 00:02:34,830
so I would like to reduce this.

48
00:02:34,830 --> 00:02:37,340
And for the smaller font weight

49
00:02:40,010 --> 00:02:43,860
as can be seen in here, we have to weight at 700.

50
00:02:43,860 --> 00:02:46,070
I would like to use a smaller weight

51
00:02:46,070 --> 00:02:51,070
and this should be a font weight of 300 only.

52
00:02:51,210 --> 00:02:52,043
Let's see.

53
00:02:52,043 --> 00:02:54,030
Yeah, this looks a lot better, I think,

54
00:02:54,030 --> 00:02:57,703
because the focus should be on the h1 element here first.

55
00:02:59,510 --> 00:03:02,570
And besides that, yeah, I think this looks all right.

56
00:03:02,570 --> 00:03:05,260
So we can now focus on to our third element,

57
00:03:05,260 --> 00:03:06,490
the anchor tag,

58
00:03:06,490 --> 00:03:09,580
and this should actually be a button in the end.

59
00:03:09,580 --> 00:03:12,833
Right now, it's just, well, a link with the underscore.

60
00:03:15,439 --> 00:03:19,127
So again, we'll use our descendant combinator,

61
00:03:19,127 --> 00:03:21,723
#hero-content a {

62
00:03:22,800 --> 00:03:26,740
to specifically style this anchor tag.

63
00:03:26,740 --> 00:03:31,730
And I'll get started with text-decoration: none

64
00:03:31,730 --> 00:03:33,463
to remove the underscore.

65
00:03:35,720 --> 00:03:38,270
Then I'll add a background color

66
00:03:38,270 --> 00:03:40,530
because it should become a button in the end,

67
00:03:40,530 --> 00:03:44,200
so we will have to see what this button should look like.

68
00:03:44,200 --> 00:03:47,670
And I prepared another RGB color for this.

69
00:03:47,670 --> 00:03:52,460
This is 255, 251, and 0.

70
00:03:52,460 --> 00:03:55,253
So a yellow tone, it is.

71
00:03:56,590 --> 00:03:57,970
Let's see.

72
00:03:57,970 --> 00:03:59,840
Yeah, becomes better.

73
00:03:59,840 --> 00:04:01,370
What's missing now of course already

74
00:04:01,370 --> 00:04:03,740
is the padding to get some distance

75
00:04:03,740 --> 00:04:05,820
between the content and the border.

76
00:04:05,820 --> 00:04:08,240
So let's add this padding immediately.

77
00:04:08,240 --> 00:04:09,420
And here for the button,

78
00:04:09,420 --> 00:04:11,940
I would like to have a smaller padding

79
00:04:11,940 --> 00:04:13,340
on the top and the bottom

80
00:04:13,340 --> 00:04:15,660
and the bigger padding left and right.

81
00:04:15,660 --> 00:04:18,230
So we'll go with 12 pixels top and bottom

82
00:04:18,230 --> 00:04:20,523
and 24 pixels left, right.

83
00:04:22,270 --> 00:04:23,290
Yeah, like this.

84
00:04:23,290 --> 00:04:24,790
Doesn't look too bad, I think.

85
00:04:26,660 --> 00:04:29,560
Then we'll also change the text color

86
00:04:29,560 --> 00:04:32,620
because if I zoom in, you see it has this blue color.

87
00:04:32,620 --> 00:04:33,630
I don't like this.

88
00:04:33,630 --> 00:04:37,503
So let's also add a color of simple black here.

89
00:04:39,360 --> 00:04:43,360
And also add a font size of 24 pixels again

90
00:04:43,360 --> 00:04:46,170
to have a default fixed font size

91
00:04:46,170 --> 00:04:48,323
we add to this element here.

92
00:04:49,940 --> 00:04:51,560
Let's see if this looks good.

93
00:04:51,560 --> 00:04:52,950
Yup, this looks okay.

94
00:04:52,950 --> 00:04:56,580
But the text is a bit too thin as I would say.

95
00:04:56,580 --> 00:04:59,900
So for this, we should increase the font weight maybe.

96
00:04:59,900 --> 00:05:03,140
And we can do this as we know with the font weight property,

97
00:05:03,140 --> 00:05:05,880
and we have two options to do this, actually.

98
00:05:05,880 --> 00:05:08,430
We can either set it to 700,

99
00:05:08,430 --> 00:05:10,810
so this will be 300 for a thinner font weight

100
00:05:10,810 --> 00:05:14,540
and 700 for a bolder font weight by default,

101
00:05:14,540 --> 00:05:17,260
or use bold here written like this.

102
00:05:17,260 --> 00:05:19,390
Both is working as you can see.

103
00:05:19,390 --> 00:05:21,300
Now it's a bit better readable.

104
00:05:21,300 --> 00:05:24,730
If I would untick that box, you see it's slightly thinner.

105
00:05:24,730 --> 00:05:28,650
And if I would change bold to 700,

106
00:05:28,650 --> 00:05:30,360
the result would be the same.

107
00:05:30,360 --> 00:05:33,710
So you can see if I untick it, thinner and bigger.

108
00:05:33,710 --> 00:05:36,180
Still to have both your inner code

109
00:05:36,180 --> 00:05:37,710
I will keep bold right here.

110
00:05:37,710 --> 00:05:40,990
Typically you would follow one convention here,

111
00:05:40,990 --> 00:05:43,243
so numbers or texts.

112
00:05:45,830 --> 00:05:48,090
With that our text looks all right.

113
00:05:48,090 --> 00:05:51,790
What's missing now is some general box styling

114
00:05:51,790 --> 00:05:54,240
we basically applied to all our boxes.

115
00:05:54,240 --> 00:05:57,850
This means we should have a look at the border radius here

116
00:05:57,850 --> 00:06:00,020
for our good old rounded corners,

117
00:06:00,020 --> 00:06:01,993
which we could set to eight pixels.

118
00:06:03,270 --> 00:06:06,100
And then we'll also apply a box shadow.

119
00:06:06,100 --> 00:06:09,330
Once again, with two pixels left to right,

120
00:06:09,330 --> 00:06:11,423
four pixels top to bottom,

121
00:06:12,380 --> 00:06:14,330
eight pixels blur radius,

122
00:06:14,330 --> 00:06:19,330
and an RGB code of 68, 67, and 67.

123
00:06:25,480 --> 00:06:27,850
And with that, I think, yeah,

124
00:06:27,850 --> 00:06:30,420
our box here looks pretty cool.

125
00:06:30,420 --> 00:06:32,640
What's still missing here is

126
00:06:32,640 --> 00:06:35,560
maybe a bit more margin between our paragraph

127
00:06:35,560 --> 00:06:36,540
and the anchor tag.

128
00:06:36,540 --> 00:06:37,920
That's a bit too close.

129
00:06:37,920 --> 00:06:41,640
For that we can either add a top margin to our anchor,

130
00:06:41,640 --> 00:06:42,690
to our button,

131
00:06:42,690 --> 00:06:47,330
or we'll just add a bottom margin here to our paragraph.

132
00:06:47,330 --> 00:06:48,630
That's what I will go for.

133
00:06:48,630 --> 00:06:51,920
Margin bottom, maybe 32 pixels.

134
00:06:51,920 --> 00:06:52,820
Let's see.

135
00:06:52,820 --> 00:06:54,380
Yep, this moves it down a bit.

136
00:06:54,380 --> 00:06:57,333
And with that, it looks all right I would say.

137
00:06:58,670 --> 00:07:00,460
One thing is still missing though,

138
00:07:00,460 --> 00:07:01,620
as I just saw,

139
00:07:01,620 --> 00:07:03,360
we should add hover effect

140
00:07:03,360 --> 00:07:06,380
if we hover over the Discover places button here,

141
00:07:06,380 --> 00:07:08,560
because at the moment we don't get any feedback

142
00:07:08,560 --> 00:07:11,800
instead of the change in cursor by default.

143
00:07:11,800 --> 00:07:12,710
So for this,

144
00:07:12,710 --> 00:07:17,180
we'll go to our code again at

145
00:07:17,180 --> 00:07:21,450
the #hero-content a:hover selector.

146
00:07:21,450 --> 00:07:24,490
So this means we again use a descendant combinator,

147
00:07:24,490 --> 00:07:27,150
meaning that in the hero content ID

148
00:07:27,150 --> 00:07:30,250
if we hover over an anchor tag then,

149
00:07:30,250 --> 00:07:31,810
well, what should happen,

150
00:07:31,810 --> 00:07:35,270
we will just add a slight change of the background color.

151
00:07:35,270 --> 00:07:38,400
By default, we have this RGB code here.

152
00:07:38,400 --> 00:07:39,950
Let's take this one maybe

153
00:07:39,950 --> 00:07:44,773
and I'll just alter it slightly to maybe 238 right here.

154
00:07:46,090 --> 00:07:47,400
Let's see if this works.

155
00:07:47,400 --> 00:07:48,240
We do that.

156
00:07:48,240 --> 00:07:50,940
Yeah, you see it gets slightly darker

157
00:07:50,940 --> 00:07:53,090
and I think this does the trick right here.

158
00:07:54,000 --> 00:07:58,290
This means our hero-content part is all right.

159
00:07:58,290 --> 00:07:59,560
This looks really good.

160
00:07:59,560 --> 00:08:02,810
But our hero with the background image,

161
00:08:02,810 --> 00:08:03,850
it's still a problem

162
00:08:03,850 --> 00:08:07,940
because it should not only be behind our hero-content here,

163
00:08:07,940 --> 00:08:10,140
it should also be behind the header.

164
00:08:10,140 --> 00:08:11,200
The problem is that,

165
00:08:11,200 --> 00:08:14,410
if we remember back what we learned about the document flow,

166
00:08:14,410 --> 00:08:17,700
that each element is displayed one after another

167
00:08:17,700 --> 00:08:19,400
for block elements in this case.

168
00:08:19,400 --> 00:08:20,760
And therefore, well,

169
00:08:20,760 --> 00:08:25,360
we kind of have to find a way to bring this main section,

170
00:08:25,360 --> 00:08:27,330
specifically the hero part here

171
00:08:27,330 --> 00:08:29,590
which contains the background image,

172
00:08:29,590 --> 00:08:32,169
behind our header.

173
00:08:32,169 --> 00:08:34,299
Maybe the position property

174
00:08:34,299 --> 00:08:36,923
offers some values that can help us here.