Ionic Creator

Login & Signup Page Design

Are you ready to design a killer login & signup page for your app? Follow this video to build a beautiful login and signup page using Ionic's components and the custom SCSS editor.

Ionic Auth will be discontinued

We have removed the second video in the Ionic Auth video series, since Ionic Auth will be retired in early 2018. See this blog post for details on this decision.

 

Here's the final code from the end of the video:

.center-form{
    
    width:290px;
   position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
 
    label{
        background-color: rgba(255,255,255,0.7);
        border-color: rgba(255,255,255,0);
        
        &.top-input{
            border-radius: 4px 4px 0px 0px;   
        }
        
        &.bottom-input{
            border-radius: 0px 0px 4px 4px;
        }
    }
    
    .button-positive{
        opacity:0.9;
    }
    
}

.error-box{
    padding:10px;
    border:1px solid darken($assertive, 10%);
    background-color: $assertive;
    border-radius:4px;
    margin-bottom:10px;
    
    p{
        color:white;
        margin:0px;
    }
}

Login & Signup Page Design