Get your turn the plans and the features into a flex box structure.
Well if it worked congratulations if it didn't work let's all it together now.
Now the first thing we have to work on is the plants section.
This one right here.
Specifically we will work on the plan list class and all the different plant classes inside this plan
list class.
For that let's go back to the code and let's start right here at the plants list class.
This one right there.
Now the first thing we can of course let you know that in the meanwhile is text align Center.
We won't need that anymore and we cannot simply add display flex to it as a first step.
This should turn our classifieds year into a flex container.
Doesn't look perfect now but at least we didn't crash it completely.
Now let's continue.
We now have this flex container right here.
And we of course want to make sure that our flex items are aligned to the center along the main axis.
So from left to right to do that we can simply use justified content Center.
That's what we learned.
So let's see what happened.
Yes.
It is centered.
So this worked fine.
And then we also want to make sure that our elements are the flex items are also aligned to the center
along the cross axis from top to bottom.
For that we simply add a line items right now center like this.
And let's be loaded.
And as we can see.
Now these are aligned.
Not finished yet.
Not perfect yet but we will work on it.
And with that we actually turn to the plan list into a flex container.
So this was step one.
Now let's work on the Flex items.
So this plant class right here.
So basically this this and that plan for that to build first get rid of this inline block because we
don't need it anymore as we are now using flex items and we also don't need vertical align middle anymore
because.
Well why don't we need that anymore because we will turn these plants now into additional flex containers
because if we load right here you can see nothing changed but we of course want to make sure that the
content of these plants right here is also displayed as flex items.
Therefore each plan has to become a flex container for that view.
Again at this place.
Flex right here like that.
Let's see what happens now.
Yeah.
Doesn't look too good.
But the reason for that is simply that our flex direction is wrong.
We need to add a flex direction of Cullom know like that.
With that if we reload the page it looks a lot better already.
What we could then do is we now applied flex direction Cullom.
So the main axis goes from top to bottom.
This means if you now apply justify constant space between Again this would allow us to better define
the space between the different elements we have.
So we can simply add justify content space between like that.
So let's see what this looks like doesn't make a big change to be honest because we have added these
margins right here.
But I think we can edit though because it really ensures that we follow a specific pattern when it comes
to distributing the elements inside our plants.
With that we almost finished our plans right now.
But there are two things that I don't like still.
The first thing is that the size of this left plan of the free plan is to pretend the premium plan.
So the height is still not equal as you can see this ends right here and right there.
And the second thing is that the premium plan is now ahead of our recommended plan.
Let's rock on the height first and for that at a height for all our plans.
That's why we say 28 REM something like that.
So let's see if and I'll look at the page.
We have an equal size for all our plans.
This is just the box shuttle.
It makes it look a bit bigger but if we are also at a height to our highlighted plan maybe a bit higher
then which could be 40 REM maybe something like that.
Let's see if that.
Looks better.
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
let's say 50 maybe a bigger one that then this looks fine although we have to make sure that our netballer.
Yeah that's the problem now.
We have to add a larger index to our navigation bar.
But that sort of problem we know how this works.
Let's go to the shots.
Yes.
As file and right here at that index of.
Well then 60 maybe that's higher than the one the applied right here or 50.
So if that let's see.
Yeah.
This looks better now.
So we got that so we have turned our plan list into a flex container which contains the plans as flex
items.
And then we turned the plants into seperate flex containers which contain the different elements for
each year.
So all these elements as flex items also be also aligned to plants right here and make sure that the
recommended plant is displayed ahead of the other plants.
Let's see if we crushed anything right here.
No I think this looks still really nice.
And this was actually already part one of your assignment.
The second part focused onto the features right here.
Let's have a look at that.
In the main section.
But now we have to go to the key features specifically.
We have to go to the key feature list and in there we have to list items with the key feature class.
And right now we have to do the same thing again.
Basically we have to turn the key feature list into a flex container.
And with that the key feature class right here all these items into flex items.
Now let's go back to the code and let's scroll down a bit.
So let's first add this selector right here and important.
It should of course be part of the media query.
So let's add key minus feature underscore underscore list.
That's important.
I hope you saw the hint before it should be a double underscore.
So sorry for that typo right here.
And with that key feature list we can not simply say that we want to turn this into a flex container
by adding display flex.
Once again just to keep it in mind we now turned this classified here into a flex container a free.
Now we load the page.
We can't see that this apparently brooked although it's not centered anymore.
But let's first also delete the display inline block declaration right here for the list item.
And the vertical align top because I want to make sure that this is really a flex box construct right
now.
It's load didn't change but it's still not aligned so let's align the flex items along the main axis.
So we simply have to apply justify content Center-Right here that already.
So if we load that I think this looks all right.
Now as we can see right here yeah this looks good.
So we don't have any problems.
So yeah I think that we also finished the second part of your assignment.
Let me now just quickly clean up the code and get rid of all the comments we have right here because
I don't think we need these anymore.
So this one right here and this one and that one because we added all that I think this looks clean
now.
Yeah.
And with that we finished the Schatz Yes as file we finished the main C S S file.
So let's now also make sure that the customer's page.
So this one right here also is based on flex box now.