1
00:00:02,640 --> 00:00:04,170
Let's get started with the text

2
00:00:04,170 --> 00:00:05,780
below our image here.

3
00:00:05,780 --> 00:00:08,210
The first thing I'd like to change is,

4
00:00:08,210 --> 00:00:11,800
I would like to center the text below our images.

5
00:00:11,800 --> 00:00:15,060
We can do this with the text align property.

6
00:00:15,060 --> 00:00:16,030
And as you learned,

7
00:00:16,030 --> 00:00:19,500
text aligned means that if we apply this property

8
00:00:19,500 --> 00:00:21,440
to an element, the content,

9
00:00:21,440 --> 00:00:25,370
the text content of this element will be centered.

10
00:00:25,370 --> 00:00:27,890
Now, which element holds our text?

11
00:00:27,890 --> 00:00:29,580
Well, it's the paragraph.

12
00:00:29,580 --> 00:00:30,413
Therefore,

13
00:00:30,413 --> 00:00:33,000
what we'll do now is we'll go back to our code

14
00:00:33,990 --> 00:00:37,520
at again, our destination class selector.

15
00:00:37,520 --> 00:00:39,380
So the list element in the end.

16
00:00:39,380 --> 00:00:42,690
And there we want to access all the paragraphs

17
00:00:42,690 --> 00:00:43,550
we have in here,

18
00:00:43,550 --> 00:00:46,950
and then add our text aligned property

19
00:00:46,950 --> 00:00:49,640
with a value being set to center.

20
00:00:49,640 --> 00:00:53,310
With this, the first task is done.

21
00:00:53,310 --> 00:00:57,250
Second thing I don't like is I think I want to have

22
00:00:57,250 --> 00:00:59,470
uppercase letters as we had it here

23
00:00:59,470 --> 00:01:02,070
in the, in the H1 element.

24
00:01:02,070 --> 00:01:04,410
So this would also look better down here.

25
00:01:04,410 --> 00:01:08,840
This can be applied now to our destination class.

26
00:01:08,840 --> 00:01:12,483
So do you list items in the end, therefore let's do this.

27
00:01:13,521 --> 00:01:14,860
Let's add what

28
00:01:14,860 --> 00:01:15,800
the text

29
00:01:16,720 --> 00:01:20,860
transform property with a value of uppercase.

30
00:01:20,860 --> 00:01:22,110
With this in place,

31
00:01:22,110 --> 00:01:26,950
the rule gets inherited by our paragraphs here.

32
00:01:26,950 --> 00:01:30,740
You see inherited by our list elements.

33
00:01:30,740 --> 00:01:31,573
Therefore,

34
00:01:31,573 --> 00:01:34,610
this looks better and there is one third thing

35
00:01:34,610 --> 00:01:35,880
I'd like to change.

36
00:01:35,880 --> 00:01:37,860
If we zoom in a bit here, you see,

37
00:01:37,860 --> 00:01:40,610
we still have this differentiation between the city

38
00:01:40,610 --> 00:01:41,920
and the country.

39
00:01:41,920 --> 00:01:46,290
But I think adding some color to the country here

40
00:01:46,290 --> 00:01:49,120
would emphasize this a bit more or highlight

41
00:01:49,120 --> 00:01:50,340
this a bit more.

42
00:01:50,340 --> 00:01:51,970
As we have our

43
00:01:52,980 --> 00:01:54,750
strong element in here,

44
00:01:54,750 --> 00:01:58,460
we can refer to this element and change the color of it

45
00:01:58,460 --> 00:01:59,350
easily.

46
00:01:59,350 --> 00:02:00,183
For this,

47
00:02:00,183 --> 00:02:04,640
we go back and maybe down here again at the destination

48
00:02:04,640 --> 00:02:08,120
class and they are now referred to the strong element.

49
00:02:08,120 --> 00:02:11,640
And in here, we'll now add a color with an RGB code

50
00:02:12,620 --> 00:02:13,703
of zero,

51
00:02:15,848 --> 00:02:20,608
160

52
00:02:20,608 --> 00:02:22,820
and 117.

53
00:02:22,820 --> 00:02:25,990
So such a slight green tone here.

54
00:02:25,990 --> 00:02:27,220
And let's check this.

55
00:02:27,220 --> 00:02:29,120
Yeah, I think this looks a lot better.

56
00:02:30,070 --> 00:02:34,160
Still, I think our work on the paragraph is not done yet.

57
00:02:34,160 --> 00:02:37,280
I think we should also increase the font size a bit

58
00:02:37,280 --> 00:02:40,410
and also get rid of this black color here.

59
00:02:40,410 --> 00:02:43,690
A slightly grayish tone would look better, I think.

60
00:02:43,690 --> 00:02:45,060
So let's work on these things.

61
00:02:45,060 --> 00:02:48,920
So the font size and the color next in our paragraphs.

62
00:02:48,920 --> 00:02:51,010
So we leave our strong element

63
00:02:51,010 --> 00:02:52,600
and go back to this paragraph.

64
00:02:52,600 --> 00:02:56,390
Here, we will now add a fixed font size

65
00:02:58,021 --> 00:02:59,870
of 24 pixels,

66
00:02:59,870 --> 00:03:03,320
and we'll add a different color, which should have as a set,

67
00:03:03,320 --> 00:03:07,433
a slight grayish tone with an RGB code of 124,

68
00:03:09,149 --> 00:03:09,982
123

69
00:03:11,290 --> 00:03:12,900
and 123.

