<!-- Material form login -->
<div class="card">
<h5 class="card-header info-color white-text text-center py-4">
<strong>Sign in</strong>
</h5>
<br/>
<!--Card content-->
<div class="card-body px-lg-5 pt-0">
<!-- Default form login -->
<form class="text-center border border-light p-5" action="#!">
<!-- Email -->
<input type="email" id="defaultLoginFormEmail" class="form-control mb-4" placeholder="E-mail">
<!-- Password -->
<input type="password" id="defaultLoginFormPassword" class="form-control mb-4" placeholder="Password">
<div class="d-flex justify-content-around">
<div>
<!-- Remember me -->
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="defaultLoginFormRemember">
<label class="custom-control-label" for="defaultLoginFormRemember">Remember me</label>
</div>
</div>
<div>
<!-- Forgot password -->
<a href="">Forgot password?</a>
</div>
</div>
<!-- Sign in button -->
<button class="btn btn-info btn-block my-4" type="submit">Sign in</button>
<!-- Register -->
<p>Not a member?
<a href="">Register</a>
</p>
<!-- Social login -->
<p>or sign in with:</p>
<a href="#" class="btn btn-info mx-2 rounded" role="button"><i class="fab fa-facebook-f light-blue-text"></i></a>
<a href="#" class="btn btn-info mx-2 rounded" role="button"><i class="fab fa-twitter light-blue-text"></i></a>
<a href="#" class="btn btn-info mx-2 rounded" role="button"><i class="fab fa-linkedin-in light-blue-text"></i></a>
<a href="#" class="btn btn-info mx-2 rounded" role="button"><i class="fab fa-github light-blue-text"></i></a>
</form>
<!-- Default form login -->
</div>
</div>
a {
color: #ad42ac;
}
.card-header {
background: linear-gradient(to right,#fc4496,#b242ae);
border-color: #fc4595;
border: 0px solid transparent;
}
.btn-info {
background: linear-gradient(to right,#fc4496,#b242ae);
border-color: #fc4595;
border: 0px solid transparent;
}
.rounded{
width: 50px !important;
height:50px !important;
border-radius: 100% !important;
padding-left: 0px;
padding-right: 0px
}
.light-blue-text {
color: #fff !important;
}