├── Lab Solutions
    └── Lab 1
    │   └── exercise-1.js
├── lab-review
    ├── src
    │   ├── app
    │   │   ├── main
    │   │   │   ├── main.component.html
    │   │   │   ├── main.component.ts
    │   │   │   └── main.component.spec.ts
    │   │   ├── about-us
    │   │   │   ├── about-us.component.html
    │   │   │   ├── about-us.component.ts
    │   │   │   └── about-us.component.spec.ts
    │   │   ├── products
    │   │   │   ├── products.component.html
    │   │   │   ├── products.component.ts
    │   │   │   └── products.component.spec.ts
    │   │   ├── footer
    │   │   │   ├── footer.component.html
    │   │   │   ├── footer.component.ts
    │   │   │   └── footer.component.spec.ts
    │   │   ├── contact-us
    │   │   │   ├── contact-us.component.html
    │   │   │   ├── contact-us.component.ts
    │   │   │   └── contact-us.component.spec.ts
    │   │   ├── header
    │   │   │   ├── header.component.html
    │   │   │   ├── header.component.ts
    │   │   │   └── header.component.spec.ts
    │   │   ├── app.component.html
    │   │   ├── app.component.ts
    │   │   ├── app-routing.module.ts
    │   │   ├── app.module.ts
    │   │   ├── app.component.spec.ts
    │   │   └── app.component.scss
    │   ├── environments
    │   │   ├── environment.prod.ts
    │   │   └── environment.ts
    │   ├── styles.scss
    │   ├── favicon.ico
    │   ├── index.html
    │   ├── main.ts
    │   ├── test.ts
    │   └── polyfills.ts
    ├── e2e
    │   ├── tsconfig.json
    │   ├── src
    │   │   ├── app.po.ts
    │   │   └── app.e2e-spec.ts
    │   └── protractor.conf.js
    ├── tsconfig.app.json
    ├── tsconfig.spec.json
    ├── browserslist
    ├── tsconfig.json
    ├── README.md
    ├── karma.conf.js
    ├── package.json
    ├── tslint.json
    └── angular.json
└── README.md


/Lab Solutions/Lab 1/exercise-1.js:
--------------------------------------------------------------------------------
1 |  // test


--------------------------------------------------------------------------------
/lab-review/src/app/main/main.component.html:
--------------------------------------------------------------------------------
1 | <p>main works!</p>
2 | 


--------------------------------------------------------------------------------
/lab-review/src/app/about-us/about-us.component.html:
--------------------------------------------------------------------------------
1 | <p>about-us works!</p>
2 | 


--------------------------------------------------------------------------------
/lab-review/src/app/products/products.component.html:
--------------------------------------------------------------------------------
1 | <p>products works!</p>
2 | 


--------------------------------------------------------------------------------
/lab-review/src/app/footer/footer.component.html:
--------------------------------------------------------------------------------
1 | <p>DAVID's footer works!</p>
2 | 


--------------------------------------------------------------------------------
/lab-review/src/app/contact-us/contact-us.component.html:
--------------------------------------------------------------------------------
1 | <p>contact-us works!</p>
2 | 


--------------------------------------------------------------------------------
/lab-review/src/environments/environment.prod.ts:
--------------------------------------------------------------------------------
1 | export const environment = {
2 |   production: true
3 | };
4 | 


--------------------------------------------------------------------------------
/lab-review/src/styles.scss:
--------------------------------------------------------------------------------
1 | /* You can add global styles to this file, and also import other style files */
2 | 


--------------------------------------------------------------------------------
/lab-review/src/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/georgebrowntech/comp3123_full_stack/HEAD/lab-review/src/favicon.ico


--------------------------------------------------------------------------------
/lab-review/src/app/header/header.component.html:
--------------------------------------------------------------------------------
1 | <button routerLink="/blabla-products">product</button>
2 | <button routerLink="/about-us">about us</button>
3 | <button routerLink="/contact-us">contact us</button>
4 | 


--------------------------------------------------------------------------------
/lab-review/src/app/app.component.html:
--------------------------------------------------------------------------------
 1 | <app-header></app-header>
 2 | 
 3 | <br>
 4 | START <--
 5 | <router-outlet></router-outlet>
 6 | <router-outlet></router-outlet>
 7 | <router-outlet></router-outlet>
 8 | END <--
 9 | 
10 | <david-footer></david-footer>
11 | 
12 | 


--------------------------------------------------------------------------------
/lab-review/src/app/app.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component } from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'blablabla',
 5 |   templateUrl: './app.component.html',
 6 |   styleUrls: ['./app.component.scss']
 7 | })
 8 | export class AppComponent {
 9 |   title = 'lab-review';
10 | }
11 | 


--------------------------------------------------------------------------------
/lab-review/e2e/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "../tsconfig.json",
 3 |   "compilerOptions": {
 4 |     "outDir": "../out-tsc/e2e",
 5 |     "module": "commonjs",
 6 |     "target": "es5",
 7 |     "types": [
 8 |       "jasmine",
 9 |       "jasminewd2",
10 |       "node"
11 |     ]
12 |   }
13 | }
14 | 


--------------------------------------------------------------------------------
/lab-review/e2e/src/app.po.ts:
--------------------------------------------------------------------------------
 1 | import { browser, by, element } from 'protractor';
 2 | 
 3 | export class AppPage {
 4 |   navigateTo() {
 5 |     return browser.get(browser.baseUrl) as Promise<any>;
 6 |   }
 7 | 
 8 |   getTitleText() {
 9 |     return element(by.css('app-root .content span')).getText() as Promise<string>;
10 |   }
11 | }
12 | 


