<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <ion-content padding fullscreen slot="fixed"> <div class="login"> <div class="login-wrapper-outside"> <div class="login-wrapper"> <div class="login-icon-wrapper d-flex"> <ion-icon class="login-icon" name="person-outline"></ion-icon> </div> <div class="input-wrapper"> <form> <ion-icon class="icon-input" name="person-outline" item-start></ion-icon> <ion-input type="text" placeholder="Username" required></ion-input> <p class="error">Username is incorrect</p> <ion-icon name="lock-closed-outline" class="icon-input"></ion-icon> <ion-input type="Password" placeholder="Password" required></ion-input> <p class="error">Password is incorrect</p> <div class="submit-button"> <ion-button class="login-button" shape="round" expand="full"> Login </ion-button> </div> <ion-grid class="password-field"> <ion-row> <ion-col><ion-checkbox color="primary"></ion-checkbox>Remember Me</ion-col> <ion-col><a href="#" class="text-white"> Forgot Password</a></ion-col> </ion-row> </ion-grid> </form> </div> </div> <ion-text class="text-center font-14" color="light" padding> <p class="pt-20"> Don't Have a account? <a href="#" class="login-link" >REGISTER HERE</a></p> </ion-text> <ion-footer class="footer"> <img src="assets/img/fis-footer-tagline.png"> </ion-footer> </div> </div> </ion-content>

.login { background-image: url('../../assets/img/earth-blue-green.png'); min-height: 100vh; background-position: center; background-repeat: no-repeat; background-attachment: fixed; background-size: cover; display: block; float: left; width: 100%; align-items: center; } .footer { position: fixed; left: 0; bottom: 10px; right: 0; padding: 0px 20px; } .login-wrapper { background-color: #ffffff7d; padding: 30px; border-radius: 10px; position: relative; } .login-wrapper-outside { margin: 20vh 20px 5vh; } .login-icon { background-color: #012834; color: #4BCD3E; padding: 10px; font-size: 50px; border-radius: 100%; position: absolute; top: -30px; } ion-input { background-color: #fff; margin-bottom: 20px; border-radius: 5px; padding: 3px 20px 3px 35px!important; } .input-wrapper { margin: 40px 0px 0px; .error { margin-top: -20px; margin-bottom: 20px; } } .item-inner { flex-direction: row-reverse !important; } .icon-input { margin: 13px 0px 0px 13px !important; background-color: transparent; font-size: 20px; z-index: 999; position: absolute; color: #999; } .btn-primary-green-on-white { --background: #4BCD3E; } .login-button { height: 40px; } .password-field { font-size: 14px; color: #fff; padding: 0px 0px 0px 25px; margin-top: 20px; } ion-checkbox { position: absolute; left: -20px; } a.login-link { color: #fff!important; } a.login-link:hover, a.login-link:focus, a.login-link:visited { color: var(--ion-color-primary, #4BCD3E); }