Дизайн Логин css Ionic

Question

В настоящее время у меня есть этот дизайн входа в систему

У меня есть этот код в html для части презентации входа в систему. login.page.html

<ion-content>

<ion-grid class="grid1">

    <ion-row class="row1">
        <ion-col>

        </ion-col>
    </ion-row>

    <ion-row class="row2">
        <ion-col>

        </ion-col>
    </ion-row>

</ion-grid>

<ion-slide>
    <div class="contaier-login">
        <ion-grid>
            <ion-row>
                <ion-col>
                    <h1>Iniciar Sesión</h1>
                </ion-col>
            </ion-row>
            <ion-row>
                <ion-col>
                    <ion-list>

                        <ion-item>
                            <ion-icon name="person" class="icon-login"></ion-icon>
                            <ion-input name="user" type="text" required placeholder="Usuario"></ion-input>
                        </ion-item>
                        <br />
                        <ion-item>
                            <ion-icon name="lock" class="icon-login"></ion-icon>
                            <ion-input name="password" type="password" required placeholder="Contraseña"></ion-input>
                        </ion-item>

                    </ion-list>
                </ion-col>
            </ion-row>
            <ion-row>
                <ion-col>
                    <ion-button type="submit" fill="solid" expand="full">
                        Entrar
                    </ion-button>
                </ion-col>
            </ion-row>
            <ion-row>
                <ion-col>
                    <ion-label>
                        <h3>¿Olvido la contraseña?</h3>
                    </ion-label>
                </ion-col>
            </ion-row>
        </ion-grid>
    </div>
</ion-slide>

login.page.scss

.grid1 {
    height: 100%;
    padding: 0px;
}

.contaier-login {
    width: 90%;
    padding: 10px;
    background: #FFFFFF;
    border-radius: 5px;
    -webkit-box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.75);
    box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.75);
}


.row1 {
    height: 50%;
    background: -moz-linear-gradient(45deg, rgba(61, 66, 150, 1) 0%, rgba(84, 74, 171, 0.8) 100%);
    background: -webkit-linear-gradient(45deg, rgba(61, 66, 150, 1) 0%, rgba(84, 74, 171, 0.8) 100%);
    background: linear-gradient(45deg, rgba(61, 66, 150, 1) 0%, rgba(84, 74, 171, 0.8) 100%);
}

.row2 {
    height: 50%;
}

ion-icon {
    margin-right: 15px;
}

ion-button {
    margin-top: 5px;
    margin-bottom: 15px;
}

ion-slide {
    width: 100%;
    height: 100%;
    position: absolute !important;
    top: 0px !important;
}

То, что я хочу, эторазместить изображение в верхней части окна входа в систему, не теряя центрирования.и поместите текст в нижней части с надписью «Вы забыли свой пароль?».Я пробовал несколько вещей, но мне не удалось это сделать.

Я хочу скопировать нечто подобное.

введите описание изображения здесь

Если бы кто-то помог мне, я был бы очень благодарен: D

Answer 1

Вы можете сделать это легко, используя flexbox, что-то вроде этого:

<ion-row class="row1">
    <ion-col class="img-container">
      <img src="imgSRC">
    </ion-col>
</ion-row>

и в css файле

.img-container {
   display: flex;
   justify-content: center;
   // align-items: center; this only if you want to vertical align it to the center too
}

То же самое для забытого пароля в нижнем колонтитуле.