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:
<title>Facebook</title>
<div class="headerx">
</div>
<div class="header">
<div id="fb_logo">
facebook
</div>
<div id="form1" class="header">Email or username<br/>
<br/>
Keep me logged in</div>
<div id="form2" class="header">Password<br/>
<br/>
Forgotten my password!</div>
</div>
<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"><amp-img src="images/bg.jpg" width="600" height="400" class="amp-wp-unknown-size amp-wp-enforced-sizes" sizes="(min-width: 600px) 600px, 100vw"></amp-img> </div>
<div id="intro3" class="bodyx">It's free and always wiil be. </div>
<div id="form3" class="bodyx">
<br/>
<br/>
<br/>
<br/>
<h2></h2><p>Birthday</p>
<div class="amp-wp-inline-0cd1ad2590f34ae4984d84582a76cae0">
</div><br/><br/> Male
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>
|
If you run the above example it will produce output something like this –