
<!DOCTYPE>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<head> <link rel="icon" type="image/png" href="images/logo.png"/>
<title>Aberdare Hardware - Management System</title>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, 
initial-scale=1">
<style>
* {  box-sizing: border-box; }

 body { margin: 0; font-family: "Nunito", sans-serif; background:whitesmoke ; }



.login{width: 35% ; margin: auto; margin-top: 3%; }


.col-login-b {  float: left;  width: 100%;  padding: 15px;  }

.input-container {  display: -ms-flexbox;  display: flex;width: 100%; margin-bottom: 15px; margin-top:10px; border: 1px solid #ddd;}
.icon {  padding: 10px; background:white;  color: #007AA5 ;  min-width: 50px;  text-align: center; border-right: 1px solid #ddd;}
.input-field {  width: 100%;  padding: 10px;  outline: none; border: none;  }

.ff{width:100%;  float: left;  margin: auto; border-radius: 5px; padding: 30px;  margin-top: 5%; box-shadow: 0px 2px 3px 2px  #E3DAC9; background: white; }


.bottom{float: left; width: 100%; text-align:center; margin-top: 1%; color:#848482; font-size: x-small; padding: 30px;}

.bottom a { text-decoration: none; color:#848482; }

.logo-image{width:100%; height:2em; float:left;  }

.form-ab {float: left; width: 100%; margin-bottom:  3%; border-bottom: 2px solid whitesmoke;}
.form-a {float: left; width: 20%; padding: 15px;}
.form-b { float: left; width: 80%; text-align: center; font-weight: bolder;  padding: 5px; }

.form-b h4 { color: #007AA5 ; }


.error { float: left;  width:98%;   margin: 6px auto;   padding: 10px;   border: 1px solid #a94442; font-size: small; 
  color: #a94442;   background: #f2dede;   border-radius: 5px;   text-align: left;  margin-bottom: 3%;}

.btn {  background-color: #007AA5;  color: white;  padding: 10px 15px; font-weight: bold;
  border: none;  cursor: pointer; float: right;  opacity: 0.9; border-radius: 3px;}

.btn:hover {  opacity: .6;  }

/* Clear floats after the col-logins */
.row:after {
  content: "";
  display: table;
  clear: both;
}

@media screen and (max-width:600px) {
.log-in{width: 100%; float: left; box-shadow: 0px 0px 0px 0px white; margin-top: 15%; }
.col-login-b {  width: 100%;   }
.ff{width:100%; margin:auto; }

.login{ width: 90%; margin: auto; }


.bottom{float: left; width: 100%; text-align:center; margin-top: 10%; }
.bottom p {margin-right: 0%;}

.logo-image{width:100%; height:2em; float:left;  }
.form-a { width: 20%; padding: 15px; }
.form-b {width: 80%; padding: 0px; font-size: medium; font-weight: bolder;}


</style>
</head>
<body>


<div class="row">


<nav class="login">

<nav class="log-in" >
<div class="col-login-b">
<?php include"login-server.php"; ?>
<form method="post" class="ff">

<div class="form-ab">
<nav  class="form-a"> <img src="images/logo.png" class="logo-image"></nav>
<nav class="form-b"> <h4>GREEN FARM GROCERIES - LOGIN</h4> </nav>
</div>

<?php include('errors.php'); ?>
  <div class="input-container">
    <i class="fa fa-user icon"></i>
    <input class="input-field" type="text" placeholder="Username" name="username" required="autofocus">
  </div>

<br>
  <div class="input-container">
    <i class="fa fa-lock icon"></i>
    <input class="input-field" type="password" placeholder="Password" name="password" required="autofocus">
  </div>
<br>
  <button type="submit" name="login_user"  class="btn">LOGIN</button>

</form>
</div>

</nav>
</nav>


<nav class="bottom"><a href="https://wa.me/254708448164" >Copyright © 2021. Jostechie Software Solutions </a></nav>
</div>

</body>
</html>
