<div class="container">
<div class="row mt-5">
<div class="spContainer mx-auto">
<div class="card px-4 py-5 border-0 shadow">
<div class="d-inline text-left mb-3">
<h3 class="font-weight-bold">Login</h3>
<p>Access the most popular project management app in indonesia !</p>
</div>
<div class="d-inline text-center mb-0">
<div class="form-group mx-auto">
<input class="form-control inpSp" type="text" placeholder="username">
</div>
</div>
<div class="d-inline text-center mb-3">
<div class="form-group mx-auto">
<input class="form-control inpSp" type="password" placeholder="Password">
</div>
</div>
<div class="d-inline text-left mb-3">
<div class="form-group mx-auto">
<button class="btn btn-primary">Confirm</button>
<a class="small text-black-50 pl-2 ml-2 border-left" href="">Forgot Password ?</a>
</div>
</div>
<div class="d-inline text-left mb-1">
<div class="form-group mx-auto mb-0">
<label class="text-black-50 small">or login with</label>
</div>
</div>
<div class="d-inline text-left">
<div class="form-group mx-auto">
<button type="button" class="btn btn-sm btn-light"> <span class="badge text-white"><i class="fab fa-google text-danger"></i></span>
Google
</button>
<button type="button" class="btn btn-sm btn-light ml-2"> <span class="badge text-white"><i class="fab fa-facebook-f text-primary"></i></span>
Facebook
</button>
</div>
</div>
<div class="d-inline text-left mt-3">
<div class="form-group mx-auto mb-0">
<a class="text-black font-weight-bold regStr" href="#">Register new account</a>
</div>
</div>
</div>
</div>
</div>
</div>
body{
height:100vh;
background:#e9eef7;
font-family:sans-serif;
}
.spContainer{
width:100%;
max-width:380px
}
.card{
border-radius:8px;
transition:.25s;
}
.card:hover{
transition:.25s;
}
.btn-primary{
border-radius:4px;
border:none;
background-color:#ff425f;
box-shadow:0px 0px 0px 0px rgba(34, 36, 38, 0.15) inset, 0px -0.4em 0px 0px rgba(34, 36, 38, 0.15) inset;
}
.btn-primary:hover,.btn-primary:focus,.btn-primary:active{
background-color:#de2c48 !important;
box-shadow:none;
}
.inpSp{
background-color:#ebebeb;
border:none;
transition:.25s;
padding-left:25px;
font-weight:light !important;
font-family: "Times New Roman", Times, serif;
border-radius:4px
}
.inpSp:hover{
transition:.25s;
background-color:#dbdbdb;
}
.inpSp:focus{
background-color:#ebebeb;
box-shadow:0 8px 8px 0px #f1f1f1;
}
.regStr{
transition:.25s;
padding-bottom:4px;
border-bottom:2px solid gray;
color:#212519;
}
.regStr:hover{
border-bottom:2px solid #ff425f;
padding-bottom:8px;
transition:.25s;
text-decoration:none;
color:#212519;
}
.btn-sm{
font-weight:300;
}
.btn-sm:hover{
font-weight:900;
}
This Pen doesn't use any external JavaScript resources.