Merged PR 4077: Documentation redesign

Documentation redesign

![21.JPG](https://powerbi.visualstudio.com/4c7b5adb-c2d0-4f18-b23c-edc4ac30f4e1/_apis/git/repositories/1dd63332-e003-46a3-ac6f-70213a1bcc2e/pullRequests/4077/attachments/21.JPG)

 ![22.JPG](https://powerbi.visualstudio.com/4c7b5adb-c2d0-4f18-b23c-edc4ac30f4e1/_apis/git/repositories/1dd63332-e003-46a3-ac6f-70213a1bcc2e/pullRequests/4077/attachments/22.JPG)

 ![23.JPG](https://powerbi.visualstudio.com/4c7b5adb-c2d0-4f18-b23c-edc4ac30f4e1/_apis/git/repositories/1dd63332-e003-46a3-ac6f-70213a1bcc2e/pullRequests/4077/attachments/23.JPG)

demo/v2-demo/demos.html

@@ -1,5 +1,3 @@
 <div>
-    <div class="title">
     <h2>Demos</h2>
 </div>
-</div>

demo/v2-demo/docs.html

@@ -1,26 +1,53 @@
-<div>
-    <div class="title">
+<div id="docs-section">
+    <div id="docs-content">
+        <h1>Power BI Embedded Documentation</h1>
+        <div class="docs-line">
+            <div class="docs-links">
                 <h2>Getting Started</h2>
+                <a href="https://github.com/Microsoft/powerbi-javascript/wiki">Power BI JavaScript API wiki</a><br>
+                <a href="https://docs.microsoft.com/en-us/power-bi/developer/embedding">Power BI Embedding Documentation</a><br>
             </div>
-    <div>
-        Please visit our 
-        <a href="https://powerbi.microsoft.com/en-us/documentation/powerbi-developer-embedding/">documentation</a>
-        to start using Power BI Embedded.
+            <div class="docs-links">
+                <h2>Useful Links</h2>
+                <a href="https://azure.microsoft.com/en-us/services/power-bi-embedded/">Power BI Embedded on Azure</a><br>
+                <a href="https://community.powerbi.com/t5/Forums/ct-p/Forums">Power BI Community</a><br>
+                <a href="https://ideas.powerbi.com/forums/265200-power-bi-ideas/category/161718-apis-and-embedding">Power BI Ideas - APIs and Embedding</a><br>
+            </div>
+            <div class="docs-links">
+                <h2>Support</h2>
+                <a href="https://docs.microsoft.com/en-us/power-bi/developer/embedded-faq">Power BI Embedded FAQ</a><br>
+                <a href="https://docs.microsoft.com/en-us/power-bi/developer/embedded-troubleshoot">Power BI Embedded Troubleshooting</a><br>
+                <a href="https://powerbi.microsoft.com/en-us/support/">Power BI Support</a><br>
             </div>
         </div>
-
+        <div class="docs-line">
             <h2>Videos</h2>
-
-<div>
-    <div class="title">
-        1. Learn how to Embed and Interact with Power BI Reports.
+            <div class="docs-video">
+                What is Power BI Embedded<br>
+                <iframe width="330" height="186" src="https://www.youtube.com/embed/iEHfUuoZseo" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
+            </div>
+            <div class="docs-video">
+                Microsoft Power BI Embedded update<br>
+                <iframe width="330" height="186" src="https://www.youtube.com/embed/NbsLRDMWNRI" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
+            </div>
+            <div class="docs-video">
+                Get an embed token<br>
+                <iframe width="330" height="186" src="https://www.youtube.com/embed/GPHHdDRSlis" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
+            </div>
+            <div class="docs-video">
+                Setting up and Getting Started<br>
+                <video width="330" height="186" controls="controls" preload="metadata">
+                    <source src="https://sec.ch9.ms/ch9/5da0/29725d07-f7c3-4090-8b80-a5881e5d5da0/PowerBiEmbeddedPart1_high.mp4#t=12.6" type="video/mp4">
+                    Your browser does not support the video tag.
+                </video>
+            </div>
+            <div class="docs-video">
+                Power BI Embedded JavaScript SDK<br>
+                <video width="330" height="186" controls="controls" preload="metadata">
+                    <source src="https://sec.ch9.ms/ch9/1750/ada209d0-c8a3-41d3-832d-1eac7e3c1750/PowerBiEmbeddedPart2_high.mp4#t=12.6" type="video/mp4">
+                    Your browser does not support the video tag.
+                </video>
             </div>
-    <iframe class="video" src="https://www.youtube.com/embed/nfkVljh_9O4" frameborder="0" allowfullscreen></iframe>
         </div>
-
-<div>
-    <div class="title">
-        2. Learn how to Create, Edit and Save Power BI reports in Embedded view.
     </div>
-    <iframe class="video" src="https://www.youtube.com/embed/ibuN4DzCl5c?showinfo=0" frameborder="0" allowfullscreen></iframe>
 </div>

demo/v2-demo/style/layout.css

@@ -59,12 +59,13 @@ header
     height: 100%;
     width: 100%;
     background-color: #F1F1F1;
+    width: calc(100% - 160px);
+    display: table-cell;
 }
 
 .content {
     height: 100%;
     width: 100%;
-    display: table;
 }
 
 #settings {

demo/v2-demo/style/style.css

@@ -12,6 +12,10 @@ body {
     height:100%;
 }
 
+h1 {
+    margin-bottom: 15px;
+}
+
 h3 {
     margin: 0;
 }
@@ -649,11 +653,6 @@ a {
     max-width: 800px;
 }
 
-.title {
-    font-size: 17px;
-    font-weight: 400px;
-}
-
 #createModeInput {
     display: none;
 }
@@ -890,3 +889,36 @@ a {
     box-shadow: none;
     background: transparent;
 }
+
+#docs-section {
+    font-size: 16px;
+    line-height: 2;
+    background: #F1F1F1;
+    height: 100%;
+    width: 100%;
+    align-items: center;
+}
+
+.docs-links {
+    margin-right: 30px;
+    float: left;
+    width: 330px;
+    height: 180px;
+}
+
+.docs-video {
+    margin-right: 30px;
+    float: left;
+    font-weight: 600;
+    line-height: 3;
+    width: 330px;
+}
+
+.docs-line {
+    display: block;
+    clear: both;
+}
+
+#docs-content {
+    max-width: 1080px;
+}