<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/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://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css" integrity="sha256-mmgLkCYLUQbXn0B1SRqzHar6dCnv9oZFPEC1g1cwlkk=" crossorigin="anonymous" /> <div class="container login-reg-form"> <div class="row"> <div class="col-md-6 text-center login-form"> <h2>Login</h2> <form action=""> <div class="form-group"> <label>Username or Email Address</label> <div class="input-group input-group-lg"> <span class="input-group-addon" id="sizing-addon1"><i class="fas fa-user"></i></span> <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon1"> </div> </div> <div class="form-group"> <label>Password</label> <div class="input-group input-group-lg"> <span class="input-group-addon" id="sizing-addon1"><i class="fas fa-key"></i></span> <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon1"> </div> </div> <div class="form-group"> <input type="checkbox" name="" id=""> <label for="">Remember Me</label> </div> <button type="submit" class=" btn-login">Log In</button><br> <a href="">Lost Your Password?</a> </form> </div> <div class="cleafix"> </div> <!-- reg form --> <div class="col-md-6 reg-form"> <h2>Register</h2> <p>Don't have an account? Register Now</p> <button class="btn ">Register an Account</button> </div> </div> </div>

/* login form */ .login-reg-form{ height: 55vh; margin-bottom: 1em; } .login-form{ border: 1px dashed #337ab7; height: 54vh; } .login-form input{ border-left:none; border-radius:none; } .login-form input:focus{ outline:none !important; } .login-form h2{ color: #337ab7; margin-bottom: 1em; } .login-form span { border-right:none; background: none; } .login-form button{ background: #337ab7; padding: .5em 4em .5em 4em; color: white; border: none; margin-bottom: 1em; } .login-form button:hover , .reg-form button:hover{ background: yellowgreen; color:white; } .reg-form{ background: #337ab7; height: 54vh; border:none; border: 1px solid #337ab7; display: flex; align-items: center; justify-content: center; flex-direction: column; color: white; } .reg-form h2, .reg-form p{ padding-bottom: .5em; color:white; } .reg-form button{ background:white; padding: .5em 4em .5em 4em; color: #337ab7; font-weight: bold; }