Original subtitles

Let's now continue to work on our meals 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 this,

I could use font size of 2.4 REM

and that would then make them just as big

as they are now with hight 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 aligned the text with the icon

and also add some spacing.

And so that again is a perfect use case for flexbox, 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 going to wrap them into a strong element.

So strong, 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 style CSS,

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 four and eight pixels.

So four pixels or actually 0.4 REM

and 0.8 REM on the sides.

That's also decreased 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 tag element.

So like a small tag 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 at it

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 can not 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 cards 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 cards 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 this 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 we're 48 pixels.

Or actually REM, and here the same.

All right, and then as always,

we use the RGBA when we want some transparency.

So make it black by giving it zero

and then here, 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.

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 for 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 nine 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 chair 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 cutoff

because it was actually also going out here of 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 going to 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 increased 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 the 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.

All right, 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 dash dash,

or 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.