finished header

src/app/app.component.html

 <div class="app-container">
-<app-nav-bar></app-nav-bar>
-<app-context-bar></app-context-bar>
+    <app-nav-bar></app-nav-bar>
+    <div class="main-content">
+        <div  class="place-window">
+            <app-place-window></app-place-window>
+        </div>
+        <app-context-bar></app-context-bar>  
+    </div>
 </div>

src/app/app.component.scss

@@ -2,3 +2,23 @@
     height:100%;
     width:100%;
 }
+.main-content{
+    width:100%;
+    height:100%;
+    display: flex;
+    flex-direction: row;
+    // background-color: #00FFFF
+} 
+.place-window{
+    width: 100%;
+    height: 100%;
+    // background-color: blue;
+    padding-right:30px;
+    padding-left:30px;
+
+}
+.center {
+    margin-left: 100px;
+    margin-right: auto;
+    // width: 100%;
+}
\ No newline at end of file

src/app/app.module.ts

@@ -10,6 +10,9 @@ import { TimeRangeComponent } from './context-bar/time-range/time-range.componen
 import { TimeRangeBarComponent } from './context-bar/time-range/time-range-bar/time-range-bar.component';
 import { MapComponent } from './context-bar/map/map.component';
 import { SafeUrlPipe } from './safe-url.pipe';
