Hello and welcome to Techinfo YT, in this video we are going to create a complete restaurant website which you can see on your screen, we will create this complete website and material with the help of UAE and for routing we have used React Router version 6 in it. It has been done here, you can see the navigation bar on the screen and this is the bar component of Material UAE, we have done it in this and this navigation has also applied the class of active on it. With this, if we switch the menu like When I go to the contact, you can see something like this, which will be shown on the contact and here the class of the active will be applied, in the same way there is about page, then there is the menu, inside the menu we have a card, so the material in it. We have done this on the card and we can see the effect in this manner. Similarly, if you look on the home page and scroll down, here we have added social on which we have added a little bit of animation. And the footer section below is a very basic project but in this you will also get a good understanding of Material UAE, how you can do it with Material Y with React and here it is a totally responsive website like I am Inspector . I do this and we will open it in mobile view, so see something like this in the mobile view, we will see this, I will reduce the size further and let you know, so see, from here you can also switch devices like iPhone iPhone, something It will appear in this manner and here we have done it with the draw component, this is going to look like a burger, in the same manner for the navigation menu, if we switch to any gem, then the class of the active key will also be applied here, so as We are reducing things in our desktop version in the same way, we will also reduce things in our mobile version and you can check it on any device, you will get to see the results because if no one is following their tutorial and hosting it directly. If you want to see it, we will cover both the things in a separate video, so we are going to create all this in this video and you will also get its source code, if you go to your Thappad and search on Google, you will get it easily and From here you have to go to the repository and look at the latest restaurant website here, you will get the repository, click on it and you will get the source code, inside this there is also a separate folder of images, inside SRC, all the images inside this project. You can do the same for them, see here I have created a folder with the name of images, so you can do the same for these images and if you get any error then you can compare the code from this, it may be If there is some spelling mistake due to which your code does not work, then you can compare it with the source code of your court, compare it with the source code. In this way, you can also follow the code on Instagram. You can do your white research directly, if you also search for updates on technical details, you will get all these links which are in the description, I have also created a server for this. In case, if you want to join, then you can simply read about the channel. You can go to the section, from here you will get the links directly, see Discord, click on it, it will redirect you to the discount server or you can also search and you will get these links on Instagram also, so you can also from there. You can join and also interact with other developers, so let us step by step create this website. Before that, if you are new on this channel, then subscribe the channel and press the bell icon to get the latest updates. If you want to keep getting video notifications then first of all we will create a reactive application, so what should you do for that, let's go to any one thing like I am inside the drive and here I have created all the folders, so keep this. What you have to do is, if you are using Windows, then command from and I am doing it, then you have to go to the terminal, as there is a shortcut for Windows, what you will do on this, if you write CMD, then this is the path which is automatically in the command prompt. It will open, now what can we do inside it, we can create a React application, so here we will write, after writing this much, you have to press enter, then all the dependencies will start downloading, as you can see on the screen. The dependencies will be downloaded and if you see the folder here, there are many of them. Folder creation will start, as you can see, this is our official project of the restaurant. Inside this, all the dependencies of React will be downloaded, so let's wait for its completion. Let me tell you the folder structure once and also What do we have to do for the ID itself? Visual Studio Code will do it. If you want, you can do it with any other text editor, but Visual Studio Code is recommended, in which you get good special intelligence, so whatever we have, it becomes quite fast. While waiting for it to finish and as soon as it finishes, I will resume the video, so here our application which has been created, I will cut it and here if you open this folder, you will see a lot of Here the sub folder has been created, I will tell you by opening it in ID, see if you are doing it in Visual Studio Code then right click on it and open it with and if you are doing it in any other text editor then you are there. If we open it from here, then here is our project which has been opened in Visual Studio Code. First of all, we have the folder of loaders score models, inside which there are all the dependencies related to the project i.e. behind the scenes to reduce our project. Whatever additional packages are required, they get added here and initially its size is very large, like when we give a production build, then its size will be reduced a lot because we get the build folder, all our code will be compressed. After that comes public in which we have a file in one HTML file like we say index.html file and an ID is created in it, see the root key here, what does it do, here is the Java script. With the help of , we do what is in HTML. You must have heard of GS, so we complete it in this, we do that in GS. With these, there is a total winner, then what is J6, the syntax is like HTML because here we do not write direct HTML. In React , the combination of both and the combination of HTML is done here. It is very easy. If we do it then you will understand it easily. First of all, see what you have to do, here you have to change the title and also. You can also try running it. If you are using Visual Studio, then go to the terminal here. From here, you can run this application on a new terminal. What you have to do for this is simply write the start command, original, whatever you want. The default browser will be in which these applications will open on local host 34. As you can see, it is loading here. Once it is compiled, you will get the result immediately. If it is loaded for the first time, it will take time. After that, it will be hot here. Functionality of Reloading: Whenever you create a React application, you get to see its interface like this, so what we will do is change it completely and from scratch we will create the project here, so see here, after that again here . But there is the file of people, there is the file of manifest, then there is the robots.t file, there is nothing less in these also, you can simply reduce it on the file of index.html, what can we do in this also, simply see, I will tell you how. If we change the name of this file here, then I hope I will tell you the title, you must have done the same in basic HTML also, we will name it Restaurant Website just like I did from here, then see below it got compiled and if I If I go to the browser, I will see that our title has been changed, in the same way I can change the icon too. For now, let it be the official icon of our website. We do not have any icon right now. If you want to add it, then what should you do, see here. But inside public icon.ico, you have to change this file, you can add icon of ICU or you can also add PNG, there is no problem, here for that you will see the link, you will get Apple touch icon, then here. But the icon, what you have to do in it is to give it the part of the file. Now see after this, here we have folders, so whatever will be the source of our project, components will be there, so what will we do inside this folder, all those things. After that, if you see below, here Get Ignore is related to Get Up, after that, if you open the package lock key and package json file, then this is the most important file of our application. It is related to our application . Is it React or is the name of this project Dependency and what is the script? Has it been added to the browser list in the linter, so all these things are mentioned here, as you can see here, this is a script, so we can change the script also. Initial What we did was run the application with the help of wet start. In the same way, if you have to perform some test, then you will have to run the test and then what can we do, we can also give a build, then we will build it, when our project is completed, then we will give it a belt and some hosting server. But we will host it, so let's make this basic even more, now what we will do here is that we will design it totally, that is, with this default, we get the design of this react people, after that we will edit it here. There is some tax for this i.e. and this link will be designed on the official website, first of all, what you have to do from here, whatever tight code is there, we will cut it as much as it is, but here there is the address section inside it, remove it completely. We will do this and we will also remove this class and here we will simply take h1, we will add h1 here only for test purpose, after that we have to write our code also, so here I write from the restaurant website and See here, we will also remove the people's file and we will also remove any file which we do not want. Similarly, if we have style in index.css, then we will remove it and what will we do from here. We will leave the margin zero, we will make the wedding zero here and we will make the boxing a border box and what will we do in place of the body by selecting universal and using it, now we will create a basic layout which is here and if you want, you can also change the dependency. If you can download it, then what will we do now ? We will close the server for a while. What I do from here is that I will press control C, then our React application will stop here. What will we do now? There are some dependencies here. Whatever you download, you have to write here the shortcut of installation, after that we will add the react router down here, in the same way, we will have material Y here, if ever we have to do it, then not much, we will do it in a little material. What I do here is what we will do is copy it from the search material website and what I do is cut it first because we already have install written in the copy command and if we paste it here then by default. Look here, we are installing three packages, the first one is the file of material which is I, after that there is emotion, is this also a tight library and which is next and along with andui I have it . There is more after that, there is the style component, what is the style component, here also this object paste which is the styling library, so brother, the default material which is depends on these two libraries, along with this we have what we have from back in our given router don. If you have to install also, then what do you do after this, install it here and press enter, then this is the dependency and here you can see that all the packages have been successfully installed, Rick Router Down Emotional and in the companion, here it is Let's fix it first, you have to write for this , it doesn't make much difference, it is only our dependency on the application that changes, that is, the versions that come here change, that is, if there is an update, then this is the wonderblity related to it. Detects and shows them that if you download the latest packages, what is there has been fixed, now you can also see these packages in the packages and files, see here you will get to see them. Here at the top you can see whatever extras we have downloaded in the dependencies like emotional packages which are downloaded inside our application, now we can import them, then what will we do? Folder by name of components. Folder by name. We will keep create in which what we will do is that all our navigation menus will be there, our route shows will also be there, we will keep it inside this, along with that what you can do is that here you can also create a holder with the name of style, if along with these, if you have more styles. If you have any, then you can keep them here in separate separate files. Also, if you have some data, you can create a folder with the name of 'U tails' or whatever data you have and add it inside it. so we have That's why it is not available at the moment, I will remove it, just to let you know, I had added it here, now what will we do, there are some files here, that is, we will create components here, what will we do inside this components. First we will create a new file, we will create two new files, first of all we will have our own file outside, any GS supports both React and inside it we will create another file, we will create a new file and name it whatever you want, then you can If we can write here, we have created two components. First of all, inside the second header, we will create the navigation menu and inside the layout, the basic outer layer of our application will remain, after that, what we will do is just wrap it, whatever . We will create additional routes inside the page, we just have to import this, now these files will be created here, what we have to do is to convert it into a functional component, so what should you do for that, first of all go to the extension and from here You search React or you can also search these 7, see these 7 plus React Reduction, if you have to install it, what will happen with it, here we get some functionality, visit its website, I will directly explain what it is. If I give it , we get some shortcuts with the help of which we do not have to write the entire code, like if I take it, here I will write IFC React Arrow Function with Export, I will click on it, then see our component has been created, there is an h1 tag inside it. Now what we will do is we will also create the layout here Rac A the react arrow function with export and inside it I will add an h1 first and we will do this from bring from now What we will do is setup the layout. First of all, what we will do is make it a fragment. So here we are writing the syntextical sugar form of React Ragament. So what we did inside it is just empty opening and closing tag. We have created it here. Now we will What will we do , we will import the file here on the top of the layout because I am new on the top, after that there is content and below is the footer, so what we will do now is we will import this file here, can we do it simple? What you have to do is you have to write it as a custom HTML element like header with self closing tag, so we have added this component inside the layout, now if you want, you can add the layout in app.gs like restaurant website and below we What we will do is to do the layout in the same way but there is a shortcut for this also, what can you do here and then a plugin for import comes like here you will search auto auto import inside the next tension then this plugin which You should install it and keep it, it also helps you a lot, like see, let me tell you, I will write here only the layout, so see the suggestion is showing here, if I click on it, the component will be auto imported, so it will take a lot of our time. There is savings as I have written here, let's do it from the layout and once again we will join our application. Once we start Champion, our application will run on local host 3000 port. So here is our application. Now we will check it after it has been compiled. See the details further here. This is our heading, so this new bar and then the layout, we don't have to do it like this, what will we do that we will do it like this container, we have to do this like this and that. So let me tell you a little bit about what we will do inside the layout, we will add another lamp here, this lamp will be for our content, so what will we do inside it, what will we do with the crops, then what will we do directly which is props. If you destruct the dot children, then you have to write here that children are destructuring here, so what will happen after this div i.e. whatever component is this child element, whatever component we will wrap from the layout, it will be shown here, see. I will tell you in a little while how, as you have Dot JS, now what we will do is to go to the layout, we will not write it like this and convert it in the closing time, so here we have converted it in the opening and closing time, now inside this Whatever content we write, it will be shown, see what I do here, I take it inside it, okay, let's do it, let's go back to the application, here the tax is being shown equally, so you can do this in this. We We will not do this because we will add all the routing functionality which is here, we will do it in the page, so for now see, let's go to the layout and here the adult section has been created, we have also added the element. We directly destructed the characters, we got stall children, we had to write it in this way, so we can directly destruct it, now what we will do after this is that we will create some pages and wrap it and after that we will see the routing, Lakshman's bone . We will add it for now, we will change it later, we will do it for home also in the same way, so ho and han, we have to wrap it also, first let me tell you, after that we will create the page as it is, now this is What will we do instead of Div, we will wrap it with the layout, so you have to write layout and suggestion is showing, click on it, the component will be auto imported on top, if it is not there in your case, then you can do it manually. Which is this statement, import layout from excise, wherever you have created it, then import it from there and in between it will be our content, let's do it in the same way for home, I hope you understand. I would have gone again aero function reactor function with export, in the same way we have another file for contact, so we will make contact , another page, we will create here this menu function with export and here we have these created. And we will also create a page for Note Found, so new page Not Found, so what will it do, if someone does not find our URL, it will redirect to this page, so we will add the function heading of Page Not Found in this page as well. We will wrap this also with not found layout and both the things have been done here, now we have to see the routing here, only then we will reduce what is there now, we will import some things, then from reactor don, we need first of all browser router and then louds. Which reduces the container and after that the road with the help of which we can set the route. Now what will we do, from here we will remove the layout and all the data. After this, what will we do, here directly add the HTML element to the browser router. We will write like this i.e. like type browser outer, we have added inside this we will create the container of the roots and inside this we have to add i.e. inside this we have to give 5 and which component we have to show, we have to here. If we have to tell, then what will we do? First of all, we will write the route self closing tag and inside it we have properties like the property of the path, here we will write slash, what will slash mean, here we will do the same for the element and this element will give you What has to be done is to call the component then in the self closing time you add the component like if we want to show home here then we will write home slash here and also have to import the file so import home from page page. Inside we have, in the same way, we have to create the rest here, here you will write love self again, after that there will be a path, so next to it, what do you have to do, for the second one, we have about, so slash about and after that. Inside the element, you have to write the name of the component like we have about component and here we will see the option show, click on it, the component will be auto imported, if it is not in your case then manually import it in the same way . I copy paste it from Copy Paste, we have to target all the files that we have, About is done, after that we have a Contact for Contact, we have Contact, so from here, cut About and for Contact and Contact, we have If auto suggestion is not coming then you can manually import the contact from here and remove the layout from here. Layout is not required. Now you are home with the About Contact menu and page. Note found will be executed here, if you give it on the top then all the routes below it will not be executed and in this we have the component of page not found, see the option is showing, if you click on it then this add Now let's do it and test it. We haven't created any navigation menu yet, so manually we have to enter the URLS here. First and here I search about here successfully and you will see that the new bar is constant here because we have set the na bar at the top in the layout and after that there will be child elements here which are Why will it change dynamically because we have wrapped all the components from the layout, in the same way we will check the other menus also, we will see the about menu component, then see the menu page is also coming and we had contact contact page. And if I show any XAS component here like I have added any random taxi and L here and will check then see here it is page not found then successfully call us. It is also reducing the back traffic. If the URL is incorrect here, it will redirect, then what will we do for the navigation menu. If we get the component of the material, then once I search and tell you the app, then we will do it and help it. We will create a responsive navigation menu from here, as if you search here, you will get a lot of results, you can see this navigation menu is like this, we will create it and you can also see its code from here. If you see there are 10 sources, if you click on it then you will get its code. If you face any problem then you can compare it from here or if you have to create everything manually then you must see it once. So, what we will do is that we will directly create it and if we need anything in it, then after coming back, we will check the documentation, so here we will go, I will move it and what I will do on the top, I will make an import here and leave it, the water box should be imported. And what will we do inside this box, we will use the app from outside, so what you have to do for that is to write F1 here, see the suggestion is showing, click on it, the component will also be auto imported and what will we do inside it here. But with the help of type of graphic, first of all we will add a heading or you can add any text or if you want to add any text then you can add it here with the help of typography. So here we will write the type program and what can we do inside it, we can add whatever text is there like I write here, I do it from my restaurant and once we will test how it is looking and here But you can see that we have the app work components, the styling has changed a bit here because now we have to fix it, so what will we do, we will keep fixing it also, so now what will we do here. Whatever component you have, you will give it, so here you can also declare it as a component. Inside the component, you can add any type, like I write here component and inside the component, I write map it here. Treat it like this and do some styling, then with the help of SX we can do custom styling. If we have to give a color then we will do SX for it. So here I write busy color i.e. background color, we have to target it and I will refresh the black page here and the background color here has not been applied. I think this is the color in lower case. Let's check with the busy color. Now see that it is coming evenly and there is a slight difference in the size, so there is no problem . No, we have to fix this also, so what will we do to fix the sizing, here we will do it for the toolbar, so here you have to write the toolbar and also import it, then you have to cut it and hit control space, then the suggestion will show. If you click on it, it will be auto imported and navigation menu will show here. If you check then see that it is perfectly placed here and the content of it has disappeared, so now we have to fix the content also. But for the time being, look here, our people have already arrived, instead of this, you can also add an icon here, so once I check, what we will do here is that we will search the icon which is on the documentation, material icon, then this You will also have to install the package. If you want to change the icons of the material, then what will you do? Look at the screen here, this is the package, you will have to install it, copy it from here, copy this command and install the payment . I open a new terminal from here and if I click on plus then another terminal will appear. And I will paste it here and install it. Look, do we have the icons here? We have the complete package installed. Now let me close the second terminal. Now what will we do? Inside this type of graphy which is If we can do that by using the icon, we will search once, so scroll down for the menu, look a little, you will get many options, you can search from here, we will search the icon related to the hotel, here if it is related to the hotel. We are not so special, what will we do, we will search related to food, look in food and food, if we have fast food, then copy it and you have to go to the top and import whatever is there, paste and custom HTML element. Like you can do this and that, then here I will write equal to A has been done, now what will we do, we will create here, we will do something like I will add a color directly here, the color golden will be fine according to me. Let's check if there is any other option in Golden and if the combination of Golden with Black is good then we will make Golden Road and after that what can we do, we will set its variant, so here is what I do . I set its variant as h6, the variant is fine and what will we do with this component, we will treat it as a component and further as a deep, you have to add it and you can also give some spelling in it. I will do it and once we check how it is looking, then see it is visible in this way and here we will also add a little bit of styling and what will we do inside this, so what will we do, divide both of them like this. See, what we will do is first create it, so what we do here is we will add another box, then after type graphy, what we will do is we will add another box and inside this box we have to create the navigation menu. So for this, you can do it as list type or normal, if you do it with Ulli, you can do it with anchor tag, then you can do so link also, what I do is to import it above and keep it on react routeron. Import link from react router and what we will do here is whatever you will take inside this box and inside this LIC is inside we will write direct link instead of anchor link first rank home in the same way your property Also we have to add it will be on slash and in the same way we will copy and paste multiple times. After copy paste home, there will be menu, then about and after that we have to add in contact and you's property also, do menu about contact. Let's check it once, now we have to change it with the help of a lock and because of the flex group we had done, what happened to both the content which has come to our left and right and also to this box. We will give classes. What are the classes? What will we do here? We will give a little custom size, you have to do it like this and after this what we will do is, we will make it whatever height it is on mobile devices because we also want to see responsive design, so initially. This will remain visible on the desktop version and if we go to mobile, we will disable it. What will we do for mobile? We will access it i.e. we will target extra small devices and will not direct, we will do it with the help of display. You have to do that because you can also add multiples here. We can display within the display, then inside it we will target curly press and access and here we will make it naan and then when it comes on medium device or small device, then what will we do with it, we will block it, what does block mean? And once we test the responsive design also, what I do is I do inspector and start it, see like I reduced its size here, so this is which is hidden perfectly, here I am reducing the responsive speaker now. And by changing it, we got a slight effect and what we will do is give a class name because what we will do is put it in a little tighter, we will target the class name and we will name it in tighter, which we will target and With its help, we will style it a little so that it remains properly aligned and what we will do for this is that we will create a new file inside the style . First of all, here at the top, what you have to do is to report, then here is what we will do . We will import it from import dot dot and what we will do is we will target it here, so first of all We had a navigation menu, what do I do, I copy and paste the class which is next so that there is no spelling mistake on the page and we will target it by putting a dot here because if it is a class, then we will put a dot, if it is an ID, then we will use the hash. We will change the list style to 'Nan', 'List Style Non', what will happen with this, the bullet points will not be shown and we will do this, inside this we have uncle tag, the anchor tag which is there in the link actual, so we can target it. What I do here is that first I add the spacing, inside this we have a navigation menu, we will keep it zero from the top, this is on the left and right side, we want a margin, so I make it safe in 20 pixels, so see it is equal, there is also a margin here. Now we will target H, the anchor tag inside the navigation menu and here we have to change the text decoration to none and we will also change its color, we will make the color white, so see, it will appear like this and the font family too. We can change it, you can do whatever the robot is, which by default you might have seen with Bootstrap, the same thing happens with Material UI, so you can do it, what will we do for that, index method. We will target the body and here what we have to do is family and in this we will do so see it is already done here, you will have to install Google fonts, you have to search and here you will get the first link and from here what you can do. Look at the top, you will get the option of fonts, from here what do you do, robot and from here you will get the first option, actually the font of robot is quite popular and from here you select it is regular size, after selecting, you select view here. Family, you have to click on it and if you look below, you will get the import statement and see what you can do, you can add it in this way, we are robots, we have already done it here, font family here below, if you scroll. If you do this on the website, then the option shows you how you can do it, you all will know, so here our man has done it successfully, now what do we have to do, we have reduced a little bit on responsive design. We have increased the height of the menu in this but we will show it here so that with the help of which we will know what we will do, I will once again draw in case if you have not seen then draw is quite popular, you must have seen all the applications of Google. The draw component is used in it and whatever complex application you have seen, like I am telling you its example, I will click on the left side, then see something like this, when the menu opens here, when you see its position. You can set it , you can also do it on the top, so it is up to you, so we will do that and with the help of this, we will make a responsive design, then what will we do for the draw, we will create a separate function for the driver and also the state. If we find it, then what do I do? First start, which is right, I add a button, so let's go back to Visual Studio Code and inside the header section, what will we do after the icon i.e. before the restaurant, we can do this, then type this Let's make it before the graphics and hide the initials, so what we will do here is click on the component and it will be imported and what we will do inside this icon button is we will add the like icon, again so here I will search. I will take the material icon and we will have to look for the menu, so from here we will search through the menu, see the menu and related to the menu, there is an option here, a menu of the menu looks fine, we will copy it and import it above. After this I paste it and inside this button we can do this and this and let's go to the application and at the moment it is not showing, for this I add some properties, first above the icon button. What you have to do here is to add color, its color can be changed to white and what we will do here is that we find the property inside it, then we will target that too and here we will write that we want it from the beginning, I will give the margin. First of all, from the margin right side, after that we will display it here . It is done. This will be shown only on responsive design. You can see that I am reducing its size, so this icon is being shown. Now what should we do with this? If I have to handle it with the help of street then what will I do, here is another state which Right, I will create it first for the tagler, so what do you have to do? First of all, you will have to add whatever state title you have to it. Here we will write it as state and here we will create a state for it. Const. We can name it anything. Like here it is for mobile so open mobile and here I write set mobile open equal to you state and we will keep this in the bid box initially we will make it false now what we will do first let's start which is create the drawl component. Once done, what do I do for that, I create a function, we will create the function of the driver and return it directly, so before returning here, I add a comment and create a function here . And inside this too, we will do the same for the box, we can create a box and a function, it is fine for the handle, that is, there is a click here, what can we do to handle the click, we can create a function, so here. But I would comment, handle menu, click function will be created, if we are doing it then I will name it as toggle and we will make it an arrow function as toggle and what we have to do inside this is just set the mobile open which we will reverse and row. So call, here not equal, you will call the mobile and here I add something to everything and also in SX, whatever text remains inside it, we will center it in the center and inside this we can copy paste which is navigation. We did not have it in the menu , so from where do we do it? We type program and then place the second box. Okay, so let's copy this. We will copy this and the other thing. What will we do, we will paste it inside the scroll also because in both of them we have to show What has to be done now, if you are not able to understand then let me tell you that if you call then all these will be shown inside the menu, we will change its class like it was navigation menu, we will make it mobile navigation of this box. Inside, we will change it, see, don't think, we need this box, we do not need it, a single box is enough in this, I will do it first and here the navigation menu has been created, now we will call the dryer, all the menus which are there will be shown inside it. Everything is correct, what will we do now, we will call the driver which is below and our app bar is ending here, so what will we do after this, there is another box, we will add the box and what you have to do inside this box. First of all, we will give the component, let us tell you this, brother, this is the navigation menu, so here we will add the component, come phone and inside this, we will add the phone and here we have to do that with the driver, so the drone will also have to be imported, so here. Do control space and the option is showing here, we will click on it, auto import will also happen, so it has become ours and what will we do inside this driver, now we have created the function above, this is the function, so call it. If you call then this is what it is today, here you have to write as if you have to pass its variant then you can check its properties and we will make it temporary and what will we do on its open event which we have stated above . Created, it will be passed here, so like on mobile, if you click on any icon or click in the background, then what can we do, here is our handle, no problem, we can call him here, which is above function. We had made the handle topless and will add a little speaking weight, I will make it multiline like this and will add some spelling here like here we have to do what we have to do in the display, here we will show it only in mobile view. So what we will do on access, we will block it and after that we will do it on all the devices that will be there, let's do it and test it once, how is it looking, let's go back to the application, see something like this. Let's click on it and on click nothing is firing the event. We will also check its icon once. Here is its icon. This is its on click page. We will fire an event and check the toggle. Then Now at this time it should be reduced, once I request it and I will click here, then see the draw is opening here and we will have to set the size of the driver also. I think we can set this much size also at the moment and after the display What will we do later? Here we will target whatever is with, we will make it with withal, take 200 pixels, think safe and check, after clicking, we will get 100 pixels, something like this, what will we do? After targeting it, you will have to write a little logical here, so what I do here is that here we have to make changes inside the object, so here what we do is add the excising. If we can then we will size it a lot, we can also add border box and with in it, then with ₹ 200 or ₹ 240 pixel safe mixer, its spelling is us, after that here we have added dot me dot paper class which Target is done, let's check it once. Now it is reducing it to the level and here we have to reduce it on the navigation menu also. For mobile, what we will do in it is divide and add and this type will be called graphy . What we will do here is add the divider before the type graphy, so t and also import it with the self closing tag and see something like this, the divider has also been added, now we need to change this menu a little bit here. We will have to change , so here we write mobile view for mobile, comment it and what class we have for mobile view is mobile navigation, so we have to target it dot mobile navigation and inside this we will target it, first of all We have to give the list style type. Later today, there is Ali inside it too, so we will target it. If we have to give mobile navigation, then what will we do? We will give margin in all of them, you can give it from the top also, it does not mean giving it from the side, one by one. Once you check the bars, you will see something like this on top. I think you can change the font size also. So what will we do? Uncle, we will target the track and here we will remove the text decoration and change the font size also a little. Will do it 1.4 will be fine, we are giving the responsive unit here and whatever its color is, we will make it black, so see, now it is visible evenly, then it is reducing the thing perfectly, from back, I do the mobile view or you go. If you can click on this button, then from here it shows the option for responsive design and from here you can select any device like iPhone, if we selected it here then it will appear in the iPhone in something like this and its We will add a little margin inside, we need a little margin on top of it, do it in typography, add the margin here like where will we add it, let's put it inside the sex, from here I will give it from top and bottom. I think it will be right from top to bottom, so let's check by doing margin Y2. It looks a little okay, so here is our responsive navigation manager. The content has been created successfully. Will you check once? The content is hidden below. If it is necessary to fix it, then what will we do to show that content? We will add another tool bar here, so the toolbar should have a little spacing, that is, the content which is behind will go on the front, toolbar self closing time and inside this. We don't have to add anything, simply plain, we will add the toolbar here and check once, see that the content is correct and if there is some warning, then you can ignore it, we have not done that yet, this is behind the scene. Which is a package issue, you can ignore it and add contact spacing, what to do with it, you can take what is inside another box, like here I have added the box and here this toolbar. I will add inside this, you can top the margin or you can see the pending, you can see the pending, then you will get something from here in this way. There will be more pending, just do the van and let's see. Pending van: Okay, sir, we are getting the spacing here, and we will customize it, what will we do in the next, we will create our hero section, so what will we do now here. Voter will be created, after that we will reduce on hero section, so let's go to Visual Studio Code and here we will create a new file, what you have to do inside the layout is to create a new file and you can name it and here But what we will do below it is our child component, we will add it, that is, the head and portal will remain constant, so here you have to add the rodent, self closing tag and mix and also import it, see the option is showing this. We will click on here, I will squad it in the self closing tag and once we check it, see how it is looking, then look at the home page and below that we have the voter component. Now we will design it a little bit, so its For this, what we will do is let's go to the footer component and add import straightment. There is something and what will we do inside this box, here we will do it for typography, so type of graphy and inside this we will add the text, here I will write all right result and add the copy symbol, so end copy symbol . And from here the Let's take a look once by doing h5 or we will make it six later. If its size is more then h5 is fine. Now we will center line it and change the background color behind it and export it and what will we do? Text color. Whatever is there, we will make it white text color, we have made it white and initially we will make pending bed in it, then we give pending as three, let's check it once again, if it is visible in this way, then I think. This is visible properly and responsive design will also be checked once by inspector and here I click on mobile view and on mobile it is causing a little issue, I will target it, creating a separate file is not right. So what will we do, here inside this, we will also target the media curry, so here you have to write, here we will write, inside this, what you have to do is to target, we will add the font size, font size and van ram will be fine. Let's go back, see, now it is equal to A, so it has also become our responsive. If we change the size and see, it will be less than equal. Now, if we add some icons here, then I would open it again. I had closed the website, so you have to go back to the website of Material Bike and from here what we will do is if we search the icons, then there is Material Icon and for this any social icon can do it and what can I do? Deep means box, we can also do that, so what will I do, I will add another box before the type of graphics, box and inside this we will add icons, I will add the comment, I will search for icon and icons from here. First of all, we will search here and paste it on the Instagram copy top. Here you have to paste it and also I will add it here. See, like a custom HTML element, you will have to add this also, so here I am. I write 'Insta Ram icon self closing time' and after that we will take another icon from here, like here we take Twitter, Twitter is here, click on it, copy and paste it on the top and also import it. After this icon, i.e. below it, what will we do, we will also add this and what we will do after this, we will copy paste Geeta and add it here, I will add it, I will cut it and YouTube will copy it, copy it and on top. We have to paste this and we will make a custom element here, so look at the YouTube icon from the self closing tank here, which are successful or have arrived, now we will also design it a little, first we will see the desktop version, we will create something like this on the desktop. It is visible in the right way and if you notice here then it is SPG because the icons here are SVG so we will not be able to target directly. First let's do what we will do is target. Here what you have to do inside this is margin. If we have to give , then what will we do? We will give margin from the side, we will give margin from three and here we have got a little margin from top and bottom. Now after this, what will we do, we will target the niches, so what will we do within this class. If we target the C key, then for that you have to do the quotation and the end symbol, and here you can do the same for the icon, so the icon, I said that it is an SVG, so we will directly target the SVG and then You have to design whatever is inside the object, like what we will do here is change its font size because if we want to change its size, then we can change the SPG from the class of the phone, the font size and here. But I think 60 pixels will be fine, 60 pixels and we will put the cursor pointer in it so that we can also get the symbol of hand, so by doing this, I will make the head path, from the margin right, I will do it, so here our icon looks like this . Ah, you can also add animation in this. If you perform a little animation, then I will target this and write custom text separately. No need, we can target in this also, what do I do after this, I write here again and here we are targeting SVG and its over event, so here we will write four and here object now. Inside this object, you can add the value of whatever you want, like let's make it its color. In our menu, the color was Golden Road, so I will add it here, we will add animation and what will we do for this. We will use whatever transform we have, so we will transform and translate inside it and I think 50 pixels will be fine and we will smooth it a bit, what will we do for this, we will translate the transition, what will we do in it, 400 ms and do this as per your choice. I think this much will remain so, let's go to the application and a little animation is also visible here, its color is also changing continuously and we will check it in the mobile and in the mobile view it is visible in this manner. We don't need to change anything now what we will do is we will reduce on our hero section so let's go back to Visual Studio Code and we will open the home page so page and inside this we have the home page so here we are What will we do with the help of normal lamp? What will we do when we are designing? So what do you have to do for that? If you want to create a class here, then what will we do for the lamp? We will create a home class and we will target it in the normal way, if you want. We can do the same for the box as well. What we will do now is that in this file we will see an example of a normal lamp from which we are taking more family. We will make a text inside it and we are going to add a paragraph and a button in it. Inside this I I do it in the name of someone else and inside it you can write anything in the name, whatever is the website, you can write its name like I write website and after that you can make a paragraph, order neither this nor this. What will we do so that when we import this on our manual page, what we will do is first import the link component. Import link from React Router. What will we do with this button, we will wrap it with a gender, so the link component and cut it and paste it below . We will do this and put the button inside it and what will we do with it, so on the menu page, inside you have to make a menu card and you can also give a class to this button or if there is only one button directly, then we can target it. We will do it in advance, so see how it is looking, this is how our content is looking here and what we will do in the background is we will add some images. See, inside I have already created a folder with the name of images. And inside this we have all the images and you can name it anything, I will put the banner in banner from daughter, what will we do with it, we will give style here, background image in style and here inside back tick you have to write. URL and then follow thesis and dollars inside it and we will pass the variable which we have created above in the name of banner, let's do this. Let's do this once, look at the image that we have in the background and also add some spacing from the top. If it is not there then we will remove it first, what you have to do for that is to go to the header component and we had added pending here below, if you remember then I will remove this pending, you can see it in this way. Which is the exact body, you body is fit, we will get it, we will target it, so first what will we do, we will target the home because it is our container, we will set the height in it, I think we will make 90% of its height, 90 means view. We will display the flex tightly and here we will justify the content in the center and what will we do with the items inside it, we will show it on the left because on the right we will have images and on the left we will show the content, then we will write lines for it. Let's do it from the item left and check it once, then see everything is equal. On the left is our content, height which is not applied. Let's check it once and we have not imported it nor will we have to import it. So import it first. Dot Dot Kaas So see, here we have the size A perfectly but the content is not lined up evenly, so we will fix this also, let's go, we had left the left direction, we will set the direction here and this We will do columns and what will we do to the background proposal, we will center it. Background position will be made center and no repeat will be set in it, background repeat will be set in background repeat, no repeat and will cover the size of the background, so if you want, you can also do the same in shot and properties, here I am making it long and Let's check once and see that this content is showing equally, which is our equal, which is also on the left line and in this we will have to make further changes, so now what will we do, here we can target the header container, so else and we have Only the header has been given, let's check once, see, we will target this container and we will auto make the margin left here, 30 pixels from the left, so we will also get a little margin from the left. See, in this way we are also getting the margin here. Now what we will do is we will target h1 here and will make its font and size a little, will justify the content in the center, justify content center, hug the item center and font weight which We will make it bold in the same way and I will also add the font size here. I think 70 pixels will be fine. Let's check once that 70 pixels is safe and 70 pixels is fine. Let's leave it as it is and inside this we will add the font. If you can also add a family , then we will add some other font here, we will add the font family and see the option here, we are showing the option, we can do any of these like Giles Sense and whatever color will remain, it will be black, so see something like this. The title of our website is visible from here, so you can add your title here and see below, there is a description about it here, we will change it a little bit, so we have to target the paragraph, that is after them. In this we have header container and paragraph font size I think above we have made it 70 so if we keep it a little small then 40 pixels will be fine and if the font weight is bold above then we will lighten it a little so the font weight is lighter and in this also the color is black. We will do it with color black, once we check it, see here it is visible in this way and we have to reduce on this button also, so we will have to target the button also, so here what do I do again Home If you want, you can also target the header container directly and we will target the button directly. We have not created any class for it, so we can target it directly. What will we do with the color button also? Black We will do this and will also give it a margin. 20 pixels from the top will be fine and we will make the border of the button Naan, so make the border Naan and round it a little, then you have to add the border radius. Border radius of 5 pixels will be fine, more also will be fine. We do not have to round it and we will make it whatever the cursor is. From here I also change its height and weight, then we can see a little effect. Let's make its height 50 pixels and its width will be 180 pixels. So maybe start with that and make the color inside it white and I also increase the font size a little bit, make it 20 pixels, then see, it is showing evenly and its color does not change. Let's check the background color once. Okay, we have made its color black, right here, we will add its background color with black, so see, it will appear something like this, here is the title, then sub title and here on the order button and We will also add it, so what you have to do for that is to target it again, respect is the container button, so on the over event of the button, we will select it and here also what we can do is change the background color, so here you have to What we have to do is the background color and in this we will be able to do zero seven zero nine zero and then what we will do here is we will add a transition inside it so that we can see the animation of over a little bit better 0.3 seconds and we will make it in this, let's check it from this one See how the bar looks and when you do it, it is very normal. I also change the color of the button in the animation a little bit and what will I do with it when I light it, then I use the hex color here and do it with #121619. Now see something like this. You will see the effect. If you want, you can add any color of your choice here and I think our content section has been created and once we check it as responsive, it is not visible equally in inspector and mobile view. It is giving, we can fix this with the help of media, so what do I do below, I add comment here, who will target the mobile next week? Max with off. ₹67 because mostly ₹600 is the pixel size of a mobile device and inside this we will target the home, first what we will do in the home is we will center the content, justify content center line items center and then target the container, take a look. Let's take a look at how it looks, everything will be centered here and it is of very big size, so we will have to fix this too, so we will make the header container margin left zero, whatever is inside it, make a small box and see. We will take it with you, we will make it 80% online and we will make it in normal color, let us check it with white, look at it once, it is visible in this manner, we will also reduce its font size and see, only then you can understand it better. Now what I do is I reduce its size a bit so that we can see the entire device and we will target h1, we will create the error container h1, inside it I will make the font size 40 pixels, I will make the font size 40 pixels height. 30 and this is the height, in the margin I add 15 pixels from the top bottom and zero pixels from the left right and we will make its color white, we check it safe once and here it is not applied, let's refresh and here The end is sticking, so you have to give space after that, only then whatever is our media, whatever is there, we will do it with less, let's go back, then look, it will appear something like this, something like this, we have added the box in it. We have added it and we had to color the h1, so it is not applied. Let's check once. [Music] should be applied. Here we will target the home also, so see, now it is happening smoothly and Here we will also target this paragraph, you have to come down and here we will write home, then inside this we will have a header container, then paragraph and paragraph and we will reduce the size a little bit, we will make its font 30 pixels and its color will also be We will make it white, so see it is showing the same, we will change the button also a little bit, the base container is inside it, what we have to do with the button and the button is to give the background color first and we will make it white color in the background and its We will make the four color as 121619 which we had given above and will give a margin of 30 pixels from the bottom, it will be fine, if it is more then we will change it. Just see, it is visible in this way and it looks fine. Let's change its device from here, if we did iPhone, then it will appear something like this on iPhone, something like this for Galaxy Android, whatever is on ours is looking fine, click on order and you If you want, you can give more pending inside it, like the heading which is in the response, what will we do on it, we will give margin, we check 20 pixels from the top and if it is not applied from the top, we see it inside the header container once it is done. Whatever is there, let's make it 90. First, something like this, whatever is there will take more weight and what we will do here is its margin, which is there, we will make it 30 from top and bottom. So see, it is visible in something like this and It looks fine, if you want, you can reduce it as per your requirement on Responsive Design. Our hero section is complete here, now what we will do is we will reduce it on the about page, after that we have to reduce it on the menu, so let's move on. Let's go back to Visual Studio Code and go to the About page. Here's what we'll do. First let's start by adding a box. The box will shrink like a container and inside it we'll add our contact and also import this box. You will have to cut the So for this we will do the typography, I will click on the suggestion message, it will also be auto imported and what we will do inside this is we will add the text like welcome, my rest, you run and some paragraphs here and here I will add extra. I will do this, we will take a B tag for the line break and again what we will do is we will take the paragraph tag here and inside this again you have to write Lauren 100 then the dummy tax will be generated here from and once let's check our about . How is the page visible? From here you have to click on About. So see, this is how our About section is visible. Now what will we do with it, we will customize it a little bit, first what do I do in the beginning, I make it the heading. The type of graphics that we have added will be converted into heading on the top, so what you have to do with the graphics is to add whatever is in the variant, here you will write the property of the variant and here we will make it h4. If we check the shop then See, something will appear like this and what we will do after this is that we will style the box a little bit, so what you have to do inside the box is to write SX here because we are doing custom styling here, so like this and what we will do inside it. First of all, we will add the margin from the top and bottom, then we will write it down and from here we will make it 5. Now this 5 here is the family property, let us fix it. Now if you want, you can write it in pixels also. So, I thought something like this on the punch, we will make it bigger, I will make it 15, 15 from the top and bottom, we will get the margin of 15, so look, it will appear something like this and we will also change the text a little. So what we will do here is we will target the text, we will hug the text from the center, everything that is in the center will be visible in this way and in this we will also target the h4s and make it bolder. Here, inside this you will see What we have to do is to add the quotation and after that again we will create a new object here, what we can do with the help of And N is that we can target the element inside it , see the variants here, so we will We will target a lot here, you will not see the difference in this because the heading is already bold by default and we will target the paragraph later, so here we will target the pay and be type here and inside this paragraph you will see What has to be done is to justify the text as it is, text is alive and what we will do in this is we will make it justified safe and see here the text which is there has been justified and we will also add a little margin pending, we are here. What I do in four is that first I start with the margin which is there, I add it to the top and bottom and I also make the font size a little bigger. I make its font size and make it 1.3 Ram, it will be fine, somewhere around 20 25 pixels. This will be very small, let's make it a full em, ok, now around 32 pixels, ok, some more difference is not visible in it, ok, let's leave it and will add pending, apply a little in the direct box. If you do this then we will get the inner margin also in this manner and you are okay, if you want to give anything else in it, then you can add it and here our about section is visible in this manner, once the mobile device But we will also check, from here I convert it to mobile and it will appear something like this in the mobile and the margin is coming from the top, if we remove it then there are not many classes. What we will do directly in this is that we will target the media, so here you have to write @media then palanisis and inside this , what we will do is target the device, so here ₹67, whatever device is below this, we will target it here. We will reduce the margin which was on the top to zero. Check it once. Now it is available on mobile device also. You can check it. If you do school, it is showing perfectly here, then you can change its size also. Welcome. You my student, if you want to target this also then you can do it directly. What will we do here? We will target the font size inside this . Safe is quite small. Let's make it 1.3, 1.5. Now it looks fine. Look, welcome to my restaurant, after that there will be any text, what is about section, whatever website it is, a little detail about it is here, so our about section is perfect, which has been created, now what will we do, click on contact. Once done, let's go back to the Contact page in Visual Studio Code and what we will do in this is to add the box again. So you have to add the box here and will also import this box. By cutting the X, Control Space will show the suggestion. Click on and a paragraph [Music] is visible. Let's see in the contact page, something like this is also visible at the moment and there is nothing inside it, so first we will design it a little bit, so here some classes on the box. We will apply it like this and will give it, I will make the margin from top bottom to 10. I have got the margin from top bottom and will set its variant. First, in the type graphics, make the variant h4 and also something else. It is looking fine and I add a little margin from the left side, then I will target the margin left for here and see if I think it will be fine from the bottom, first add the table and then if you want to do the designing. So let's see this and this which we will wrap with a box, first another container, we are creating a box and inside this we are going to do the table, so here you have to write the table container and what will the table container do to the table. We will do the content, inside this we can create a table and after that you can tell the type of this component, then we get the type of the component, so here we will write paper and paper, here we get the material from Y. Do control space and import this also from Material UAE and after this what will we do with the table, so table, you have to import this also from Material UAE and we will add area level in it and make it contact table and Let's raise it a little bit so that you can see it better and inside this table, first of all is the table head, so it is a table, import it also. Hey, what we have to do inside the set is to define what all the things we need. First create a table row. Import this also. What should we do inside the stable row? Well, it is not imported. Import it from double control space. Now it has been imported. Inside this, we will create a table cell. Inside the cell, we will keep our details. Here you have to import the table cell also and what we will do inside this table cell is the contact details, we will add a heading, we will do it with the contact details and once we check how it is looking then the table. It is visible something like this, we will also design it later, as of now it is completely stuck, so let's create it first, after that we will design the table head. Our table head is complete, if we create the table body then This is bulb body so mix which is table body in capital and import it also inside the table body also we have to create a table row so table row and inside it how many cells do we need then we have to add it here table cell And the first one is Lehenga , if we can do it, then I can do it, and from its documentation, what will we do, material icons and the first one, we will do it for helpline, so here I see something like I can check by supporting, support and see. There is a support agent here, so we will copy it and you have to import the topic, I will import it here, now we can do that, so let's go back and add it to the table cell, support agent icon, self closing time. After this, we will add any number here 1234 56789 0 What do I do by giving space but I write in it, after doing toll free and check once, see, it is visible in this way and in this we have If you have to do styling, then first give color to this icon, after that we will reduce the rest of the containers which are there. First of all, add the color here, we will make it red and give it a little P. Let me make a van here, I will give a little bit from the top because the icon is moving a little bit up and down, see how it looks, there is a red color icon and here our text is visible in this manner, what will we do in this manner? If we add it for phone and also for email, then first we search the icon, from here what you have to do is to search for email, look at the email, there is an option for mail, click on it and copy it. Import this and this on the top first and we will do that. Let's go below and I will copy paste this table cell. Copy paste will change the icon. What do we have to do in place of this icon? We have to write here mail mail. We will change the icon and its color to sky blue and here you can write anything in the email, you can do it from jaise.com and cut toll free, we will check it and take it to the new row. It will come side by side, so what I do is cut it, first cut it and create a new table row, table row and paste it inside it, now what is there will be visible under one, see the phone in this way. Done, email is done and we will add an additional phone number, then first search the icon for them or check for the call, see the call, there is a call here, copy it, paste it and create a table row. We will copy from here its name is call icon and its color. We will make it green and here we have to add the number, so what will we do, we will make it any number of 1800, which is toll free in India, only for calls, it is being shown in this manner, now design it a little. Let's do this, first of all, what will we do with the table, let's start by reducing it a bit, like the table is for contact details, so what will we do in it, we will add some styling here like we will make the background black and We will make the color inside it white, you can also do tax center, we get the attribute, we get the property, we check it in the material join, whether it shows in the suggestion or not, then see the controls space by writing, if it is absolutely available then this. We will do it from the center, so see, this is how the show is being done in the table, we will have to set the height and weight of Pinna, only then what is there will be visible properly, so what will we do, we have given the box, we will target it, so in line. Style, we are looking at the box and we will give margin inside it. We will check that the margin of 3 will be fine. Once we see the margin of 3, it is visible from all sides and now it is looking fine. Our contact details. Let's check the form and make it a little smaller, it should be 600 pixels. We can give it a margin only from the left side, so we will make it margin from the left side by 10. So see that it is lined up evenly and It looks fine and we will check it once on the mobile. It is also on the mobile and its size is getting too much in the mobile. Okay, so it will have to be fixed, so in the media curry, we will target it, target inside this. Let me do this @media and here Maxwell of 600 pixels, what we have to target inside this and what we will do here is its width, which is 300 pixels, it will be fine, we will halve it, let's check, so see exactly. Here the restaurant is being shown in the contact and these are some of the details that we have received and if you want to change it then you can do so. Just see on the mobile something is visible like this and here in our If something like this appears on the desktop, then it is fine. You can customize it as per your requirement. So, our about page is done, after this the contact page has also been created. Now we have to reduce the menu components on the menu. But before reducing, what will we do, we will create a data file in which we will keep all the data, that is, whatever food we want here in the menu list, what will we do for that, we will create a data file, inside it we will include the description, title and price. We will add and extract some files with the help of map in the menu component, so what should you do, create a new folder inside SLC and you can name it data because we will have data in it i.e. a We will create a file of data in it and you can name it anything, so I will keep the data itself and what we will do inside it is that we will import whatever images we have, you will find the link in the description also, so you From there you can copy paste it and here you have to import all of them one by one, there is a folder of images and inside it there are images, so you can do that, then import and we will name it, we will keep the file in the same way. You have to add it, what do I do but I do it, so here I have added all the images, here you can see I have added six images, if you want, you can add more, here only We will add six. Now what we will do is create a variable and also I will export it. Export cons and we will name it menu list and this will be there. Inside this we will have object and inside this object we will have name. So whatever dishes you have, you can add everyone's name one by one, whatever you want to add, after that you can add it in the description, description and here I will do Lauren's, so here I will I will look and after writing 10, I will press type here, see that the dummy text has been generated, so what will we do here, there is so much text, we will add it in single quotation, here we will add the image and what is inside the image. If you want to add its image, then look at the top, we have added all the images, so you simply want to target it, then here the title of the image will be there, then whatever food is related to it, we have added it. Whatever images you have imported on the top, you have to add them in the same manner, here we can also set its price, price and will make it 200 and when we copy and paste this multiple times, we will give it three. If you have forgotten Four Five and Kama, then add Kama. After that, where the object is ending, we have to add Kama also and you can change the name of these dishes and you have to change its image also. Here I also change the image, so according to the name, I am changing the image and the price, you can keep anything and we will change all the objects, so here whatever you have imported mixer in the same way as it. If you arrange, you can see what is here, I have changed everything and inside the object, I have added the text here related to its image, you can name and describe it, so here our data object is created. Now what we have to do is just map this which is inside the menu list component and our component which is in the menu list will be ready, so at the moment you can see that the page of our menu is empty, now here. With the help of the card , we will show our menu here. Let's go back here is our menu page. What we have to do in this is that first of all we will add a box, what are we doing for the container. If you want then you can do the same for the lamp and import it also. Cut the If it is not there in your case, then you can import it manually. We have added a box. Now what we will do inside it is that we will map the menu list, that is, this is the data, we have a variable inside it, see I am in the new list. And if there is no default export then you will have to add it in this manner, first import it dot dot , we have to import it in this manner, now what we will do is what is here, what we will do with the help of map method, inside this What will we get? If we get a single menu, then we will access it and I will make it in lower case I character, it will conflict with the material c menu, so here it will give us a single menu. And what we will do here is that we will directly return whatever it is and function and paranthesis, what does it mean that we are directly returning whatever this is, now what we will do inside this is we will take the card, so here you will also have to import the card, so Go to card control space, we will show the suggestion, see if you are getting the option from MUI, click on it, it will also be imported , close it, see that the card has been accepted and what will we do inside this card, inside it is the most important thing. First we get the functionality inside it, then its output will be like this, you will understand what I am talking about and what we have to do here, after this, if we want to show the images, then first we will show less images and also import it. See here, if you notice, everything is getting imported and in this card medium, what we have to do is to extract our menu list and look inside the menu list object that we have, we have an image object in which we have added the image. If we have added the path, then we will tell it here, so first of all, what we will do is, we will set the size of whatever is here, we are looking at the SX custom styling and we will set its minimum height here. Will give 400 and you can also set the minimum width, I will only set the height so that the size of all the images is the same and you have to tell its component, then here you will write computer, this is the card media, which component is it? So here I make it for a while and here what we will do is we have got with the help of map method and inside this we have image and alt also we will provide here if character bonding shows. The name which is inside the menu, we have menu dot name, then alternate here we will show the text of the image and once we will test whether it is visible or not then see all the images are coming with us, the size is quite large. First we will fix it, what will we do? We will extract everything and then design it. So here we have the images. Now what we will do is create the card body. For this, we have to import the card content here and what will we do inside it. Whatever content we want to show in the card, we will add it here. First of all, we will take the typography and what will we do inside it? We will show the name, so here we will target the press menu, here we will have to tell the characters, they will show in very small size and we will make it next five and we will also give a little gutter size, so here you have to write gutter bottom bottom. We will get a little gutter from it, we will get space and we will target the lamp which is next to it, so the component is ahead and we have to reduce the lamp here , so we have told the lamp inside the component, let's do it and once we will check how it looks. If we scroll down, see here the title is being shown evenly and if you notice that we have taken it inside the card action, then in this way we will get to see the replay effect, after that we will also add the description. So again what I do is I will add the typography here, let's scroll up a little bit and inside this, what we have to do is to target the description here, so I will also set the variant of the U turn description here. Here the variant and its body is like this, we will make it like this, we will make it like this and we will lighten a little bit of its color, it will be more visible, first let's check how it is looking and it is looking fine, let it be as it is . This and its size which is we will change it to be quite big which is the size A otherwise what will we do with the card which is here Maxwell we will set it and check it so see something is coming like this and here By default, the direction of our flex is the column, so we will make it a row. If we write directly on the flex, it will be in a row, so what you have to do is to flex the display here. The display is black, safe or not applicable. It checks the spelling once. I will leave it as it is, give a little margin and see if it reduces the margin first or not, otherwise if you do the margin, we will get margin from both the places, left, right, top and bottom, then the margin is being reduced equally, what will we do? In our container, we will select the box, we will find it on the top and this box, we will give it a property like What is different here is that their sizes are not matching, so what will we do about that, we will make it responsive, inside this we get another property, if you have seen the flex, then we have one more class which is wrapped in it. If it is found then we can do it, so here I write flex and we will do it with and once we test it, then see something like this will appear here and we will do it in the center, okay in the center. What needs to be done is simple justification, so I do it. Once the responsive nest is created, inspector will see it, the response is also decreasing equally and we will make it a mobile device. Something like this will appear in the mobile device and mobile. If you want, you can also add a title here, but I don't think we need to add the title and it is ours perfectly. Here the menu page has also been created and what we will do here is by changing this icon also. If we give a little word, then what will I do, I will do it and you will find this file inside the images here, see people dot SPG, this is the icon of SPG, what will we do with it, we will add it in the header file, so where But we just taxed it for now, so instead of that we will tax it, so see here, inside the typography, we have an icon and then there is text, so let's remove it, instead of that we will take the image tag, so first people should also input the above. And here after the MUI I import it, I import the folder of flash images, inside it we have the file of logo.spg. Now what will we do in the source, we will give the path of the image here, cut it, people here. The variable that we have just declared above, we will give it here, we will also set its ID in the alt, you have to write here the height and the height, we will make it 70 pixels and we will also set its width here, so you have to write here. Let's make the para and width of 250 pixels enough and test once. If we do this, then look something like this, these people will come to us and we will also check once on the responsive mobile, I do that and our number is not there here, so in this, we will get to see people of my restaurant separately, then this Let 's do this with the gate, what to do is copy it and for the response we have defined above, we will cut it, paste it inside it and reduce its size to 200 pixels. Here, because we have less size of the driver, we will reduce it to 200 pixels. Only the linter's warning is also showing because now this icon does not exist, so we will remove its import. Let's go to the application and see something. In this way, the icon of our application will be shown which is looking fine. You can see a little about our application here, it looks good and what can we do here, we can also apply the class of the active key on the navigation menu, i.e. Whenever we click on it, we can show which page is active, so what we will do for active navigation here is that we will replace the link we have in the header with a new bling, so what you have to do first of all. And after that, where we have given links to it, what will we do instead of that, we will navling it, what I will do here is I will press control, then all the links which are there will be selected, we will cut it and here we will do the same . What we have to do inside is to make it active, so here we have to name the active class, and inside this we have to create the class of active, so whatever you want, apply it on all or even on one. So it will be done, there is no problem, do this and take it in header style. What we will do here is that we will make the class of active as active and inside this you have to change the color. Color and in this we will make it golden road and make it important if it is important. If you do n't do it then it will not reduce, change the link also like there is a link here above, you have to select it with control given and we will nab this also, nab link and active class name here and you have to add active in it. And what will we do from above , we will remove this link, now we do not need it, let's go back to the safe application and check the response once. What you have to do here is to select the mobile and if you notice here then See, here the links will be activated successfully, we have created all the applications, you will get its links on Getup, so mix and compare the source code, if you face any problem, then this was all in this video. I hope you have understood, so make sir, subscribe the channel and press the bell icon so that you can get the notification of the latest video, I will meet you in the next video with another project.
