Instructor: Let's now continue the work
on our meal section.
So it's time now to format these lines here
a little bit better.
So making these icons here maybe orange
and adding some space here,
and probably also making them a little bit bigger.
So right now we don't have any class name here yet
but of course we can add a class to these ion icons
just like on any other element.
So this is the meal icon,
so let's add that here.
And here we can format it just like before
with height and width.
So let's use 2.4 rem and a width of 2.4.
And these two should be the same
because usually these icons are drawn in a rectangular box.
Now here, I'm not sure if we should set the stroke
or the fill.
So let's just start with this one
and setting it to our color.
And while the stroke did not really change,
let's try fill...
and that also doesn't work.
And so let's also try color.
And so that does the trick.
So these icons here apparently are treated a bit
as if they were text.
And so this is another one that we should experiment with
when we want to style icons like this.
So each of these icon packs does in fact
work a little bit differently,
and so we always need to experiment
with which of the properties we can style them.
So especially with the color, okay?
Sometimes we even need to use font size to style them
in terms of the size.
And that would actually also work here.
So if I turned off these, I could use font size of 2.4 rem
and that would then make them just as big
as they are now with height and width.
Okay, so whenever you need to style icons,
you need to experiment with all of these.
But anyway, the one that worked was color.
And so now let's vertically align the text
with the icon and also add some spacing.
And so that again is a perfect use case for flex box, right?
And the flex container of the icon and the text
is of course the meal attribute.
So the list icons, right?
So display: flex;
then align-items:
to align them vertically, center;
and then let's add some gap property here.
Let's say 1.6 rem.
Okay, so that's starting to look quite nicer.
Now here, let's make this a bit more interesting
and add some visual hierarchy
by giving these values here some more font width.
So these three numbers.
So I'm simply gonna wrap them into a strong element.
So
and let's actually type the number here again
and delete this one just like this.
Oh, and here the value disappeared.
I think it was 74,
and then here the same.
Okay.
However, strong probably looks a bit too strong, right?
So I think that doesn't look so nice
because the font width here is way too bold.
So let's take it down a little bit,
and let's actually do that
by default whenever we use the strong tag.
Now, this is something that I do all the time
which is to basically just redefine the strong element
to make it with just a font weight
of 500 instead of 700, which is probably the default.
Okay.
So of course that goes into the general
and not the styles, yes,
as which is just for the individual sections and components.
And so that looks a lot better, actually.
Next up, let's format this tag here,
so that doesn't look quite nice yet.
And so where is that?
Ah, it's right here with the tag class.
So I like to follow the same order
as the elements appear in html.
So let's first set it to an inline-block
so that we can apply some paddings to it.
So probably some very small padding.
And so... and actually that's in the other file.
So let's see what we have for small values.
So we have 2, 4, 8.
So let's maybe experiment with 4 and 8 pixels.
So 4 pixels, or actually 0.4 rem and 0.8 rem on the sides.
Let's also decrease the font size to 1.2,
make the text uppercase, so text-transform: uppercase.
And so these are all like the typical formattings
of the tech element, so like a small tech component.
And of course we also need some background color.
Now this is vegetarian
and so I would say we need some green color there.
So actually let's get that here from open color.
So let's just click on green here and maybe this one.
So this is nice and light, so let's try that.
So background-color like this.
And since we're added,
let's make also the text color a darker,
because on a background color,
usually we need some darker text.
All right.
So looking good already,
we just need to give it some spacing,
and I also want to make the borders round.
So that's really one of the defining characteristics
of tags, usually.
Now, as for the spacing,
remember how I said in the beginning
that for the next meal we will actually have two categories
so two tags, and so we should probably wrap those two
inside of some parent element
onto which we will then add some margin bottom.
Okay. But first, let's add that border radius.
And here, remember how we cannot use 50%
because that will make it look like this,
but instead we just use some very large value.
It doesn't matter.
We can even use pixels because this value is just arbitrary.
So now it has the shape that we want.
Okay, let's just wrap it into a div now
with the class of "meal-tags."
And so this "meal-tags" will then have some margin,
maybe 12 pixels.
And yeah, that looks nice,
except that now, of course,
we also need some spacing inside.
But so first, let's now style the card itself,
like to make it actually look like a card.
Now, there are multiple ways in which we can do that,
for example, giving it some background color
but usually I like to keep the card white.
Now, since we're also on a white background here,
a nice effect that we can use is to give it
a very subtle shadow.
And so that shadow will then distinguish
the card element from the rest of the page,
so from outside of the section.
Okay, so let me demonstrate that to you.
And so now I actually need to select the meal,
which we hadn't done yet.
So remember that it's box-shadow.
Then here, horizontally as always,
we want no shadow but only vertically.
So let's use one of our values, which is 24 pixels.
And then as for the blur, I like to use double.
So 48 pixels, or actually rem, and here the same, right?
And then as always, we use the rgba
when we want some transparency.
So make it black by giving it 0,
and then here's some other value, like 0.1 for 10%.
So let's check it out...
and looking nice, maybe a little bit too dark
so we can make it a little bit less visible.
So let's put it at .075.
So that's 7.5% basically.
And, yeah, that looks a bit more subtle and I like that.
But the corners here are, of course, a little bit harsh,
so let's also round them.
So let's again use our border radius
of nine pixel that we have been using, right?
But we could actually use a little bit more.
So let's try like 12 pixel here,
because this component is a lot bigger,
and so then we also need more border radius.
All right.
Now here actually I like odd numbers,
that's why I chose 9 as well.
And so here, let's use 11
and I will put that here also in our design decisions.
Okay. And so yeah, there's just one thing to fix,
which you maybe have noticed.
And, well, if you didn't, let me show you.
So you see that here we have the rounded corners,
and here where we don't have the image,
we can also slightly see them here on the top.
But then here we have that image.
And so that image is basically lying, now,
on top of the rounded corners.
So the roundness is here in the background,
but we cannot see it
because the image is laying on top of that.
So it's basically overflowing this element now,
but we can easily fix that
by saying that we want that overflow.
So basically whatever overflows this container
should be hidden.
So I think this one we hadn't used before.
And so this is another very, very important property.
Maybe we have used it actually, in the previous project
where we did that share website,
but well, if I hadn't talked about it, then yeah.
This is an important one, and that fixes it, right?
And you see that also here the M is kind of cut off,
because it was actually also going out here off this corner.
Okay, next up, let's add some padding here.
So of course, this cannot be glued to the sides
like it is right now.
So let's add some padding.
And now, where should we actually add that padding?
So should we do it right here in the meal?
So padding let's say 4.8 rem.
That's not really what we're gonna want, right?
Because then that padding
also wraps outside of the image, right?
So it's now outside this entire meal element.
And so that's of course not what we want.
So whenever we are designing a card like this,
where we have an image at the top,
we then need another box which contains
basically the rest of the written content.
And so let's do that here.
So basically placing all the other content
inside of another box,
which let's simply call it the "meal-content."
Okay, let's cut this here and paste it here at the very end.
Give it a save.
And now of course we want that padding
inside of that meal content alone.
So let's move it down there.
And beautiful, that looks just a lot better.
So the spacing here looks actually right, I think,
except maybe here for the top.
So here I think we have a bit too much,
so let's reduce that.
So we can say 3.2 rem at the top,
and then 4.8 at the right and all the other sides.
Or alternatively, we could also have left it the way it was
and then adding a padding top property
and set that one to 3.2.
So that's exactly the same thing.
And now it looks a lot better.
Let's actually just make this here bold.
I'm noticing that we were kind of missing that.
So font weight, let's say 600
in order not to make it too bold.
And yeah, I think with this
we designed a really, really nice looking card
which has all the data that we want
and it also has some nice visual hierarchy.
So these two pieces of content,
I think they're more related to one another,
and so they have a bit less spacing.
Then here we have a lot more spacing
between kind of this introduction and the data part.
And then of course, between each of the data points,
we of course also have a little bit of spacing,
but not as much spacing as here, right?
Then we also increase the visual hierarchy
by making these values bold.
And so the attention immediately jumps to those now.
And yeah, again, I think this looks quite nice.
And so what we can do now
is to simply copy all of this html here
and create our second card based on that.
So let's do that.
So grabbing this meal, all of this,
and replace what we already had,
and just to make sure we copied that correctly.
Let's see.
And indeed, there it is.
Great. So let's start replacing the content.
So here it is now, meal number two,
and we need to make sure that these images
have the exact same dimensions,
or at least the exact same aspect ratio,
because otherwise, then these two images here
will look very awkward,
so if they didn't have the same height.
So if this one, for example, started only here
then all of that content here would also be shifted up
and that would then look very bad.
So if you have two cards or more with images in the top,
make sure that they do have the exact same aspect ratio
or the same dimensions.
Okay.
But anyway, let's grab now the data for this one.
And now this should be very, very simple.
Just pasting it down here.
So calories, we have now 400.
We have a NutriScore of 92.
So this one is probably healthier
which is because it is a salad, I guess.
So, actually I forgot to copy the name of it.
So it's the "Avocado Salad."
So we need to replace that here.
And also in the alt text of the image.
Alright, and now finally the categories.
So this one is vegan.
And let's just duplicate this line here,
and also paleo, or paleo or whatever.
Okay. And let's see...
Yeah, beautiful.
Now we should probably just change
the background color of these two
so that basically each of the categories
has a different background color.
All right, so in our code,
we should not have the background color
right here in the tag,
but instead create, just like many times before,
like a variation.
So I'm writing tag, then -- for basically a modification,
which is, again, a standard that I like to use.
And then first one is for vegetarian,
which has this background color.
So alt or option down key to move it here.
And then let's simply duplicate this two times,
one for vegan and one for paleo.
Then let's add those here.
So this is the tag--vegetarian,
and where are the other...? Yeah.
So tag--vegan and tag--paleo.
And now let's find two other colors for these.
So vegan should also be green
so let's maybe go with this one.
Okay, and then let's just use yellow for the other one.
So maybe this one or this one.
That other one looks a bit too orange.
But, of course, you can experiment around
with that as you'd like.
And beautiful, very nice.
Let's just quickly add some spacing here.
And that's very simple as well, right?
So meal-tags, let's make it a flex container
and then simply add a gap
of like just four pixels, like 0.4 rem.
So, a small detail, but that does look better than before.
Nice. So that's very beautiful,
very really nice looking cards here side by side.
And so all that's left to do now
is to create this list of diets,
and I'm leaving that for the next lecture
so that we can now take just another quick break here.