Ionic

Step -1 :-      C:\xampp\htdocs\ananya\src\app\login\login.page.html 

<ion-grid class="fullpage">
    <ion-row justify-content-center>
      <ion-col align-self-center size-md="6" size-lg="5" size-xs="12" class="login">
        <div text-center>
          <h4>Member Login</h4>
        </div>
        <div padding>
          <ion-item>
            <ion-input type="text" placeholder="Username"></ion-input>
          </ion-item>
          <ion-item>
            <ion-input type="password" placeholder="Password"></ion-input>
          </ion-item>
        </div>
        <div padding>
          <ion-button size="large" href="/touchid" expand="block">Login</ion-button>
        </div>
      </ion-col>
    </ion-row>
  </ion-grid>
 

C:\xampp\htdocs\ananya\src\app\login\login.page.scss

app-login {
    
}
.fullpage{
    background: linear-gradient(90deg, rgb(169, 168, 197) 0%,
    rgb(129, 129, 163) 35%,
    rgba(0,212,255,1) 100%);
}
.login{
    border-radius: 5px;
}
$white-color: #fff;
$height100: 100%;

ion-grid {
    width:100%;
    height: $height100;
    background: #dfdfdf;
}

ion-row {
    height: $height100;
}

ion-col {
    border: 1px solid #488aff;
    background: $white-color;
}

ion-button {
    font-weight: 300;
}

@media (min-width: 240px) and (max-width: 768px) {
    ion-grid {
        background: $white-color;
    }
    ion-col {
        border: none;
    }
}