Added placeholder content to News page

Author: teresahu

public/news.jade

@@ -1,15 +1,67 @@
-.grid-fluid.l-space-bottom-8
+.grid-fluid.l-space-bottom-4
   .c12.text-center
     h3.text-headline.text-uppercase  Angular
   .c12.text-center
     figure
       img(src="/resources/images/logos/standard/shield-large.svg" alt="Us" style="width:80px;")
   .clear
+
+.grid-fluid
+  .c6
+    .article-card
+      .date December 8, 2015
+      .title Building Mobile Apps with Angular 2 and NativeScript
+      p Hi! I’m TJ from the NativeScript team at Telerik. We’ve been working with the Angular team for the greater part of this year to integrate Angular 2 into NativeScript, which together let you write native iOS and Android apps using your existing web and Angular...
+      img(src="/resources/images/bios/brad-green.jpg")
+      .posted Posted <strong>Yesterday</strong> by <a href="#">Brad Green</a>
+  .c6
+    .article-card
+      .date November 30, 2015
+      .title How Google Uses Angular 2 with Dart
+      p Google is always busy building new web apps, and recently a lot of that development is using Angular 2 for Dart. Just last week, the Google Fiber team launched Google’s first production Angular 2 app, written in Dart. Take a look at their just-launched Angular 2 for Dart app.
+      .author 
+        img(src="/resources/images/bios/brian-ford.jpg")
+        .posted Posted <strong>1 week ago</strong> by <a href="#">Brian Ford</a>
 
-.grid-fluid.l-space-bottom-8
+.grid-fluid.l-space-top-6
   .c12.text-center
     h3.text-headline.text-uppercase  Angular GDE (Google Developer Expert)
   .c12.text-center
     figure
       img(src="/resources/images/logos/standard/angular-gde-logo@2x.png" alt="Us" style="width:80px;")
   .clear
+  
+  .grid-fluid.l-space-bottom-2.l-space-top-4
+    .c6
+      .article-card
+        .date November 19, 2015
+        .title VS Code Angular Snippets
+        p Visual Studio Code Beta is available and it supports extensions! I published my first 2 extensions for creating Angular 1 and 2 snippets. You can grab these from the marketplace or right from VS Code.
+        .author
+          img(src="/resources/images/bios/john-papa.jpg")
+          .posted Posted <strong>3 weeks ago</strong> by <a href="#">John Papa</a>
+    .c6
+      .article-card
+        .date April 4, 2015
+        .title Angular 2 singleton service
+        p Angular 2 is out and everybody is creating some tutorials about how to start playing with it and I must say this... it’s terribly funny!
+        .author
+          img(src="/resources/images/bios/patrick-stapleton.jpg")
+          .posted Posted <strong>8 months ago</strong> by <a href="#">Patrick Stapleton</a>
+  .grid-fluid.l-space-bottom-4
+    .c6
+      .article-card
+        .date October 25, 2015
+        .title Integrating Web Components with AngularJS
+        p Just a few days ago I had the honour to give a talk together with the awesome Carmen at the first european AngularJS conference ngEurope.
+        .author
+          img(src="/resources/images/bios/pascalprecht.jpg")
+          .posted Posted <strong>14 months ago</strong> by <a href="#">Pascal Precht</a>
+    .c6
+      .article-card
+        .date November 19, 2015
+        .title VS Code Angular Snippets
+        p Visual Studio Code Beta is available and it supports extensions! I published my first 2 extensions for creating Angular 1 and 2 snippets. You can grab these from the marketplace or right from VS Code.
+        .author
+          img(src="/resources/images/bios/john-papa.jpg")
+          .posted Posted <strong>3 weeks ago</strong> by <a href="#">John Papa</a>

public/resources/css/main.scss

@@ -47,6 +47,7 @@
 @import 'module/cheatsheet';
 @import 'module/filetree';
 @import 'module/support';
+@import 'module/article-card';
 
 
 /*

public/resources/css/module/_article-card.scss

@@ -0,0 +1,52 @@
+.article-card {
+  margin: 0px 0px ($unit * 4) 0px;
+  padding: ($unit * 2);
+  background: lighten($mist, 3%);
+  border-radius: ($unit / 2);
+  min-height: 330px;
+  position: relative;
+  @media handheld and (max-width: $phone-breakpoint),
+  screen and (max-device-width: $phone-breakpoint),
+  screen and (max-width: $tablet-breakpoint) {
+    padding: ($unit * 2) ($unit * 1);
+  }
+  a {
+    text-decoration: none;
+  }
+  strong {
+    color: darken($darkgrey, 5%);
+    font-weight: 400;
+  }
+  &:last-child {
+    margin: 0;
+  }
+  .date {
+    text-transform: uppercase;
+    margin-bottom: $unit;
+  }
+  .title {
+    font-size: 20px;
+    color: $regal;
+  }
+  p, .date {
+    font-size: 16px;
+    color: darken($darkgrey, 5%);
+  }
+  .posted {
+    color: $bismark;
+    font-size: 16px;
+    display: inline;
+    padding-left: 10px;
+  }
+  img {
+    width: 40px;
+    height: 40px;
+    border-radius: 50% 50%;
+    display: inline;
+    vertical-align: middle;
+  }
+  .author {
+    position: absolute;
+    bottom: 20px;
+  }
+}