--------------------------------------------------------------------------------
/lab-review/src/app/main/main.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit } from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'app-main',
 5 |   templateUrl: './main.component.html',
 6 |   styleUrls: ['./main.component.scss']
 7 | })
 8 | export class MainComponent implements OnInit {
 9 | 
10 |   constructor() { }
11 | 
12 |   ngOnInit() {
13 |   }
14 | 
15 | }
16 | 


--------------------------------------------------------------------------------
/lab-review/src/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <title>LabReview</title>
 6 |   <base href="/">
 7 |   <meta name="viewport" content="width=device-width, initial-scale=1">
 8 |   <link rel="icon" type="image/x-icon" href="favicon.ico">
 9 | </head>
10 | <body>
11 |   <blablabla></blablabla>
12 | </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/lab-review/src/app/footer/footer.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit } from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'david-footer',
 5 |   templateUrl: './footer.component.html',
 6 |   styleUrls: ['./footer.component.scss']
 7 | })
 8 | export class FooterComponent implements OnInit {
 9 | 
10 |   constructor() { }
11 | 
12 |   ngOnInit() {
13 |   }
14 | 
15 | }
16 | 


--------------------------------------------------------------------------------
/lab-review/src/app/header/header.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit } from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'app-header',
 5 |   templateUrl: './header.component.html',
 6 |   styleUrls: ['./header.component.scss']
 7 | })
 8 | export class HeaderComponent implements OnInit {
 9 | 
10 |   constructor() { }
11 | 
12 |   ngOnInit() {
13 |   }
14 | 
15 | }
16 | 


--------------------------------------------------------------------------------
/lab-review/tsconfig.app.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "./tsconfig.json",
 3 |   "compilerOptions": {
 4 |     "outDir": "./out-tsc/app",
 5 |     "types": []
 6 |   },
 7 |   "files": [
 8 |     "src/main.ts",
 9 |     "src/polyfills.ts"
10 |   ],
11 |   "include": [
12 |     "src/**/*.ts"
13 |   ],
14 |   "exclude": [
15 |     "src/test.ts",
16 |     "src/**/*.spec.ts"
17 |   ]
18 | }
19 | 


--------------------------------------------------------------------------------
/lab-review/tsconfig.spec.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "./tsconfig.json",
 3 |   "compilerOptions": {
 4 |     "outDir": "./out-tsc/spec",
 5 |     "types": [
 6 |       "jasmine",
 7 |       "node"
 8 |     ]
 9 |   },
10 |   "files": [
11 |     "src/test.ts",
12 |     "src/polyfills.ts"
13 |   ],
14 |   "include": [
15 |     "src/**/*.spec.ts",
16 |     "src/**/*.d.ts"
17 |   ]
18 | }
19 | 


--------------------------------------------------------------------------------
/lab-review/src/app/about-us/about-us.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit } from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'app-about-us',
 5 |   templateUrl: './about-us.component.html',
 6 |   styleUrls: ['./about-us.component.scss']
 7 | })
 8 | export class AboutUsComponent implements OnInit {
 9 | 
10 |   constructor() { }
11 | 
12 |   ngOnInit() {
13 |   }
14 | 
15 | }
16 | 


--------------------------------------------------------------------------------
/lab-review/src/app/products/products.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit } from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'app-products',
 5 |   templateUrl: './products.component.html',
 6 |   styleUrls: ['./products.component.scss']
 7 | })
 8 | export class ProductsComponent implements OnInit {
 9 | 
10 |   constructor() { }
11 | 
12 |   ngOnInit() {
13 |   }
14 | 
15 | }
16 | 


--------------------------------------------------------------------------------
/lab-review/src/app/contact-us/contact-us.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit } from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'app-contact-us',
 5 |   templateUrl: './contact-us.component.html',
 6 |   styleUrls: ['./contact-us.component.scss']
 7 | })
 8 | export class ContactUsComponent implements OnInit {
 9 | 
10 |   constructor() { }
11 | 
12 |   ngOnInit() {
13 |   }
14 | 
15 | }
16 | 


--------------------------------------------------------------------------------
/lab-review/src/main.ts:
--------------------------------------------------------------------------------
 1 | import { enableProdMode } from '@angular/core';
 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 3 | 
 4 | import { AppModule } from './app/app.module';
 5 | import { environment } from './environments/environment';
 6 | 
 7 | if (environment.production) {
 8 |   enableProdMode();
 9 | }
