Design Login css Ionic

Question

I currently have this login design

I have this code in html for the part of the login presentation. 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;
}

What I want is to place an image at the top of the login box, without losing the centering. and place a text in the bottom part that says "Have you forgotten your password?". I have been trying several things but I have not managed to do it.

I want to copy something similar to this.

enter image description here

If someone helped me, I would be very grateful :D

Answer 1

You can do that easily using flexbox, something like this:

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

And in the css file

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

The same for the forgotten password on the footer.