Original subtitles

So we're getting closer to the end

of our Omnifood project,

but there's still three sections to go.

And so this next one will be

the section on pricing and features.

So remember how we had already decided

that we're gonna join together the pricing

and also the features of the Omnifood product,

into one single section.

And so this is the one we will build over

the next few lectures.

So in our content file, we had two pricing plans

and so we will create these two pricing tables

just like in this example, on the right side.

So with the name of the plan at the top,

so with this really big font size there,

and then after that just a list of

the features that are included in that pricing plan.

And then finally also a call to action button below it.

Okay? So two pricing tables site by site.

And then after that, we will have

the typical four columns with the other features

that are also included in Omnifood.

So here we will have some icon that I will want

to enclose in like a colored shape.

So it just like here in this other design example,

and then below that a small text and the description.

We're gonna start in this lecture

and probably the next one with the pricing tables,

and then in the end we will also build these features.

So let's now go have some fun with that.

And as always adding a new section here,

with the class of section pricing.

And as the very first thing we will want

our typical heading here.

So here in the testimonials, it is not the way we want,

because remember that this section is quite different

from the other ones.

So instead what we want is this entire container,

which will center the content in the viewport.

So all of this here.

So let's paste that here very quick.

But we still need to get rid of this center text

because here we do not want to center these headings.

So this one is, pricing

and let's see if we have some title here

for the pricing plans.

So maybe somewhere up here.

Well, where is the pricing actually?

Ah, here it is.

So here it just says we have two pricing plans,

but that doesn't really sound so convincing.

So of course we want users to sign up

for one of these plans.

And so we should have a pretty convincing headline here.

So I'm gonna write a headline, that basically tells users

that Omnifood allows them to eat well,

while still being cheap.

Well not cheap, but not so expensive.

So we can say,

"Eating well without breaking the bank".

Okay.

And so these kinds of titles of course you ideally

want to get them from your client.

But if you don't, then you will just have to

basically write them on your own.

But then don't forget to also charge them

something extra for doing that.

Okay, of course you don't have to

but I would at least try that.

So as always, let's copy this first part here.

So a section pricing,

and let's give it as always the same padding here.

And then let's already go check it out.

And there it is.

Nice.

So let's now add another container,

which we will make our grid container

so that in there we can have both our pricing tables

side by side.

So I'm going to create a new container

and here this one, I will also make it a grid

and a grid of two columns.

So, grid two cols.

Okay.

So let's call each of them a "pricing plan".

And then let's just duplicate this here

to plan one and plan two.

And then let's see if they are

all already nicely side-by-side.

And of course they are, thanks to our reusable grid.

Okay.

And now let's start filling each of them up.

So let's get our content here.

So we have this sentence here,

that we could probably place after these pricing plans.

And that then here we have the plans themselves.

So let's just get the first one here.

So let's place that somewhere down here,

and okay.

So we want to start with the name of the plan.

Remember?

And so let's call that one the, "plan name".

Plan name, so this one is the starter.

Next up we have the price.

So let's use another paragraph here,

but we could as well also use a spin element.

So, plan price.

So this one is $399 per month.

However, here I actually don't want to write

the per month immediately after this.

And instead I will want to put it in a new line.

As I will show you soon.

However, remember how just the number itself of the price,

so just this value here was really big in

that example, I showed you in the beginning.

And so here, I want to do the same thing.

And so I'll just wrap this dollar sign here

into its own span,

so that we can then format it individually.

Okay.

Then next is where we will put that per month,

but I will actually write a bit more.

So, let's call this one the "plan text".

And so here,

something nice that I've been seeing is that some companies

display their price basically per day.

So in this case here,

what users get for their $399 per month is one meal per day.

Right?

And so we can do a quick calculation

of dividing 399 by

30 days per month.

So that's normally the average day in a month.

And so we can now say that, this is

basically just $13 per meal.

Right?

And so that's not too bad.

So that sounds good for the user,

and so we can write that right here.