10 | 
11 | platformBrowserDynamic().bootstrapModule(AppModule)
12 |   .catch(err => console.error(err));
13 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # COMP3123 Full Stack Development Course (2019)
 2 | 
 3 | Hey guys! Welcome to the COMP3123 Full Stack Development Course! Few things you need for this course
 4 | 
 5 | ### Instructors
 6 | Mike Denton (mike.denton@georgebrown.ca)  [LinkedIn](https://www.linkedin.com/in/mike-denton-1988597/)
 7 | 
 8 | ### GIT Email/Usernames
 9 | [Spreadsheet](https://docs.google.com/spreadsheets/d/1ROY4cC5PtFphbCP7a_cngkQScMNsQ171C-cqGebL5gc/edit?usp=sharing) 
10 | 


--------------------------------------------------------------------------------
/lab-review/browserslist:
--------------------------------------------------------------------------------
 1 | # This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
 2 | # For additional information regarding the format and rule options, please see:
 3 | # https://github.com/browserslist/browserslist#queries
 4 | 
 5 | # You can see what browsers were selected by your queries by running:
 6 | #   npx browserslist
 7 | 
 8 | > 0.5%
 9 | last 2 versions
10 | Firefox ESR
11 | not dead
12 | not IE 9-11 # For IE 9-11 support, remove 'not'.


--------------------------------------------------------------------------------
/lab-review/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compileOnSave": false,
 3 |   "compilerOptions": {
 4 |     "baseUrl": "./",
 5 |     "outDir": "./dist/out-tsc",
 6 |     "sourceMap": true,
 7 |     "declaration": false,
 8 |     "downlevelIteration": true,
 9 |     "experimentalDecorators": true,
10 |     "module": "esnext",
11 |     "moduleResolution": "node",
12 |     "importHelpers": true,
13 |     "target": "es2015",
14 |     "typeRoots": [
15 |       "node_modules/@types"
16 |     ],
17 |     "lib": [
18 |       "es2018",
19 |       "dom"
20 |     ]
21 |   },
22 |   "angularCompilerOptions": {
23 |     "fullTemplateTypeCheck": true,
24 |     "strictInjectionParameters": true
25 |   }
26 | }
27 | 


--------------------------------------------------------------------------------
/lab-review/src/app/app-routing.module.ts:
--------------------------------------------------------------------------------
 1 | import { NgModule } from '@angular/core';
 2 | import { Routes, RouterModule } from '@angular/router';
 3 | import { AboutUsComponent } from './about-us/about-us.component';
 4 | import { ContactUsComponent } from './contact-us/contact-us.component';
 5 | import { ProductsComponent } from './products/products.component';
 6 | 
 7 | const routes: Routes = [
 8 |   { path: 'blabla-products', component: ProductsComponent },
 9 |   { path: 'about-us', component: AboutUsComponent },
10 |   { path: 'contact-us', component: ContactUsComponent }
11 | ];
12 | 
13 | @NgModule({
14 |   imports: [RouterModule.forRoot(routes)],
15 |   exports: [RouterModule]
16 | })
17 | export class AppRoutingModule { }
18 | 


--------------------------------------------------------------------------------
/lab-review/src/test.ts:
--------------------------------------------------------------------------------
 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files
 2 | 
 3 | import 'zone.js/dist/zone-testing';
 4 | import { getTestBed } from '@angular/core/testing';
 5 | import {
 6 |   BrowserDynamicTestingModule,
 7 |   platformBrowserDynamicTesting
 8 | } from '@angular/platform-browser-dynamic/testing';
 9 | 
10 | declare const require: any;
11 | 
12 | // First, initialize the Angular testing environment.
13 | getTestBed().initTestEnvironment(
14 |   BrowserDynamicTestingModule,
15 |   platformBrowserDynamicTesting()
16 | );
17 | // Then we find all the tests.
18 | const context = require.context('./', true, /\.spec\.ts$/);
19 | // And load the modules.
20 | context.keys().map(context);
21 | 


--------------------------------------------------------------------------------
/lab-review/src/app/main/main.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 2 | 
 3 | import { MainComponent } from './main.component';
 4 | 
 5 | describe('MainComponent', () => {
 6 |   let component: MainComponent;
 7 |   let fixture: ComponentFixture<MainComponent>;
 8 | 
 9 |   beforeEach(async(() => {
10 |     TestBed.configureTestingModule({
11 |       declarations: [ MainComponent ]
12 |     })
13 |     .compileComponents();
14 |   }));
15 | 
16 |   beforeEach(() => {
17 |     fixture = TestBed.createComponent(MainComponent);
18 |     component = fixture.componentInstance;
19 |     fixture.detectChanges();
20 |   });
21 | 
22 |   it('should create', () => {
23 |     expect(component).toBeTruthy();
24 |   });
25 | });
26 | 


--------------------------------------------------------------------------------
/lab-review/src/environments/environment.ts:
--------------------------------------------------------------------------------
 1 | // This file can be replaced during build by using the `fileReplacements` array.
 2 | // `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
 3 | // The list of file replacements can be found in `angular.json`.
 4 | 
 5 | export const environment = {
 6 |   production: false
 7 | };
 8 | 
 9 | /*
10 |  * For easier debugging in development mode, you can import the following file
11 |  * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
12 |  *
13 |  * This import should be commented out in production mode because it will have a negative impact
14 |  * on performance if an error is thrown.
15 |  */
16 | // import 'zone.js/dist/zone-error';  // Included with Angular CLI.
17 | 


--------------------------------------------------------------------------------
/lab-review/e2e/src/app.e2e-spec.ts:
--------------------------------------------------------------------------------
 1 | import { AppPage } from './app.po';
 2 | import { browser, logging } from 'protractor';
 3 | 
 4 | describe('workspace-project App', () => {
 5 |   let page: AppPage;
 6 | 
 7 |   beforeEach(() => {
 8 |     page = new AppPage();
 9 |   });
10 | 
11 |   it('should display welcome message', () => {
12 |     page.navigateTo();
13 |     expect(page.getTitleText()).toEqual('lab-review app is running!');
14 |   });
15 | 
16 |   afterEach(async () => {
17 |     // Assert that there are no errors emitted from the browser
18 |     const logs = await browser.manage().logs().get(logging.Type.BROWSER);
19 |     expect(logs).not.toContain(jasmine.objectContaining({
20 |       level: logging.Level.SEVERE,
21 |     } as logging.Entry));
22 |   });
23 | });
24 | 


--------------------------------------------------------------------------------
/lab-review/src/app/footer/footer.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 2 | 
 3 | import { FooterComponent } from './footer.component';
 4 | 
 5 | describe('FooterComponent', () => {
 6 |   let component: FooterComponent;
 7 |   let fixture: ComponentFixture<FooterComponent>;
 8 | 
 9 |   beforeEach(async(() => {
10 |     TestBed.configureTestingModule({
11 |       declarations: [ FooterComponent ]
12 |     })
13 |     .compileComponents();
14 |   }));
15 | 
16 |   beforeEach(() => {
17 |     fixture = TestBed.createComponent(FooterComponent);
18 |     component = fixture.componentInstance;
19 |     fixture.detectChanges();
20 |   });
21 | 
22 |   it('should create', () => {
23 |     expect(component).toBeTruthy();
24 |   });
25 | });
26 | 


--------------------------------------------------------------------------------
/lab-review/src/app/header/header.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 2 | 
 3 | import { HeaderComponent } from './header.component';
 4 | 
 5 | describe('HeaderComponent', () => {
 6 |   let component: HeaderComponent;
 7 |   let fixture: ComponentFixture<HeaderComponent>;
 8 | 
 9 |   beforeEach(async(() => {
10 |     TestBed.configureTestingModule({
11 |       declarations: [ HeaderComponent ]
12 |     })
13 |     .compileComponents();
14 |   }));
15 | 
16 |   beforeEach(() => {
17 |     fixture = TestBed.createComponent(HeaderComponent);
18 |     component = fixture.componentInstance;
19 |     fixture.detectChanges();
20 |   });
21 | 
22 |   it('should create', () => {
23 |     expect(component).toBeTruthy();
24 |   });
25 | });
26 | 


--------------------------------------------------------------------------------
/lab-review/src/app/about-us/about-us.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 2 | 
 3 | import { AboutUsComponent } from './about-us.component';
 4 | 
 5 | describe('AboutUsComponent', () => {
 6 |   let component: AboutUsComponent;
 7 |   let fixture: ComponentFixture<AboutUsComponent>;
 8 | 
 9 |   beforeEach(async(() => {
10 |     TestBed.configureTestingModule({
11 |       declarations: [ AboutUsComponent ]
12 |     })
13 |     .compileComponents();
14 |   }));
15 | 
16 |   beforeEach(() => {
17 |     fixture = TestBed.createComponent(AboutUsComponent);
18 |     component = fixture.componentInstance;
19 |     fixture.detectChanges();
20 |   });
21 | 
22 |   it('should create', () => {
23 |     expect(component).toBeTruthy();
24 |   });
25 | });
26 | 


--------------------------------------------------------------------------------
/lab-review/src/app/products/products.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 2 | 
 3 | import { ProductsComponent } from './products.component';
 4 | 
 5 | describe('ProductsComponent', () => {
 6 |   let component: ProductsComponent;
 7 |   let fixture: ComponentFixture<ProductsComponent>;
 8 | 
 9 |   beforeEach(async(() => {
10 |     TestBed.configureTestingModule({
11 |       declarations: [ ProductsComponent ]
12 |     })
13 |     .compileComponents();
14 |   }));
15 | 
16 |   beforeEach(() => {
17 |     fixture = TestBed.createComponent(ProductsComponent);
18 |     component = fixture.componentInstance;
19 |     fixture.detectChanges();
20 |   });
21 | 
22 |   it('should create', () => {
23 |     expect(component).toBeTruthy();
24 |   });
25 | });
26 | 


--------------------------------------------------------------------------------
/lab-review/src/app/contact-us/contact-us.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 2 | 
 3 | import { ContactUsComponent } from './contact-us.component';
 4 | 
 5 | describe('ContactUsComponent', () => {
 6 |   let component: ContactUsComponent;
 7 |   let fixture: ComponentFixture<ContactUsComponent>;
 8 | 
 9 |   beforeEach(async(() => {
10 |     TestBed.configureTestingModule({
11 |       declarations: [ ContactUsComponent ]
12 |     })
13 |     .compileComponents();
14 |   }));
15 | 
16 |   beforeEach(() => {
17 |     fixture = TestBed.createComponent(ContactUsComponent);
18 |     component = fixture.componentInstance;
19 |     fixture.detectChanges();
20 |   });
21 | 
22 |   it('should create', () => {
23 |     expect(component).toBeTruthy();
24 |   });
25 | });
26 | 


--------------------------------------------------------------------------------
/lab-review/e2e/protractor.conf.js:
--------------------------------------------------------------------------------
 1 | // @ts-check
 2 | // Protractor configuration file, see link for more information
 3 | // https://github.com/angular/protractor/blob/master/lib/config.ts
 4 | 
 5 | const { SpecReporter } = require('jasmine-spec-reporter');
 6 | 
 7 | /**
 8 |  * @type { import("protractor").Config }
 9 |  */
10 | exports.config = {
11 |   allScriptsTimeout: 11000,
12 |   specs: [
13 |     './src/**/*.e2e-spec.ts'
14 |   ],
15 |   capabilities: {
16 |     'browserName': 'chrome'
17 |   },
18 |   directConnect: true,
19 |   baseUrl: 'http://localhost:4200/',
20 |   framework: 'jasmine',
21 |   jasmineNodeOpts: {
22 |     showColors: true,
23 |     defaultTimeoutInterval: 30000,
24 |     print: function() {}
25 |   },
26 |   onPrepare() {
27 |     require('ts-node').register({
28 |       project: require('path').join(__dirname, './tsconfig.json')
29 |     });
30 |     jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
31 |   }
32 | };


--------------------------------------------------------------------------------
/lab-review/src/app/app.module.ts:
--------------------------------------------------------------------------------
 1 | import { BrowserModule } from '@angular/platform-browser';
 2 | import { NgModule } from '@angular/core';
 3 | 
 4 | import { AppRoutingModule } from './app-routing.module';
 5 | import { AppComponent } from './app.component';
 6 | import { HeaderComponent } from './header/header.component';
 7 | import { FooterComponent } from './footer/footer.component';
 8 | import { MainComponent } from './main/main.component';
 9 | import { ProductsComponent } from './products/products.component';
10 | import { ContactUsComponent } from './contact-us/contact-us.component';
11 | import { AboutUsComponent } from './about-us/about-us.component';
12 | 
13 | @NgModule({
14 |   declarations: [
15 |     AppComponent,
16 |     HeaderComponent,
17 |     FooterComponent,
18 |     MainComponent,
19 |     ProductsComponent,
20 |     ContactUsComponent,
21 |     AboutUsComponent
22 |   ],
23 |   imports: [
24 |     BrowserModule,
25 |     AppRoutingModule
26 |   ],
27 |   providers: [],
28 |   bootstrap: [AppComponent]
29 | })
30 | export class AppModule { }
31 | 


--------------------------------------------------------------------------------
/lab-review/README.md:
--------------------------------------------------------------------------------
 1 | # LabReview
 2 | 
 3 | This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 8.3.5.
 4 | 
 5 | ## Development server
 6 | 
 7 | Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
 8 | 
 9 | ## Code scaffolding
10 | 
11 | Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
12 | 
13 | ## Build
14 | 
15 | Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.
16 | 
17 | ## Running unit tests
18 | 
19 | Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
20 | 
21 | ## Running end-to-end tests
22 | 
23 | Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
24 | 
25 | ## Further help
26 | 
27 | To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
28 | 


--------------------------------------------------------------------------------
/lab-review/karma.conf.js:
--------------------------------------------------------------------------------
 1 | // Karma configuration file, see link for more information
 2 | // https://karma-runner.github.io/1.0/config/configuration-file.html
 3 | 
 4 | module.exports = function (config) {
 5 |   config.set({
 6 |     basePath: '',
 7 |     frameworks: ['jasmine', '@angular-devkit/build-angular'],
 8 |     plugins: [
 9 |       require('karma-jasmine'),
10 |       require('karma-chrome-launcher'),
11 |       require('karma-jasmine-html-reporter'),
12 |       require('karma-coverage-istanbul-reporter'),
13 |       require('@angular-devkit/build-angular/plugins/karma')
14 |     ],
15 |     client: {
16 |       clearContext: false // leave Jasmine Spec Runner output visible in browser
17 |     },
18 |     coverageIstanbulReporter: {
19 |       dir: require('path').join(__dirname, './coverage/lab-review'),
20 |       reports: ['html', 'lcovonly', 'text-summary'],
21 |       fixWebpackSourcePaths: true
22 |     },
23 |     reporters: ['progress', 'kjhtml'],
24 |     port: 9876,
25 |     colors: true,
26 |     logLevel: config.LOG_INFO,
27 |     autoWatch: true,
28 |     browsers: ['Chrome'],
29 |     singleRun: false,
30 |     restartOnFileChange: true
31 |   });
32 | };
33 | 


--------------------------------------------------------------------------------
/lab-review/src/app/app.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import { TestBed, async } from '@angular/core/testing';
 2 | import { RouterTestingModule } from '@angular/router/testing';
 3 | import { AppComponent } from './app.component';
 4 | 
 5 | describe('AppComponent', () => {
 6 |   beforeEach(async(() => {
 7 |     TestBed.configureTestingModule({
 8 |       imports: [
 9 |         RouterTestingModule
10 |       ],
11 |       declarations: [
12 |         AppComponent
13 |       ],
14 |     }).compileComponents();
15 |   }));
16 | 
17 |   it('should create the app', () => {
18 |     const fixture = TestBed.createComponent(AppComponent);
19 |     const app = fixture.debugElement.componentInstance;
20 |     expect(app).toBeTruthy();
21 |   });
22 | 
23 |   it(`should have as title 'lab-review'`, () => {
24 |     const fixture = TestBed.createComponent(AppComponent);
25 |     const app = fixture.debugElement.componentInstance;
26 |     expect(app.title).toEqual('lab-review');
27 |   });
28 | 
29 |   it('should render title', () => {
30 |     const fixture = TestBed.createComponent(AppComponent);
31 |     fixture.detectChanges();
32 |     const compiled = fixture.debugElement.nativeElement;
33 |     expect(compiled.querySelector('.content span').textContent).toContain('lab-review app is running!');
34 |   });
35 | });
36 | 


--------------------------------------------------------------------------------
/lab-review/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "lab-review",
 3 |   "version": "0.0.0",
 4 |   "scripts": {
 5 |     "ng": "ng",
 6 |     "start": "ng serve",
 7 |     "build": "ng build",
 8 |     "test": "ng test",
 9 |     "lint": "ng lint",
10 |     "e2e": "ng e2e"
11 |   },
12 |   "private": true,
13 |   "dependencies": {
14 |     "@angular/animations": "~8.2.7",
15 |     "@angular/common": "~8.2.7",
16 |     "@angular/compiler": "~8.2.7",
17 |     "@angular/core": "~8.2.7",
18 |     "@angular/forms": "~8.2.7",
19 |     "@angular/platform-browser": "~8.2.7",
20 |     "@angular/platform-browser-dynamic": "~8.2.7",
21 |     "@angular/router": "~8.2.7",
22 |     "rxjs": "~6.4.0",
23 |     "tslib": "^1.10.0",
24 |     "zone.js": "~0.9.1"
25 |   },
26 |   "devDependencies": {
27 |     "@angular-devkit/build-angular": "~0.803.5",
28 |     "@angular/cli": "~8.3.5",
29 |     "@angular/compiler-cli": "~8.2.7",
30 |     "@angular/language-service": "~8.2.7",
31 |     "@types/node": "~8.9.4",
32 |     "@types/jasmine": "~3.3.8",
33 |     "@types/jasminewd2": "~2.0.3",
34 |     "codelyzer": "^5.0.0",
35 |     "jasmine-core": "~3.4.0",
36 |     "jasmine-spec-reporter": "~4.2.1",
37 |     "karma": "~4.1.0",
38 |     "karma-chrome-launcher": "~2.2.0",
39 |     "karma-coverage-istanbul-reporter": "~2.0.1",
40 |     "karma-jasmine": "~2.0.1",
41 |     "karma-jasmine-html-reporter": "^1.4.0",
42 |     "protractor": "~5.4.0",
43 |     "ts-node": "~7.0.0",
44 |     "tslint": "~5.15.0",
45 |     "typescript": "~3.5.3"
46 |   }
47 | }
48 | 


