design login page

src/app/app.module.ts

@@ -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]

src/app/login/login.component.css

@@ -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;
 }

src/app/login/login.component.html

@@ -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>

src/app/login/login.component.ts

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