[Music] second video series uh where we are going to create our very first page on our now experience and i have uh millap with me hey milap how are you hey kid how are you akash i'm fine thanks for asking and so what we are going to do today is we are going to create our very first page login page that we have selected on all throughout in our experience and for that login page we have already uploaded one image in our image database and we gonna give this image in our links to download when you are playing with now experience so what i'm going to do is i am going into ui builder i have already selected my panda tech and i am going to create our very first page and this one what we are going to do is login page we don't need to create any kind of page template but we can obviously create we can obviously use any kind of page template in future pages let's create this one we obviously don't need any kind of page uh parameters and variant so we'll just click done and here what i'm going to do is i'm going to select the container and inside this container what layout we gonna choose so for now for this demo let's use the uh last but one yeah that's the one with uh the banner and the sidebar yeah so we'll put all the banners and everything on the left and right hand side would be for the to key in the username and password okay great so now what we are gonna do is we are going to select here text i think we should choose this one slice text and here let's say welcome to pond attack yeah and now i can use styles here to make it centralized or styles but but uh we will use something even better uh to make it centralized so while if you see on the left hand side there is the the container section there is a main section click there and here you just say align items center and there you go like whatever you put in there it would be centered okay great so now i'm gonna put another slice text and let me put it as where pandas meet technology yeah and obviously we can change the tags here instead of h1 h2 and anything we can put it as a span as well so it will have the styling obviously and let me save as well but uh and can you uh just do me a favor like add this uh font size let's just put uh style as you mentioned about it so let's let's put a 20 pixel styling to it font size yeah yeah it is giving me uh it is giving me helper functions as well here yes perfect okay now we can go ahead and add that that image after that yeah image here i'll select i'll copy this name that i have uploaded and obviously i can put any kind of fitting css here as well i know hey it's come here wow it's looking great let me just save it now let's do one thing let's add login header itself yeah so here uh before you do that i would like you to put some background color to it right so it looks better so while the sidebar selected would you mind uh putting some css properties like align item center yeah then put like a background color as a color as like white smoke or something white smoke just just say white smoke white smoke oh yeah we are having direct colors as well great yeah and if you can do it on the top as well like you see that justify say content just put center there okay so yeah that's that's one thing which is not there so you have to add it manually but it works so just say justify content so basically what we're doing is whatever content we put there that should be centralized from vertically horizontally both so that's what we are doing right now and then we'll add the component so here also we'll just add one component let's see again the style has text yeah yeah that's my favorite one and just say login to proxy something like that here also you can say span tag okay this pan is so very little okay what we can do is in this type yeah let's say font size is 36 px though we should not play with px but that's fine for right now padding again 30 px usually i would suggest to go with uh rems and something like that so you know yeah as well let's say 600. that's good now it's good enough now i have saved this one and what we are going to do is we are going to now add login uh login component okay so here if we want to add any kind of logo or anything or otherwise we can have it in this way and uh we can also put uh ssos as well right here correct that's correct like uh yeah forget password and stuff like that so we'll play around this component more definitely uh in in later series is but yes you can certainly do that all right a bunch of properties here so i have also saved this page now to test it out i'll just open our incognito window and here i'll have my instance and my url is now slash panda tech if you want to put login that's fine if not that's also fine so right now that that is one issue that you guys will find that you are not able to view your login page even if you change it it has redirected it but our page is not found here the reason is still this page is not public so in the next video we are gonna see that how we are going to have our this page as a public page but but for for now uh before we end or not right just close this window and while that session is open uh can you just click on open there okay it should show up here yeah yeah so this is how it's going to look like yeah it has already said that my session has expired i'll click on login and the best part is without you doing anything it just works if you have sso setup behind the scene that login just just works yep but in the next video we gonna see that how we gonna have this as a public page yep