Create a Sign Up Form in HTML & CSS
This is not so difficult, you need just to do some practice and you done it HTML & CSS Signup Form Different Design. This video which in Urdu will show you how to made Sign Up Form in HTML & CSS Sign Up Form. this video is taking your HTML & CSS skills to Advanced level.This Very Good Way for learning html and css. Keep it up Sign Up Form.
Create a Sign Up Form in HTML & CSS
VIDEO
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sign Up Form</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
font-family: "Helvetica Neue", Helvetica, Arial;
}
#wrap {
width: 1000px;
height: 790px;
background: url(backlogin.jpg);
margin: auto;
}
#form {
width: 406px;
height: 378px;
background: #FFF;
position: absolute;
margin-top: 25px;
margin-left: 20%;
box-shadow: 0px 0px 0px 5px rgba( 255,255,255,0.4 ), 0px 4px 20px rgba( 0,0,0,0.33 );
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
#formhead {
width: 100%;
height: 75px;
}
h3 {
color: #333333;
font-size: 24px;
font-weight: bold;
margin-top: 25px;
margin-left: 25px;
}
p {
margin-top: 10px;
margin-left: 24px;
color: #8f8f8f;
font-size: 14px;
font-weight: 300;
}
#cent {
width: 360px;
height: 225px;
position: absolute;
margin-left: 20px;
margin-top: 25px;
}
#email {
width: 344px;
height: 41px;
border-radius: 5px;
border: #CCC solid 1px;
padding: 0 5px 0 5px;
color: #666;
background: #f5f5f5;
}
#keep {
margin-top: 11px;
}
#password {
width: 344px;
height: 41px;
background: #f5f5f5;
border-radius: 5px;
border: #CCC solid 1px;
padding: 0 5px 0 5px;
margin-top: 20px;
}
#btn {
color: #FFF;
font-weight: bold;
width: 359px;
height: 42px;
background: url(btn.png) repeat-x;
border-radius: 5px;
margin-top: 10px;
cursor: pointer;
}
a {
color: #969692;
font-size: 12px;
text-decoration: none;
font-family: "Courier New", Courier, monospace;
font-style: italic;
}
</style>
</head>
<body>
<div id="wrap">
<div id="form">
<hr />
<div id="formhead">
<h3>Sign Up</h3>
<p>You want to fill out this</p>
</div>
<hr size="0.1" color="#CCCCCC" />
<div id="cent">
<form action="#" method="post">
<table cellpadding="3" cellspacing="3" border="0">
<tr>
<td><input type="email" id="email" name="email" placeholder="E-mail" required="required"/></td>
</tr>
<tr>
<td><input type="password" id="password" name="password" placeholder="Password" required="required" /></td>
</tr>
<tr>
<td><input type="checkbox" id="keep" name="keep" style="float:left;" />
<a href="#" style="padding:-5px 0 0 0; line-height:37px;">I accept the terms of use</a></td>
</tr>
<tr>
<td><input type="submit" value="SIGN UP FOR INVITE NOW" title="Sign Up" id="btn"></td>
</tr>
</table>
</form>
</div>
</div>
</div>
</body>
</html>
I have been writing and working in the Web design and development field since 2009. Web design is my hobby, my business, and my passion. And teaching Web design is something I love to do.
wrapper
0 comments:
Post a Comment