Instructor: So let's quickly continue formatting
our pricing tables.
And first of all, let's give them here a background color
to make them stand out from the rest of the section here.
So,
yeah, we hadn't even selected them yet.
So, pricing plan,
and then the background color
of this very light orange here.
So basically or very light as tint.
And so, yeah.
So we have the color, but of course,
there're a lot of things to fix.
So we need some spacing here, so some padding
and let's also make the borders round.
So, using the same border radius as we used up here.
So, I believe that was 11 pixels.
So, border radius,
11 pixels,
and adding a nice big padding of 4.8 rem.
So let's try that.
And that is already starting to look good.
However, there are some things that are not really good.
And the first of all
is that these columns are very, very wide, right?
So, they are this wide because we simply created a grid
with two columns here.
However, we do not these elements here
to fill the entire column, basically.
And, that is of course possible.
We can simply make them a little bit less wide.
So right now, these elements,
they occupy the entire grid cell
because they are block level elements
and so they will expand to 100% of width
of the available space, right?
And we can, of course, easily see that here.
So, between these dashed lines here, as you know,
we have the grid cells.
So one grid cell, and one grid cell.
And so each of these elements is occupying, by default,
that entire cell.
But let's change that by making them a little bit less wide.
So for example, just 75% of the available width.
And so, that's how it looks like then.
So that looks a little bit nicer, right?
However, of course this one should now still move here,
so that then the entire thing is basically centered
and so that we don't have this huge spacing
between the two.
So we still want this exact same gap,
and so what we want to do is to place this item here
on the right side.
So, basically we want to align a grid item
inside of a grid cell.
And the way we do that
is by using the justify items property, right?
So, I know that is way back,
we learned that many, many hours ago,
but now it is important again.
So, let's try that right here.
So with a line or actually justify,
because a line is vertically
and justify is horizontally, right.
And so here this is clearly an issue
of horizontal alignment.
And so if we set justify items and set it to end,
then both of them would move to the right side, right?
And so, this is what we want for the first one,
but not for the second one.
And so, instead of using justify items
on the grid container,
we can simply do it for one grid element itself.
So for one grid item we can add justify self
and then set that to end.
Okay.
So again we learned all that a little bit back,
but if you don't remember that,
that is not a big problem, okay?
So, let's add another class here.
So just to select this one
and also one to then select the other one
which we will also need later.
So I'm using dash-dash for a variation again.
So this one is the starter, so let's copy that here.
And so as I just demonstrated in the dev tools,
here we want justify self, right?
And then push it all the way to the end.
And so, in the end we end up with this.
And so this looks a lot better than what we had before.
The columns are now at a nice width
so they look quite natural this way
and yeah, they are still centered
and you can see that this one here
is aligned to the right side,
and the first one by default is aligned to the left side,
right?
So, very nice, very beautiful.
Now we just have this problem that here
this content broke into two lines.
But we can fix that by making this text,
I think, a little bit shorter, right?
So that's one of the problems.
Let's fix that one first.
So, order times are between 11 and 9.
So this we can abbreviate to order from 11AM to 9PM.
So that's the same but shorter,
and so that looks a lot nicer.
But now, another problem is that here,
this and this one, they are not really aligned, right?
So that looks quite off and so,
one solution would be
to somehow push this one here to the end
but another solution that I also like
is to basically add another bullet point here
and then add nothing.
So saying that this one here is missing
one of the features that this one has.
So if you see this one is quite similar to this one.
This one to this one, and these two are actually the same.
But then this one gets access to the latest recipes,
while this one does not.
So, lets add another bullet point here
and actually using another icon
so instead of a check mark we can, like,
use a cross or something.
Well not that.
Yeah, this one here.
So, let's copy that.
And then going back here,
yeah it's this one.
So let's duplicate this,
and change the icon,
and then we don't need any text at all.
So you will see that it now looks quite nice,
simply showing basically that this one does not exist.
Of course we need to format it also the same way
so giving it the same class.
And so now this is the effect that I was looking for.
And so now it makes it that
both of these pricing tables have exactly the same size.
Nice.
And now let's start a little bit about
visual hierarchy here.
So, these two pricing tables,
they now look exactly the same.
But what we want our user to do
is to basically select this one here on the right, right?
Because, well this one here makes the company more money.
And so, we can say that this one here is the best value
because it actually is.
And we can also, like, highlight this one here.
And, the way I'm going to do that is by de-emphasizing
this one here on the left.
So remember that that is one of the techniques
that we can use for creating a visual hierarchy between,
like, these bigger components.
And that's what I'm going to do now.
So only this one will have this background color
and here I will remove it.
So, let's add a similar class name to the second one.
So, pricing plan, complete.
And then I will add that background color only to this one.
Okay.
So, this actually already creates a nice effect, right?
We can immediately see that somehow this is more important.
So this draws a lot more attention.
However, like this,
I think that this one here feels kind of lost, right?
So to fix that we can just give it a small border,
just so that it doesn't look completely detached
from this one
because it's kind of lacking a structure right now.
So if we give it back some border, then that should fix it.
So let's add a border of two pixels.
Solid, and with the exact same color.
So just ever so subtle,
just so we can see that it is a bit distinguished
from the rest of the background.
Okay.
So that looks way better.
There is just one very small problem of alignment
that we created by adding these two pixels here as a border.
So let me show you by scrolling down here
and then as these two buttons here
approach the end of the screen,
watch how this one here is a little bit higher up
than this one.
And so the reason for that
is these two pixels that we added
basically on top of the already existing padding.
Alright, so remember from the box model
how these basically add up together,
and so we need to remove these two pixels.
So for this one.
So actually this padding will only apply
to the complete pricing
and this one here to compensate,
will have a little bit less.
So 4.6 rem.
So this is just a minor issue but now it is fixed
and so it's perfect now.
Let's also emphasize a little bit here
some of these numbers.
So just again to make this one here a bit more prominent.
So in the second one,
yeah, let's use our strong element.
So two meals per day,
let's actually include the meals here.
And then here, order 24/7.
Alright.
And so with this, we are almost finished here.
And we could leave it like this,
but I want to add something more
which is basically like a ribbon here
saying that this one is the best value.
And so this is gonna be similar to something
that we already did before a couple of times.
So, again, basically we will add like an element here
which will go like this, and then it should say best value.
So, how do you think we could do that?
Well, one great way would be
to use a before or an after pseudo element.
Alright, so on this one.
So let's copy that and well I didn't want this one.
Right, and then here the content should be best value.
And then that should then immediately place it
somewhere here.
Yeah, so here it is.
So, nice, but let's now format it
and place it in this corner.
So for that we're going to use absolute positioning.
Absolute, and so for that, of course, the parent element
inside of which it should be placed,
we need to make it a relative positioned element.
So, this one here, let's make the text uppercase.
So text transform uppercase.
Let's increase the font size here,
1.4 rem maybe and let's make it bold as well.
And like really bold this time.
Oh, and of course we still need to position it here.
And let's just start with top 0 and right 0.
Alright, and let's give it some background color, as well.
And we could, of course, use the orange color
that we have been using,
but let's actually go for this yellow here.
So this is one that we used for the text previously.
So let's reuse that same color here.
Alright, and there it is already.
So already nicely positioned,
let's maybe give it some padding
and then we can position it exactly where we want it.
So padding maybe 8 pixels at the top to make it not too big,
and then on the sides, it doesn't really matter for now.
Let's just use 3.2 rem right here.
And the text, I think, could be also a bit darker.
So the contrast didn't look so nice there on the yellow.
Yeah that's better.
Alright, so remember I said that I want it, kind of,
to be like this, so we want to rotate it a bit.
And so for that we can use again transform
and now indeed we will use the rotate
that I had shown you before.
So 45 degrees.
And so that is already looking like something.
But now to position it exactly where we want it to be,
we need to play around like with the top and right values
until we find the right position.
So let's open up this one here
and find the pseudo element here in the HTML.
And then let's play around as I said a little bit
with these numbers.
So let's say maybe we start at 5%
so we want to make these here
actually also basically flexible
so that when something changes here,
then the position here stays also at the same place.
And I'm using percentages here
because that's just usually the best choice
when we're building a flexible layout.
So on the right let's also like say 5%,
or actually that must be minus.
And that's not really enough,
so let's go a bit down.
Okay, let's maybe give it some more space here
actually like this, or maybe like this, yeah.
And then we need to just position it nicely and yeah.
I think like this, it looks okay, right?
Now what we need to do next is, of course,
basically cut off these corners here.
So these we do not want, right?
So, do you remember how we can do that?
Well, we can simply use overflow hidden.
Well, actually not on this one.
So the overflow hidden needs to be
always on the parent element.
So basically the one on which this one here is overflowing.
So this parent element here,
this one will want to hide the content
that is overflowing it, okay?
So let's add that there
and let's also memorize these values here.
So six and minus seven.
So, six here and minus seven percent, of course.
Okay.
And now as I was saying,
it is this parent element here
which needs to the overflow hidden.
Okay, and nice.
But, still not perfect because here of course,
we want this to go all the way out.
So we don't want to see any corners there,
so we need to increase the padding here a bit,
let's say four, and so that makes it then bigger.
But it also makes it so that, yeah,
it had changed kind of here position again.
So let's just add something big here like 8 rem,
just to make sure that that doesn't happen.
So let's play around with this a little bit here,
and that is starting to look good.
But to see it better we need to turn off this one, right?
So this is basically a lot of just playing around
until we find the right value here.
And, yeah this might be it actually.
I think this looks now as if it was centered
and so let's leave it like this.
So, you see that here we cannot use, like,
a nice flexbox or something like this
to make it really centered.
So this is just playing around until we find the right spot.
So minus 18 here,
and then down here the padding is 8.
So minus 18.
And 8 rem here.
So now that should be fixed,
and that does look very beautiful.
So this definitely gives it another nice visual effect
right here.
Okay.
So this part here, I now consider it finished.
And so let's actually very quickly just get started
on the next part which is the features part,
just so I can show you something else.
So,
right here after this first grid right here,
so we have this grid here.
So, container grid with two columns,
but now we want another grid right after it, right?
And that's no problem at all,
we can simply create another similar thing to this.
So right here.
So div, container.
And it's a grid,
and here let's see how many features we have,
but it should be four.
So,
yeah, one, two, three, and four.
And so let's just add four div elements here really fast,
called feature.
And then just duplicating them,
and so here we want the one with four columns.
And this one, I think, we already have, yeah.
Here it is.
So, four equally sized columns, okay.
But now here's what I actually want to show you.
Which is the fact that there is now, of course,
no spacing between these grids here.
So this is the first time this is happening
where we have multiple grids inside of the same section.
But that is, of course, perfectly acceptable.
So, absolutely nothing wrong with that,
and it should actually be really common.
And so, we need a way of working
with that situation automatically.
So we do not want to, like,
manually have to add now some margin bottom
to this first grid.
So instead, we basically want that to happen automatically.
So, what we can do here is to basically add a margin bottom
to this grid right here.
So let's use, once again, our 9.6 rem here,
which is kind of a standard we have been using
for vertical spacing.
So, let's check that out.
And indeed, now here we have that space that we need.
However, if we move up here,
you will see that space being added everywhere.
Well here that's actually not the case,
but here we set it manually I remember.
And so that's why it's not here,
but in this one it should now be there.
So this grid now has, of course, that margin
and then plus all this additional padding.
So here we have way too much space
because this one we actually
do not want this margin bottom, right?
Because indeed, there is only one grid here,
and so it doesn't make sense
that this one has a margin bottom, as well.
So, that is actually quite simple to fix,
because we can simply say
that when a grid is the last child,
then the margin bottom should be zero.
And so, well let's fire up our inspector here again.
And so indeed, now the margin here is gone, right?
It has a margin bottom of zero,
while this one here at the bottom,
it still maintains the one that we want.
So, in the pricing section,
now this grid does have the 9.6 rem, and this one does not.
Okay, so this one is a new and important addition
to our grid because this will allow us
to basically have multiple grids
inside of the same section, okay?
Now we can just make this even a little bit nicer,
and using a trick that I haven't shown you before.
So, let me show it to you now.
So there is another pseudo class that we can use,
which is the not.
So here, what we're gonna say
is a grid that is not the last child will have this margin.
And that's it.
So we can remove it from here,
and we can remove all this.
And have it all in just in this one line of code.
So, this probably looks a bit confusing,
so let's analyze what we just did here.
So before, basically by default,
we were always adding this margin here
on all the grid elements,
but then after that we selected the ones that were the last
and then removed it.
So, first we put it everywhere,
and then we removed it on some of them, right?
But now, we are doing it the other way around.
Now, we will only add it if it is not the last child, okay?
So, that is different, right?
We will not simply edit always by default.
Instead, we will only add this margin to the bottom
if, again, the grid element is not the last child
inside of it's parent container, okay?
So, I think this makes sense
and this code is a little bit nicer than this one, alright?
And, if you want to practice using this kind of code here
then you can go back to many, many examples
where we did this, so without using the not.
And so, all there you can replace what we did here
using the not pseudo class with last child.
Okay, so that would be good for you to practice, I think.
And so with that, we can now build this feature section,
or this feature part here right in the next video.