So now I'm going to do is that I'm going to start working on the menu page.
If you click on menu page, as you can see, it's empty.
So we need to start working on this page.
So what I'm going to do is that I'm going to open the menu page.
As you can see, this is the menu page.
And we have here the container.
So all of the code isn't going to go here.
All of my code is going to go here.
So let me add this side by side again.
So I'm going to add this side by side and let's start working here.
So what I'm going to do here in the container is that I'm going to, first of all, display the the
meals here in this menu, in this in this menu glass inside, inside this menu, inside this device
that has the glass of menu.
So what I'm going to start by saying here, I'm going to start by saying it's true.
And then inside that it's true, I'm going to say menu menu.
And then you're mean you and then I'm going to give this menu a class center.
I'm going to say glass text center, text center and be like this.
I'm going to say I'm just going to display here.
I'm going to say div.
And then I'm going to say glass.
And then for this class, I'm going to say Ethics Center again, and then I'm going to say you can.
Some take you out.
Rice.
With, I don't know, whatever you want to say or Tato.
From 2:00 p.m..
And.
With.
A an extra.
Two max.
So this is just just for the sake of showing the just for the sake of making this our making our website
look like a real, uh, restoring Web site.
Now, if I refresh, as you can see it, says Yemenia, and then below this menu, it says you can substitute
rice with potato.
So below this, what I'm going to do is that I'm going to display it all with a menu.
So here I'm going to say Dave and the last straw and then inside, that's what I'm going to display
the menu.
So first of all, I'm going to say every year for the first meal and then I'm going to say glass.
And then the glass is going to be column.
In the three, because they wanted to take I want to have four, four, four columns, they're wrong.
So I'm going to say three and then four small screens.
I'm going to say goal is the same for small stands for small MDMA.
It stands for medium screens.
So for small screens, I'm going to say it's in four and then call X is for extra small screens.
I'm going to specify six columns for, uh, for extra smallest scripts.
And then inside that I'm going to display first of all, I'm going to display e-TAG and then I'm going
to say if.
It is going to be nothing because we don't want to display we don't want to take the user anyway anywhere
and then say that attack, I'm going to display them.
And it's either that I need to display the the the meal, the information about that bill.
So firstly, I'm going to say I'm going to give this glass.
I'm going to this I'm going to give this Davik last category.
Category.
Category and then inside that have I'm going to say image to display the image of the meal and then
the width.
I'm going to say style with.
Two hundred because of the height is going to be also two hundred bucks.
And then I'm going to say source, and then I'm going to feel this with the image you are later and
then the alternative, if the image doesn't exist for some reason, we can say image or anything you
want to display.
And then I'm going to say spane.
Lunch.
Lunch or meal or let's say lunch meal.
The name of the basically.
Now let me refresh and as you can see, we have this, uh, image lunch meal and of course, nothing
is being displayed here because there is no image.
So what they want to do now is that they need to get the image.
So I have here an image.
I have this image and I'm going to add this image first through my image.
Yes, I'm going to grab this image and then I'm going to drop it in the images.
And as you can see, this is the image that I want to display.
The name of the name of the image is image one that will be p.g.
So now what I'm going to do is that here in the source, I'm going to say that the infamous images of
the false image, one that Luminoso gave and refresh.
Now, as you can see, this is the image, as you can see, this is how it's going to look like.
Looks amazing.
I need just to change the width to do a hundred fifty because I need to kind of increase the weight
the year so that it looks better.
As you can see now, it looks better.
Lamey here maximizing the screen, as you can see, it looks better.
This is for the.
This is for the first meal.
We need to repeat the process for the other meals.
And the good news is that we don't need to do anything special.
All we need to do now is that we need to copy this basic many times because now we have this is the
first straw.
We just need to copy this and paste it because we need to repeat the process for the other meals.
So it doesn't it doesn't matter how many meals you want.
I'm going to need a display for meals.
You can display 10 meals.
You can display, however, number of meals you want.
Lady here save energy fresh.
Now, as you can see, I have one, two, three, four meals a here increase the size, and if I increase
the size, there will be four meals per barrel, column per barrel.
And as you can see, it's going to look like this.
But we need to work on the excess because it looks good, but it requires further modification.
So we need to hit on over to this source, to the style that counts, and then we need to work on the
glass that we created for this for this image, for this card, basically.
So the for this we created a class called a class called category.
Remember this class called category, this class called category.
So we need to work on this class.
We need to add these at the design of this category glass so that it looks amazing.
So I'm going to hand it over to the style that says, OK, I'm going to create this this category class.
So I'm going to say here that category.
I then for take for this category.
I'm going to say position, relative, position relative and then the border.
I'm going to specify some borders, I'm going to say border.
So the border is going to be to be x solid, solid.
And then I'm going to give you this this color re f zero, c one, if.
I like this color.
And then overflow is going to be hidden away in the wet is going to be two hundred, the width is going
to be two hundred, you can increase or decrease this depending upon your designs.
Yeah.
And then the height is going to be again.
Two hundred for the margin.
I'm going to say margin margin zero auto.
And then 15 pics now save and refresh now, as you can see, if I refresh, it's going to be a card
like this.
It's it's to a card like this.
Let me maximize the screen, maybe maximize the screen.
And as you can see, it looks amazing.
So this is for the category.
But we still need to work on the on a few things inside this.
So far, inside this category, we have this ban.
So we need to say that category.
And then and don't worry about about all of these problems that we have we currently have in the design.
I'm going to fix all of this, but you need to work.
You need to take it step by step.
So first of all, for this pan, I'm going to say position absolute.
And then the the position from the bottom is going to be zero, because I want to do this in the name
of the mill at the bottom, and then for the for the year up from there, it is going to be zero.
This is going to add it in the bottom of the screen.
The whip is going to be one hundred.
For the text, for the text, it's going to be censored, I'm going to censor the text and the font
size is going to be fine.
Size one point two M.
Font size here.
And I also need to change the text to to the upper case, I'm going to say text transform uppercase.
And finally, we're going to add a background color to it, I'm going to say in background.
Back ground, back ground colour is going to be a Blacula.
And for the opacity, the opacity is going to be point seven five.
And the color itself is going to be white, color is going to be if if lamanno save and refresh.
Now, as you can see, it's going to display the name of the meal here, lunch meal.
And it's being displayed at the top, so we need to fix this.
The problem is here, I should say bottom, I forgot here the year.
So now even refresh it should be displayed in the bottom.
As you can see, it's going to be displayed in the bottom.
So it looks now amazing.