--------------------------------------------------------------------------------
/lab-review/tslint.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "tslint:recommended",
 3 |   "rules": {
 4 |     "array-type": false,
 5 |     "arrow-parens": false,
 6 |     "deprecation": {
 7 |       "severity": "warning"
 8 |     },
 9 |     "component-class-suffix": true,
10 |     "contextual-lifecycle": true,
11 |     "directive-class-suffix": true,
12 |     "directive-selector": [
13 |       true,
14 |       "attribute",
15 |       "app",
16 |       "camelCase"
17 |     ],
18 |     "component-selector": [
19 |       true,
20 |       "element",
21 |       "app",
22 |       "kebab-case"
23 |     ],
24 |     "import-blacklist": [
25 |       true,
26 |       "rxjs/Rx"
27 |     ],
28 |     "interface-name": false,
29 |     "max-classes-per-file": false,
30 |     "max-line-length": [
31 |       true,
32 |       140
33 |     ],
34 |     "member-access": false,
35 |     "member-ordering": [
36 |       true,
37 |       {
38 |         "order": [
39 |           "static-field",
40 |           "instance-field",
41 |           "static-method",
42 |           "instance-method"
43 |         ]
44 |       }
45 |     ],
46 |     "no-consecutive-blank-lines": false,
47 |     "no-console": [
48 |       true,
49 |       "debug",
50 |       "info",
51 |       "time",
52 |       "timeEnd",
53 |       "trace"
54 |     ],
55 |     "no-empty": false,
56 |     "no-inferrable-types": [
57 |       true,
58 |       "ignore-params"
59 |     ],
60 |     "no-non-null-assertion": true,
61 |     "no-redundant-jsdoc": true,
62 |     "no-switch-case-fall-through": true,
63 |     "no-use-before-declare": true,
64 |     "no-var-requires": false,
65 |     "object-literal-key-quotes": [
66 |       true,
67 |       "as-needed"
68 |     ],
69 |     "object-literal-sort-keys": false,
70 |     "ordered-imports": false,
71 |     "quotemark": [
72 |       true,
73 |       "single"
74 |     ],
75 |     "trailing-comma": false,
76 |     "no-conflicting-lifecycle": true,
77 |     "no-host-metadata-property": true,
78 |     "no-input-rename": true,
79 |     "no-inputs-metadata-property": true,
80 |     "no-output-native": true,
81 |     "no-output-on-prefix": true,
82 |     "no-output-rename": true,
83 |     "no-outputs-metadata-property": true,
84 |     "template-banana-in-box": true,
85 |     "template-no-negated-async": true,
86 |     "use-lifecycle-interface": true,
87 |     "use-pipe-transform-interface": true
88 |   },
89 |   "rulesDirectory": [
90 |     "codelyzer"
91 |   ]
92 | }


