Resources video update

_courses/course-1.md

@@ -1,8 +1,9 @@
 ---
-title: Course 1
-summary: Lorem ipsum dolor sit amet, consectetur adipiscing elit
-thumbnail: http://via.placeholder.com/560x360/ffffff/d8d8d8
+title: Intro to Deep Learning
+summary: Learn the basics of deep learning, and build your own deep neural networks using PyTorch. You’ll get practical experience with PyTorch through coding exercises and projects implementing state-of-the-art AI applications such as style transfer and text generation.
+thumbnail: http://placehold.it/387x219/f3f4f7
 link: https://pytorch.org
 order: 1
+platform: Udacity
 ---
 

_courses/course-2.md

@@ -1,7 +1,8 @@
 ---
-title: Course 2
-summary: Lorem ipsum dolor sit amet, consectetur adipiscing elit
-thumbnail: http://via.placeholder.com/560x360/ffffff/d8d8d8
+title: Fast.ai Courses
+summary: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultrices facilisis nisi id consequat. Morbi vestibulum feugiat lorem tincidunt tempus.
+thumbnail: http://placehold.it/387x219/f3f4f7
 link: https://pytorch.org
 order: 2
+platform: Fast.ai
 ---

_courses/course-3.md

@@ -1,7 +1,8 @@
 ---
 title: Course 3
 summary: Lorem ipsum dolor sit amet, consectetur adipiscing elit
-thumbnail: http://via.placeholder.com/560x360/ffffff/d8d8d8
+thumbnail: http://placehold.it/387x219/f3f4f7
 link: https://pytorch.org
 order: 3
+platform: Udacity
 ---

_courses/course-4.md

@@ -1,7 +1,8 @@
 ---
 title: Course 4
 summary: Lorem ipsum dolor sit amet, consectetur adipiscing elit
-thumbnail: http://via.placeholder.com/560x360/ffffff/d8d8d8
+thumbnail: http://placehold.it/387x219/f3f4f7
 link: https://pytorch.org
 order: 4
+platform: Fast.ai
 ---

_includes/educational_courses_module.html

@@ -1,24 +1,27 @@
 <div class="container-fluid article-page-module">
-  <div class="container">
+  <div class="container educational-resources-container">
     <div class="row">
       <div class="col-md-12">
-        <h3>Educational Courses</h3>
-        <a href="{{ site.external_urls.udacity_courses }}" class="btn btn-lg with-right-arrow module-button" target="_blank">
-          See all Courses
-        </a>
+        <h2>Educational Courses</h2>
       </div>
     </div>
 
+    <div class="educational-courses-intro">
+      <p>There are many educational resources available for learning and supporting AI / ML development with PyTorch.
+      Here are a few to get you started.</p>
+    </div>
+
     <div class="row module-content-wrapper">
       {% assign courses = site.courses | sort: 'order' %}
 
-      {% for course in courses limit: 4 %}
-        <div class="col-md-3">
+      {% for course in courses %}
+        <div class="col-md-4">
           <a href="{{ course.link }}" target="_blank">
+            <h5>{{ course.platform }}</h5>
             <img src="{{ course.thumbnail }}" />
-            <h5>{{ course.title }}</h5>
-            <p>{{ course.summary }}</p>
+            <h4>{{ course.title }}</h4>
           </a>
+          <p>{{ course.summary }}</p>
         </div>
       {% endfor %}
     </div>

_sass/_variables.scss

@@ -20,6 +20,7 @@ $code_link_color: #4974D1;
 $purple: #812CE5;
 $light_white: #e2e2e2;
 $mid_gray: #979797;
+$grey: #8c8c8c;
 
 $desktop_header_height: 90px;
 $mobile_header_height: 68px;

_sass/resources.scss

@@ -28,3 +28,38 @@
     margin-bottom: rem(36px);
   }
 }
+
+.resources .article-page-module {
+  background: $white;
+
+  .educational-resources-container {
+    h2 {
+      text-transform: uppercase;
+    }
+
+    h4 {
+      color: $black;
+    }
+
+    h5 {
+      padding-top: rem(30px);
+      padding-bottom: rem(10px);
+      color: $grey;
+    }
+
+    p {
+      color: $grey;
+    }
+
+    .educational-courses-intro {
+      @include desktop {
+        width: 41%;
+      }
+
+      padding-top: rem(20px);
+      p {
+        color: $not_quite_black;
+      }
+    }
+  }
+}

resources.html

@@ -55,4 +55,6 @@ <h4>{{ resource.title }}</h4>
   </div>
 </div>
 
+{% include educational_courses_module.html %}
+
 {% include quick_start_module.html %}