Cacher is the code snippet organizer for pro developers

<ion-content class="background">

  <ion-card>

    <ion-card-header>
      Login Form
    </ion-card-header>

    <ion-card-content>

      <ion-list no-line>
        <ion-item>
          <ion-input type="text" placeholder="Username"></ion-input>
        </ion-item>

        <ion-item>
          <ion-input type="password" placeholder="Password"></ion-input>
        </ion-item>

        <a>Forgot your login details ? <b>Get help signing in </b></a>
        <button ion-button block outline color="light">Log in</button>
        <a>OR</a>

        <button ion-button block color="facebook">
          <ion-icon name="logo-facebook"></ion-icon>Login with facebook
        </button>

        <button ion-button block color="danger">
          <ion-icon name="logo-googleplus"></ion-icon>Login with google plus
        </button>

        <button ion-button block color="primary">
          <ion-icon name="logo-twitter"></ion-icon>Login with twitter
        </button>
      </ion-list>

    </ion-card-content>

  </ion-card>
  <button ion-button clear full color="light">Don't have an account ? Sign up</button>

</ion-content>

page-home {
    .background {
        background-image: url('../assets/images/Huawei-Honor-7-Stock-Wallpapers-18.jpg');
        background-size: 400px;
    }

    .scroll-content {
        align-content: center;
        display:  flex;
        flex-direction: column;
        justify-content: center;
        text-align: center;
    }

    ion-card.card {
        box-shadow: none;
        background: rgba(0, 0, 0, 0.5);
        border-radius: 5px;
    }

    a, p,
    ion-card-header.card-header {
        color: #fff;
    }

    .list > .item-block:first-child {
        border: medium none;
    }

   .list > .item-block .item-inner {
        border: medium none;
    }

    .item {
        margin-bottom: 10px;
        background: rgba(255, 255, 255, 0.5);
        border: medium none;

        .text-input {
            color: #fff;
        }

        input::-moz-placeholder {
             color: #fff!important;
        }
        input:-moz-placeholder {
            color: #fff!important;
        }

        *:-moz-placeholder {
            color: #fff!important;
        }
        *:-ms-inout-placeholder {
            color: #fff!important;
        }
        *::-webkit-input-placeholder {
            color: #fff!important;
        }
    }
        .icon {
            padding-right: 10px;
        }

        .bottom {
            position: absolute;
            bottom: 0;
        }
}