1
00:00:02,110 --> 00:00:07,320
Get your turn the plans and the features into a flex box structure.

2
00:00:07,390 --> 00:00:12,870
Well if it worked congratulations if it didn't work let's all it together now.

3
00:00:12,880 --> 00:00:18,500
Now the first thing we have to work on is the plants section.

4
00:00:18,500 --> 00:00:19,370
This one right here.

5
00:00:19,520 --> 00:00:27,360
Specifically we will work on the plan list class and all the different plant classes inside this plan

6
00:00:27,360 --> 00:00:28,320
list class.

7
00:00:28,430 --> 00:00:34,610
For that let's go back to the code and let's start right here at the plants list class.

8
00:00:34,670 --> 00:00:35,710
This one right there.

9
00:00:36,050 --> 00:00:41,290
Now the first thing we can of course let you know that in the meanwhile is text align Center.

10
00:00:41,300 --> 00:00:47,660
We won't need that anymore and we cannot simply add display flex to it as a first step.

11
00:00:47,660 --> 00:00:53,450
This should turn our classifieds year into a flex container.

12
00:00:53,750 --> 00:00:57,980
Doesn't look perfect now but at least we didn't crash it completely.

13
00:00:57,980 --> 00:00:58,970
Now let's continue.

14
00:00:58,970 --> 00:01:01,580
We now have this flex container right here.

15
00:01:01,580 --> 00:01:09,840
And we of course want to make sure that our flex items are aligned to the center along the main axis.

16
00:01:09,840 --> 00:01:18,020
So from left to right to do that we can simply use justified content Center.

17
00:01:18,190 --> 00:01:19,140
That's what we learned.

18
00:01:19,150 --> 00:01:20,500
So let's see what happened.

19
00:01:21,840 --> 00:01:22,220
Yes.

20
00:01:22,260 --> 00:01:22,960
It is centered.

21
00:01:22,980 --> 00:01:24,170
So this worked fine.

22
00:01:25,170 --> 00:01:32,220
And then we also want to make sure that our elements are the flex items are also aligned to the center

23
00:01:32,310 --> 00:01:35,540
along the cross axis from top to bottom.

24
00:01:35,700 --> 00:01:44,290
For that we simply add a line items right now center like this.

25
00:01:44,440 --> 00:01:46,430
And let's be loaded.

26
00:01:46,620 --> 00:01:47,670
And as we can see.

27
00:01:47,670 --> 00:01:49,300
Now these are aligned.

28
00:01:49,410 --> 00:01:50,290
Not finished yet.

29
00:01:50,340 --> 00:01:52,960
Not perfect yet but we will work on it.

30
00:01:53,190 --> 00:01:58,340
And with that we actually turn to the plan list into a flex container.

31
00:01:58,530 --> 00:02:00,450
So this was step one.

32
00:02:00,450 --> 00:02:02,380
Now let's work on the Flex items.

33
00:02:02,400 --> 00:02:04,230
So this plant class right here.

34
00:02:04,230 --> 00:02:11,040
So basically this this and that plan for that to build first get rid of this inline block because we

35
00:02:11,040 --> 00:02:17,670
don't need it anymore as we are now using flex items and we also don't need vertical align middle anymore

36
00:02:17,790 --> 00:02:18,400
because.

37
00:02:18,480 --> 00:02:25,890
Well why don't we need that anymore because we will turn these plants now into additional flex containers

38
00:02:25,980 --> 00:02:31,230
because if we load right here you can see nothing changed but we of course want to make sure that the

39
00:02:31,230 --> 00:02:35,700
content of these plants right here is also displayed as flex items.

40
00:02:35,700 --> 00:02:40,340
Therefore each plan has to become a flex container for that view.

41
00:02:40,350 --> 00:02:41,880
Again at this place.

42
00:02:42,090 --> 00:02:44,290
Flex right here like that.

43
00:02:45,480 --> 00:02:47,540
Let's see what happens now.

44
00:02:47,970 --> 00:02:48,560
Yeah.

