Clean but basic login design

  • Hello Guest! Welcome to ConsoleCrunch, to help support our site check out the premium upgrades HERE! to get exclusive access to our hidden content.
  • Unable to load portions of the website...
    If you use an ad blocker addon, you should disable it because it interferes with several elements of the site and blocks more than just adverts.
  • Read Rules Before Posting Post Virus Scans with every program.

Psycho_Coder

Active Poster
Retired Staff
Active Member
Apr 12, 2014
642
481
133
UK
wXo0DVR.png
Code:
[/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>
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;
}
Last post was gay :okay:

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 :trolol:

#devisagooddesigner :troll:
 

Psycho_Coder

Active Poster
Retired Staff
Active Member
Apr 12, 2014
642
481
133
UK
Update #2
KTSQhpo.png


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

Psycho_Coder

Active Poster
Retired Staff
Active Member
Apr 12, 2014
642
481
133
UK
Updated #3
pj0PJLa.png


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. :p
 
General chit-chat
Help Users
    Chat Bot: damario has joined the room.