Original subtitles

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 lightest tint.

And so, yeah, so we have the color,

but of course, there are 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 want 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 white.

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 align or actually justify,

because align 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 -- 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 see that this one here is aligned to the right side.

And the first one is by default 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 11 AM to 9 PM.

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.

And so let's 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 deemphasizing 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 so 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.

All right.

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 then 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.

All right.

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.

All right.

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 so 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 zero and right zero.

All right.

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.

All right, 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 eight 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.

All right.

So remember, I said that I want it kind of to be like this.

So we want to rotate it a little 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 this 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.

Man, 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 we'll 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 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,

that it changed kind of here the position again.

So let's just add something big here, like eight 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 eight.

So minus 18 and eight rem here.

So now that should be fixed.

And that does look very beautiful.

So this definitely gives it

another really 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 is 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 that 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 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 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.

And then after that, we selected the ones

that were the last and 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 add it 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 its parent container.

Okay, so I think this makes sense.

And this code is a little bit nicer than this one.

All right.

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.