Add Intro Videos section

docs/css/extra.css

@@ -17,4 +17,82 @@ and https://github.com/readthedocs/sphinx_rtd_theme/issues/295
 
 .wy-table-responsive {
   overflow: visible !important;
-}
+}
+
+
+ul.video-list {
+  counter-reset: section;
+  list-style: none;
+  padding-left: 0;
+  position:relative
+}
+
+ul.video-list .video:not(:last-of-type) a {
+  border-bottom:2px solid #e6e6e6
+}
+
+ul.video-list a {
+  position: relative;
+  padding: 2rem 2rem 2rem 4.2rem;
+  display: block;
+  box-sizing:border-box
+}
+
+ul.video-list a .info {
+  padding-top:0.25rem
+}
+
+ul.video-list a .info::before {
+  counter-increment: section;
+  content: counter(section);
+  position: absolute;
+  left: 1.5rem;
+  color:black
+}
+
+ul.video-list a .info > p, ul.video-list a .info > span {
+  color:black
+}
+
+ul.video-list a .info .title {
+  margin-top: 0;
+  margin-bottom:0.7rem
+}
+
+ul.video-list a .info .description {
+  margin-bottom: 1rem;
+
+}
+
+ul.video-list a .info .duration, ul.video-list a .info .duration span {
+  color: #6e6e6e;
+ 
+}
+
+ul.video-list a:hover, ul.video-list a:focus {
+  text-decoration:none
+}
+
+ul.video-list a:hover {
+  background:#f2f2f2
+}
+
+ul.video-list a:hover::after {
+  content: '';
+  display: block;
+  width: 6rem;
+  height: 6rem;
+  position: absolute;
+  background: url("/img/play.svg");
+  background-size: 6rem;
+  top: 3rem;
+  left:8.6rem
+}
+
+ul.video-list .thumb {
+  max-height: 8.2rem;
+  padding-right: 2rem;
+  position: relative;
+  float:left
+}
+

docs/get-started/intro-videos.md

@@ -0,0 +1,36 @@
+# Introductory Videos
+
+Start your journey using Lens with this set of introductory videos! These videos are designed to give you an overview of Lens various features and quickly get you familiar with them.
+
+<ul class="video-list">
+	<li class="video">
+		<a target="_blank" href="https://youtu.be/mc-BzPDKfkQ">
+			<img src="https://img.youtube.com/vi/mc-BzPDKfkQ/mqdefault.jpg" alt aria-hidden="true" class="thumb"/>
+			<div class="info">
+				<h3 class="title">Getting started</h3>
+				<p class="description">Get Lens Kubernetes IDE Running in 5 Minutes</p>
+				<span class="duration"><span class="sr-only">Duration </span>35<span class="sr-only"> minutes</span></span>
+			</div>
+		</a>
+	</li>
+    <li class="video">
+		<a target="_blank" href="https://youtu.be/epw_MjxjMYI">
+			<img src="https://img.youtube.com/vi/epw_MjxjMYI/mqdefault.jpg" alt aria-hidden="true" class="thumb"/>
+			<div class="info">
+				<h3 class="title">Introducing Lens</h3>
+				<p class="description">Lens Kubernetes IDE overview</p>
+				<span class="duration"><span class="sr-only">Duration </span>2<span class="sr-only"> minutes</span></span>
+			</div>
+		</a>
+	</li>
+    <li class="video">
+		<a target="_blank" href="https://youtu.be/fqneoWCgJdw">
+			<img src="https://img.youtube.com/vi/fqneoWCgJdw/mqdefault.jpg" alt aria-hidden="true" class="thumb"/>
+			<div class="info">
+				<h3 class="title">Demo of Mirantis Lens</h3>
+				<p class="description">The Best IDE For Kubernetes</p>
+				<span class="duration"><span class="sr-only">Duration </span>10<span class="sr-only"> minutes</span></span>
+			</div>
+		</a>
+	</li>
+</ul>

docs/img/play.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 22 22"><path fill="#fff" d="M9.35 15.95V6.6L15.4 11zM11 1C5.477 1 1 5.477 1 11c0 5.522 4.477 10 10 10s10-4.478 10-10c0-5.523-4.477-10-10-10zm0 18.5a8.5 8.5 0 1 1 .001-17.001A8.5 8.5 0 0 1 11 19.5z"/></svg>

mkdocs.yml

@@ -15,6 +15,8 @@ nav:
       - macOS: setup/macos.md
       - Windows: setup/windows.md
       - Network: setup/network.md
+    - Get Started:
+      - Intro Videos: get-started/intro-videos.md
     - Extensions:
         - Overview: extensions/overview.md
         - Get Started: