Clean but basic login design

[Psycho_Coder]

[/LEFT]

<html>
<head>
<title>Social Look</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>

<body>
<div id="head">
<img src="images/ic.png">
<button><a href="Register.php">Register</a></button>
</div>

<div id="logit">
<form action="member.php" method="POST">
<input type="text" name="username" placeholder="Username">
<input type="password" name="pass" placeholder="********">
<input type="submit" name="login" value="Login">
</form>
</div>
</body>

</html>

body {
    margin:0;
    background: #f2f2f2;
}
#head {
    height: 50px;
    background-color: #03B3B2;
}
#head img {
    margin-left: 200px;
}
#head button {
    position: absolute;
    background: #03B3B2;
    cursor: pointer;
    margin-top: 10px;
    margin-left: 10px;
    height: 30px;
    border-radius: 3px;
    width: 100px;
    border: 2px solid white;
}
#head button a {
    text-decoration: none;
    color: white;
    font-family: bold;
}
#head button:hover {
    background: skyblue;
    border: 2px solid skyblue;
}
#logit {
    height: 220px;
    width: 400px;
    background: white;
    margin-top: 50px;
    position: absolute;
    margin-left: 450px;
    border-top: 50px solid #03B3B2;
}
#logit input[type="text"] {
    height: 40px;
    background: #f2f2f2;
    border: 1px solid #f1f1f1;
    margin-top: 30px;
    border-radius: 3px;
    margin-left: 50px;
    width: 300px;
    text-indent: 5px;
    outline: none;
    position: absolute;
}
#logit input[type="text"]:hover {
    border: 2px solid #03B3B2;
}
#logit input[type="password"] {
    height: 40px;
    position: absolute;
    margin-left: 50px;
    outline: none;
    width: 300px;
    margin-top: 80px;
    background: #f1f1f1;
    border: 1px solid #f2f2f2;
    border-radius: 3px;
    text-indent: 5px;
}
#logit input[type="password"]:hover {
    border: 2px solid #03B3B2;
}
#logit input[type="submit"] {
    height: 40px;
    margin-left: 50px;
    width: 300px;
    position: absolute;
    margin-top: 130px;
    color: white;
    background: #03B3B2;
    border: 2px solid #03B3B2;
    border-radius: 3px;
    outline: none;
}

Last post was gay

If you would like me to create you anything, Just Ask below or PM me and I will create it then send you the code

#devisagooddesigner

 

[Psycho_Coder]

Update:

Added a box-shadow so it makes the login box look more 3D.

 

[Psycho_Coder]

Update #2

Added Terms and condition with box shadow. We will create these pages on a later date.​

 

[Psycho_Coder]

Updated #3

Addes search bar, Need to code the back end of it using $_GET method to display information in the mysql database.

Have started working on the backend of the login, Having a few problems but nothing i can not fix.