hi guys in this blog we're gonna style our this login page so first of all what we need we need a font so i have used this open sense condensed so i'm gonna use this one so i'm just gonna impaired it and copy this part and go to our code and go to our index.html and just paste in in here and and just save it and use this font family for this part i'm just gonna copy it and go to our index.css and i'm going to use remove this part and just paste in in here and we're gonna use also this padding padding will be zero and the height will be 100 view height and and i'm gonna give this background clear of hashtag ffff now this is part is done now in here we're gonna create a new login style city in here so in login we're gonna create this login.css and i'm going to use this part so that we can see what we need to do so i'm just going to use this import import dots last login dot css now in here what we need we need the class name i'm just going to give this class name div logo sorry law deep login just as the company said so that we can know what's happening the systematic way to give anything now in here we're gonna give this width to maybe 30 and 300 pixel yeah 300 pixel and height and height can you can give 400 pixel and the display will be a flex because flexbox what we need and the flex direction will be the column part and the justify content will be spaced evenly now we need some margin top for this part and you can give 10 view height and for alignment purpose of this part you can give mars in to zero auto and also the border what we need we need border one pixel solid uh the color you can give hashtag dbdb db there's one more the maybe yeah now what we need we need the broader radius we can give border radius to maybe 5 pixels now we also need the padding purpose so we can give the padding can be like 10 pixel now in here in this part we gonna give this class name of dave login logo and in here i'm just gonna give height to be 50 pixel and width to be 50 pixel and align self to the center now in here for this part we don't have to give anything we're gonna just give the input part so in the input tag what we're gonna give we're gonna give the what we need the input width to be you can say 95 percent 95 percent border to be the same as the the login part so i'm just gonna give hashtag dbtbtv now the padding padding you can give 5 pixel and also the also the margin to be so that there is a space between all the input tag you can give in to pixel 0 and also the border radius you can give for the radius to be you can give 5 pixel and next part what we need the padding has been given okay background color you can give background color same as the body part you can give hashtag ffa now what we need we need the box zero to be none oh sorry box shadow to be none now this is what we need now we can go to our button button part now in button what we need we need the width to be weight to be hundred percent and margin you can give more than you can give five pixel zero and the background color you can give dozer blue and also what we need um the font family right we also need font family for this part only we need open that we have given in our index.css i'm just gonna copy it and use it here and also give in here now yeah that's it what we need maybe the padding also what we need so give the padding to be 5 pixel yeah now just save it and maybe go to our browser then we can see what it looks like oh yeah this look good now there is also some things maybe needed like we haven't like save it right we have saved the index.css yeah okay what we need in here that we can just give this background color off to be white if we just save it now it's look good right now what we need one more thing is this login to be like this to be like font weight font wait to be 600 and also the border to be none yeah this look good and also the color yeah color to be white and also border radius border is to be 5 pixel maybe 98 percent is sufficient for this part yeah also maybe you can give this width to be 200 pixel and give this 300 pixel now maybe it looks nice maybe yeah now this can be uh can be done by using these points you can give 20 pixel and you can now now give this part to 100 pixels now if we just save it yeah now it's look good so yeah that's how the styling has been done for this login page we're gonna see more about our project in our next blog so let's thank you
0 Comments