facebook signup and login form

facebook signup and login form

in this article we learn how to make facebook type signup and login form using simple css3 and html5 atributes we will create this type login and signup form

facebook login form

so first create html file with any name 

download HD quality image from internet and use for background

	
	




	
   
	   
	   
	Keep me login       
	


Social Network
Design By Shakil Khan



Sign Up
	

		
		


		">


		


		


		


		


		
		
	

now create css file and link in html file with link attribute

.bb{
	z-index: -4px;
}
.aa{
	 
	width: 300px;
	height: 500px;
	border:0px;
	border-radius: 5px;
	text-align: center;
	padding-top: 15px;
	color: black;
	float: right;
	margin-top: 5px;
	margin-right: 10px;
}
.aa input[type="text"]
{
	width: 250px;
	height: 40px;
	border-radius: 3px;
	border:0;
	padding-left: 7px;
	box-shadow: 1px 1px 10px black;
	font-size: 16px;
}

.aa input[type="email"]
{
	width: 250px;
	height: 40px;
	border-radius: 3px;
	border:0;
	padding-left: 7px;
	box-shadow: 1px 1px 10px black;
	font-size: 16px;
	font-size: 16px;
}
.aa input[type="password"]
{
	width: 250px;
	height: 40px;
	border-radius: 3px;
	border:0;
	padding-left: 7px;
	box-shadow: 1px 1px 10px black;
	font-size: 16px;
}
.aa input[type="submit"]
{
	width: 250px;
	height: 50px;
	border-radius: 3px;
	border:0;
	background-color:skyblue;
	font-size: 19px;
}


.match{
	width: 300px;
	height: 35px;
	padding-top: 10px;
	border-radius: 5px;
	border:2px solid red;
	margin: 0 auto;
	text-align: center;
	
}
.login{
	margin: 30px auto;
	width: 300px;
	height: 330px;
	background: -webkit-linear-gradient(maroon,black); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(maroon,black); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(maroon,black); /* For Firefox 3.6 to 15 */
    background: linear-gradient(maroon,black);
	border:0px;
	border-radius: 5px;
	text-align: center;
	padding-top: 15px;
	color: white;
	
}
.login input[type="text"]
{
	width: 250px;
	height: 40px;
	border-radius: 3px;
	border:0;
	padding-left: 8px;

}
.login input[type="password"]
{
	width: 250px;
	height: 40px;
	border-radius: 3px;
	border:0;
	padding-left: 8px;
}
.login input[type="submit"]
{
	width: 250px;
	height: 40px;
	border-radius: 3px;
	border:0;
	background-color:#339966;
	font-size: 19px;
}
.main{
	margin: 20px auto;
	width: 400px;
}
.image{
	border-radius: 20px;
	width: 120px;
	height: 120px;
	box-shadow:4px 4px rgba(0,0,0,0.5);
	

}
body{
	background-image: url(images/hhh.png);
	background-repeat: no-repeat;
	background-size: cover;
	margin: 0;
	padding: 0;

}
#link{
	text-decoration: none;
	color: white;
	font-weight: bolder;
	font-size: 20px;
}
#main{
	margin: 0;
	padding: 0;
}
.upper{
	margin: 0px;
	background-color: rgba(0,0,0,0.6);
	width: 100%;
	height: 60px;
	padding-top: 15px;
	padding-left: 20px;
	box-shadow: inset -4px -4px 10px rgba(0,0,0,0.5);
	color: white;
}
.upper input[type="text"]
{
	width: 200px;
	height: 40px;
	border:0;
	border-radius: 3px;
	padding-left: 8px;
	font-size: 16px;


}
.upper input[type="password"]
{
	width: 200px;
	height: 40px;
	border:0;
	border-radius: 3px;
	padding-left: 8px;
	font-size: 16px;
}
.upper input[type="submit"]
{
	width: 110px;
	height: 40px;
	border-radius: 5px;
	border:0px;
	background-color: skyblue;
	font-size: 19px;
}

.post{
	float: left;
	margin-top: 360px;
	margin-left: 50px;
	
}
h3 .password{
	color: white;
}
.post h1{
	font-family: "Arial Black", Gadget, sans-serif;
	color: black;
	
}
.post h2{
	font-family: "Comic Sans MS", cursive, sans-serif;
	color: black;
	
}