<html lang="en">
    <head>
        <title>Login</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css">
		
	   <!-- plugins:css -->
    <link rel="stylesheet" href="assets/vendors/mdi/css/materialdesignicons.min.css">
    <link rel="stylesheet" href="assets/vendors/css/vendor.bundle.base.css">
    <!-- endinject -->
    <!-- Plugin css for this page -->
    <!-- End plugin css for this page -->
    <!-- inject:css -->
    <!-- endinject -->
    <!-- Layout styles -->
   
    <!-- End layout styles -->
    <link rel="shortcut icon" href="assets/images/favicon.png" />
    <script src="https://kit.fontawesome.com/c17eae44a3.js" crossorigin="anonymous"></script>
	
    <style>
        body
        {
/*
            background-image: url(img/login.jpeg);
            background-size: cover;

*/
        }
        
        .input-group
        {
            margin-top: 15px;
        }
        .container-fluid    
        {
            margin-top: 10%;
        
        }
        .box
        {
            border: 1px solid black;
            padding: 30px;
            box-shadow: 8px 8px 8px #888888;
            background-color: #243342;
            border-radius: 5px;
        }
    </style>
        
    </head>
<body style="background: radial-gradient(circle, #87CEFA, #00BFFF);">


         <div class="text-center navbar-brand-wrapper d-flex align-items-center justify-content-center"  >
          <a  href="index.php"><img width="500" height="400" src="assets/images/Az-new.png"  /></a>
		  </div>
        <div class="container-fluid " style="margin-top: 20px;">
            
            <div class="row" >
                <div class="col-sm-4" ></div>
             <div class="col-sm-4 box" style="background-color: #243342; color: #ffffff;">

                    <h2 style="center">Login</h2>
                    <form action="controller/login.php" method="post">
                        <div class="input-group">
                           <span class="input-group-addon"><i class="fas fa-user"></i></span>
                            <input id="username" type="text" class="form-control" name="username" placeholder="User Name">
                        </div>
                        <div class="input-group">
                            <span class="input-group-addon"><i class="fas fa-lock"></i></span>
                            <input id="password" type="password" class="form-control" name="password" placeholder="Password">
                        </div>
                        
                        <div class="form-group" style="margin-top: 20px;" > 
                            <center>
                                <button  type="submit" class="btn bg-gradient-primary text-white" name="submit">login</button>
                            </center>
                        </div>
                    </form>
               </div>
            </div>
        </div>
        
        <script src="js/jquery.min.js"></script>
        <script src="js/bootstrap.js"></script>
    </body>
</html>