--------------------------------------------------------------------------------
/lab-review/src/polyfills.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * This file includes polyfills needed by Angular and is loaded before the app.
 3 |  * You can add your own extra polyfills to this file.
 4 |  *
 5 |  * This file is divided into 2 sections:
 6 |  *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
 7 |  *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
 8 |  *      file.
 9 |  *
10 |  * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
11 |  * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
12 |  * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
13 |  *
14 |  * Learn more in https://angular.io/guide/browser-support
15 |  */
16 | 
17 | /***************************************************************************************************
18 |  * BROWSER POLYFILLS
19 |  */
20 | 
21 | /** IE10 and IE11 requires the following for NgClass support on SVG elements */
22 | // import 'classlist.js';  // Run `npm install --save classlist.js`.
23 | 
24 | /**
25 |  * Web Animations `@angular/platform-browser/animations`
26 |  * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
27 |  * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
28 |  */
29 | // import 'web-animations-js';  // Run `npm install --save web-animations-js`.
30 | 
31 | /**
32 |  * By default, zone.js will patch all possible macroTask and DomEvents
33 |  * user can disable parts of macroTask/DomEvents patch by setting following flags
34 |  * because those flags need to be set before `zone.js` being loaded, and webpack
35 |  * will put import in the top of bundle, so user need to create a separate file
36 |  * in this directory (for example: zone-flags.ts), and put the following flags
37 |  * into that file, and then add the following code before importing zone.js.
38 |  * import './zone-flags.ts';
39 |  *
40 |  * The flags allowed in zone-flags.ts are listed here.
41 |  *
42 |  * The following flags will work for all browsers.
43 |  *
44 |  * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
45 |  * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
46 |  * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
47 |  *
48 |  *  in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
49 |  *  with the following flag, it will bypass `zone.js` patch for IE/Edge
50 |  *
51 |  *  (window as any).__Zone_enable_cross_context_check = true;
52 |  *
53 |  */
54 | 
55 | /***************************************************************************************************
56 |  * Zone JS is required by default for Angular itself.
57 |  */
58 | import 'zone.js/dist/zone';  // Included with Angular CLI.
59 | 
60 | 
61 | /***************************************************************************************************
62 |  * APPLICATION IMPORTS
63 |  */
64 | 


