Release Login Form - Simple, but clean design!

iGArabZz

Member
Messages
79
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;
}






 

Noodles

Well-Known Member
Messages
122
Points
253
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;
}






That actually looks really clean! Nice job.
 

CabCon

Head Administrator
Staff member
Head Staff Team
Messages
4,462
Points
828
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;
}






Yes, this looks quite good. Thanks for sharing it. :smile: I personally would change the font from the login button but that it's only my opinion :peace:!
 

CabCon

Head Administrator
Staff member
Head Staff Team
Messages
4,462
Points
828
Nice! Though when it came to the back end stuff like PHP PDO and MySQL, I get lost!
I personally like to work with them. :smile: It brings the logic coding to the web, but yeah I know sometimes it's hard to work with them. :peace:!
 

iGArabZz

Member
Messages
79
Points
18
I personally like to work with them. :grinning: It brings the logic coding to the web, but yeah I know sometimes it's hard to work with them. :peace:!
It does indeed, it makes what your doing, worthwhile! Maybe sometime in the future we could scratch up a little project.
 

CabCon

Head Administrator
Staff member
Head Staff Team
Messages
4,462
Points
828
It does indeed, it makes what your doing, worthwhile! Maybe sometime in the future we could scratch up a little project.
Yes, I'm working on a wiki page at the moment. :smile: Maybe we can work together on it. Do you got discord?
 

Similar threads


Top