1
00:00:02,480 --> 00:00:05,750
Let's now do our first styling steps

2
00:00:05,750 --> 00:00:07,760
in our highlights section

3
00:00:07,760 --> 00:00:12,590
and we will follow a structured approach, so we will style

4
00:00:12,590 --> 00:00:16,230
all our different elements of that page step-by-step

5
00:00:16,230 --> 00:00:17,870
but I would like to get started

6
00:00:17,870 --> 00:00:21,680
with two specific issues we have at the moment.

7
00:00:21,680 --> 00:00:24,220
The first one is quite obvious I guess.

8
00:00:24,220 --> 00:00:27,530
We have very huge images here, as you can see,

9
00:00:27,530 --> 00:00:30,540
the images will cover the entire page, basically.

10
00:00:30,540 --> 00:00:32,850
And besides this, this is something we'll see

11
00:00:32,850 --> 00:00:37,500
in a few seconds, the images are displayed below each other

12
00:00:37,500 --> 00:00:41,800
and not next to each other, images are inland elements

13
00:00:41,800 --> 00:00:44,770
so typically these would be positioned next to each other

14
00:00:44,770 --> 00:00:49,770
but as our images are part of the list element here,

15
00:00:50,770 --> 00:00:53,160
well list elements are block elements

16
00:00:53,160 --> 00:00:56,390
therefore these are positioned below each other.

17
00:00:56,390 --> 00:01:00,140
However, first to reduce the size of these images,

18
00:01:00,140 --> 00:01:02,150
I will follow the same approach

19
00:01:02,150 --> 00:01:05,319
that we had for our background image up here.

20
00:01:05,319 --> 00:01:09,193
And this was just adding a fixed height to these images.

21
00:01:11,340 --> 00:01:14,110
For that, we go back to our project

22
00:01:14,110 --> 00:01:18,940
and here into the styles CSS file, not the shared CSS file.

23
00:01:18,940 --> 00:01:21,770
Styles CSS contains only styles

24
00:01:21,770 --> 00:01:25,060
which are appearing on our landing page

25
00:01:25,060 --> 00:01:30,060
and there I'll use our destination class we added.

26
00:01:31,060 --> 00:01:33,770
So basically we can access all the lists items

27
00:01:33,770 --> 00:01:36,610
with this destination class and in there

28
00:01:36,610 --> 00:01:40,680
I want to select all image elements that we have.

29
00:01:40,680 --> 00:01:43,750
As I said, I would like to change the height

30
00:01:43,750 --> 00:01:48,750
and I will set it to a fixed value of 200 pixels here.

31
00:01:49,010 --> 00:01:52,010
With that if we go back, you can see that, well,

32
00:01:52,010 --> 00:01:54,330
our page improved a lot already

33
00:01:54,330 --> 00:01:57,080
but what you can also see is that, as I said,

34
00:01:57,080 --> 00:01:59,750
the images are displayed below each other.

35
00:01:59,750 --> 00:02:02,230
We learned how we can quickly fix that.

36
00:02:02,230 --> 00:02:05,326
We can do this with Flexbox which has a default

37
00:02:05,326 --> 00:02:08,710
flex direction of row, therefore the elements

38
00:02:08,710 --> 00:02:11,520
would be positioned next to each other,

39
00:02:11,520 --> 00:02:15,240
but where do we apply our display flex rule now?

40
00:02:15,240 --> 00:02:19,200
Well, we apply it on our destinations ID.

41
00:02:19,200 --> 00:02:22,950
So the unordered list will become our flex container.

42
00:02:22,950 --> 00:02:26,550
The container contains free flex items,

43
00:02:26,550 --> 00:02:30,970
our list elements here and as the images are part of this

44
00:02:30,970 --> 00:02:34,550
list element, well, the positioning should be all right.

45
00:02:34,550 --> 00:02:39,550
Let's give it a try by adding the destinations ID.

46
00:02:40,130 --> 00:02:43,074
So here we used the ID selector with the hashtag,

47
00:02:43,074 --> 00:02:46,880
not the class selector for the individual list items.

48
00:02:46,880 --> 00:02:49,987
And here I'll simply go with display flex

49
00:02:52,710 --> 00:02:55,363
and with that, this should look better, yeah.

50
00:02:56,470 --> 00:03:00,040
We can also activate the integrated flex helper here

51
00:03:00,040 --> 00:03:03,110
by clicking onto this well, flex button.

52
00:03:03,110 --> 00:03:06,790
With that, we can see our full flex container here

53
00:03:06,790 --> 00:03:09,290
also indicated by this unused area.

54
00:03:09,290 --> 00:03:12,690
So at the moment the flex container occupies

55
00:03:12,690 --> 00:03:15,500
the entire space on this page.

56
00:03:15,500 --> 00:03:18,160
This is not what I would like to have though.

57
00:03:18,160 --> 00:03:22,240
I would like to reduce the width of the flex container

58
00:03:22,240 --> 00:03:24,010
to make sure that the images do not start

59
00:03:24,010 --> 00:03:26,110
directly here at the left and the right

