Login

src/app/app-routing.module.ts

@@ -1,7 +1,7 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 import { HomeComponent } from './home/home.component';
-import { LoginComponent } from './login/login.component';
+import { loginComponent } from './login/login.component';
 import { UserDashboardComponent } from './user-dashboard/user-dashboard.component';
 import { CoursesComponent } from './courses/courses.component';
 import { CoursesDescriptionComponent } from './courses-description/courses-description.component';
@@ -18,7 +18,7 @@ const routes: Routes = [
   { path: 'course-preview', component: CoursePreviewComponent },
   { path: 'courses-description', component: CoursesDescriptionComponent },
   { path: 'forum', component: ForumComponent },
-  { path: 'login', component: LoginComponent },
+  { path: 'login', component: loginComponent },
   { path: 'about', component: AboutComponent }
 ];
 

src/app/app.module.ts

@@ -1,7 +1,7 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
-
+import { loginComponent } from './login/login.component';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { HomeComponent } from './home/home.component';
@@ -10,28 +10,28 @@ import { ContactComponent } from './contact/contact.component';
 import { NavbarComponent } from './shared/navbar/navbar.component';
 import { FooterComponent } from './shared/footer/footer.component';
 import { ContactIconComponent } from './shared/contact-icon/contact-icon.component';
-import { LoginComponent } from './login/login.component';
 import { CoursesComponent } from './courses/courses.component';
 import { CoursesDescriptionComponent } from './courses-description/courses-description.component';
 import { ForumComponent } from './forum/forum.component';
 import { CoursePreviewComponent } from './course-preview/course-preview.component';
 import { AboutComponent } from './about/about.component';
-
+import { LoginBoxComponent } from './login-box/login-box.component';
 @NgModule({
   declarations: [
     AppComponent,
     HomeComponent,
     NavbarComponent,
     FooterComponent,
+    loginComponent,
     ContactIconComponent,
-    LoginComponent,
     UserDashboardComponent,
     CoursesComponent,
     CoursesDescriptionComponent,
     ForumComponent,
     CoursePreviewComponent,
     ContactComponent,
-    AboutComponent
+    AboutComponent,
+    LoginBoxComponent,
   ],
   imports: [BrowserModule, AppRoutingModule, NgbModule],
   providers: [],

src/app/login-box/login-box.component.scss

@@ -0,0 +1,71 @@
+.form-group {
+    padding-right: 20px;
+    padding-left: 20px;
+    width: 560px;
+  }
+    .section1 {
+      width: 550px;
+      height: 830px;
+      background-color: #EDF5E1;
+      margin-top: 50px;
+      margin-bottom: 50px;
+      float: right;
+      margin-right: 133px;
+
+
+    }
+    .section2 {
+      width: 550px;
+      height: 830px;
+      background-color: #EDF5E1;
+        margin-top: 50px;
+        margin-bottom: 50px;
+        float: left;
+        margin-left: 132px;
+               }
+    #one {
+      color: black;
+
+    }
+
+
+    .input-group-text 
+    {
+     height: 34px;
+     font-size: 14px;
+
+    }
+    .form-check-label
+    {
+    padding-left: 20px;
+
+    }
+    .new
+    {
+
+     text-decoration: underline;
+    }
+    .forget {
+      text-decoration-line: none;
+      color: black;
+    }
+    .bgoogle {
+      background-color: #DD4B39;
+      color: white;
+    }
+    .bfacebook {
+      background-color: #3B5998;
+      color: white;
+    }
+    .picture {
+      align-content: center;
+    }
+    .body {
+    background-color: #44579a;
+    color: black;
+           }
+    .dob {
+      width: 510px;
+      height: 35px;
+      border-top-right-radius: none;
+    }

src/app/login-box/login-box.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LoginBoxComponent } from './login-box.component';
+
+describe('LoginBoxComponent', () => {
+  let component: LoginBoxComponent;
+  let fixture: ComponentFixture<LoginBoxComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ LoginBoxComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LoginBoxComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/login-box/login-box.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-login-box',
+  templateUrl: './login-box.component.html',
+  styleUrls: ['./login-box.component.scss']
+})
+export class LoginBoxComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}