--------------------------------------------------------------------------------
/lab-review/angular.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  3 |   "version": 1,
  4 |   "newProjectRoot": "projects",
  5 |   "projects": {
  6 |     "lab-review": {
  7 |       "projectType": "application",
  8 |       "schematics": {
  9 |         "@schematics/angular:component": {
 10 |           "style": "scss"
 11 |         }
 12 |       },
 13 |       "root": "",
 14 |       "sourceRoot": "src",
 15 |       "prefix": "app",
 16 |       "architect": {
 17 |         "build": {
 18 |           "builder": "@angular-devkit/build-angular:browser",
 19 |           "options": {
 20 |             "outputPath": "dist/lab-review",
 21 |             "index": "src/index.html",
 22 |             "main": "src/main.ts",
 23 |             "polyfills": "src/polyfills.ts",
 24 |             "tsConfig": "tsconfig.app.json",
 25 |             "aot": false,
 26 |             "assets": [
 27 |               "src/favicon.ico",
 28 |               "src/assets"
 29 |             ],
 30 |             "styles": [
 31 |               "src/styles.scss"
 32 |             ],
 33 |             "scripts": []
 34 |           },
 35 |           "configurations": {
 36 |             "production": {
 37 |               "fileReplacements": [
 38 |                 {
 39 |                   "replace": "src/environments/environment.ts",
 40 |                   "with": "src/environments/environment.prod.ts"
 41 |                 }
 42 |               ],
 43 |               "optimization": true,
 44 |               "outputHashing": "all",
 45 |               "sourceMap": false,
 46 |               "extractCss": true,
 47 |               "namedChunks": false,
 48 |               "aot": true,
 49 |               "extractLicenses": true,
 50 |               "vendorChunk": false,
 51 |               "buildOptimizer": true,
 52 |               "budgets": [
 53 |                 {
 54 |                   "type": "initial",
 55 |                   "maximumWarning": "2mb",
 56 |                   "maximumError": "5mb"
 57 |                 },
 58 |                 {
 59 |                   "type": "anyComponentStyle",
 60 |                   "maximumWarning": "6kb",
 61 |                   "maximumError": "10kb"
 62 |                 }
 63 |               ]
 64 |             }
 65 |           }
 66 |         },
 67 |         "serve": {
 68 |           "builder": "@angular-devkit/build-angular:dev-server",
 69 |           "options": {
 70 |             "browserTarget": "lab-review:build"
 71 |           },
 72 |           "configurations": {
 73 |             "production": {
 74 |               "browserTarget": "lab-review:build:production"
 75 |             }
 76 |           }
 77 |         },
 78 |         "extract-i18n": {
 79 |           "builder": "@angular-devkit/build-angular:extract-i18n",
 80 |           "options": {
 81 |             "browserTarget": "lab-review:build"
 82 |           }
 83 |         },
 84 |         "test": {
 85 |           "builder": "@angular-devkit/build-angular:karma",
 86 |           "options": {
 87 |             "main": "src/test.ts",
 88 |             "polyfills": "src/polyfills.ts",
 89 |             "tsConfig": "tsconfig.spec.json",
 90 |             "karmaConfig": "karma.conf.js",
 91 |             "assets": [
 92 |               "src/favicon.ico",
 93 |               "src/assets"
 94 |             ],
 95 |             "styles": [
 96 |               "src/styles.scss"
 97 |             ],
 98 |             "scripts": []
 99 |           }
100 |         },
101 |         "lint": {
102 |           "builder": "@angular-devkit/build-angular:tslint",
103 |           "options": {
104 |             "tsConfig": [
105 |               "tsconfig.app.json",
106 |               "tsconfig.spec.json",
107 |               "e2e/tsconfig.json"
108 |             ],
109 |             "exclude": [
110 |               "**/node_modules/**"
111 |             ]
112 |           }
113 |         },
114 |         "e2e": {
115 |           "builder": "@angular-devkit/build-angular:protractor",
116 |           "options": {
117 |             "protractorConfig": "e2e/protractor.conf.js",
118 |             "devServerTarget": "lab-review:serve"
119 |           },
120 |           "configurations": {
121 |             "production": {
122 |               "devServerTarget": "lab-review:serve:production"
123 |             }
124 |           }
125 |         }
126 |       }
127 |     }},
128 |   "defaultProject": "lab-review"
129 | }


