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 -
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 =======*/
Thank you very much for sharing keep writing more blogs
ReplyDeleteAngular course
Angular training
angular certification
angularjs online training
angularjs online course
Angular Online Training
Angularjs Online Training Hyderabad
Angularjs Online Training India
Very Informative blog thanks so much for sharing with us
ReplyDeleteangular certification