<div class="bg">
<div class="container">
<div class="login-area">
<div class="row">
<div class="col-md-5 bg-dark">
<div class="left-pannel">
<div class="text-center"><img src="logo.png" alt="tolmatol"></div>
<p>Login using social media to get quick access</p>
<button class="btn btn-block btn-facebook mt-5"><i class="fa fa-facebook"></i> <span>Sign in with Facbook</span></button>
<button class="btn btn-block btn-google"><i class="fa fa-google"></i> <span>Sign in with Google</span></button>
<button class="btn btn-block btn-twitter"><i class="fa fa-twitter"></i> <span> Sign in with Twitter</span></button>
</div>
</div>
<div class="col-md-7 bg-white">
<div class="right-side">
<h3 class="text-center">Login to your account</h3>
<p class="text-center">Don't have an account? <a href="" class="signUp">Sign Up Free!</a></p>
<form action="" class="form-details mt-4 pt-4">
<div class="form-group">
<input type="text" name="" id="" class="form-control" placeholder="Email Address">
</div>
<div class="form-group">
<input type="password" name="" id="" class="form-control" placeholder="Password">
</div>
<div class="row">
<div class="col-lg-6">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="remember">
<label class="custom-control-label font-weight-normal" for="remember">Remember me</label>
</div>
</div>
<div class="col-lg-6">
<a href="#" class="font-weight-normal">Forgot Password..?</a>
</div>
</div>
<div class="form-group">
<button class="btn btn-primary btn-block btn-lg mt-5" type="submit" >Login with email</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div> </div>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body { font-family: 'Poppins', sans-serif; font-weight: 400; background: url(https://www.tolmatol.com/uploads-images/bootstrap-snippets-login-form/bg.jpg); background-size: cover; height: 100vh; width: 100%; background-position: center; background-repeat: no-repeat; }
.bg:before { position: absolute; content: ''; width: 100%; background: rgba(103, 58, 183, 0.38823529411764707); height: 100%;}
.left-pannel { margin: 80px 0px; color: #fff;}
.left-pannel p { font-size: 14px;}
.right-side { margin: 40px 0px; }
.login-area { max-width: 700px; margin: auto; position: absolute; transform: translate(-50%,-50%); left: 50%; top: 50%; width: 100%; }
.form-details { font-weight: 500;}
.form-details input.form-control { min-height: 50px; padding: 20px;}
.btn-google { background: #da573b; border:solid 1px #be5238; color: #fff; }
.btn-google:hover { background: #be5238; border:solid 1px #9b4631; color: #fff;}
.btn-twitter { background: #1daee3; border:solid 1px #3997ba; color: #fff;}
.btn-twitter:hover { background: #3997ba; border:solid 1px #347b95; color: #fff; }
.btn-facebook { background: #4c699e; border:solid 1px #47618d; color: #fff;}
.btn-facebook:hover { background: #47618d; border:solid 1px #3c5173; color: #fff; }
@media(max-width:767px){
body { background-position: top; background-size: auto;}
.bg:before { height: 100%; bottom: 0px;}
.login-area { max-width: 450px; }
.left-pannel { margin: 30px 0px;}
.left-pannel button { float: left; width: 30%; margin: 0 1.5%; margin-top: 0px !important; margin-bottom: 30px;}
.left-pannel button span { display: none;}
}
</style>
