iGArabZz
Member
- Messages
- 79
- Reaction score
- 81
- Points
- 18
Here is a very simple, but clean design I scratched up quite some time ago, I will share the code if anyone wants to make anything off it!
HTML:
<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>
Code:
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;
}
!
I personally would change the font from the login button but that it's only my opinion 