So per month, just to make it really clear,

and then, that's just

$13 per meal.

Right?

Then next we have basically here, this list of features.

Now we already kind of have something like this on our page.

Right? We already have a list pre-built.

So, what I mean is this list right here.

So this is also, well in this case not a list of features,

but it is still a list.

And so this I think would look quite good also

in our pricing table.

And so what we can do is to now reuse this list.

So let's actually go where it is defined

which is right here.

So here in the meals section,

and there was actually a reason why I didn't call this here

immediately the "meal list".

So everything here was like meal icon, meal attribute,

but this one I just called it, "list".

And that is because the list is always

a good candidate for reusability.

And so that's what we will do now.

So I'll just cut the code from here

and put it here in our general file,

just so we know that it is something reusable.

Just here, before these helpers.

Okay.

And so now let's also then simply go ahead

and copy the HTML.

So,

just like this.

So I'm just copying one li,

and then I can just duplicate it a couple of times.

So right here after this paragraph.

Okay.

So this first one is one meal per day.

So instead of vegetarian,

and then I'm just duplicating this twice now

using that shortcut,

then the order times are between 11 and 9.

Let's put that here.

And finally delivery is free.

So in a way these are also Omnifood features,

but these ones are displayed right in the pricing table

because they are really important.

So let's see what this looks like.

And, okay.

So at least now the list is already formatted,

while the rest of the pricing plan of course is not yet,

but we will leave that for a little bit later.

So that we can now actually create the second one.

Actually there's still something missing. Remember?

Because I also want to place a call to action button

at the very end here.

And actually that call to action button might be exactly

the same as in the header.

So the one that says, "Start eating well".

So let's grab simply this one from here.

And so that then will also lead the user

to that call to action section

that we will build a little bit later.

So that should be here right after this ul.

And here, of course we do not need this class,

so no margin on the right.

And that's it.

Let's just check it out again.

And, yeah.

Nice.

So now let's just duplicate the same thing here

for plan number two.

So basically copying all of this.

Then we can just replace this entire thing,

getting the content here.

Let's just paste it here somewhere.

And so this one is called the "Complete".

So that's,

$649 per month.

And here we actually get two meals per day.

So this here should be, meals.

And so instead of getting 30 meals per month,

we actually get 60 now.

So let's see what that is per a meal then.

So 6 9 4 divided by 60

and actually that's 6 4 9.

So that's about $11 per meal, right?

So clearly this one here is cheaper.

And so with this we make it immediately obvious.

Well that it is cheaper indeed.

So two meals per day, when we place that here.

So two meals, this one we can order 24/7.

So that's also an advantage.

Delivery is free as well.

So this one is the same, but then there is another one.

So let's duplicate this very quick

and get access to the latest recipes.

Okay.

And for some reason it keeps jumping back up.

Okay.

And now let's add some visual styles here to this text.

So let's select these class names.

So the pricing plan let's leave it for later.

So that's more of a layout part.

And instead, I'm going to copy these three right here.

So the name, price, and text.

And then again I'm using the alt or option trick

of selecting everything.

Then moving here to the back,

and doing it all at the same time like this.

Now okay.

Now, first of all we want these three here

to be centered inside of the plan.

So we could now add text align center to all of them,

but I think it would be better to actually create like

a distinction here in the code

between this top part of the pricing plan.

So these three here and then the list afterwards.

So I think that also semantically, this makes more sense.

And so here we can use a header element.

So basically saying that these three elements here

are the introduction.

So the Rd header of this component,

so of all this content.

So let's call this here the "plan header"

and put that here.

And then I will do just the same in

the other one of course.

Okay.

And so now we can also select that,

and add text align center to debt itself.

So text align center,

and we can then also create some space after it.

For example, by saying

"margin bottom of 48 pixels".

Okay.

So that's already a start here.

And of course we are still lacking a lot

of styling there, so let's keep going.

So the plan name,

I want it to be a bit similar to the subheadings.

So what this means is,

