<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css"> <div class="container"> <div class="card card-login mx-auto text-center bg-dark"> <div class="card-header mx-auto bg-dark"> <span> <img src="https://amar.vote/assets/img/amarVotebd.png" class="w-75" alt="Logo"> </span><br/> <span class="logo_title mt-5"> Login Dashboard </span> <!-- <h1>--><?php //echo $message?><!--</h1>--> </div> <div class="card-body"> <form action="" method="post"> <div class="input-group form-group"> <div class="input-group-prepend"> <span class="input-group-text"><i class="fas fa-user"></i></span> </div> <input type="text" name="email" class="form-control" placeholder="Username"> </div> <div class="input-group form-group"> <div class="input-group-prepend"> <span class="input-group-text"><i class="fas fa-key"></i></span> </div> <input type="password" name="password" class="form-control" placeholder="Password"> </div> <div class="form-group"> <input type="submit" name="btn" value="Login" class="btn btn-outline-danger float-right login_btn"> </div> </form> </div> </div> </div>

body { background: #000 !important; } .card { border: 1px solid #28a745; } .card-login { margin-top: 130px; padding: 18px; max-width: 30rem; } .card-header { color: #fff; /*background: #ff0000;*/ font-family: sans-serif; font-size: 20px; font-weight: 600 !important; margin-top: 10px; border-bottom: 0; } .input-group-prepend span{ width: 50px; background-color: #ff0000; color: #fff; border:0 !important; } input:focus{ outline: 0 0 0 0 !important; box-shadow: 0 0 0 0 !important; } .login_btn{ width: 130px; } .login_btn:hover{ color: #fff; background-color: #ff0000; } .btn-outline-danger { color: #fff; font-size: 18px; background-color: #28a745; background-image: none; border-color: #28a745; } .form-control { display: block; width: 100%; height: calc(2.25rem + 2px); padding: 0.375rem 0.75rem; font-size: 1.2rem; line-height: 1.6; color: #28a745; background-color: transparent; background-clip: padding-box; border: 1px solid #28a745; border-radius: 0; transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } .input-group-text { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; padding: 0.375rem 0.75rem; margin-bottom: 0; font-size: 1.5rem; font-weight: 700; line-height: 1.6; color: #495057; text-align: center; white-space: nowrap; background-color: #e9ecef; border: 1px solid #ced4da; border-radius: 0; }