Focusing on let's go ahead and give the styling to our image.
So what is the class name for our image?
And that is the photo.
The class name for their image is so let's go ahead and style or image or that we need to write photo
here and inside.
The photo will give the CST to it.
So we'll be adding, first of all, object fit to cover, object to cover.
And let me save it.
Let me see if the photo is running.
No, it's not.
So let me start and start.
This will start off the server and then later we're starting.
Let us write some more slices.
So what we'll do is we'll give our height and weight to our image so that that will be a particular
height and weight to add image.
So that will be giving.
So we'll give.
Let's zoom in on this.
OK, we'll give.
Height and height will be of 200 pixels at a pixel.
Then let's go to the bar browser and check.
So.
This is the browser, but let me rephrase this.
And object the color we have given, but so far, nothing has happened.
No problem with that.
We will give a height of 200 pixels and will give a width of.
100 percent.
One hundred percent.
And then we'll give a border, all four border of point --.
And I will give the border.
Of.
Me first trade partner and the border would be a point two, five, eight a.m. to five.
RDM, not 2.2, five, it's 0.2, five.
And then it will be a doctored border, or you can live with the solid only solid border and the color
will be.
This.
This tax code, so I guess it's not taking it.
Out to sea to sea.
No, not this one.
This one two three two eight nine one.
OK, so this will be the color of the border and the next will be having a border radius and border
radius will be.
Variable and that will be a finite of radius.
OK.
And you're going to display it in a blog display.
Block and now let me just save it.
And now if I go to the browser.
Now you can see the images looking quite beautiful, I guess, compared to the previous one.
It's looking quite good.
OK, so this is how it's looking.
And now let's give the styling to this like the in4 and.
There's everything, all the water, whether text to a scene.
So let me just give some styling to that too.
After this and keep the styling and I'll take the class name of item item item and in full and.
Ed?
And then it would come inside this inside the heart of that will be display flags.
Flex and Wheeler justified the content as the space between Justify.
Content.
Justified content and there will be space between.
This one.
And.
Then when you give the board the bottom of the the bottom, that will be of 0.5 0.5 pixel and that would
be a doctored border, and the color will be from the colors which we have declared already.
The law and the gray five will not agree.
So this will be the color for it.
And let me just save it and let me go to the browser.
See?
OK, we can see that is this the dotted border?
So that is from this only the headline on, OK, so next we'll give some styling to the.
Info like the description, OK?
A further description will give item info.
And.
But there's also the head there, OK, next, we'll give to the info item in full and that will with
each forward and start.
This will give margin.
Margin, bottom margin, the margin bottom of four point five odium.
Not five, zero point five RDM and.
So the item we have given this.
Now we'll also style the price or the price will be the price will be the color.
Color off, see?
We'll see you at nine one and then I save it, and when I go to the browser and isn't able to refresh.
There are some changes now.
The bright color, as we do in this color has been changed, so that is what we have done right now.
Who will do that next to?
Will tune the item taxed, and the item taxes is basically let's just see that glass and the menu item
text is basically this the paragraph which is containing the description of the dish, OK, that will
be installing the phone and now will give the item text.
Item.
Next.
Inside item text will give the margin bottom.
You know, and will give the Paddington.
Batting top of one idea, and we'll save it.
And then we'll go to the browser.
And let me see that is being rendered.
Now there is a border.
What if I commend it and see?
That is being rendered or not.
So that is being rendered basically and sorry for the coughing and that's being rendered.
And when I give the styling for, let me see it.
You can see it now, and this has become known.
OK, so that was it for this.
It's going to sit in on for next.
We can even give some styling to.
Would like to make this responsive on other devices.
OK, so menu item, we've already this, we've displayed it, but we'll make it a little like mobile
friendly right now because when you go to this.
Things are.
Things are OK, but we want to, like, provide some more styling to it and when things come to the
mobile view, because even if I.
Let me just show you what I'm trying to say.
The menu item?
If I just copy this article and if I just make two copies of that, OK, now if I come here.
You fresh?
Rudy.
So you can see.
I know it's coming in one line, OK?
When I do this, they're just coming online, but I want things to be like one, two, three and then
another one and another one.
So that I want to let me just first and do whatever I've done.
Yeah, that was good.
And, yeah.
So that will add now, OK.
So.
And here we will do that, and we'll write media goodies for that, and because things are looking good
on the mobile view, they are in great form.
But we want them to be OK in the next job.
You are right.
So media screen.
And.
Media screen.
And that decision will come in with.
I mean, with.
And that would be of 768 pixel, 768 pixels.
All right.
So media screen and I mean, with the 168 pixels left.
So then in the menu item, we'll add some style to the menu item, we'll add the great template template.
Great template columns.
And then we'll give.
The science here, so there will be 225 pixels.
We're going to find pixels and one segment.
They've done a fire fight.
And that would be a gap, of course.
And the gap would be of top and bottom that would be zero and left and right, that would be one point
two five audience to five RDM, and next we'll be having a maximum of it.
So this is like the maximum width of the card.
The particular thing that radical element, the menu item.
OK, so that will be the 40 RDM.
And next.
We'll style the fort also in this store for the affordable.
That it will be the height for.
The height will be 175 pixel, and next will be giving the styling to some other things.
Next will be styling the section so that we'll do the next one, you.