Pink login form using CSS

Check out this login html form I made a couple of days ago, I just played around with photoshop and got inspired to make this login from with html/css styles.

Download the login project here.

Download button

And if you really want to go in dept and do it all your self, here is a small tutorial on how I made this html/css styled login page.

First the retro white box is just one big image, you can download it below, just right click and save on your desktop.

css styled login page

Now we just need to make two files an html page and a style sheet file, and put in the code from below.

And remember to put the retro style box inside a folder called imgs.

The source code for the html file: (site.html)



    CSS styled Login form --> by 0Tutor.com
    


    
        
            
            Login Form
            
                Name:
            
            
            
                Password:

The source code for the style sheet file. (style.css)

body {
background-color:#ff00c0;
font-size:120%;
}

div.wrap {
height:100%
width:100%
}

h3 {
color:#ff00c0; font-size:22px
}

.textbox_outer {
padding-top: 43px; padding-left:150px;
}

.box_wrapper {
background-image:url(imgs/bg.jpg); background-position:center; background-repeat:no-repeat;
width:600px; height:360px; margin:auto; margin-top: 70px;
}

input {
font-family: "Lucida Grande",Verdana,sans-serif;
font-size:18px;
border: 1px solid #999999;
}

input.textboxes {
width:270px;
background-color:#ff00c0;
}

input.btn {
color:#ff00c0;
border: 1px solid #999999;
}

div.labels {
width:100px;
color:#ff00c0;
}

Save your work and you are done..