70
00:03:12,900 --> 00:03:13,733
Let's see.

71
00:03:14,860 --> 00:03:17,520
Yeah, it looks better, I think.

72
00:03:17,520 --> 00:03:20,210
And what we could also do,

73
00:03:20,210 --> 00:03:24,410
if we check the paragraph, we have a margin of 24 pixels.

74
00:03:24,410 --> 00:03:27,450
Let's maybe reduce the margin a bit to bring the text

75
00:03:27,450 --> 00:03:29,140
a bit closer to the image.

76
00:03:29,140 --> 00:03:30,680
So in here

77
00:03:30,680 --> 00:03:31,940
we can now add

78
00:03:33,650 --> 00:03:35,010
a margin

79
00:03:35,010 --> 00:03:36,560
of maybe

80
00:03:36,560 --> 00:03:38,020
20 pixels top bottom,

81
00:03:38,020 --> 00:03:39,540
zero left right.

82
00:03:39,540 --> 00:03:40,373
Let's see.

83
00:03:40,373 --> 00:03:42,440
Yeah, I think this is just a slight change,

84
00:03:42,440 --> 00:03:43,650
but it looks better now.

85
00:03:43,650 --> 00:03:46,630
Now you see that the image and a paragraph below

86
00:03:46,630 --> 00:03:47,683
belong together.

87
00:03:48,890 --> 00:03:51,940
This means we are coming closer to finishing

88
00:03:51,940 --> 00:03:53,160
the section styling.

89
00:03:53,160 --> 00:03:57,080
What is missing of course is the H2 element here.

90
00:03:57,080 --> 00:03:58,880
Let's work on this now,

91
00:03:58,880 --> 00:04:02,820
actually just some steps we already did for other elements.

92
00:04:02,820 --> 00:04:06,490
I would like to transform the text to uppercase letters.

93
00:04:06,490 --> 00:04:08,580
We will align the text to the center

94
00:04:08,580 --> 00:04:11,050
and then work on the font size and the color

95
00:04:11,050 --> 00:04:12,950
and see if the margin is all right.

96
00:04:12,950 --> 00:04:16,033
So let's select our H2 element.

97
00:04:17,860 --> 00:04:21,200
Maybe above the destinations because it's well,

98
00:04:21,200 --> 00:04:23,140
the header of these,

99
00:04:23,140 --> 00:04:27,410
and we'll select it with our highlights ID.

100
00:04:27,410 --> 00:04:29,623
You remember in the

101
00:04:31,870 --> 00:04:33,470
index HTML file,

102
00:04:33,470 --> 00:04:36,910
we have the section ID highlights for the section

103
00:04:36,910 --> 00:04:37,880
and in this ID,

104
00:04:37,880 --> 00:04:41,070
we have the H2 element as a direct child.

105
00:04:41,070 --> 00:04:43,080
So we will select the highlights and here,

106
00:04:43,080 --> 00:04:46,070
the H2 element and there, as I said,

107
00:04:46,070 --> 00:04:49,483
let's get started with transforming the text to uppercase,

108
00:04:50,810 --> 00:04:52,110
aligning the text

109
00:04:54,300 --> 00:04:55,233
to the center,

110
00:04:56,570 --> 00:04:58,570
adding a fixed font size,

111
00:04:58,570 --> 00:05:00,990
and here would like to have a bigger font size

112
00:05:00,990 --> 00:05:04,330
than we have it below for our paragraph.

113
00:05:04,330 --> 00:05:06,283
So maybe 40 pixels here.

114
00:05:07,680 --> 00:05:10,500
And then I'll also add a different color again,

115
00:05:10,500 --> 00:05:12,740
not the black one we have by default.

116
00:05:12,740 --> 00:05:15,760
Here, I prepared a color for you with an RGB code of

117
00:05:16,950 --> 00:05:17,943
59,

118
00:05:20,790 --> 00:05:21,870
65

119
00:05:23,130 --> 00:05:24,403
and 64.

120
00:05:25,890 --> 00:05:27,290
See?

121
00:05:27,290 --> 00:05:29,720
Yeah, this looks a lot better, I think.

122
00:05:29,720 --> 00:05:32,110
And maybe we can also

123
00:05:33,170 --> 00:05:35,370
check the margin here.

124
00:05:35,370 --> 00:05:37,710
We have a margin of 33 pixels.

125
00:05:37,710 --> 00:05:40,630
Yeah, let's maybe decrease that margin a little bit.

126
00:05:40,630 --> 00:05:44,100
So let's go back and let's say the margin

127
00:05:45,110 --> 00:05:46,500
top bottom

128
00:05:46,500 --> 00:05:49,190
should be 24 pixels

129
00:05:49,190 --> 00:05:50,750
and zero left right.

130
00:05:50,750 --> 00:05:52,713
See, yeah, I think this looks better.

131
00:05:55,000 --> 00:05:57,170
With this change being in place,

132
00:05:57,170 --> 00:06:02,170
we actually finished the content of our highlight section.

133
00:06:02,300 --> 00:06:06,190
So this means the H2 element and the unordered,

134
00:06:06,190 --> 00:06:08,240
the list with the list items.

135
00:06:08,240 --> 00:06:10,830
What is missing now is the styling

136
00:06:10,830 --> 00:06:15,040
of the actual section elements of the parents, so to say.

137
00:06:15,040 --> 00:06:16,450
And with that,

138
00:06:16,450 --> 00:06:20,870
we also have a little issue that might cause some confusion

139
00:06:20,870 --> 00:06:21,773
at first sight.