lofidesign

src/app/app.component.html

@@ -33,7 +33,7 @@
     height: 60px;
     display: flex;
     align-items: center;
-    background-color: #1976d2;
+    background-color: #6f6f6e;
     color: white;
     font-weight: 600;
   }
@@ -42,18 +42,12 @@
     margin: 0 16px;
   }
 
-  .toolbar #twitter-logo {
+  .toolbar #thd-logo {
     height: 40px;
     margin: 0 8px;
   }
 
-  .toolbar #youtube-logo {
-    height: 40px;
-    margin: 0 16px;
-  }
-
-  .toolbar #twitter-logo:hover,
-  .toolbar #youtube-logo:hover {
+  .toolbar #thd-logo:hover {
     opacity: 0.8;
   }
 
@@ -296,28 +290,32 @@
 <!-- Toolbar -->
 <div class="toolbar" role="banner">
   <img
-    width="40"
-    alt="Angular Logo"
-    src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg=="
+    height="40"
+    alt="THD Logo"
+    src="https://www.th-deg.de/static/images/logos/THD-Logo.png"
   />
-  <span>Welcome</span>
+  <span>IO Plattform</span>
     <div class="spacer"></div>
-    <a aria-label="Angular on twitter" target="_blank" rel="noopener" href="https://twitter.com/angular" title="Twitter">
-      <svg id="twitter-logo" height="24" data-name="Logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">
-        <rect width="400" height="400" fill="none"/>
-        <path d="M153.62,301.59c94.34,0,145.94-78.16,145.94-145.94,0-2.22,0-4.43-.15-6.63A104.36,104.36,0,0,0,325,122.47a102.38,102.38,0,0,1-29.46,8.07,51.47,51.47,0,0,0,22.55-28.37,102.79,102.79,0,0,1-32.57,12.45,51.34,51.34,0,0,0-87.41,46.78A145.62,145.62,0,0,1,92.4,107.81a51.33,51.33,0,0,0,15.88,68.47A50.91,50.91,0,0,1,85,169.86c0,.21,0,.43,0,.65a51.31,51.31,0,0,0,41.15,50.28,51.21,51.21,0,0,1-23.16.88,51.35,51.35,0,0,0,47.92,35.62,102.92,102.92,0,0,1-63.7,22A104.41,104.41,0,0,1,75,278.55a145.21,145.21,0,0,0,78.62,23" fill="#fff"/>
-      </svg>
-    </a>
-    <a aria-label="Angular on YouTube" target="_blank" rel="noopener" href="https://youtube.com/angular" title="YouTube">
-      <svg id="youtube-logo" height="24" width="24" data-name="Logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#fff">
-        <path d="M0 0h24v24H0V0z" fill="none"/>
-        <path d="M21.58 7.19c-.23-.86-.91-1.54-1.77-1.77C18.25 5 12 5 12 5s-6.25 0-7.81.42c-.86.23-1.54.91-1.77 1.77C2 8.75 2 12 2 12s0 3.25.42 4.81c.23.86.91 1.54 1.77 1.77C5.75 19 12 19 12 19s6.25 0 7.81-.42c.86-.23 1.54-.91 1.77-1.77C22 15.25 22 12 22 12s0-3.25-.42-4.81zM10 15V9l5.2 3-5.2 3z"/>
-      </svg>
-    </a>
+    <div class="example-button-row">
+      <button mat-fab>Basic</button>
+      <button mat-fab color="primary">Primary</button>
+      <button mat-fab color="accent">Accent</button>
+      <button mat-fab color="warn">Warn</button>
+      <button mat-fab disabled>Disabled</button>
+      <a mat-fab routerLink=".">Link</a>
+    </div>
+</div>
+<!--Banner-->
+<div class = "banner" role="banner">
+  <img 
+  width="100%"
+  alt="thd campus"
+  src= "assets/img/thd-campus.jpg">
 </div>
 
 <div class="content" role="main">
 
   <h3><a [routerLink]="['routing-test']">test</a></h3>
+  <h3><a [routerLink]="['news']">News</a></h3>
 
 <router-outlet></router-outlet>

src/app/app.module.ts

@@ -11,6 +11,7 @@ import { RouterModule } from '@angular/router';
 import { StartComponent } from './start/start.component';
 import { NavigationComponent } from './navigation/navigation.component';
 import { EventsComponent } from './events/events.component';
+import { NewsComponent } from './news/news.component';
 
 @NgModule({
   declarations: [
@@ -18,7 +19,8 @@ import { EventsComponent } from './events/events.component';
     RoutingTestComponent,
     StartComponent,
     NavigationComponent,
-    EventsComponent
+    EventsComponent,
+    NewsComponent
   ],
   imports: [
     BrowserModule,
@@ -27,6 +29,7 @@ import { EventsComponent } from './events/events.component';
     MatToolbarModule,
     RouterModule.forRoot([
       { path: 'routing-test', component: RoutingTestComponent },
+      { path: 'news', component: NewsComponent },
     ])
     
   ],

src/app/news/news.component.html

+<p>news works!</p>

src/app/news/news.component.spec.ts

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

src/app/news/news.component.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-news',
+  templateUrl: './news.component.html',
+  styleUrls: ['./news.component.sass']
+})
+export class NewsComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}