OK, so let me provide some hover properties or hold styling to this particular button, little button
for that, I have to write them Glasby the third button and then I have to provide a colon and we'll
right over.
OK.
So what it does is apply the styling, which which is which you'll write inside, so that styling will
be applied whenever we like, bring out a console to it and we hover over it.
So.
The background will be.
This to see and on.
This is called exactly this one.
And the color would be white as simple as that, like the color would be interchanged.
To be more precise, the color would be interchanged.
And I hope the server is running.
Yeah, so it was running.
So let me just show you how this will look.
See, whenever I hover over it, so the colors are entertaining, basically right now, the text color
is this purple type of text color and the background is white.
But when I bring my closer towards it, the color becomes white and the background becomes this lilac
red.
That looks cool.
OK, so now we'll do the rest of the work, then we are done with the other components.
So now what we'll do is we'll create another component which is going to contain all ofyour like the
dishes and photos, images and title and the price and the description and everything that we're going
to create now.
So for that, first of all, we'll have to create a component and that component would be managed or
this.
My new door and here what we do is we use our trick to get the boilerplate code, so the boilerplate
code comes here, so that boilerplate code is Odyssey.
See, not this.
Order, see?
Yeah.
So.
Now inside this, we'll have our live and that they will have a last name and insert that there will
be some things to.
First of all, let me just give this to a class name of.
Class name of.
S. and.
Election Center.
OK.
And inside this cave, that would be the 10th and third day we'll have article article.
And the article that would be an image and that it would be the information about the dish regarding
the title, the prize and everything else will just right that right now will just create a structure,
the styling in the data and everything that will do later on.
Right.
So.
That that will do in a minute.
OK, so let us know in the article, what we'll do is we'll create an image tag image and the source
will be there and I will be there.
But first of all, there does grab the little, then we'll do all of this stuff.
OK, so here will ride the class name.
And the class name for this is I came up with photo.
And inside this, there will be a day of class name as.
Item in full.
Item info and inside the item in full.
We have to raise the title and everything else.
Go ahead, we'll have our hair done.
I don't OK, inside the hotel will have an edge forward and that each food will have the title, for
example, any dish right now, I'm just I think this is a title.
And after the food, we'll have the.
Rise, so that will also be in the report only, so there could be a truth and that will be price.
So if we paste the rupee symbol here and.
For example, 180.
And after that, we'll have the description go after the head-to-toe, we'll have a beat egg so that
Peter will have the description and it will be.
This is.
This is a very good dish.
OK.
And we can provide the class name for this as well, but that will be.
Broken Glass name.
As item text.
All right.
So.
I think that's enough for now.
But now we have to provide some CSIS for it.
And before that, let me just imported inside on that component and see that spending properly or not.
So below the category will import this.
William Porter.
Menu.
It should give an option to our transport.
I don't see that.
Oh, yeah, I see that.
You see that autumn portrait for now, and then we see it.
And once we save it, the first thing we do is we go back to the browser and check.
There this title that is, it'll be symbol in the amount, and that is that description.
The only thing which is missing here is the image, but that also will get there.
We'll get when we like better data on like the no need to worry about that.
OK, so now let's provide some CSIS to that menu component.
Before that, we need to go to the next door to CSIS, and here we need to provide the CSIS to the specified
last names which we have provided.
So first of all, we will select the section center.
Targets for the.
And the.
And I like inside the sections, and what we'll do is we'll provide a with.
With of 90.
Be it or we know what is VW, VW is basically this is not a static with that will adapt.
It sells according to the resolution of the screen.
990 VW leave it at means view with VW means we will with.
So whatever the resolution of the screen is, whatever the width of the screen is to retake the 90 percent
of the screen.
As simple as that, if you put Pixel here, the Pixel is a static thing.
It will be the same on the mobile, on the laptop, on the next top everywhere.
But VW or the view with an ITV in view with that is that 90 percent of the total weight, so that is
more convenient to use.
All right.
So that's why I'm writing VW.
All right.
So that the view with next, I'll be giving our margin.
So that margin for top and bottom, that will be zero and four left and right.
That will be part of.
Autoimmune sequel.
And next, we'll see it and see if the changes are being rendered or not.
So right now, I don't see anything as off for the South.
There's no difference, but we'll make a difference.
So after the margin, what we'll do is we'll provide a maximum bid for the bid.
OK, why this not?
Max with.
Next with of.
I don't know, but I came up with this and this was working, so that is one one seven zero pixels and.
The display will be great.
Now we are not using Flexbox here because that is generally used in the narrowbodies and all there we
are giving kind of tables and we want to order the data in the grid form.
That's why we are using don't display grid property here and not the Flexbox that are difference.
And if you want to, I can even show you because if you use the grid so things will go in the in the
real fashion, in the room.
And if you use Flexbox.
No, sorry, I was wrong.
If you use, the great things will go in the column fashion, you know?
And if you use the Flexbox, things will go in the narrow fashion.
So it's hard to understand by the theory.
Let me just explain the example.
OK, so I'll write Greg.
And.
I'll see I'll just.
See to the browser.
Nothing is assumed because there is only one.
Florida, as of now, one base as of now.
OK, now the gap now what is this gap in the grid format?
There is a lot that a lot of like cards to walk through the gap between those cards that is specified
with that.
So for top and bottom, that would be three RDM.
Again, I already explained what this idea.
And for left and right, that would be tourism.
All right.
And the last thing which we do is just justify items justified, not content, not content to justify.
Items and that would be said, look good now is seaweed and fecal back.
You can see this has come in the center, and that is some styling, but there is no photo on that image
right now.
That's why you are not able to see properly like what is the thing here?
But once we render that once you've tested the data from us toward energy and once we like it, then
that would be quite good.
OK, so.
Let's now do something more.
So let's go to the menu item and it will provide the class name of.
Menu.
Item, not item and inside this, there would be.
Again, display of great.
Display grid, and that would be a gap, and the gap would be of one out in.
For the top and bottom and tourism for the left and right, as simple as that, I'm the max would would
be really five a.m..
And then when I save it.
And I see here so the things are not changing because because of our auto, so.
I think I need to grab one photo and see.
OK, so let me go to the category, not the category, the menu, and let me grab one for two for the
sake of testing.
Import photo from.
From.
The public feel that we have created the images were so bad, they are, so I need to go out of this
folder, then I need to go to the public folder.
Oh my God, what I did.
I need to go to the public folder and inside the public folder that is our images folder, inside the
images.
I'll go with the item one item, one Dart GP.
JPEG when I see it and just render it inside.
Boards.
So that will be photo.
And that is.
Although and when I say it and when I go back to my browser.
OK, so that is it.
Let me just refresh.
OK, OK, OK, OK, so the thing is, are folders out of the school, it seems.
And why is that happening?
Basically, it's saying that you cannot import anything from outside the for because that's the public
policy and the imports from outside of the source are not supported, telling me that we can create
any folder inside the SABC folder and we can do.
So that's not the issue here.
And eventually, when we when we create the detailed audio file, so there will be importing all of
that so that it's not like, that's not a big issue, OK?
So.
Or I can just see it and the folder here.
And all that can just to please this immediate right and then majors, if I can just copy it.
And I can just paste it inside this.
Can just be strip.
So it gave me and now let me just grab that image, OK, I'm sorry that the screen was stuck.
I'm really sorry.
You can see now what I did is I copied the image from here and I started inside that article because
it was telling us that it's not supported.
OK, so I copied it inside the outside.
See, and now let me just go hard.
And.
He starts working.
And let me see if we see the image.
But the thing is, we have not provided any styling to the image, so we do that in a moment.
Well, for that, we need to work on this last name, which is the photo before the photo will give,
the styling is styling and all who will do that in the next video.