Instructor: 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 H element,
so no H4 or H5 because this is
not really a heading of a new section.
All 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 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.
Oh, actually-
Yeah, let's, 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," is 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 any time.
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 our class.
So, I will 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, while it doesn't look really organic,
but I think the user can get a 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.
All 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 three rem.
And so I think that this one can be then one level below.
So, one step below in our 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, 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.6 rem.
Okay, then our feature text.
And here, as always I'm using 1.8 rem
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 Brent color, so, this one.
And let's give it some height, also here already.
Let's just start with 4.2 rem, maybe.
And the same for the width, and some margin to the bottom.
And so here for the visual hierarchy,
the title and the text should be closer together
than the title and the icon.
So, here we have 1.6, and so let's double that here.
So, 3.2 rem.
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 there'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's 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.6 rem, 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 to you before,
this will basically in-line 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 the 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 added 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 is back in the pricing tables,
we had that sentence.
Where is that?
Ah, 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 these 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 it 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?
And it is 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, the margin bottom, here.
So, for that, let's use some of our helper classes.
So, again, whenever we kind of want 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 dot.
And there we go.
So, immediately we can now see
that this belongs here, right?
I think that's really obvious,
simply by changing the spacing.
And so yeah, now we see that this margin bottom of 96,
that we defined previously has been
overwritten with this 4.8.
All right.
And I would say that, with this we finished
yet another really beautiful section.
So we took a lot of 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 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.