Hello. So in this video let's now start developing the login page. Of course the login page design will be up to you, you can design it as you want. So let us to make it bit simple. Here is a title which will appear I can see, for example, school logon. Okay.

And say it's a form, I will add. Maybe panel splitter can split the pitch to be some buttons or top and body. So it's a benefit splitter I can see for example, position 250 can make it vertical and horizontal Okay so first support will have sidelights the local some byte IDs if you want. So you can add here in your faces when you grow out. can make it vertical. Okay, so we can add image and we can select our logo.

Okay. And maybe after that we can write maybe I'll take this we can write School mean school management system as a title. So it is depending on what exactly you want to do. We can add some spacer here. This is can beam maybe style color can add color white and we can make it a bit dark. Okay and her font size here can make it large and to wait all okay we can add like cancer oh and CES both of the team with Bennett group do it because I want to add like background color covers versus hoses so we can add maybe your background background color we can be quite of color can make it like straight one and you can add here Bennett group yeah and makes a bag good own color for this to be white or it will iterate and we can add Just to space out with some space will be the height of this to be maybe 50 and this is the vertical Of course we have to run and see how it looks like.

But you should imagine that the first part here, I add the logo, the logo should be in this top here. After that, this should be vertical. So offices I will add some spacer, maybe we can make it the height thirsty. Then I will add the school it will be in this part of course I will make it to make some change for this. After his name, I just add a bit lighter color So what we can do we can surround this because this name will be aligned fully to the left so I need to be make it bit in the middle so we can surround this with Benny grow outwards and it will be horizontal. And we can add spacer to that will shift the text a little bit to the middle and the width maybe 100 Same as a title.

I think it's really in the localities up on the corner we have to make it bit downwind and the bit lift so I will add here like a spacer. So top height would be 20 and we can surround the logo with bending group the our horizontal Okay, and we can add space or maybe with 20. So now this logo is a little bit down from the top a little bit shifted right in the spacer, then our mean thickest, then this just like a color for a bar color. After that in the center, we should have our own login. So we can add like, there is another component I need to tell you about it is better when it's actually out to stretch the content and it will divide the page into five parts start like this. This is Start, End and top, bottom and center.

So it divides your page to this parts. And if you want you can control the width of the boards like here. So in the bottom we can add Reich copyright tickets, maybe just add if decreased I would put stickers in there Copyright 2000 whatever. Something like this in your copyright you want right here or any ticket so bottom, you can right in the center we can add our own for so we can add here banner for the hour and the sides Bennett for we can add input thickest With tickets and in the footer we add on bottom for flow so this is should be Logan This is should be username. This is should be possible of course. So once we run this we will know what exactly things we need to do.

I guess this platform position will not be great but let us at least have a look on this login and see how it will look like. Okay, so as you can see here, this is our login page. Okay, so I think we should increase The height of this and maybe we will reduce this color and the form should be in the maybe here or in the middle. And this is our copyright or any any word you want or any tickets you want to write. So let's go back and update this Okay, so now let's try to surround this with Ben in probably our okay let's have a look here okay. So we need to admit being the center.

So let us carry make it this horizontal and here would be in the center exists okay we said we need to increase a little bit this we can make it 300 and see how it looks like we can just do this we can just change it to maybe cover a or right there with something like this okay so let's have a look now was this it didn't come in the middle okay all this Bennett splitter but it is only okay so as you can see, here's a splitter okay so we can hear at the vertical here we should add like a spacer between both of them like this piece or between this and this to this piece or how It would be maybe 50 Okay, we should turn this back again to 250 Okay, so at least we added some some space here there's a surrounds this as well it was better globally out do it soon and here we'll be in the center let's see how it looks like okay so no things still okay this is a spacer should be part of this color, red color.

So, here Where is the spacer which we add? This is as vicious spacers should be inside this bin vertical sensitivity Cover with a red color like this, but this is still didn't come in the center. So maybe we need to add like a spacer here, okay with with 500 so it would be something like this as our login screen. Our login screen looks okay, now. So next video we will write the code which will check the username and password and go to the dashboard so see you next activity