60
00:03:26,110 --> 00:03:30,050
and then I would also like to center the flex container.

61
00:03:30,050 --> 00:03:31,400
We learned how we can do this

62
00:03:31,400 --> 00:03:33,400
in the previous lectures already.

63
00:03:33,400 --> 00:03:36,800
If you remember back the logic we applied

64
00:03:36,800 --> 00:03:40,370
in our header here, where we used the width property

65
00:03:40,370 --> 00:03:42,720
with percentage values we can actually do

66
00:03:42,720 --> 00:03:44,200
the same thing right here.

67
00:03:44,200 --> 00:03:47,640
At the moment we have a width of 100% basically.

68
00:03:47,640 --> 00:03:50,660
So if you would go back to our destination selector

69
00:03:50,660 --> 00:03:53,980
and apply the width of 100%, what is happening?

70
00:03:53,980 --> 00:03:57,350
Well nothing is changing, our flex container here

71
00:03:57,350 --> 00:04:02,070
if we selected and scroll down has a width of 1022 pixels.

72
00:04:02,070 --> 00:04:04,200
And where is this width coming from?

73
00:04:04,200 --> 00:04:09,200
Well, if we check our width of the parent element

74
00:04:09,320 --> 00:04:11,530
of the section with the ID highlights,

75
00:04:11,530 --> 00:04:13,820
we see this is exactly the same width.

76
00:04:13,820 --> 00:04:16,519
So at the moment, our width property

77
00:04:16,519 --> 00:04:20,050
if we use percentage values refers to the parent.

78
00:04:20,050 --> 00:04:24,840
This is different when comparing it to the behavior we had

79
00:04:24,840 --> 00:04:27,300
when we use the percentage value in combination

80
00:04:27,300 --> 00:04:30,660
with absolute or fixed position elements,

81
00:04:30,660 --> 00:04:32,770
there are other rules applied.

82
00:04:32,770 --> 00:04:35,520
But again, typically if you have normal elements

83
00:04:35,520 --> 00:04:38,410
as I would call this here, the parent is typically

84
00:04:38,410 --> 00:04:41,370
the reference point for percentage values.

85
00:04:41,370 --> 00:04:43,979
Once again, more about this can be found

86
00:04:43,979 --> 00:04:47,203
attached to the last lecture of this module.

87
00:04:48,550 --> 00:04:51,770
As we know that the width property in percentage values

88
00:04:51,770 --> 00:04:54,900
refers to the parent, well, then we could simply say

89
00:04:54,900 --> 00:04:59,900
that instead of 100% we simply use a value of 90% here

90
00:05:00,280 --> 00:05:02,720
with that you see that our width is reduced.

91
00:05:02,720 --> 00:05:06,580
Now, the flex container only uses roundabout

92
00:05:06,580 --> 00:05:10,320
920 pixels at the current position here.

93
00:05:10,320 --> 00:05:12,820
And with that, we can use another trick we learned

94
00:05:12,820 --> 00:05:15,740
in this course to center block elements.

95
00:05:15,740 --> 00:05:18,480
Here, the unordered list is a block element

96
00:05:18,480 --> 00:05:20,080
therefore, what can we do?

97
00:05:20,080 --> 00:05:22,890
Well, we can use our margin property

98
00:05:22,890 --> 00:05:27,290
with the auto value to center the container here.

99
00:05:27,290 --> 00:05:30,870
If we do this, so we use margin auto,

100
00:05:30,870 --> 00:05:33,160
so auto top, left, bottom, right

101
00:05:33,160 --> 00:05:35,033
then the container is centered.

102
00:05:36,500 --> 00:05:40,840
Again if we select it, you see it's indeed in the center

103
00:05:40,840 --> 00:05:44,140
of the page, we have this unused space to the right here.

104
00:05:44,140 --> 00:05:45,840
We'll tackle this in a few seconds

105
00:05:45,840 --> 00:05:47,840
when we work on the images

106
00:05:47,840 --> 00:05:51,090
but to finish the initial work on our container

107
00:05:51,090 --> 00:05:53,750
I would only like to add one last thing here.

108
00:05:53,750 --> 00:05:57,070
And this is a little bit of bottom margin here to make sure

109
00:05:57,070 --> 00:05:59,840
we have a bit more distance to the bottom of the page.

110
00:05:59,840 --> 00:06:01,829
Let's do this quickly by adding

111
00:06:01,829 --> 00:06:06,480
the "margin-bottom" property here.

112
00:06:06,480 --> 00:06:09,680
I would like to add a margin of, let's say, 40 pixels

113
00:06:10,780 --> 00:06:13,030
with that we can now scroll down a bit

114
00:06:13,030 --> 00:06:15,060
and have a bigger gap here at the bottom

115
00:06:15,060 --> 00:06:16,710
which looks better in my opinion.

116
00:06:18,120 --> 00:06:21,340
So with the initial look on the container done

117
00:06:21,340 --> 00:06:24,720
we can now focus on to the images a bit more

118
00:06:24,720 --> 00:06:27,030
because the container is centered

119
00:06:27,030 --> 00:06:29,273
but the images look a bit off.