45
00:02:48,720 --> 00:02:49,900
Doesn't look too good.

46
00:02:50,130 --> 00:02:53,560
But the reason for that is simply that our flex direction is wrong.

47
00:02:53,640 --> 00:02:58,660
We need to add a flex direction of Cullom know like that.

48
00:02:58,790 --> 00:03:03,840
With that if we reload the page it looks a lot better already.

49
00:03:04,190 --> 00:03:08,770
What we could then do is we now applied flex direction Cullom.

50
00:03:08,810 --> 00:03:11,630
So the main axis goes from top to bottom.

51
00:03:11,660 --> 00:03:18,140
This means if you now apply justify constant space between Again this would allow us to better define

52
00:03:18,140 --> 00:03:20,330
the space between the different elements we have.

53
00:03:20,420 --> 00:03:26,960
So we can simply add justify content space between like that.

54
00:03:26,990 --> 00:03:32,150
So let's see what this looks like doesn't make a big change to be honest because we have added these

55
00:03:32,150 --> 00:03:33,090
margins right here.

56
00:03:33,200 --> 00:03:38,600
But I think we can edit though because it really ensures that we follow a specific pattern when it comes

57
00:03:38,600 --> 00:03:42,360
to distributing the elements inside our plants.

58
00:03:42,530 --> 00:03:46,060
With that we almost finished our plans right now.

59
00:03:46,160 --> 00:03:49,520
But there are two things that I don't like still.

60
00:03:49,520 --> 00:03:55,130
The first thing is that the size of this left plan of the free plan is to pretend the premium plan.

61
00:03:55,130 --> 00:03:59,890
So the height is still not equal as you can see this ends right here and right there.

62
00:04:00,140 --> 00:04:05,020
And the second thing is that the premium plan is now ahead of our recommended plan.

63
00:04:05,060 --> 00:04:09,780
Let's rock on the height first and for that at a height for all our plans.

64
00:04:10,010 --> 00:04:13,720
That's why we say 28 REM something like that.

65
00:04:13,760 --> 00:04:16,490
So let's see if and I'll look at the page.

66
00:04:16,490 --> 00:04:19,050
We have an equal size for all our plans.

67
00:04:19,100 --> 00:04:20,610
This is just the box shuttle.

68
00:04:20,630 --> 00:04:27,620
It makes it look a bit bigger but if we are also at a height to our highlighted plan maybe a bit higher

69
00:04:27,620 --> 00:04:31,360
then which could be 40 REM maybe something like that.

70
00:04:31,520 --> 00:04:34,290
Let's see if that.

71
00:04:34,790 --> 00:04:36,350
Looks better.

72
00:04:36,350 --> 00:04:44,660
And now we have to add a z index for the highlighted plan that's maybe used as an index of I don't know

73
00:04:45,310 --> 00:04:53,830
let's say 50 maybe a bigger one that then this looks fine although we have to make sure that our netballer.

74
00:04:53,880 --> 00:04:55,290
Yeah that's the problem now.

75
00:04:55,400 --> 00:04:58,180
We have to add a larger index to our navigation bar.

76
00:04:58,190 --> 00:05:00,280
But that sort of problem we know how this works.

77
00:05:00,350 --> 00:05:01,190
Let's go to the shots.

78
00:05:01,190 --> 00:05:01,360
Yes.

79
00:05:01,360 --> 00:05:09,360
As file and right here at that index of.

80
00:05:09,380 --> 00:05:13,920
Well then 60 maybe that's higher than the one the applied right here or 50.

81
00:05:14,060 --> 00:05:15,760
So if that let's see.

82
00:05:15,980 --> 00:05:16,310
Yeah.

83
00:05:16,400 --> 00:05:17,440
This looks better now.

84
00:05:18,640 --> 00:05:25,720
So we got that so we have turned our plan list into a flex container which contains the plans as flex

85
00:05:25,720 --> 00:05:26,410
items.

86
00:05:26,590 --> 00:05:32,740
And then we turned the plants into seperate flex containers which contain the different elements for

