Category Archives: Html Blog

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:

     
    
        
    
    
    
Email or username

Keep me logged in
Password

Forgotten my password!
Facebook helps you connect and share with the
people in your life.
create an account
It's free and always wiil be.




Birthday



Male Female

By clicking create an account, you agree to our Tems and that
you have read our Date ,including our Cookie Use.

Try it »

If you run the above example it will produce output something like this –

http://tutorialsplane.com/facebook-style-registration-form-template/

Add placeholder for select box


Add placeholder for select box – Html5 attribute placeholder is not valid for selecbox so you can’t ass the placeholder in select box using this attribute. It is very common and often we need to add placeholder of select box in HTML and HTML5. There are many ways to add placeholder for select box. Many developers adds the placeholder using javascript and css but but will not use the javascript and css. Here in this tutorial we are going to add the placeholder of select box with various example and online demo.


Add placeholder for select box

You can add placeholder without using css and javascript simply as –

Add placeholder for select box:


Try it »

In the above example first option will be default option and will be selected with the label “Select Option” t which will work as placeholder for selectbox.

If you run the above example it will produce output something like this –

Add placeholder for select box

Add select box placeholder color

If you want add the color in the placeholder of select box add the following css as –

Add placeholder for select box:



Try it »

In the above example will add the color in placeholder. You can add your own color to make the placeholder more attractive.

P tag font size in html


P tag font size in html : You can add css to add font size in paragraph.


P tag font size in html

Example






This is paragraph 1.

This is paragraph 2.

Try it »

Output :

P tag font size in html

P tag font size in html

Html Heading Color Example


Html Heading Color Example : You can add heading colors using css styles.


Html Heading Color Example

Synatx with Demo

Example






H1 Heading

H2 Heading

H3 Heading

H4 Heading

H5 Heading
H6 Heading

Try it »

Output Would be :

Html Heading Color Example

Html Heading Color Example