--------------------------------------------------------------------------------
/lab-review/src/app/app.component.scss:
--------------------------------------------------------------------------------
  1 | :host {
  2 |   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  3 |   font-size: 14px;
  4 |   color: #333;
  5 |   box-sizing: border-box;
  6 |   -webkit-font-smoothing: antialiased;
  7 |   -moz-osx-font-smoothing: grayscale;
  8 | }
  9 | 
 10 | h1,
 11 | h2,
 12 | h3,
 13 | h4,
 14 | h5,
 15 | h6 {
 16 |   margin: 8px 0;
 17 | }
 18 | 
 19 | p {
 20 |   margin: 0;
 21 | }
 22 | 
 23 | .spacer {
 24 |   flex: 1;
 25 | }
 26 | 
 27 | .toolbar {
 28 |   height: 60px;
 29 |   margin: -8px;
 30 |   display: flex;
 31 |   align-items: center;
 32 |   background-color: #1976d2;
 33 |   color: white;
 34 |   font-weight: 600;
 35 | }
 36 | 
 37 | .toolbar img {
 38 |   margin: 0 16px;
 39 | }
 40 | 
 41 | .toolbar #twitter-logo {
 42 |   height: 40px;
 43 |   margin: 0 16px;
 44 | }
 45 | 
 46 | .toolbar #twitter-logo:hover {
 47 |   opacity: 0.8;
 48 | }
 49 | 
 50 | .content {
 51 |   display: flex;
 52 |   margin: 32px auto;
 53 |   padding: 0 16px;
 54 |   max-width: 960px;
 55 |   flex-direction: column;
 56 |   align-items: center;
 57 | }
 58 | 
 59 | svg.material-icons {
 60 |   height: 24px;
 61 |   width: auto;
 62 | }
 63 | 
 64 | svg.material-icons:not(:last-child) {
 65 |   margin-right: 8px;
 66 | }
 67 | 
 68 | .card svg.material-icons path {
 69 |   fill: #888;
 70 | }
 71 | 
 72 | .card-container {
 73 |   display: flex;
 74 |   flex-wrap: wrap;
 75 |   justify-content: center;
 76 |   margin-top: 16px;
 77 | }
 78 | 
 79 | .card {
 80 |   border-radius: 4px;
 81 |   border: 1px solid #eee;
 82 |   background-color: #fafafa;
 83 |   height: 40px;
 84 |   width: 200px;
 85 |   margin: 0 8px 16px;
 86 |   padding: 16px;
 87 |   display: flex;
 88 |   flex-direction: row;
 89 |   justify-content: center;
 90 |   align-items: center;
 91 |   transition: all 0.2s ease-in-out;
 92 |   line-height: 24px;
 93 | }
 94 | 
 95 | .card-container .card:not(:last-child) {
 96 |   margin-right: 0;
 97 | }
 98 | 
 99 | .card.card-small {
100 |   height: 16px;
101 |   width: 168px;
102 | }
103 | 
104 | .card-container .card:not(.highlight-card) {
105 |   cursor: pointer;
106 | }
107 | 
108 | .card-container .card:not(.highlight-card):hover {
109 |   transform: translateY(-3px);
110 |   box-shadow: 0 4px 17px rgba(black, 0.35);
111 | }
112 | 
113 | .card-container .card:not(.highlight-card):hover .material-icons path {
114 |   fill: rgb(105, 103, 103);
115 | }
116 | 
117 | .card.highlight-card {
118 |   background-color: #1976d2;
119 |   color: white;
120 |   font-weight: 600;
121 |   border: none;
122 |   width: auto;
123 |   min-width: 30%;
124 |   position: relative;
125 | }
126 | 
127 | .card.card.highlight-card span {
128 |   margin-left: 60px;
129 | }
130 | 
131 | svg#rocket {
132 |   width: 80px;
133 |   position: absolute;
134 |   left: -10px;
135 |   top: -24px;
136 | }
137 | 
138 | svg#rocket-smoke {
139 |   height: 100vh;
140 |   position: absolute;
141 |   top: 10px;
142 |   right: 180px;
143 |   z-index: -10;
144 | }
145 | 
146 | a,
147 | a:visited,
148 | a:hover {
149 |   color: #1976d2;
150 |   text-decoration: none;
151 | }
152 | 
153 | a:hover {
154 |   color: #125699;
155 | }
156 | 
157 | .terminal {
158 |   position: relative;
159 |   width: 80%;
160 |   max-width: 600px;
161 |   border-radius: 6px;
162 |   padding-top: 45px;
163 |   margin-top: 8px;
164 |   overflow: hidden;
165 |   background-color: rgb(15, 15, 16);
166 | }
167 | 
168 | .terminal::before {
169 |   content: "\2022 \2022 \2022";
170 |   position: absolute;
171 |   top: 0;
172 |   left: 0;
173 |   height: 4px;
174 |   background: rgb(58, 58, 58);
175 |   color: #c2c3c4;
176 |   width: 100%;
177 |   font-size: 2rem;
178 |   line-height: 0;
179 |   padding: 14px 0;
180 |   text-indent: 4px;
181 | }
182 | 
183 | .terminal pre {
184 |   font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;
185 |   color: white;
186 |   padding: 0 1rem 1rem;
187 |   margin: 0;
188 | }
189 | 
190 | .circle-link {
191 |   height: 40px;
192 |   width: 40px;
193 |   border-radius: 40px;
194 |   margin: 8px;
195 |   background-color: white;
196 |   border: 1px solid #eeeeee;
197 |   display: flex;
198 |   justify-content: center;
199 |   align-items: center;
200 |   cursor: pointer;
201 |   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
202 |   transition: 1s ease-out;
203 | }
204 | 
205 | .circle-link:hover {
206 |   transform: translateY(-0.25rem);
207 |   box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.2);
208 | }
209 | 
210 | footer {
211 |   margin-top: 8px;
212 |   display: flex;
213 |   align-items: center;
214 |   line-height: 20px;
215 | }
216 | 
217 | footer a {
218 |   display: flex;
219 |   align-items: center;
220 | }
221 | 
222 | .github-star-badge {
223 |   color: #24292e;
224 |   display: flex;
225 |   align-items: center;
226 |   font-size: 12px;
227 |   padding: 3px 10px;
228 |   border: 1px solid rgba(27,31,35,.2);
229 |   border-radius: 3px;
230 |   background-image: linear-gradient(-180deg,#fafbfc,#eff3f6 90%);
231 |   margin-left: 4px;
232 |   font-weight: 600;
233 |   font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
234 | }
235 | 
236 | .github-star-badge:hover {
237 |   background-image: linear-gradient(-180deg,#f0f3f6,#e6ebf1 90%);
238 |   border-color: rgba(27,31,35,.35);
239 |   background-position: -.5em;
240 | }
241 | 
242 | .github-star-badge .material-icons {
243 |   height: 16px;
244 |   width: 16px;
245 |   margin-right: 4px;
246 | }
247 | 
248 | svg#clouds {
249 |   position: fixed;
250 |   bottom: -160px;
251 |   left: -230px;
252 |   z-index: -10;
253 |   width: 1920px;
254 | }
255 | 
256 | 
257 | /* Responsive Styles */
258 | @media screen and (max-width: 767px) {
259 | 
260 |   .card-container > *:not(.circle-link) ,
261 |   .terminal {
262 |     width: 100%;
263 |   }
264 | 
265 |   .card:not(.highlight-card) {
266 |     height: 16px;
267 |     margin: 8px 0;
268 |   }
269 | 
270 |   .card.highlight-card span {
271 |     margin-left: 72px;
272 |   }
273 | 
274 |   svg#rocket-smoke {
275 |     right: 120px;
276 |     transform: rotate(-5deg);
277 |   }
278 | }
279 | 
280 | @media screen and (max-width: 575px) {
281 |   svg#rocket-smoke {
282 |     display: none;
283 |     visibility: hidden;
284 |   }
285 | }
286 | 


--------------------------------------------------------------------------------