Add Blazor First Look Course Banner (aspnet#242)

Author: Dedac

index.md

@@ -3,7 +3,11 @@ title: Welcome to the Blazor preview docs website!
 description: Learn about Blazor, an experimental .NET web framework using C#/Razor and HTML that runs in the browser with WebAssembly.
 documentType: index
 ---
-
+<div class="container-fluid update-banner">
+	<div class="container">
+		LinkedIn Learning has unlocked the training course <a href="https://www.linkedin.com/learning/blazor-first-look?trk=insiders_blazorFL_learning" aria-label="Watch Blazor First Look">Blazor First Look</a> for a limited time. 
+	</div>
+</div>
 <div class="hero">
   <div class="wrap">
     <h1 class="text">

template/styles/main.css

@@ -2,6 +2,17 @@ body {
   font-size: 16px;
 }
 
+.update-banner {
+    background-color: #ddd;
+    width: 100%;
+    padding: .9em;
+    margin-top: 50px;
+}
+
+.update-banner div {
+  text-align: center;
+}
+
 .toc .level1 > li {
   font-weight: normal;
 }
@@ -70,7 +81,7 @@ svg:hover path {
 
 .hero {
   height: 350px;
-  margin-top: 50px;
+  /* margin-top: 50px; Add back when removing the update banner */
   padding-top: 50px;
   font-weight: 300;
   text-align: center;
@@ -166,6 +177,9 @@ svg:hover path {
   .counter-key-section .glyphicon {
     display: none;
   }
+  .update-banner {
+    margin-top: 0px;
+  }
 }
 
 .footer {