OK, so now let's give the styling to our component, which is showing us the recipe name and the recipe
image.
So for that, first of all, I'll need to give the class names to the respective antennas, for example,
the speed tag right now.
So for that, I'll be giving a class name.
The class name would be.
God's name would be baby recipe name, because they're showing the name, so it will be a recipe for
underscoring the school name.
And maybe we can be precipitated because we are men, men convention is being followed, so recipe time
in the school or in the school name on it, right?
Just copy this.
And for the image also, we can give up last name.
That would be class name is equal to the title and misquoting a scornful image.
I mean it.
And we'll go back to the coast where we go back, we've not Little Caesars Palace or first of all,
we have to create the style of CIUSSS inside the city, people who will create the dialogue to see us.
And how do we first of all, we imported this.
Will import import.
Style, see us.
Yeah, it's it's it, and we'll go to the state to assess and we'll start off our styling.
First of all, we'll style the recipe diet.
And the recipe title will give the disclosure to Flex play would be flex and the Flex deduction should
be column right.
Should we call them so flex direction should be column.
Sounds fair enough.
Next, we'll just divide the content to center.
Center should be in the center for the left.
Right.
Bottom top.
Whatever it should be in the center.
Next, a line items should be the center.
And this is the basic thesis of property that you should know.
And whenever I hover over the tile, so it should change from point up from like the pointer to closer,
like the cause of the pointer to whatever it is.
But I'll show you how that works.
I'm confused with the name.
OK.
Pointer and x, David.
And let's go back to where are.
OK.
Who do we have anything we have got to change anything and not?
Recipe dough.
Speed dial.
All right, same thing.
All right.
Let me just go ahead and check if it's working properly.
So now I'll give the class to the image retired.
That's going on the school image and here I'll give it an hide.
Off 200 pixels.
And with off.
Also, 200 pixels to be a perfect square, then object would cover.
Object it be covered.
Now why this we are using object to go, for example, an images big or small.
I don't want it to be like, look different.
They should be all of the same size and same orientation.
That's why I'm doing this and we gave a border radius of.
Already, we saw five pixels, and now let's go ahead and check how this is looking.
So of course, the size has changed and there is also border areas, so that means a CSIS file is properly
aligned and it's working properly.
Let's go back to the we escort.
Now what we'll do is we'll give the last two styling that is for the name.
So but a separate island, a squadron, the school named so for this will give a max width of 200 pixels.
Thanks, Fidel.
Wondered Pixels and can we give text a line of center?
Because we want it to be in center.
And let me save it and see.
Where is my OK?
OK, but I want to give you a little bit of margin to it because it's getting too much closer to the
image, so that's why I want to give a little margin here.
So let's go ahead and give it a margin.
The margin would be.
Margin, soap and water control pixels left and right because we want we don't care about the left and
right.
So.
That's what it is.
Let's go back to the browser and see you can see now it's not like like sitting on them in a letter
to us sitting on them.
But that is a little bit off, Martin now in between.
So it looks insane.
But now let me just close this.
We don't want to like one go along, we want at least two columns, so all that will be done.
So.
It's coming right now in just one column I want to call on, so for that, we need to give styling to
the live in which this entire array is being rendered.
So that isn't in the app just fine.
So for that, I need to go to the app drawer just finally.
So let's go to the gorgeous file.
But we need to go to the airport this where they were situated, so that move in and be part of my hope
so.
OK, there's this stupid idea for that, we'll give it a class name.
Last name and will be.
Something guarded as, of course, because it's in the app component.
Recipes.
Let me save it.
And go to the other side and at the bottom, I'll create the styling for this, so that would start
with the class name of app.
Some make up and then the recipes.
So now we want to give, first of all, we want to give it a margin because it's getting there.
Let me show you where it's getting.
Getting a little closer to that means we need to give and we want to displayed in a grid so that we
need to give and.
That's what we call OK.
There should be columns and a line, and then the item should be and the basement.
So I just told, you know, let me assure you and execute.
So you'll have a clear picture of what I'm trying to see right now, which.
So now what do you want to give is that we can provide a space here.
OK.
Looks cleaner.
OK, so what do you want to do?
Is we want to give a modern top.
Margin top of 20 or evil pixels, maybe that'll work.
OK, let me see then just go back.
Now you can see it's a little like there's a room, there's room.
OK, OK, OK, now let's go back.
And let me provide display grade.
This is the most important part because we wanted to in the form of it, so let me say it and let me
just check.
Nothing happened.
OK.
I don't know why, but we'll take a look.
Now we want to take the grid and we want to provide it into the columns.
Now I got why nothing happened.
Grid template pylons.
And that would be, I guess, 20 2020 pixels.
20 pixels each.
When are you going to expose each?
Let me just save it, and now I hope that works.
Yeah, we got two columns and then the images are in that columns.
That's pretty cool.
And.
One more thing I notice here is that, like, this image is bigger than this, so there is a little
misalignment there should be, they should be aligned in like in a line.
So for that, we can provide us the best class of theses attribute that would be.
Line items in the baseline, so a line items base line.
Now when we go to the browser and check that same image, the still that is little.
I think this is because of the name, because its name is a little big, little bigger than that.
So that's why this is happening.
Now we'll provide this.
We provide the name at the bottom of the image, it does not look good at the top.
Let me bring it down.
And let me save it.
And go back to the browser, and now it looks cold now.
The baseline problem is also solved now that in like one alignment, there is no this alignment.
Now you can see that some images are not being loaded, loaded.
So what is the reason for it?
So the images are in a different format, like the images, which can be loaded, maybe JPG, JPEG and
GIF and PNG, but these images are hard enough.
And as you probably saw.
Yeah.
Yeah, exactly.
So what we need to do is we need to provide a filter which will just show us the images which are in
the jpg format or unexpected formats.
We don't want as we or something like that.
So for that, we'll use a click so and a concept.
You will learn a new concept so that the concept will see in the next video.