Codenstuff.com

Posted: **Mon May 27, 2013 12:51 am**

Hey guys this is something I have been making at home I thought I'll share my snipplet here.

This is the Index.html

Code: Select all

<!DOCTYPE html>
<html>
<head>
	<meta charset=utf-8 />
	<title></title>
	<link rel="stylesheet" type="text/css"href="mystyle.css" />
</head>
<body>

<div id="Signup">
	<h1>Sign Up</h1>
	<h2>It’s free and always will be.</h2>
<form>
	<input type="text" placeholder="First Name" id="input">
	<input type="text" placeholder="Last Name" id="input"><br>
	<input type="email" placeholder="Email" id="input1"><br>
	<input type="email" placeholder="Confirm Email" id="input1"><br>
	<input type="password" placeholder="Password" id="input1"><br>
	<input type="Submit"id="button" value="Sign Up">
	<p>By clicking Sign Up, you agree to our Terms and conditions,<br> and these can change at anytime without your knowlage.</p>
	
</form>
</body>
</html>

This is the mystyle.css

Code: Select all

body ,html{
	margin:auto;
	background: #edf0f5;
}
#input{
	width: 178px;
	border-color: #bdc7d8;
	border-radius: 5px;
	font-size: 18px;
	padding: 6px 8px;
	border: 1px ;
	font-family: 'lucida grande',tahoma,verdana,arial,sans-serif;
}
#input1{
	width: 377px;
	margin-top: 5px;
	border-color: #bdc7d8;
	border-radius: 5px;
	border: 1px ;
	font-size: 18px;
	padding: 6px 8px;
	font-family: 'lucida grande',tahoma,verdana,arial,sans-serif;
}
#button{
	background: -webkit-linear-gradient(top, #79bc64, #578843);
	border: 1px solid;
	width: 177px;
	margin-top: 5px;
	height: 30px;
	font-size: 19px;
	cursor: pointer;
	border-radius: 5px;
	color: white;
}
h1{
	font-family: Tahoma;
	font-size: 26px;
	line-height: 1px;
}
h2{
	font-family: Tahoma;
	font-size: 18px;
	color: grey;
}
#Signup{
	float: right;
	margin-right: 15%;
	margin-top: 5%;
}
p{
	font-size: 13px;
	color: grey;
	letter-spacing: 1px;
	font-family: terminal;
}

Feel free to post here if you wan't me to write this in a tutorial or explain anything.

Posted: **Sun Jul 21, 2013 8:39 am**

I recommend you to not use more than 1 or 2 fonts styles on forms also you forgot this:

Code: Select all

background: #79bc64; /* Old browsers */
background: -moz-linear-gradient(top,  #79bc64 0%, #578843 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#79bc64), color-stop(100%,#578843)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #79bc64 0%,#578843 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #79bc64 0%,#578843 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #79bc64 0%,#578843 100%); /* IE10+ */
background: linear-gradient(to bottom,  #79bc64 0%,#578843 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#79bc64', endColorstr='#578843',GradientType=0 ); /* IE6-9 */

Codenstuff.com

How to make a register form like facebooks

How to make a register form like facebooks

Re: How to make a register form like facebooks