<!--<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src='https://kit.fontawesome.com/a076d05399.js'></script>
-->
<div class="row">
<div class="col-sm-4 text-center abc">
<!-- Default form login -->
<form action="#!">
<p class="h4 mb-4 text-left">Login to continue</p>
<p class="text-left">Signin to create, discover and connect with the global community</p> <!-- Email --> <label for="mail" class="in">Username</label> <input type="email" id="defaultLoginFormEmail" class="form-control mb-4" placeholder="Enter Username"> <!-- Password --> <label for="pass" class="in">Password</label> <input type="password" id="defaultLoginFormPassword" class="form-control mb-4" placeholder="Enter Password">
<div class="d-flex justify-content-left">
<div>
<!-- Remember me -->
<div class="custom-control custom-checkbox text-left"> <input type="checkbox" class="custom-control-input"> <label class="custom-control-label" for="defaultLoginFormRemember">Remember me</label> </div>
</div>
</div> <!-- Sign in button --> <button class="btn btn-info btn-block " type="submit" style="background-image: url(https://i.imgur.com/6YuRxJA.png)">LOGIN</button> <button class="btn btn-info btn-block my" type="submit">Forgot Password?</button>
</form>
</div>
<div class="col-sm-8 xyz text-center" style="background-image: url(https://i.imgur.com/6YuRxJA.png)"> <i class="fa fa-user-circle fa-5x" aria-hidden="true"></i>
<h2 class="account-text">Create Your Account</h2>
<h4 class="account-description">Signup to create, discover and connect with the global community</h4> <button class="btn btn-info btn-block sign" type="submit">SIGN UP</button>
</div>
</div>
.row {
margin-top: 5%;
margin-left: 2%;
margin-right: 2%
}
.page {
margin-top: 0%
}
.btn {
border-radius: 25px;
width: 80%;
margin-top: 2%
}
.sign {
border-radius: 25px;
width: 25%;
margin: auto
}
form {
padding: 0;
margin-left: 15%
}
.abc {
background-color: aquamarine;
padding: 2%;
margin: auto
}
.xyz {
background-color: gray;
padding: 2%
}
.form-control {
width: 80%;
border-radius: 25px
}
.fa {
color: white;
margin-top: 5%
}
.in {
color: #495057;
margin-right: 100%
}
.in2 {
color: #495057;
margin-right: auto
}
.my {
background-color: #bcc2be;
border: none
}
.custom-control {
margin-bottom: 2%
}
h2.account-text {
color: #fff !important;
font-weight: 200
}
.account-description {
color: #fff;
margin-bottom: 4%;
font-weight: 200
}
@media only screen and (max-width: 600px) {
row {
margin-top: 5%;
margin-left: 1%;
margin-right: 1%
}
}