Create A CSS Administrator Login Form Design
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Create A CSS Administrator Login Form Design and Login system using PHP with MYSQL database</title>
<style>
#login-form {
margin:106px auto 0px auto;
width:560px;
border:solid 12px #E0E0E0;
background:#E0E0E0;
border-radius:12px;
-moz-border-radius:12px;
webkit-border-radius:12px;
}
#login-form{
border-color:#4BB2C5;
}
#login-inner {
border-radius:5px;
-moz-border-radius:5px;
webkit-border-radius:5px;
margin:0 auto;
padding:30px;
width:500px;
}
#login-form #wrapper{
height: 50px;
border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
text-align:center;
width:494px;
margin:0px auto 30px auto;
font-size:1.2em;
background-image: url('img/bg.jpg');
}
#login-form #wrapper p{
padding-top:4px;
margin:0;
text-transform:uppercase;
letter-spacing:2px;
line-height:2.2em;
color:#FFF;
font-weight:bold;
text-shadow:#111 0px 1px 1px;
}
.field-separator{
width:560px;
margin:0px auto 20px auto;
}
#login-form label{
color:#111;
display:block;
font-size:1em;
margin-bottom:2px;
font-weight:bold
}
#login-form input.txt {
background:url('img/login_input_bg.png') repeat-x scroll left top #F7FCFF;
border:1px solid #CCC;
color:#25313C;
font-size:1.4em;
width:486px;
padding:4px;
}
#login-form input#login-button{
text-transform:uppercase;
float:right;
margin-top:10px;
color:#DDD;
}
div#remember-me{
float:left;
width:300px;
margin-top:16px;
}
div#remember-me a{
color:#000;
padding-right:10px;
font-weight:bold;
font-size:0.75em;
}
#login-bottom{
border-top: 2px dotted #BBB;
padding: 3px;
}
input.submit {
background-color: #111;
}
.submit::selection {
background: transparent;
}
input.submit.large {
padding: 8px 14px 9px;
font-size: 14px;
}
input.submit.round {
border:5px;
border-radius:5px;
-moz-border-radius:5px;
webkit-border-radius:5px;
}
</style>
</head>
<body style="background:#FEFEFE url('img/bg.jpg') repeat-x;">
<form action="loginsubmit.php" method="post" id="login-form">
<div id="login-inner">
<div id="wrapper">
<p>Administration Login</p>
</div>
<div class="field-separator">
<label for="login">Login</label>
<input type="text" name="login" value="" id="login" class="txt" />
</div>
<div class="field-separator">
<label for="password">Password</label>
<input type="password" name="password" value="" id="password" class="txt" />
</div>
<div id="login-bottom">
<div id="remember-me">
<a href="#">Remember Me</a>|
<a href="#">Forgot Password</a>
</div>
<input type="submit" name="enter" value="Enter" class="submit large round" id="login-button" />
<div style="clear: both"></div>
</div>
</div>
</form>
</body>
</html>
//loginsubmit.php
<?php
$conn = new mysqli('localhost','root','','testingdb');
if ($conn->connect_error) {
die('Error : ('. $conn->connect_errno .') '. $conn->connect_error);
}
$username = $_POST['login'];
$pass = $_POST['password'];
$sqlc="SELECT * FROM users WHERE username = '$username' AND password = '$pass'";
if ($rsdc=mysqli_query($conn,$sqlc)){
$total=mysqli_num_rows($rsdc);
if ($total == '1') {
echo'<h1>You are a validated user.</h1>';
}else{
echo'<h1>Sorry, your credentials are not valid, Please try again.</h1>';
}
}
?>
VIDEO
Create A CSS Administrator Login Form Design