87
00:05:32,740 --> 00:05:33,270
each year.

88
00:05:33,310 --> 00:05:40,600
So all these elements as flex items also be also aligned to plants right here and make sure that the

89
00:05:40,600 --> 00:05:44,110
recommended plant is displayed ahead of the other plants.

90
00:05:44,110 --> 00:05:46,490
Let's see if we crushed anything right here.

91
00:05:47,220 --> 00:05:50,340
No I think this looks still really nice.

92
00:05:50,550 --> 00:05:54,060
And this was actually already part one of your assignment.

93
00:05:54,060 --> 00:05:57,550
The second part focused onto the features right here.

94
00:05:57,600 --> 00:05:58,560
Let's have a look at that.

95
00:05:58,590 --> 00:05:59,970
In the main section.

96
00:05:59,970 --> 00:06:03,840
But now we have to go to the key features specifically.

97
00:06:03,960 --> 00:06:10,740
We have to go to the key feature list and in there we have to list items with the key feature class.

98
00:06:10,770 --> 00:06:13,200
And right now we have to do the same thing again.

99
00:06:13,200 --> 00:06:17,850
Basically we have to turn the key feature list into a flex container.

100
00:06:18,270 --> 00:06:23,600
And with that the key feature class right here all these items into flex items.

101
00:06:23,610 --> 00:06:26,970
Now let's go back to the code and let's scroll down a bit.

102
00:06:28,450 --> 00:06:33,580
So let's first add this selector right here and important.

103
00:06:33,580 --> 00:06:36,500
It should of course be part of the media query.

104
00:06:36,580 --> 00:06:42,510
So let's add key minus feature underscore underscore list.

105
00:06:42,670 --> 00:06:43,510
That's important.

106
00:06:43,540 --> 00:06:47,590
I hope you saw the hint before it should be a double underscore.

107
00:06:47,600 --> 00:06:49,820
So sorry for that typo right here.

108
00:06:50,080 --> 00:06:56,800
And with that key feature list we can not simply say that we want to turn this into a flex container

109
00:06:56,980 --> 00:06:58,610
by adding display flex.

110
00:06:58,660 --> 00:07:05,240
Once again just to keep it in mind we now turned this classified here into a flex container a free.

111
00:07:05,240 --> 00:07:06,970
Now we load the page.

112
00:07:06,970 --> 00:07:11,900
We can't see that this apparently brooked although it's not centered anymore.

113
00:07:12,170 --> 00:07:18,470
But let's first also delete the display inline block declaration right here for the list item.

114
00:07:18,700 --> 00:07:23,740
And the vertical align top because I want to make sure that this is really a flex box construct right

115
00:07:23,740 --> 00:07:24,370
now.

116
00:07:24,740 --> 00:07:31,730
It's load didn't change but it's still not aligned so let's align the flex items along the main axis.

117
00:07:31,780 --> 00:07:39,390
So we simply have to apply justify content Center-Right here that already.

118
00:07:39,410 --> 00:07:43,540
So if we load that I think this looks all right.

119
00:07:43,550 --> 00:07:48,700
Now as we can see right here yeah this looks good.

120
00:07:48,720 --> 00:07:50,710
So we don't have any problems.

121
00:07:50,880 --> 00:07:56,520
So yeah I think that we also finished the second part of your assignment.

122
00:07:56,550 --> 00:08:03,870
Let me now just quickly clean up the code and get rid of all the comments we have right here because

123
00:08:03,900 --> 00:08:06,020
I don't think we need these anymore.

124
00:08:06,220 --> 00:08:16,350
So this one right here and this one and that one because we added all that I think this looks clean

125
00:08:16,350 --> 00:08:16,860
now.

126
00:08:17,040 --> 00:08:17,870
Yeah.

127
00:08:17,880 --> 00:08:23,020
And with that we finished the Schatz Yes as file we finished the main C S S file.

128
00:08:23,190 --> 00:08:26,570
So let's now also make sure that the customer's page.

129
00:08:26,580 --> 00:08:30,360
So this one right here also is based on flex box now.