<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 ----------> <div class="container login-container"> <div class="row"> <div class="col-md-6 login-form-1"> <h3>Login Form 1</h3> <div class="form-group"> <input type="text" class="form-control" placeholder="Your Email *" value="" /> </div> <div class="form-group"> <input type="password" class="form-control" placeholder="Your Password *" value="" /> </div> <div class="form-group"> <input type="submit" class="btnSubmit" value="Login" /> </div> <div class="form-group"> <a href="#" class="btnForgetPwd">Forget Password?</a> </div> </div> <div class="col-md-6 login-form-2"> <div class="login-logo"> <img src="https://image.ibb.co/n7oTvU/logo_white.png" alt=""/> </div> <h3>Login Form 2</h3> <div class="form-group"> <input type="text" class="form-control" placeholder="Your Email *" value="" /> </div> <div class="form-group"> <input type="password" class="form-control" placeholder="Your Password *" value="" /> </div> <div class="form-group"> <input type="submit" class="btnSubmit" value="Login" /> </div> <div class="form-group"> <a href="#" class="btnForgetPwd" value="Login">Forget Password?</a> </div> </form> </div> </div> </div>

.login-container{ margin-top: 5%; margin-bottom: 5%; } .login-logo{ position: relative; margin-left: -41.5%; } .login-logo img{ position: absolute; width: 20%; margin-top: 19%; background: #282726; border-radius: 4.5rem; padding: 5%; } .login-form-1{ padding: 9%; background:#282726; box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2), 0 9px 26px 0 rgba(0, 0, 0, 0.19); } .login-form-1 h3{ text-align: center; margin-bottom:12%; color:#fff; } .login-form-2{ padding: 9%; background: #f05837; box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2), 0 9px 26px 0 rgba(0, 0, 0, 0.19); } .login-form-2 h3{ text-align: center; margin-bottom:12%; color: #fff; } .btnSubmit{ font-weight: 600; width: 50%; color: #282726; background-color: #fff; border: none; border-radius: 1.5rem; padding:2%; } .btnForgetPwd{ color: #fff; font-weight: 600; text-decoration: none; } .btnForgetPwd:hover{ text-decoration:none; color:#fff; }