-: All right.
Now, in part three of building the meal section,
let's quickly build our diet list
and also, work on some other smaller details.
But before we do any of that, I actually noticed
that we have a small bug here in our code.
So, when we hover over this button here,
notice that we have a weird effect here with this border.
So, especially when we move the mouse out.
So, watch how that kind of happens immediately, right?
So, the background color does fade out and in,
but not the border.
And so, that's an error that we have in the hero section
or actually that's not in the hero section.
That's here in the general file where our button is.
And the problem is that,
yeah, here.
So, here in the button we transition
only the background color,
but well not the shadow.
So, box shadow is what creates that border.
So, that's the trick that I showed you back here.
And so, right now,
that box shadow property is not transitioned,
but only the background color.
And so, we should not do this.
So, I'm duplicating it and then commenting this one,
but instead, let's simply transition all properties.
And so, that's the reason why always simply
by default use all
because then a bug like that can never happen.
So, with bug, we mean mistakes in programming, right?
And so, now it looks a lot more fluid
and so, just as expected.
But anyway, moving back down here,
let's now add our list here.
So, we already have that div element here.
And so, now let's simply create that unordered list here.
And actually, this is the one that I want to call list.
And this one, let's call it diets.
Okay? And now, each list item should have like an icon,
for example, a check mark.
And then, besides that,
it might have,
what will have then these list of diets, right?
So, that's basically wrap each of them inside of an LI.
And while that doesn't work so nice,
so, I'm just gonna copy that everywhere.
So, using multiple cursors by hitting Alt or option.
And then again, it does this automatically,
but then we can move here
to the end of the line, and that's a lot better.
Okay, so, there is our list.
Let's just actually add also a class to each of them here.
So, I'm again using multiple cursors
by hitting the option or Alt key
and then we can write in multiple places at the same time.
So, once more, a very, very handy trick
that we can use in VS Code.
Okay. And actually I'm also gonna need
these multiple cursors
because I now also want to insert the I icon here.
So, for now, let's take a look.
And of course, nothing changed, So, we just edited the class
but now, yeah, it's quite typical
for a list like this to use a check mark icon.
So, if I search for that here, then there is one for sure.
So, we actually have multiple options here.
So, we're using a lot of circles.
So, we could go with this one,
but I think that this is a lot cleaner.
So, that's actually this one here.
So, check mark, outline
and now I simply paste it everywhere, right?
So, it is everywhere.
And then, I want the rest of the content to be inside
of a span element.
So, I can very simply do that.
And then again, it created this.
Oh, and now it doesn't work so, well.
So, now let me just close that here.
And then, copy that.
So, this looks like a mess now.
So, you need to be careful
with where exactly you close your elements.
So, it's right after each of these words.
But then, once we have the automatic formatting coming
from prettier, it should look a lot clearer.
And there we go.
So, each of the LI has one ion-icon element
and one span element
and each of them has then the diet name.
So, I think this does look correct.
Let's quickly check that out.
And somehow it always goes back to the top now.
And yeah.
So, there are our icons.
And so, let's now visually format all of this.
And the first thing that we should do is to get rid
of the bullet points there.
So, let's come down here.
Now, that's very simple.
List-style, none.
Okay? Then let's also of course style the icons.
Oh, and here, I forgot to add another class.
So, again,
I'm using multiple cursors here just to make it easier.
And there are actually even better techniques,
but that would be a bit too much here.
So, class and then list icon.
Okay.
So, width, let's use 30 pixels
and then the height needs to be the same.
And remember it here, we actually need to use the color
in order to style the color of this icon.
Okay, nice.
So, that's the icons.
But now of course, we need to make the text bigger.
So, let's do that here in list item.
So, font size, end them again using 1.8 rem
which is kind of a standard
that we use in many places, right?
And then we should vertically align all of this, right?
So, that icon with the text.
And so, let's just make this here a flex container.
'Cause once again, this list item here is the parent
of this icon and of this span.
So, just what we also had here before
in these list elements.
So, display flags.
Align items of center.
And let's of course also add some gap between the two.
Okay, nice.
So, we have the spacing here.
Now of course,
we need the spacing also between the elements.
And so, once again,
I am now using the trick of using flex direction column.
So, that's again, very similar to what we did before.
So, the display flex, flex direction column.
And then let's also use 1.6 rem 4D gap.
Okay, beautiful.
So, that's looking great.
Let's just add a title here.
Let's see if there is one in the content.
And well, let's just use what they already have here.
So, food works with any diet.
And then here, let's do that before this list.
But of course still inside of this container
So, this diet's element
which is basically this column in the grid.
So, again, using the H3
with the heading tertiary class
that we already created before.
So, I think that was the name.
And if not, we can just fix that at colon here.
And nice.
Now the omni foot here is maybe a bit too much
because if we remove that and had just works with any diet
then that would fit probably just in one line
which would look a lot better.
So, works with any diet.
Yeah, that's beautiful.
And the spacing is also already nice
which is because this is the exact same element
or it has the exact same styling as this one, okay?
And so, there lies the power of re-usability
across the page.
Okay, so, this looks good.
But actually I want to add another thing.
And that is just like a small link here in the end
of this section, which can lead us to all recipes.
So, let's say that this year are like the sample meals,
but that the user wanted to see
what meals are actually available in Omnifood.
And so, then after these sample meals,
there might be a link that will lead to a different page.
So, we will not build that page of course,
but we can still add a link here below.
Okay. So, we want to do that in the same section,
but outside of this div here.
So, let's select that.
'Cause then it will select the one at the top.
So that we can see what's happening.
So, we wanted to happen after this container, right?
So, after this grid
So, let's simply add another div there
and another container
because we also want this one to be centered
in the view board.
So, div class container.
And that's also called this all recipes.
So, here, all I'm gonna do is to add a link that is not
going to point anywhere, and I will add the class of link.
So, here what I want to do is to basically
create a generic link element
that we could once again reuse all over our page.
So, see all recipes.
And then here, I like to use that right arrow.
So, RARR.
So, that's an HTML entity that I use all the time.
And so, I already know it by heart.
But on my resources page,
there is a link to a page which contains a huge list
of all the relevant HTML entities.
All right.
Now of course for now, that doesn't look great.
So, let's fix a couple of things.
Starting actually with the spacing maybe.
So, how can we add spacing here?
I mean this element here,
all of this is a container and a row,
or actually a grid.
So, just as we saw before, but let's go back there.
So, we have container grid and grid three columns.
And so, to now add some margin here to the bottom,
we would have to create another class
for that margin, right?
So, we don't want to add any margin
to any of these reusable classes here, right?
'Cause we want them to be basically as neutral as possible.
So, we could add another helper class here.
So, a little bit like we did before.
And actually let's do that.
So, we did that here with one of the buttons.
Yeah. So, here the margin right small,
because we had the same situation
where we didn't want to add any margin
to any of these button classes here.
Again, because they should be reusable, right?
So, let's now do another helper class
which I'm gonna call margin bottom.
Let's call it MD for medium.
And here, I'm gonna use 4.8 rem.
And again, using the important keywords
so that it really will apply.
And so, now if we add this class here.
So, yeah.
So, to this grid and this container here,
then that will add that margin.
Okay. And here it is, right?
So, hopefully that made sense
and you understood why we did create
that new special class here. Right.
Now, we could have done it in another way also.
For example,
simply adding a margin top to all recipes right here, right?
So, that would also have been possible,
but I like to use the reusable way.
So, let's create the all recipes here
and let's center the text.
And let's also give it a font size off again 1.8 rem.
And I'm putting the font size here and not on the link.
And I'm doing that for the same reasons as before.
So, that maybe I will want to reuse this link
on other places in the page.
And then, I don't want to have it always
with a font size of 1.8 rem.
So, somewhere else, maybe a better font size
for a link will be 1.4 rem.
And so then, if we had this fixed size,
we could not do that.
And so, by setting the font size here,
then the link,
so, the anchor element will simply inherit that size.
And here it is, right?
And now of course, we need to style this to adapt it
to the rest of the visual style of our page.
And so, let's that right here.
So, after this button maybe.
So, link.
Well, that should be first link, link.
And then to visit it pseudo class.
And here, the first thing that I want to do is to give it
or a brand orange color.
Then I want to remove the text decoration set it to none.
But then I actually want to recreate something similar.
So, let's just see what we have right now.
And so, of course now there is no underlining,
but usually links do have some underlying. Right.
However, usually we do not use text decoration for that,
but recreated using a border.
Because as I will show you, that looks a lot nicer.
So, let's do that.
So, border bottom,
one pixel solid
and then the color of the border.
And now here, let me show you yet another trick.
So, instead of writing the exact same color as we have here
which is the color that we want.
So, instead of doing this, we can do something else
which is to write the current color keywords.
And so, what this will do is that,
it will take the color that is currently the text color.
Okay. And so then, we don't have to repeat the same color.
And that is especially helpful
if for some reason we change the color, for example,
on a hover state.
Okay? So, for now, it doesn't look so good yet.
So, that's okay.
But what usually we do when we design a link is
to then give it padding at the bottom.
So, padding bottom
and then something really small, like two pixels.
And if we want to use padding,
we also need to set this to an inline block, right?
And so, let's check that out.
Now, that looks kind of the same.
So, let's inspect that here.
Ah, well that actually makes a difference.
So, these two pixels that we have here
and if we had the text decoration, it would be right here.
So, that does not look ideal.
And so, this is why everyone does it like this.
So, we remove the text decoration
and then do it in this way.
All right?
And now as 40 hover and active states,
which as you see,
we usually always group together,
but we wouldn't have to, of course.
They could be different.
And we did that in the very first project.
But again, it's very common to see them being together.
Okay. So here,
let's change the color simply
to the darker color, which is this one, okay?
And then, as we hover over it
watch how the border also changes to the same color, right?
And so, that's because we use the current color trick.
So, that keyword.
And so now, yeah, it always automatically
has the exact same color as the text, right?
However, in this case,
we actually don't want the underlying anymore.
So, that's another common style that is common
to use on links.
So, when we hover them,
we remove the border at the bottom, right?
However, we cannot just say border bottom,
none, for example.
And let me show you why.
So, you see that the entire layout jumps a little bit
by one pixel, right?
And so, that is because that,
one pixel is actually part of the element.
And so, when we remove that on hover,
then the element becomes smaller.
And then, while that messes up the spacing
of the entire page.
And in this case it is just one pixel,
but still it'll create a noticeable effect
as you can see here.
Or maybe you can experiment it on your own computer.
And so, instead, what we do is to keep it
at one pixel still solid, but instead
of giving it a real color, we use the transparent keyword.
Okay? And so, here you just learned
another important keyword for colors.
And so, that will now fix that problem.
Okay? Now just to finish,
let's make this animate here as well.
And so, on the normal state, we use the transition property
with all and set it to, let's again use 0.3 seconds.
Okay? So, that looks very nice.
And so now, let's analyze our entire section here.
So, I think it looks really, really good
like professionally designed,
but we can still improve just a small detail here.
So, right now, due to the fact
that we have this link here centered,
we can see some imbalance here.
So, all of this looks a bit centered here as well.
And then, also the link.
But then, we have this here aligned to the left side, right?
So, it's aligned to the left, just like here as well.
And so, to make this one a bit different from the first one
and also to add some balance to this section,
we can also center all of this.
And as you will see,
this will then create a really nice effect.
So, making it a little bit different than the other section.
All right.
So, to center that text,
we have to come here to where it is defined.
So, that's right here.
Now, how can we actually center this text here?
So, of course, we do not want to add text aligned center
on these two, right?
And once again,
that is because these are supposed to be reusable.
So, instead we can simply center.
So, we can simply set the text align center property
on the container here, right?
And so, that's exactly what I will do
and I will create another helper class here.
So, let me actually write that here.
So, helper classes
or we can also call them like settings classes.
So, these are small helper classes that have just
one declaration.
So, I'm calling this one here, let's call it center text
and then text align center.
And so now, I can simply add that here.
So, center text, and then these two elements
will actually inherit that, right?
We could also put it directly here and here.
Well, here, actually I think it would not work
because this is an inline element, unless we change that.
Let's see if we actually did.
Oh yeah, we set it to a block.
So, we could actually also set center text here,
but well, it's simpler to simply put it here
and then have these two elements inherited.
Okay? And so, once again, we created this helper class here
for the sake of re-usability
So, to make these two reusable instead
of having that right there.
Okay. And so now, this entire section here looks
like it is really centered on the page, okay?
And so, with this,
we could now say that we finished this section,
but I just want to show you one more thing.
So, I want to add a nice hover effect here
on these two carts.
So, that's something that we would not have to do.
But yeah,
I want to show you more and more things here.
So, let me just quickly show you how we can do that
in just one line of CSS.
So, that's something that I think we have never done before
which is to use hover on something that is not a link,
but we can of course perfectly do that.
So, we have meal, which is the entire cart
and then we can use the hover pseudo class on that one.
So, the effect that I want to implement here is
that whenever we hover over this element,
I want the entire element to move up a little bit.
Alright? So again, I'm sure you have seen this
in action somewhere on the web.
And so for this,
so for moving up,
I like to use the transform property
with the translate value.
So, we have used translate before.
Remember that a couple of times.
And so here, we have to define two values
where the first one is for horizontal movement
and the second one is for a vertical movement.
So, for example, we can say two rem,
two rem here, right?
So, again, horizontal, which is like X
and then the second is vertical, which is Y.
So, the X and Y axis.
So, of course, this will not be what we want,
but you see that once we hover it,
it does happen.
So, it does move 20 pixels down and to the right.
Okay. However, I only want to move it up.
So, only in the Y direction.
And so, here actually we can use the translate Y property.
And so, then we only define the Y property.
So, the vertical one, right?
So, that is a bit better already.
So, just in one direction,
but I want it to go up.
So, that's minus two.
Okay. But that's also a little bit too much
because this effect should be something very subtle.
And of course, also there should be an animation, right?
So, 1.2 rem here, and now the animation.
Now, how do you think we can do that animation?
Well, once again, that's very simple.
All we have to do is to use the transition property
on the original state.
So, that's this one.
So, transition all, and now let's go a bit higher.
So, the bigger the element, the longer we can animate it.
So, let's now use 0.4 seconds this time.
Okay, nice.
That looks quite nice actually.
Great. And now, just as a very final touch,
let's also manipulate the shadow here a little bit
to make this effect look a bit more realistic.
So, by moving up the element,
we kind of simulate it moving closer
to the source of the light, right?
And so therefore, the shadow can then become a bit larger.
So, let's do that.
And I will just copy this here.
So, right here.
And so, we will make it larger.
So, let's move one step
up here to 3.2 rem
and here to 64, so the 6.4 rem.
And then, we should also make it a bit lighter.
So, a shadow that is more diffused and bigger basically,
also naturally should be lighter.
And again, these things
you will learn them with practice, right?
All right. So, that's very subtle actually.
But if you notice, then the shadow does change a little bit
and this makes it more natural, indeed.
Okay. And so yeah, that's it for this section.
Once again, very beautiful, very nice looking, I think.
And our page is really coming together here.
So, we have this beautiful section.
This one here is very gorgeous as well.
And of course, also our header.
So, hope you're having a lot of fun here
and that you're starting to become really proud
of what you're building here.
And yeah.
Once you're ready observing this beautiful project,
then let's move together to our next section
because there is still a long way to go.