twitter login

How To Make Twitter Login Form With HTML & CSS | Web Development Tutorial 2022

hello guys welcome back to my youtube,channel in today's tutorial we will,learn how to create this amazing login,page design,using on html and css this login page,designed for,twitter also when you go to twitter,login i will show you example of this,login page,so if you type twitter login,page you can see we have similar to our,own okay,so this is what we are building this is,the login page that we are going to,login from that will create using only,html and css,also you can see we have this similar,one to this one,you can see here we have the logo of the,twitter twitter logo also we have the,sign in with google and sign in with,apple or,you can just sign,phone email or username,also you have this don't have an account,and we have the sign up,also,so we'll create this login form using,only html and css so kindly before,starting this video kindly do subscribe,to our youtube channel and also share,with your fellow developers so without,wasting time let's start the video hello,guys welcome back again so here i have,created one folder called login form,inside this folder i have two,logo that is for apple and google,let's open this folder with our text,editor so i'm using visual studio code,so inside this folder we'll create one,file,called index,dot html,also i'm going to write the basic html,structure,i'm also going to give a title for our,tutorial for for this login form okay so,i'll say twitter,login form,and also we need to link our css so i'll,create another file called,style.css,and let me just remove this also we are,going to add,our link,we're going to link the css and html,by using this link tag,next i'm going to write i'm going to,create one div with a class container,inside this container we're going to add,another difficult,box and also we'll add another book,another class called box one,inside this div we'll add the i tag and,also for this one we'll give it a class,called,twitter okay,so simply i'm going to add an icon here,so i'll go to this website,called icons8.com,here we're going to search,twitter,and after this we need to find the,twitter logo so i'll choose this one,so not this one,let's just search again,so i'm going to choose this one,and simply i'm going to embed html,and i'm going to copy this,okay paste this fragment into actual so,i'm going to use this url,so let's come back to our text editor,i'm going to add the between the i tag,now simply we have added our logo,next we need to create is a button,inside this button i'll add img,and here i'm going to add my,first,image that is,apple now we're going to add google,google.com,google.png sorry,also we don't need this let's just,remove,and here i'm going to add a width of,19.,next i'm going to add a span tag,that says sign,sign in with,google,now let's save this,and go back to our folder,now let's simply open this in our,browser so simply double click it,now you can see we have our logo and,our sign in with google,next we need to add for we need to add,another button,so i'm going to,simply copy this button,and,simply duplicate it,and change the image,to apple,also i'm going to say sign in with,apple,next at the end of this div tag,we need to create a h5 tag,and here i'm going to say,or,and this way we create our input,validation okay,inputs i mean inputs,so next i'm going to create one d with a,class name box and i'll also add another,class called box2,inside this div i'm going to create a,form tag,so we don't need to add action because,we're not dealing with any php here,this idea i'm going to add my input and,the type is going to be,text also i'm going to change this one,to placeholder,we don't need to add id so just move id,that one and inside this placeholder i'm,going to add phone,we're going to add email,or we can say username,after this form tag we need to add a,button,for this button i'm going to give it a,class called,next,btn,also i'm going to say next,at the end of this give tag i'm going to,add a paragraph that says don't,have an,account don't have an account,so let's say like don't have an,account,and i'm going to add a,tag,that says and we'll add a text that says,sign sign up,so if you don't have an account you can,sign up okay,simply save your file,come back to the browser refresh it,now you can see we have our form but,this doesn't look,cool so we are going to add some styling,so by the way this is our twitter,sign-in sign-in page okay,so if you actually visit the twitter,sign up page you can if you try to log,in you'll see this same login form okay,so let's add some styling,simply before i do that we need to add,our next button here and for this button,i'll give it i'm going to add that text,that says forget password,okay,if you do if you log try to log in and,you don't forget your password,you can simply click this button,now let's add some styling,so i'll start with the body,for the body i'm going to add background,color,so you should be comma okay,so that's our background color next i'm,going to style my class containe

The above is a brief introduction to twitter login

Let's move on to the first section of twitter login