Original subtitles

In this lecture, we're gonna finish building

the pricing section.

By now, finally building that final features part.

And remember, how at the end of the last lecture,

we already created a new container here,

with a new grid, with four columns.

So here we already have the boxes

for each of the four features.

And so, let's now fill them up.

So these are our four features.

Let me just copy the first one, okay.

And I'm gonna paste that right here.

So, as we saw before a couple of times,

a feature block usually has first an icon

then some kind of small headline,

and then below that some smaller text for a description.

So we will have an icon,

so I will get that next.

But for now, let's start here with the feature title.

So that's what I'm gonna call it.

And here again, we're not using any age element,

so no age four or age five,

because this is not really a heading of a new section.

Now right.

So here we have, Never cook again.

And then below that, let's simply add the feature text.

So just moving that up here, and there we go.

Now we just need the icon here.

So, I already pre-selected the icons here, of course.

So we don't have to lose a lot of time searching for them,

but here you could, of course,

now go through them and basically find the one

that you think fits the best for this feature.

So, for this entire text.

Now the one that I chose,

is the infinite icon.

So, if you never have to cook again,

then basically you have food forever.

So I liked this one here really a lot.

And so, this one I'm gonna call it,

the feature-icon as expected.

So, let's just quickly check that out here.

And indeed, there we go.

So, icon then that text and then the description below.

And so let's now duplicate this a couple of times.

Well actually, yeah, let's do that.

So duplicating it three times

and then just deleting this one.

Okay.

Triple clicking here.

So this is the second one.

So, Local and organic.

Here's the second feature.

Then we also have, No waste.

Just to show consumers

that we are very concerned with the environment.

Not waster.

And finally this one.

And then after that, we of course

have to go looking for the icons.

So, Pause anytime.

All right.

And let's start with this one.

Pause and that is actually,

a pretty common icon.

Just like you might find, for example,

on your remote for your TV.

So, well actually let's not paste it here

because then we override or clash.

So, I'll just basically remember here.

So it's called, pause-outline.

So I just need to replace the infinite here.

Next up, we have, No waste.

So this one is all about the environment.

And so I figured that this icon here with the leaf

would be very nice to symbolize that.

So we could also have used like a globe or an Earth,

but this one is also nice.

So, leaf-outline.

Yeah, right here.

And then finally this one is for, Local and organic.

So here I'm using, this one, nutrition.

So this looks, well it doesn't look really organic,

but I think the user can get the point,

by seeing this icon.

So, nutrition,

and okay.

So I said back then, in the icon section,

that we should always use icons

that are really crystal clear, right.

But of course that is not always, really 100% possible.

And especially if we use a free icon pack, such as this one.

But usually with some searching and some creativity,

we can still find something

that fits our message quite well.

And so, yeah, here they are,

all the four icons.

And so now it's time to simply style this,

So, oh, I'm in the wrong file.

Oh right, here we go.

So it is the feature-icon,

the feature-title,

and the feature-text.

Once again, using the alt or option click, at the same time.

And there we go.

So let's start with the text here,

that's always a little bit easier.

So the font size here, I'm not really sure.

Let's see what we have been using for our tertiary heading.

So that is like, 3rem.

And so I think that this one,

can be then one level below.

So one step below, or a system

which should be yeah, 2.4.

So let's use that,

and let's also make it, darker

basically and make it bold.

So it really bold this one

because since it is smaller,

the boldness can be a little bit more.

And also some margin to the bottom here.

1.6rem.

Okay, then our featured text and here is always,

I'm using 1.8rem for font size and line height.

Okay, and let's just also already

give this one here, a nice color.

And here I'm gonna use our brand color.

So this one,

and let's give it some height, also here already.

Let's just start with 4.2rem maybe,

and the same, 40 width,

and some margin to the bottom.

And so here for the visual hierarchy,

the title and the text should be closer together.

Then the title entity icon.

So here we have 1.6.

And so let's double that here.

So 3.2rem.

Okay.

Nice.

That's already looking really good.

But now remember how we actually want to

enclose these icons into a circle.

So a circle with a nice background color,

but very subtle and very light.

So we can actually use the same as this one, right.

So to also keep it consistent.

But even like this,

it's already looking nice.

And I think that's also some nice visual balance

with this first content that we have here.

But that will become even better

once we do create these circles here.

So, let me show you how we can do that.

And actually there is no need to create

yet another element.

So, there's no need to create a container element

for each of these icons.

Instead, we can style them directly.

And let me show you,

and first I will make them a little bit bigger,

3.2 and then let me immediately give them some background.

So that is this one here.

Remember?

And yeah, let's check it out

and there we go.

So that's looking good already.

And now all we need to do is to add some padding here

and we can also make it round, of course.

So, as for the padding,

let's try here half of the margin,

1.6rem and then the border radius of 50%.

Let's give it a save, and beautiful.

So that looks amazing.

And yeah, this is exactly what we were going for.

Let me inspect it here.

And so, yeah as I explained you before,

