Simple Login design

 

HTML:

<div class="container container-table">

  <div class="row vertical-center-row">

    <div class="col-md-4 mx-auto">

      <div id="hello-div">Welcome,</div>

      <input type="text" class="form-control" id="user-select"/>

      <input type="password" class="form-control" id="password-input"/>

      <button class="btn" id="login-button">Login</button>

    </div>

  </div>

</div>

CSS:

body,

html,

.container-table {

  height: 100%;

  background-color: #ac96c1;

}

.container-table {

  display: table;

}

.vertical-center-row {

  display: table-cell;

  vertical-align: middle;

}

#hello-div {

  text-align: center;

  color: #ac96c1 !important;

  border: none;

  margin-top: 2%;

  margin-bottom: 2%;

  margin-bottom: 3%;

  font-weight: bold;

  color: white !important;

  text-align: center;

  text-transform: uppercase;

  font-size: 240%;

}

#user-select,

#password-input {

  text-align: center;

  color: #ac96c1 !important;

  border: none;

  margin-top: 2%;

  margin-bottom: 2%;

}

#login-button {

  width: 100%;

  background-color: white;

  text-align: center;

  color: #ac96c1 !important;

  border: none;

  margin-top: 2%;

  margin-bottom: 2%;

}