Dark register page Ionic 4

Today I will show you how to create the following user registration page in ionic 4

We generate a page in ionic with the following command:

ionic g page login

Now we will start with the code

We will modify the file login.html

<ion-content>

  <div class="container">

    <div class="header">
      <div class="title">
        <img src="https://image.flaticon.com/icons/png/512/149/149071.png">
      </div>
      <h3>Welcome!</h3>
      <p>Sign up to get an account</p>
    </div>

    <div class="body">

      <ion-list>
        <ion-item>
          <ion-icon slot="start" name="person"></ion-icon>
          <ion-input placeholder="Display name"></ion-input>
        </ion-item>

        <ion-item>
          <ion-icon slot="start" name="at"></ion-icon>
          <ion-input placeholder="Email"></ion-input>
        </ion-item>

        <ion-item>
          <ion-icon slot="start" name="lock"></ion-icon>
          <ion-input placeholder="Password"></ion-input>
        </ion-item>

        <ion-item>
          <ion-icon slot="start" name="lock"></ion-icon>
          <ion-input placeholder="Retype Password"></ion-input>
        </ion-item>
      </ion-list>
      
    </div>

    <div class="footer">
      Don't have an account? &nbsp; <a routerLink="/home">Sign In</a>
    </div>

  </div>

</ion-content>

We will add the styles to the file login.scss

ion-content {
    --offset-top: 0px;
    --offset-bottom: 0px;
    --background: #242A34;
    --color: #FFF;

    .container {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 100%;
        padding: 20px 0;

        .header {
            flex: 1;
            justify-content: center;
            text-align: center;
            padding-top: 20px;

            .title {
                img {
                    height: 100px;
                    width: 100px;
                }
            }

            h3 {
                color: #06bebd;
            }
        }
        .body {
            flex: 1.5;

            ion-list {
                --background: none;
                background: none;
                margin-bottom: 0!important;
                
                ion-item {
                    --border-color: transparent!important;
                    --highlight-height: 0;
                    --background: none;
                    background: rgba(255,255,255,0.1);
                    border-radius: 4px;
                    margin-bottom: 10px;

                    ion-icon {
                        color: #FAFAFA;
                    }

                    ion-input {
                        --color: #FFF;
                    }
                }
            }
        }
        .footer {
            display: flex;

            a {
                color: #06bebd;
                font-weight: 600;
                text-decoration: none;
            }
        }
    }
}

 

Leave a Reply

Your email address will not be published. Required fields are marked *