home design

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,

src/app/home/home.component.html

@@ -0,0 +1,136 @@
+
+<!--Main Navigation-->
+<header>
+
+  <!--Navbar-->
+  <mdb-navbar SideClass="navbar navbar-expand-lg navbar-dark fixed-top scrolling-navbar">
+    <logo>
+      <a class="logo navbar-brand waves-light" mdbWavesEffect href="#"><strong>SupFile</strong></a>
+    </logo>
+    <links>
+      <ul class="navbar-nav mr-auto">
+        <li class="nav-item active waves-light" mdbWavesEffect>
+          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
+        </li>
+        <li class="nav-item waves-light" mdbWavesEffect>
+          <a class="nav-link" href="#">Link</a>
+        </li>
+        <li class="nav-item waves-light" mdbWavesEffect>
+          <a class="nav-link" href="#">Profile</a>
+        </li>
+      </ul>
+      <form class="form-inline waves-light" mdbWavesEffect>
+        <div class="md-form mt-0">
+          <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
+        </div>
+      </form>
+    </links>
+  </mdb-navbar>
+
+  <!--Intro Section-->
+  <section class="view intro-2">
+    <div class="full-bg-img mask rgba-gradient">
+      <div class="container flex-center">
+        <div class="d-flex align-items-center content-height w-100">
+          <div class="row flex-center pt-5 mt-3 w-100">
+            <div class="col-md-6 text-center text-md-left mb-5">
+              <div class="white-text">
+                <h1 class="h1-responsive font-bold wow fadeInLeft" data-wow-delay="0.3s">Sign up right now! </h1>
+                <hr class="hr-light wow fadeInLeft" data-wow-delay="0.3s">
+                <h6 class="wow fadeInLeft" data-wow-delay="0.3s">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.</h6>
+                <br>
+                <a class="btn btn-outline-white wow fadeInLeft waves-light" data-wow-delay="0.3s" mdbWavesEffect>Learn more</a>
+              </div>
+            </div>
+
+            <div class="col-md-6 col-xl-5 offset-xl-1">
+              <!--Form-->
+              <div *ngIf="registerbool===false" class="card wow flipInY" data-wow-delay="0.3s">
+                <div class="card-body">
+                  <!--Header-->
+                  <div class="text-center">
+                    <h3 class="white-text"><i class="fa fa-user white-text"></i> Log in:</h3>
+                    <hr class="hr-light">
+                  </div>
+
+                  <!--Body-->
+                  <div class="md-form">
+                    <i class="fa fa-envelope prefix white-text"></i>
+                    <input type="email" id="form2" class="form-control" data-error=" " data-success=" " mdbInputDirective>
+                    <label for="form2">Email</label>
+                  </div>
+
+                  <div class="md-form">
+                    <i class="fa fa-lock prefix white-text"></i>
+                    <input type="password" id="form4" class="form-control" data-error=" " data-success=" " mdbInputDirective>
+                    <label for="form4">Password</label>
+                  </div>
+
+                  <div class="text-center">
+                    <button class="btn btn-indigo waves-light" mdbWavesEffect>Log In</button>
+                    <button class="btn btn-indigo waves-light" mdbWavesEffect (click)="showregister()">Sign up</button>
+                    <hr class="hr-light mb-3 mt-4">
+                    <div class="inline-ul text-center d-flex justify-content-center">
+                      <a class="icons-sm fb-ic px-4"><i class="fa fa-facebook white-text"> </i></a>
+                      <a class="icons-sm gplus-ic px-4"><i class="fa fa-google white-text"> </i></a>
+                      <a class="icons-sm px-4"><i class="fa fa-github white-text" aria-hidden="true"></i></a>
+                    </div>
+                  </div>
+
+                </div>
+              </div>
+              <!--/.Form-->
+
+
+
+              <!--Form-->
+              <div *ngIf="registerbool" class="card wow flipInY" data-wow-delay="0.3s">
+                <div class="card-body">
+                  <!--Header-->
+                  <div class="text-center">
+                    <h3 class="white-text"><i class="fa fa-user white-text"></i> Register:</h3>
+                    <hr class="hr-light">
+                  </div>
+
+                  <!--Body-->
+                  <div class="md-form">
+                    <i class="fa fa-user prefix white-text"></i>
+                    <input type="text" id="form3" class="form-control" data-success=" " data-error=" " mdbInputDirective>
+                    <label for="form3">Your name</label>
+                  </div>
+                  <div class="md-form">
+                    <i class="fa fa-envelope prefix white-text"></i>
+                    <input type="email" id="form2" data-error="wrong email" data-success=" " data-error=" " class="form-control" mdbInputDirective>
+                    <label for="form2">Your email</label>
+                  </div>
+
+                  <div class="md-form">
+                    <i class="fa fa-lock prefix white-text"></i>
+                    <input type="password" id="form4" data-success=" " data-error=" " class="form-control"  mdbInputDirective>
+                    <label for="form4">Your password</label>
+                  </div>
+
+                  <div class="text-center">
+                    <button class="btn btn-indigo waves-light" mdbWavesEffect>Sign up</button>
+                    <button class="btn btn-indigo waves-light" mdbWavesEffect (click)="showregister()">Log In</button>
+                    <hr class="hr-light mb-3 mt-4">
+
+                    <div class="inline-ul text-center d-flex justify-content-center">
+                      <a class="icons-sm fb-ic px-4"><i class="fa fa-facebook white-text"> </i></a>
+                      <a class="icons-sm gplus-ic px-4"><i class="fa fa-google white-text"> </i></a>
+                      <a class="icons-sm px-4"><i class="fa fa-github white-text" aria-hidden="true"></i></a>
+                    </div>
+                  </div>
+
+                </div>
+              </div>
+              <!--/.Form-->
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+</header>
+<!--Main Navigation-->

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

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<HomeComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ HomeComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HomeComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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() {
+  }
+
+}