Release Login Form - Simple, but clean design!

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!

2uj6smg.png


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

Veteran
Messages
122
Reaction score
96
Points
603
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!

2uj6smg.png


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,802
Reaction score
2,844
Points
1,053
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!

2uj6smg.png


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,802
Reaction score
2,844
Points
1,053
YouTube, as reading written material can be hard to understand when starting out in something new.
Quite nice, I started like that too. Now I got html5 and css3 in the school. :tonguewink:
 

CabCon

Head Administrator
Staff member
Head Staff Team
Messages
4,802
Reaction score
2,844
Points
1,053
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
Reaction score
81
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,802
Reaction score
2,844
Points
1,053
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?
 
Top