Instructor: 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 side by side.
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 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 view port.
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 or while 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 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--2-cols".
Okay, so let's call each of them a "pricing-plan",
and then let's just duplicate this here.
So plan 1 and plan 2
and then let's see if they are 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 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 just as well also use a span 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 will 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 have 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, "1 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.
Or 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 and yeah
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 meal then.
So 694 divided by 60,
and actually that's 649
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 they are the 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 that 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 these subheadings.
So what this means is let's use this color here.
So this a little bit darker version of the orange.
We also want 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.
So 7.4rem, 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.8rem 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 while 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 at 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, let's also decrease the line height.
And 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's 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.2rem.
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.2rem, let's say.
And then also to the price itself.
Margin bottom.
And here I will use less spacing because I think the price
and the 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 is already been taken care of
up here in the margin bottom of deep 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 span element in there.
Let's make it smaller, but also not like super small
let's say like 3rem.
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 create some space
between the two and here eight pixels might be good.
So 0.8rem.
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 2rem 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 could now add some more help helper classes
to this button, but instead, I will simply create
like a parent 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.8rem.
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 777
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.