How create login page in ionic with round input type?

How create login Page in Ionic with round input type.

As we have discussed how to create a new project in previous section. Now we will see how
create a new page for login with rounded input type and button.Go to the created
project(myApplication) and write the command below -
C:\Users\USERNAME\IonicProject\myApplication>ionic g page login(pagename)
We then notice that created page in app folder has login.page.ts, login.page.html, login.page.scss and login.module.ts files.

Our html page will look like below:
<ion-header>
<ion-toolbar>
<ion-title>login</ion-title>
</ion-toolbar>
</ion-header>
<section class="log_banner">
<div class="container">
<div class="logo-center2">
<img src="assets/images/logo.png">
</div>
<div class="logo-center1">
<form>
<input type="text" placeholder="Enter Email" name="email" required>
<input type="password" placeholder="Enter Password" name="psw" required>
<input type="password" placeholder="Repeat Password" name="psw-repeat" required>
<input type="button" value="GO AHEAD" class="go_btn">
</form>
</div>
</div>
</section>
<ion-content>


</ion-content>


/*========= This is our .css file for the login page: =========*/

.log_banner{
background-image: url(../../assets/images/logbanner.jpg);
    width: 100%;
    height:100vh;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 32% 0%;
}
input[type=text], input[type=password] {
  width: 100%;
  padding: 10px 10px;
  margin: 5px 0 22px 0;
  display: inline-block;
  border: none;
  border-radius: 23px;

  }
  .logo-center1 {
    width: 83%;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    padding-top: 0rem;
}
 .logo-center2 {
 margin: auto;
    display: block;
    width:60%;
    text-align:center;
   padding-top:3rem;
 }
 input.go_btn {
    width: 100%;
    padding: 10px 0px;
    border-radius: 23px;
    border: none;
    background: #00aeef;
    color: #fff;
    font-weight: 600;
}
/*============= Our login page will look like following =======*/ 




Comments

Post a Comment

Popular posts from this blog

What is ionic framework?

How to navigate to another page in ionic | Navigation in ionic