Facebook style registration form template
Facebook style registration form template – As we know facebook is one of the best and leading social networking site now a days so many of us want to design UI like facebook. Facebook has very simple and interactive design so i decided to try and create a simple registration using HTML and CSS. You can use online demo to see the template look and feel. You can also download this template for free and use it anywhere.
Facebook style registration form template Example | Free Download
Let us go step by step to create the registration page –
CSS Part :
Css Part Contains the following part.
Facebook style registration page :Css :
body{
background: linear-gradient(to bottom right,white,#bcbdc4);
height: 4000px;
}
.headerx{
position: fixed;
width: 100%;
height:100px;
top: 0;
left: 0;
color: white;
z-index: 7;
font-family: verdana;
-webkit-box-shadow:0 3px 8px rgba(0,0,0,.25);
}
.header{
position: fixed;
width: 100%;
height: 100px;
background: #142170;
top:0;
left: 0;
color: white;
z-index: 7;
font-family: verdana;
}
#fb_logo{
color: white;
font-size: 40px;
line-height: 20px;
font-family:fantasy;
position: relative;
font-weight: bold;
left: 200px;
top: 30px;
}
#form1{
left: 700px;
top: 20px;
height: 60;
width: 180px;
}
#form2{
left: 895px;
top: 20px;
height: 60px;
width: 200px;
}
.submit1{
left: 1100px;
top: 39px;
background: white;
color: #142170;
position: fixed;
z-index: 20;
height: 22px;
width: 50px;
cursor: pointer;
}
.bodyx{
position:absolute;
left:0;
top: 100px;
width: 100%;
height: 645px;
}
#intro1{
top:40px;
left:150px;
font-family:fantasy;
font-size: 20px;
color: #142170;
width: 550px;
height: 75px;
}
#intro2{
top:10px;
left:700px;
font-family: verdana;
font-size: 33px;
color: black;
width: 500px;
height: 60px;
}
#img2{
top:120px;
height: 250px;
width: 550px;
left: 100px;
}
#intro3{
top:65px;
left: 700px;
font-family: verdana;
font-size: 16px;
color: black;
height: 50px;
width: 300px;
}
#form3{
top: 150px;
left: 700px;
font-family: verdana;
font-size: 10px;
color: #142170;
width: 450px;
height: 495px;
}
#namebox{
width: 192px;
height: 20px;
border-radius: 10px/10px;
background: white;
padding: 3px;
font-size: 15px;
top: 200px;
margin:3px;
}
#mailbox{
width: 400px;
height: 20px;
border-radius: 10px/10px;
background: white;
padding: 3px;
font-size: 15px;
margin: 8px;
top: 199px;
}
.button2{
width: 1700x;
height: 40px;
left: 700px;
top: 580px;
background: green;
position: absolute;
color: white;
font-size: 20px;
border-radius: 15px/15px;
cursor: pointer;
outline: none;
}
|
In above part contains the css now let us create the HTML part as below –
HTML part –
Facebook style registration page :HTML:
<!DOCTYPE HTML>
<html>
<title>Facebook</title>
<head>
<link href="css/fb.css" rel="stylesheet" type="text/css"/>
</head>
<body style="height:815px">
<div class="headerx">
</div>
<div class="header">
<div id="fb_logo">
facebook
</div>
<div id="form1" class="header">Email or username<br>
<input placeholder="Email" type="mail" name="name"/><br>
<input type="checkbox"/>Keep me logged in</div>
<div id="form2" class="header">Password<br>
<input placeholder="password" type="password" name="password"/><br>
Forgotten my password!</div>
</div>
<input type="submit" class="submit1" value="login"/>
<div class="bodyx">
<div id="intro1" class="bodyx">Facebook helps you connect and share with the<br>
people in your life.</div>
<div id="intro2" class="bodyx"> create an account</div>
<div id="img2" class="bodyx"><img src="images/bg.jpg"> </div>
<div id="intro3" class="bodyx">It's free and always wiil be. </div>
<div id="form3" class="bodyx">
<input placeholder="Firstname" type="text" id="namebox" name="name1"/><input placeholder="Lastname" type="text" id="namebox"/><br>
<input placeholder="Email" type="text" id="mailbox"/> <br>
<input placeholder="Re-enter email" type="text" id="mailbox"/><br>
<input placeholder="Password" type="password" id="mailbox"/> <br>
<h2><p>Birthday</p> </h2>
<div style='float:left;'>
<select> <option>day</option>
<option>1</option><option>2</option></select>
<select> <option>Month</option>
<option>jan</option><option>feb</option></select>
<select> <option>Year</option>
<option>2001</option><option>2002</option></select>
</div><br><br> <input type="radio" name="sex" value="male"/>Male
<input type="radio" name="sex" value="female"/>Female<br><br>
By clicking create an account, you agree to our Tems and that<br>
you have read our Date ,including our Cookie Use.<br><br>
</div>
</div>
<input type="submit" class="button2" value="Create an account"/>
</body>
</html>
|
If you run the above example it will produce output something like this –
Advertisements
