Correct header not displaying in 960px + add card dashboard responsive + correct C2A title

src/app/app.module.ts

@@ -16,6 +16,7 @@ import { LogService, SEOService } from '@app/core/services';
 import { GlobalErrorHandler } from '@app/core/global-error-handler/global-error-handler.service';
 
 import { environment } from '@env/environment';
+import { CardDashboardComponent } from './card-dashboard/card-dashboard.component';
 
 @NgModule( {
   declarations: [
@@ -23,6 +24,7 @@ import { environment } from '@env/environment';
     HomeComponent,
     HeaderComponent,
     RegisterComponent,
+    CardDashboardComponent,
   ],
   imports: [
     BrowserModule,

src/app/card-dashboard/card-dashboard.component.css

@@ -0,0 +1,19 @@
+.card-container {
+  margin: 40px;
+}
+
+.card-container.left.desktop {
+  margin-right: 20px;
+}
+
+.card-container.right.desktop {
+  margin-left: 20px;
+}
+
+.card-container.left.mobile {
+  margin-bottom: 20px;
+}
+
+.card-container.right.mobile {
+  margin-top: 20px;
+}

src/app/card-dashboard/card-dashboard.component.html

@@ -0,0 +1,26 @@
+<div class="card-container {{ matCardClass }}" ngClass.gt-sm="desktop" ngClass.lt-md="mobile">
+
+  <mat-card>
+
+    <mat-card-header>
+      <mat-card-title>Shiba Inu</mat-card-title>
+    </mat-card-header>
+
+    <mat-card-content>
+      <p>
+        The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from
+        Japan.
+        A small, agile dog that copes very well with mountainous terrain, the Shiba Inu was
+        originally
+        bred for hunting.
+      </p>
+    </mat-card-content>
+
+    <mat-card-actions>
+      <button mat-button>LIKE</button>
+      <button mat-button>SHARE</button>
+    </mat-card-actions>
+
+  </mat-card>
+
+</div>

src/app/card-dashboard/card-dashboard.component.spec.ts

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

src/app/card-dashboard/card-dashboard.component.ts

@@ -0,0 +1,24 @@
+import { Component, Input, OnInit } from '@angular/core';
+
+@Component( {
+  selector: 'app-card-dashboard',
+  templateUrl: './card-dashboard.component.html',
+  styleUrls: [ './card-dashboard.component.css' ]
+} )
+export class CardDashboardComponent implements OnInit {
+
+  public matCardClass: string;
+  @Input() private position: string;
+
+  constructor() {
+  }
+
+  ngOnInit() {
+    if ( this.position === 'first' ) {
+      this.matCardClass = 'left';
+    } else {
+      this.matCardClass = 'right';
+    }
+  }
+
+}

src/app/core/services/seo/seo.service.ts

@@ -50,7 +50,7 @@ export class SEOService {
     event.description = ( !event.description ? this.defaultDescription : event.description );
     event.noindex = ( !event.noindex ? this.defaultNoIndex : event.noindex );
     event.nofollow = ( !event.nofollow ? this.defaultNoFollow : event.nofollow );
-    this.updateTitle( event.title + ' | C2A' );
+    this.updateTitle( event.title + ' | ' + environment.appName );
     this.updateDescription( event.description );
     this.updateIndexFollow( event.noindex, event.nofollow );
   }

src/app/header/header.component.html

@@ -27,8 +27,8 @@
 
   </div>
 
-  <div id="header-container-mobile" fxLayout="row" fxLayoutAlign="space-between" fxShow
-       fxHide.gt-sm="true">
+  <div fxHide fxLayout="row" fxLayoutAlign="space-between" fxShow.lt-md="true"
+       id="header-container-mobile">
 
     <button mat-flat-button style="position: absolute;top: 0;left: 0;height: 60px;">
       <mat-icon style="transform: scale(1.3)">menu</mat-icon>

src/app/home/home.component.html

@@ -1 +1,21 @@
 <app-header></app-header>
+
+<div class="main-container">
+
+  <div fxLayout="row" fxLayout.sm="column" fxLayout.xs="column" fxLayoutAlign="space-between">
+
+    <div fxFlex>
+
+      <app-card-dashboard position="first"></app-card-dashboard>
+
+    </div>
+
+    <div fxFlex>
+
+      <app-card-dashboard position="second"></app-card-dashboard>
+
+    </div>
+
+  </div>
+
+</div>

src/styles.css

@@ -17,3 +17,12 @@ app-header .mat-fab .mat-button-wrapper {
   line-height: normal;
   padding: 0;
 }
+
+.main-container {
+  max-width: 1280px;
+  margin: auto;
+  box-sizing: border-box;
+  padding: 0 10px;
+  width: 100%;
+  min-height: 80%;
+}