Skip to content
Permalink
Browse files
design login page
  • Loading branch information
pembemiriam committed Apr 6, 2018
1 parent 7cd970a commit 5c820a8d3c2b72cdeb7fabd9474feddf508f475d
Showing 4 changed files with 95 additions and 45 deletions.
@@ -1,6 +1,6 @@
import { BrowserModule } from '@angular/platform-browser';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {MatButtonModule, MatCheckboxModule, MatInputModule, MatIconModule, MatFormFieldModule} from '@angular/material';
import {MatButtonModule, MatCheckboxModule, MatInputModule, MatIconModule, MatFormFieldModule, MatSelectModule, MatSelect} from '@angular/material';

import { NgModule } from '@angular/core';

@@ -14,8 +14,8 @@ import {LoginComponent} from './login/login.component'
AppComponent,LoginComponent
],
imports: [
BrowserModule,MatButtonModule, MatCheckboxModule, MatInputModule, MatIconModule,
MatFormFieldModule
BrowserModule, BrowserAnimationsModule, MatButtonModule, MatCheckboxModule, MatInputModule, MatIconModule,
MatFormFieldModule, MatSelectModule
],
providers: [],
bootstrap: [AppComponent]
@@ -1,7 +1,7 @@
.greetings{
color:white;
margin-left:50px;
font-size:30px;
font-size:34px;
margin-bottom:1%;
}
.login-div{
@@ -25,20 +25,33 @@
vertical-align: top;


}
.app-input,.app-input1{
display:flex;
display:inline-block;

}
.image-div{
margin-top:5%;
margin-top:3%;
}

.app-input{
padding:10%;
.image{
width: 300px;
}
.form-div{
margin-left:10%;
}
.app-input2{


width:80%;
}
.app-input1{
width:90%;
}

.btn{
margin-left: 10%;
margin-left: 5%;
margin-right: 10%;
width:70%;
width:75%;
}
.welcome,.language{
display:flex;
@@ -49,4 +62,11 @@
}
.language{
margin-left: 10%;
color:white;
}
.change{
font-size:12px;
}
.select-input{
width:100px;
}
@@ -1,37 +1,64 @@
<div class="main-background" style="background-image:url('assets/Background.png');">
<div style="margin-top:10%; margin-left:10%;">
<div class="welcome">
<span class="greetings">Welcome To Apache Fineract CN</span>
</div>
<div class="language">
<span>Change language</span>
</div>
</div>
<div style="margin-left:10%;">
<div class="image-div">
<img src="assets/fineract.png" class="image">
</div>
<div class="login-div mat-elevation-z2">
<mat-icon class="app-input">business</mat-icon>
<mat-form-field>
<input matInput placeholder="Tenant" class="app-input">
</mat-form-field>
<br>
<mat-icon class="app-input">person</mat-icon>
<mat-form-field>
<input matInput placeholder="Username" class="app-input">
</mat-form-field>
<br>
<mat-icon class="app-input">https</mat-icon>
<mat-form-field>
<input matInput placeholder="Password" class="app-input">
<div style="margin-top:5%; margin-left:25%;">
<div class="welcome">
<span class="greetings">Welcome To Apache Fineract CN</span>
</div>
<div class="language">
<span class="change">Change language</span>
<mat-form-field class="select-input">
<mat-select [(value)]="selected">
<mat-option value="English">English</mat-option>
<mat-option value="French">French</mat-option>
<mat-option value="Portoguese">Portoguese</mat-option>
</mat-select>
</mat-form-field>
<p>
<button mat-raised-button color="primary" type="submit" class="btn">Sign In</button>
</p>
</div>
</div>

</div>
</div>
<div style="margin-left:20%;">
<div class="image-div">
<img src="assets/fineract.png" class="image">
</div>
<div class="login-div mat-elevation-z2">
<br>
<div class="form-div">
<div class="app-input">
<mat-icon>business</mat-icon>
</div>
<div class="app-input1">
<mat-form-field class="app-input2">
<input matInput placeholder="Tenant">
</mat-form-field>
</div>

<br>
<br>
<div class="app-input">
<mat-icon>person</mat-icon>
</div>
<div class="app-input1">
<mat-form-field class="app-input2">
<input matInput placeholder="Username">
</mat-form-field>
</div>
<br>
<br>
<div class="app-input">
<mat-icon>https</mat-icon>
</div>
<div class="app-input1">
<mat-form-field class="app-input2">
<input matInput placeholder="Password">
</mat-form-field>
</div>
<br>
<br>
<p>
<button mat-raised-button color="primary" type="submit" class="btn">Sign In</button>
</p>
<br>
</div>
</div>




</div>
</div>
@@ -9,6 +9,9 @@ import {Router } from '@angular/router'
styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
selected = 'English';



constructor(){}

0 comments on commit 5c820a8

Please sign in to comment.