From d60a88877183df63a8eeeaa5d6d5f87735ca7ed9 Mon Sep 17 00:00:00 2001 From: Viicious Date: Thu, 31 May 2018 02:29:59 +0200 Subject: [PATCH] home design --- src/app/app.module.ts | 11 ++- src/app/home/home.component.html | 136 ++++++++++++++++++++++++++++ src/app/home/home.component.scss | 44 +++++++++ src/app/home/home.component.spec.ts | 25 +++++ src/app/home/home.component.ts | 22 +++++ 5 files changed, 236 insertions(+), 2 deletions(-) create mode 100644 src/app/home/home.component.html create mode 100644 src/app/home/home.component.scss create mode 100644 src/app/home/home.component.spec.ts create mode 100644 src/app/home/home.component.ts diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 1592931..c9ff516 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -30,6 +30,7 @@ import {VgBufferingModule} from 'videogular2/buffering'; import { DropzoneModule } from 'ngx-dropzone-wrapper'; import { DROPZONE_CONFIG } from 'ngx-dropzone-wrapper'; import { DropzoneConfigInterface } from 'ngx-dropzone-wrapper'; +import { HomeComponent } from './home/home.component'; const DEFAULT_DROPZONE_CONFIG: DropzoneConfigInterface = { @@ -40,10 +41,15 @@ const DEFAULT_DROPZONE_CONFIG: DropzoneConfigInterface = { }; const appRoutes: Routes = [ + { + path: 'home', + component: HomeComponent, + data: { title: 'home' } + }, { path: 'main', component: MainComponent, - data: { title: 'Home Main' } + data: { title: 'Main' } }, { path: 'books', @@ -61,7 +67,7 @@ const appRoutes: Routes = [ data: { title: 'Sign Up' } }, { path: '', - redirectTo: '/login', + redirectTo: '/home', pathMatch: 'full' } ]; @@ -69,6 +75,7 @@ const appRoutes: Routes = [ @NgModule({ declarations: [ AppComponent, + HomeComponent, LoginComponent, SignupComponent, MainComponent, diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html new file mode 100644 index 0000000..45bd14e --- /dev/null +++ b/src/app/home/home.component.html @@ -0,0 +1,136 @@ + + +
+ + + + + + + + +
+
+ +
+
+ + + + +
+
+
+
+
+
+
+

Sign up right now!

+
+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem repellendus quasi fuga nesciunt dolorum nulla magnam veniam sapiente, fugiat! Commodi sequi non animi ea dolor molestiae, quisquam iste, maiores. Nulla.
+
+ Learn more +
+
+ +
+ +
+
+ +
+

Log in:

+
+
+ + +
+ + + +
+ +
+ + + +
+ +
+ + +
+
+ + + +
+
+ +
+
+ + + + + +
+
+ +
+

Register:

+
+
+ + +
+ + + +
+
+ + + +
+ +
+ + + +
+ +
+ + +
+ +
+ + + +
+
+ +
+
+ +
+
+
+
+
+
+ +
+ diff --git a/src/app/home/home.component.scss b/src/app/home/home.component.scss new file mode 100644 index 0000000..c7d52b5 --- /dev/null +++ b/src/app/home/home.component.scss @@ -0,0 +1,44 @@ + +.intro-2 { + background: url("http://mdbootstrap.com/img/Photos/Others/img%20(42).jpg")no-repeat center center; + background-size: cover; +} +.view { + height: 100vh !important; +} +.top-nav-collapse { + background-color: #3f51b5 !important; +} +.navbar:not(.top-nav-collapse) { + background: transparent !important; +} +@media (max-width: 768px) { + .navbar:not(.top-nav-collapse) { + background: #3f51b5 !important; + } +} +.rgba-gradient .full-bg-img { + background: linear-gradient(45deg, rgba(83, 125, 210, 0.4), rgba(178, 30, 123, 0.4) 100%); +} +.card { + background-color: rgba(229, 228, 255, 0.2); +} + +.md-form .prefix { + font-size: 1.5rem; + margin-top: 1rem; +} +.md-form label { + color: #ffffff; +} +h6 { + line-height: 1.7; +} +@media (max-width: 740px) { + .full-height, + .full-height body, + .full-height header, + .full-height header .view { + height: 1040px; + } +} diff --git a/src/app/home/home.component.spec.ts b/src/app/home/home.component.spec.ts new file mode 100644 index 0000000..490e81b --- /dev/null +++ b/src/app/home/home.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { HomeComponent } from './home.component'; + +describe('HomeComponent', () => { + let component: HomeComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ HomeComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(HomeComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts new file mode 100644 index 0000000..b90c150 --- /dev/null +++ b/src/app/home/home.component.ts @@ -0,0 +1,22 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-home', + templateUrl: './home.component.html', + styleUrls: ['./home.component.scss'] +}) +export class HomeComponent implements OnInit { + registerbool: boolean; + + constructor() { + this.registerbool = false; + } + + showregister() { + this.registerbool = !this.registerbool + } + + ngOnInit() { + } + +}