Adding ButtonsCode Page

src/app/app-routing.module.ts

@@ -3,8 +3,9 @@ import { Routes, RouterModule } from '@angular/router';
 
 import { DashComponent } from './dash/dash.component';
 import { ButtonsComponent } from './buttons/buttons.component';
+import { ButtonscodeComponent } from './buttonscode/buttonscode.component';
 
-const routes: Routes = [{ path: 'About Doku Design', component: DashComponent },{ path: 'Button', component: ButtonsComponent }]
+const routes: Routes = [{ path: 'About Doku Design', component: DashComponent },{ path: 'Button', component: ButtonsComponent },{ path: 'Buttons Code', component: ButtonscodeComponent }]
 
 @NgModule({
   imports: [RouterModule.forRoot(routes)],

src/app/app.component.ts

 import { Component } from '@angular/core';
-
+import { Router } from '@angular/router';
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
@@ -7,4 +7,10 @@ import { Component } from '@angular/core';
 })
 export class AppComponent {
   title = 'designsystemdoku';
+  constructor(private router: Router){
+  }
+
+  goToPage(pageName:string):void{
+    this.router.navigate(['$(pageName)']);
+  }
 }

src/app/buttons/buttons.component.html

@@ -7,8 +7,8 @@
             </div>
             <br>
             <section>
-                <button mat-raised-button color="red"> Design</button>
-                <button mat-button >Code</button>
+                <button mat-raised-button color="red" style="margin-right: 1%;"> Design</button>
+                <button  mat-button [routerLink]="'/Buttons Code'">Code</button>
             </section>
           </div>
     </mat-grid-tile>

src/app/buttonscode/buttonscode.component.css

+.grid-container {
+    margin: 0px;
+  }
+  
+  .dashboard-card {
+    position: absolute;
+    top: 15px;
+    bottom: 15px;
+  }
+  
+  .more-button {
+    position: absolute;
+    top: 5px;
+    right: 10px;
+  }
+  
+  img {
+    border-radius: 4px;
+    width: 100%;
+  }
+  
+  .dashboard-card-content {
+    text-align: right;
+  }
+
+  .mat-button.mat-red {
+    color: #E1251B;
+ }
+ .mat-raised-button.mat-red, .mat-flat-button.mat-red{
+    color: WHITE !important;
+    background-color: #E1251B;
+    padding-left: 16px;
+    padding-right: 16px;
+ }
+
+  .mat-stroked-secondary{
+    color: WHITE !important;
+    background-color: #E1251B;
+    padding-left: 16px;
+    padding-right: 16px;
+  }
+  
+  .card-content {
+    display: flex;
+    flex-direction: column !important;
+    width: 100%;
+    margin-left: 10%;
+    padding-right: 10%;
+  }
+  .card-content1 {
+    display: flex;
+    flex-direction: column !important;
+    width: 100%;
+    margin-left: 3%;
+    padding-right: 35%;
+  }
+
+  .card-content2 {
+    display: flex;
+    flex-direction: column !important;
+    width: 100%;
+    text-align: left;
+  }
+  .card-contentend {
+        padding-right: 0%;
+        font-size: 16px;
+        padding-right: 30%;
+        margin-bottom: 10%;
+      }
+  
+  * {
+    box-sizing: border-box;
+    font-family: "D-DIN";
+  }
+  
+  /* Create three equal columns that floats next to each other */
+  .column {
+    float: left;
+    width: 33.33%;
+    padding-right: 40px;
+    font-size: 14px;
+  }
+  
+  /* Clear floats after the columns */
+  .row:after {
+    content: "";
+    display: table;
+    clear: both;
+  }
+  
+  /* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
+  /* @media screen and (max-width: 2560px) {
+    .column {
+      width: 100%;
+    }
+    .card-content1 {
+        padding-right: 0%;
+        font-size: 16px;
+        padding-right: 0%;
+      }
+    
+  } */
+  @media screen and (max-width: 1920px) {
+    .column {
+      width: 100%;
+    }
+    .card-content1 {
+        font-size: 16px;
+        padding-right: 30%;
+      }
+    
+  }
+
+  @media screen and (max-width: 1640px) {
+    .column {
+      width: 100%;
+    }
+    .card-content1 {
+        font-size: 16px;
+        padding-right: 20%;
+      }
+    
+  }
+  @media screen and (max-width: 1024px) {
+    .column {
+      width: 100%;
+    }
+    .card-content1 {
+        font-size: 16px;
+        padding-right: 15%;
+      }
+    
+  }
+  @media screen and (max-width: 768px) {
+    .column {
+      width: 100%;
+    }
+    .card-content1 {
+        font-size: 16px;
+        padding-right: 15%;
+      }
+    
+  }
+
+  @media screen and (max-width: 600px) {
+    .column {
+      width: 100%;
+    }
+    .card-content1 {
+        font-size: 15px;
+        padding-right: 15%;
+      }
+    
+  }
+  @media screen and (max-width: 320px) {
+    .column {
+      width: 100%;
+    }
+    .card-content1 {
+        font-size: 14.5px;
+        padding-right: 15%;
+      }
+  }
+
+  .headercondition {
+    height: 100%;
+    width: 100%;
+  }
+  
\ No newline at end of file

src/app/buttonscode/buttonscode.component.html

-<p>buttonscode works!</p>
+<mat-grid-list cols="2" rowHeight="300px">
+    <mat-grid-tile colspan="2" rowspan="1" style ="background: white;">
+        <div class="card-content">
+            <h1>Button Component</h1>
+            <div>
+              Buttons allow users to perform an action or to navigate to another page. They have multiple styles for various needs, and are ideal for calling attention to where a user needs to do something in order to move forward in a flow
+            </div>
+            <br>
+            <section>
+                <button mat-button style="margin-right: 1%;" [routerLink]="'/Button'" > Design</button>
+                <button  mat-raised-button color="red">Code</button>
+            </section>
+          </div>
+    </mat-grid-tile>
+</mat-grid-list>
\ No newline at end of file