+import { PlaceWindowComponent } from './place-window/place-window.component';
+import { PlaceCardComponent } from './place-window/area/place-card/place-card.component';
+import { AreaComponent } from './place-window/area/area.component';
 @NgModule({
   declarations: [
     AppComponent,
@@ -18,7 +21,10 @@ import { SafeUrlPipe } from './safe-url.pipe';
     TimeRangeComponent,
     TimeRangeBarComponent,
     MapComponent,
-    SafeUrlPipe
+    SafeUrlPipe,
+    PlaceWindowComponent,
+    PlaceCardComponent,
+    AreaComponent
   ],
   imports: [
     BrowserModule,

src/app/context-bar/context-bar.component.scss

@@ -3,7 +3,7 @@
 .context-bar {
     height: 100%;
     width: 374px;
-    float: right;
+    // float: right;
     padding-left: 11px;
     padding-right: 11px;
 }

src/app/place-window/area/area.component.html

+   
+  <div class="area-card-header">
+    <div class="hexagon center">
+        <div class="hexTop"></div>
+        <div class="hexBottom"></div>
+    </div>
+<h3 class="area-title">FAVORITES</h3>
+<hr>
+</div>
+<app-place-card></app-place-card>
\ No newline at end of file

src/app/place-window/area/area.component.scss

+$hex-border-color: #C1C7CD;
+.hexagon {
+  position: relative;
+  width: 60px; 
+  height: 34.64px;
+  margin: 17.32px 0;
+  background-image: url("../../assets/JC.jpg");
+  background-size: auto 64.4323px;
+  background-position: center;
+  border-left: solid 2.1px $hex-border-color;
+  border-right: solid 2.1px $hex-border-color;
+}
+
+.hexTop,
+.hexBottom {
+  position: absolute;
+  z-index: 1;
+  width: 42.43px;
+  height: 42.43px;
+  overflow: hidden;
+  -webkit-transform: scaleY(0.5774) rotate(-45deg);
+  -ms-transform: scaleY(0.5774) rotate(-45deg);
+  transform: scaleY(0.5774) rotate(-45deg);
+  background: inherit;
+  left: 6.69px;
+}
+
+/*counter transform the bg image on the caps*/
+.hexTop:after,
+.hexBottom:after {
+  content: "";
+  position: absolute;
+  width: 55.8000px;
+  height: 32.21614502078112px;
+  -webkit-transform:  rotate(45deg) scaleY(1.7321) translateY(-16.1081px);
+  -ms-transform:      rotate(45deg) scaleY(1.7321) translateY(-16.1081px);
+  transform:          rotate(45deg) scaleY(1.7321) translateY(-16.1081px);
+  -webkit-transform-origin: 0 0;
+  -ms-transform-origin: 0 0;
+  transform-origin: 0 0;
+  background: inherit;
+}
+
+.hexTop {
+  top: -21.2132px;
+  border-top: solid 2.9698px $hex-border-color;
+  border-right: solid 2.9698px $hex-border-color;
+}
+
+.hexTop:after {
+  background-position: center top;
+}
+
+.hexBottom {
+  bottom: -21.2132px;
+  border-bottom: solid 2.9698px $hex-border-color;
+  border-left: solid 2.9698px $hex-border-color;
+}
+
+.hexBottom:after {
+  background-position: center bottom;
+}
+
+.hexagon:after {
+  content: "";
+  position: absolute;
+  top: 1.2124px;
+  left: 0;
+  width: 55.8000px;
+  height: 32.2161px;
+  z-index: 2;
+  background: inherit;
+}
+.center {
+    margin-left: auto;
+    margin-right: auto;
+    // width: 100%;
+}
+.area-title {
+    text-align: center;
+    color:#68768C;
+}
+hr {
+    height:1.5px;
+    background-color:rgba(104, 118, 140, 0.5); 
+}
\ No newline at end of file

src/app/place-window/area/area.component.spec.ts

+/* tslint:disable:no-unused-variable */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+import { AreaComponent } from './area.component';
+
+describe('AreaComponent', () => {
+  let component: AreaComponent;
+  let fixture: ComponentFixture<AreaComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ AreaComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AreaComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/place-window/area/area.component.ts

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

src/app/place-window/area/place-card/place-card.component.html

+<div class="light-card place-card">
+    <img src="../../assets/BKing.jpg" class="place-picture">
+    <div class="place-status">
+        <div class="status-text">OPEN</div>
+        <hr class="hr-vertical">
+    </div>
+
+</div>

src/app/place-window/area/place-card/place-card.component.scss

+@import '../../../../color-palette';
+.place-card {
+    width: 199px;
+    height: 111px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+
+.light-card {
+    background-color: $white;
+    border-radius: 4px;
+    border-width: 1px;
+    border-style: solid;
+    border-color: $border-color;
+}
+
+.place-picture {
+    height: 84px;
+    width: 84px;
+    border: 5px solid $border-color;
+    border-radius: 50%;
+}
+
+.place-status {
+    height: 18px;
+    width: 71px;
+    background-color: $open-green;
+    border-radius: 4px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+.hr-vertical{
+    height: 18px;
+    background-color: $white;
+    opacity: 0.6;
+    width:1px;
+    margin:0px;
+    margin-top: 0px;
+    margin-bottom: 0px;
+}
+.status-text {
+    width:30px;
+    height:11px;
+    font-family: HelveticaNeue;
+    font-size: 9px;
+    font-weight: 500;
+    font-style: normal;
+    font-stretch: normal;
+    line-height: normal;
+    letter-spacing: normal;
+    // text-align: center;
+    color: $white;
+}

src/app/place-window/area/place-card/place-card.component.spec.ts

+/* tslint:disable:no-unused-variable */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+import { PlaceCardComponent } from './place-card.component';
+
+describe('PlaceCardComponent', () => {
+  let component: PlaceCardComponent;
+  let fixture: ComponentFixture<PlaceCardComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ PlaceCardComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PlaceCardComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/place-window/area/place-card/place-card.component.ts

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

src/app/place-window/place-window.component.html

+<app-area></app-area>
\ No newline at end of file

src/app/place-window/place-window.component.spec.ts

+/* tslint:disable:no-unused-variable */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+import { PlaceWindowComponent } from './place-window.component';
+
+describe('PlaceWindowComponent', () => {
+  let component: PlaceWindowComponent;
+  let fixture: ComponentFixture<PlaceWindowComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ PlaceWindowComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PlaceWindowComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/place-window/place-window.component.ts

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

src/color-palette.scss

@@ -4,7 +4,8 @@ $bluegrey: #7f8fa4;
 $border-color: #e6eaee;
 $pale-grey: #dfe3e9;
 $background-color: #eff3f6;
-
+$open-green:#3AC550;
+$closed-grey:#C4B9B9;
 // $color-palette: (
 // 'white' : #ffffff,
 // 'primary' : #354052,