docs: convert console image to css

Author: Ansimorph

etc/cli.angular.io/cli-logo.svg

@@ -11,6 +11,7 @@
     <!-- Material Design icons -->
     <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
     <link href='https://fonts.googleapis.com/css?family=Roboto:400,300,500,700' rel='stylesheet' type='text/css'>
+    <link href="https://fonts.googleapis.com/css?family=Source+Code+Pro:300" rel="stylesheet">
     <link rel="stylesheet" href="material.min.css">
     <link rel="stylesheet" href="main.css">
     <link rel="stylesheet" href="theme.css">
@@ -31,11 +32,11 @@
     <div class="top-nav-wrapper">
         <label for="site-nav-checkbox">SITE MENU</label>
         <nav class="mdl-navigation">
-            
+
             <a class="mdl-navigation__link" href="https://github.com/angular/angular-cli/wiki">Documentation</a>
-            
+
             <a class="mdl-navigation__link" href="https://github.com/angular/angular-cli">GitHub</a>
-            
+
         </nav>
         <div class="mdl-layout-spacer"></div>
         <nav class="mdl-navigation">
@@ -54,7 +55,19 @@
           <header class="hero-background">
     <section class="hero-container section--center mdl-grid mdl-grid--no-spacing">
         <div class="logo-container mdl-cell mdl-cell--6-col-desktop mdl-cell--12-col-tablet mdl-cell--12-col-phone">
-            <img class="hero-image" src="cli-logo.svg" alt="Mobile Toolkit">
+            <div class="console mdl-shadow--4dp">
+              <div class="console__head">
+                <div class="console__dot console__dot--red"></div>
+                <div class="console__dot console__dot--yellow"></div>
+                <div class="console__dot console__dot--green"></div>
+              </div>
+              <div class="console__body">
+                <kbd class="console__prompt">npm install -g @angular/cli</kbd>
+                <kbd class="console__prompt">ng new my-dream-app</kbd>
+                <kbd class="console__prompt">cd my-dream-app</kbd>
+                <kbd class="console__prompt">ng serve</kbd>
+              </div>
+            </div>
         </div>
         <div class="mdl-cell mdl-cell--6-col-desktop mdl-cell--12-col-tablet mdl-cell--12-col-phone">
             <h4 class="">Angular CLI</h4>
@@ -71,27 +84,27 @@ <h5 class="tagline">A command line interface for Angular</h5>
 
       <!-- Add as many features as needed -->
       <section class="features-container section--center mdl-grid mdl-grid--no-spacing">
-    
+
     <div class="features-list">
         <h4>ng new</h4>
         <p>The Angular CLI makes it easy to create an application that already works, right out of the box. It already follows our best practices!</p>
     </div>
-    
+
     <div class="features-list">
         <h4>ng generate</h4>
         <p>Generate components, routes, services and pipes with a simple command. The CLI will also create simple test shells for all of these.</p>
     </div>
-    
+
     <div class="features-list">
         <h4>ng serve</h4>
         <p>Easily test your app locally while developing.</p>
     </div>
-    
+
     <div class="features-list">
         <h4>Test, Lint, Format</h4>
         <p>Make your code really shine. Run your unittests or your end-to-end tests with the breeze of a command. Execute the official Angular linter and run clang format.</p>
     </div>
-    
+
 
     <div class="button-container mdl-cell mdl-cell--12-col-desktop center">
         <a href="https://github.com/angular/angular-cli/wiki" class="cta-button mdl-typography--font-regular mdl-button mdl-button--raised mdl-button--accent">