this will basically inline here,

this icon immediately into our page

using that JavaScript code.

And so here is that content that we defined

and then the padding on top.

So basically, here in this element, I guess,

because it is like an element

that was created by the script.

So inside of this shadow root,

the box sizing border box setting

is not really working, right.

And we can see that because we defined

the width here as 32 pixels,

and then we also defined some padding.

And so that padding here was edit on top, right?

And so now the whole size of this is actually 64.

And so that's exactly the behavior of the default box model

without using box sizing set to border box, okay?

So just keep that in mind,

in case you want to use these icons yourself.

But anyway, if we know that then with this,

I think we're good to go, actually.

So this looks perfect,

really, really nice.

Also the spacing here and the visual hierarchy,

everything looks good.

And so we're almost finished here.

And I say almost finished,

because there is still a small piece of content

in our content file that we didn't yet put anywhere.

And the one I'm talking about, yes.

Back in the pricing tables, we had that sentence.

Where is that?

So, "Prices include all applicable taxes.

Users can cancel at any time."

So, let's grab this text right here.

And, where should we put it?

So, I think it makes sense to actually have it right here,

after this pricing plans.

And then before this here.

So, let's then add another container right here

after this first grid and before the second grid.

So, our code is growing really a lot.

So it's getting more and more confusing, to find a place,

where we actually want to put our new code, right?

But anyway, let's use a container here.

And then the content,

we could just paste is here immediately,

or we could put it into something like a paragraph,

or even better, we can use the aside element.

Now, you might think, well we have used the aside

for a sidebar and this is nothing like a sidebar, right?

However, that's not really the meaning of the aside element.

So aside might be used for sidebars,

but only if it does contain basically

some additional, but not crucial information.

So, that is exactly the meaning of aside.

So its goal is to contain some information

that is not crucial, but which basically

plays a supporting role.

And so that's exactly what aside is here.

So this is like some additional information

for the pricing plans.

So I'm calling this, the plan-details.

Now here, this Users doesn't sound so good.

It's better to speak directly to the user.

So we can just say,

"You can cancel at any time."

And to make the messaging here, even a bit better,

we can even include, "Both plans" also,

or just, "include the following".

And so the following is then these four features

that we have next.

And so with this, we kind of create a transition

between these two bigger parts here.

So, let's also style that of course.

And this one, we're gonna make it a bit smaller.

Line height also 1.6

and let's align it to the center here actually.

Because the two columns for the pricing plans,

they're also kind of centered.

Okay, nice.

So this looks nice,

but there is missing some spacing after it.

And then, here the space is actually a little bit too big.

All right.

Now, how are we going to add this spacing here?

So, inside of this section here,

we want consistent spacing.

And so what we can do,

instead of now manually defining the spacing here

on the plan details,

we can simply make something

which doesn't seem to make a lot of sense,

but I think it might do.

So, I will simply make this a grid container as well,

because by doing this, it will now also automatically

get that space at the bottom

of 96 pixels, right?

Then it has no problem at all.

So it is now a grid, but it only has one child element.

And so it has basically just one column.

And also we didn't even define the columns anywhere

because we didn't put the grid

and then something columns on there.

And so this is just to maintain

this same spacing everywhere.

So if at some point in our design,

we decided to change this like to six,

then that would change everywhere, okay?

But putting it back, we can now see that

here of course the spacing is way too big.

So here we have, what I call, ambiguous spacing

because the spacing here is the same as here.

And so here we have this small piece of content

that we don't really know where it belongs to,

and it does belong to this part here, of course.

And so we do need to reduce now, to margin bottom here.

So for that, let's use some of our helper classes.

So again, whenever we kind of went to override a default,

we can simply do that with one of these.

So let's use this one again

that we have already used previously.

And so this will then override everything

because it has the important on it.

So, that is this one here,

with the pricing plans.

Of course without the dots.

And there we go.

So immediately, we can now see

that this belongs here, right.

I think that's really obvious

simply by changing this spacing.

And so, yeah,

now we see that this margin bottom of nine six,

that we defined previously

has been overwritten with this 4.8.

All right, and I would say that,

but this we finished yet another really beautiful section.

So, we took a lot of attention to detail,

which I think is really important

if you want to deliver good work.

And yeah, I think we just did that here.

So really nice job.

I'm really happy to see that you are still

sticking with me at this point

here in this huge, huge project,

which at many times might seem a bit complicated.

But really if you dissect everything,

it is all just a matter of applying the design rules

and applying all the CSS and HTML

that you had already learned before.

All right.

And of course, I'm also teaching you

a couple of tricks and techniques

that I've been learning over the years.

So things like using helper classes like this here

to basically override some, a default setting

that we set somewhere else, okay?

So using these helper classes here,

these really are helpful for us.

And so you should get used to doing that as well, okay.

But enough talking, let's now move on to the next section.

So I mean the next section, not in the course,

but of this project,

which is finally going to be the call to action section.

So hopefully, I will see you there soon.