let's use this color here.

So this, a little bit darker version of the orange.

We also wants to make it a bit bold using 600 here.

And let's give it a font size of, well let's start with 1.8.

I want it to be uppercase as well.

And let's even give it some letter spacing of 0.75. Okay.

Then let's think about the price.

So remember how here, I want to make the text really big.

So let's check our list here of big values.

So something like 74 or 62.

Let's try 74.

7.4 rem

make it bold as well.

And also make it darker.

So just like all our headings that we usually have,

even though this is not a heading,

but it will look a little bit similar.

Then as for the plan text,

let's start with our typical 1.8 rem font size,

and line height of also 1.8 here.

Okay. So let's check it out.

And of course we still need some spacing

and well, in general I think the entire text here

is a bit too big.

So this text here for example,

is more like a supporting text.

And so let's make that smaller and also lighter.

So this one here is our default text size

and also the default text color.

So let's make this one smaller and lighter.

And the same for these here actually.

So everything is a bit too big for me. And then of course,

we also need to select this one and make it smaller.

So again, just like in that design example

I showed you in the beginning.

So 1.6 here has also decreased the line height.

Well right now the line is actually not breaking.

So we cannot even see the line height,

but later on when the page becomes smaller and there is less

space, then the line will have probably multiple lines.

And then the line height becomes important.

So here let's also go to the smaller one, 6.2 rem

and the same here.

So we got a little bit carried away here

with our font sizes.

But like this, it should be better.

Let's also add some margin to the bottom here,

3.2 rem, let's say.

And then also to the price itself.

Margin bottom.

And here I will use less spacing

because I think the price enter text

which kind of describes the price,

they belong closer together

than the plan name and the price.

So here we're once again using the law of proximity.

Okay. And then this one here does not need any

margin to the bottom

because, well the margin here has already been

taken care of up here in the margin bottom

of the plan header.

Now, just before we go check it out,

we should also format that dollar sign there.

So that is in plan price.

And then the spend element in there,

let's make it smaller.

But also not like super small, let's say like 3 rem.

And if we don't want it to be as bold,

then we need to also override the font weight

that it is now inheriting from this one.

Right. So this is a child element of the plan price.

And so it is indeed inheriting the font weight.

And so let's make it a little bit less so.

Let's also add some margin to the right here.

So to get some space between the two,

and here eight pixels might be good.

So, 0.8 rem.

So let's check that and yeah, that looks quite nice.

But now I do think that the text here is actually too small,

the name of the price here.

But now after all I do actually think

that this text here is way too small.

So the name of the price is indeed quite important.

So let's make it bigger.

So here, like 2 rem maybe even.

Yeah.

I think that makes sense like this.

And now as for spacing, what we need next

is some space between this one and this one.

And I also want to center horizontally this button here.

So we can now add some more helper classes to this button,

but instead I will simply create like,

apparent element to this one here.

So this one let's call it the "plan sign up".

Okay.

So let's text align center it,

and then here we can add some margin to the top.

So basically to create some space between the list

and this element here.

So instead of using a margin bottom on the list,

we simply use margin top on the element below that,

because remember, the list is a reusable item.

So a reusable component

and so there we do not want any margins.

So between the header and the list

there is a margin of 4.8,

and so let's use the same here.

So margin top here and now again, 4.8 rem.

Okay.

Oh and of course we need to do the same thing here on

the left side as well.

So

just copying this

and there we go.

Okay.

So that is already looking like something.

Oh, and I forgot to make this text here lighter.

So remember how I said I was gonna make it smaller

and lighter, but I forgot the lighter part.

So color here and remember how we used to use 7 7 7,

but remember that on the orange light background

that was not accessible.

So here I will again use this one

because we will want to add actually some

background color a bit later here.

So going back that looks even better

I think in terms of visual hierarchy.

And yeah, this is starting to look designed,

starting to look nice, but there are still a lot

of things that we will want to fix here.

And so let's actually do that in the next video.