Scrimba init

docs/_data/global.json

@@ -1,5 +1,12 @@
 {
   "navbar_items": [
+    {
+      "id": "videos",
+      "color": "has-text-success",
+      "fa_type": "fas",
+      "fa_icon": "fa-play-circle",
+      "title": "Videos"
+    },
     {
       "id": "blog",
       "color": "bd-has-text-rss",

docs/_data/links.json

@@ -435,6 +435,10 @@
       "icon": "folder",
       "path": "/documentation/components/tabs"
     },
+    "videos": {
+      "name": "Videos",
+      "path": "/videos"
+    },
     "blog": {
       "name": "Blog",
       "path": "/blog"

docs/_data/meta.json

@@ -8,5 +8,6 @@
   "version": "0.7.1",
   "book_url": "https://bleedingedgepress.com/creating-interfaces-bulma/",
   "book_amazon": "https://www.amazon.com/Creating-Interfaces-Bulma-Jeremy-Thomas-ebook/dp/B079M1BJG4/",
-  "book_sample": "http://www.bleedingedgepress.com/book_excerpts/01E9D1/creating_interfaces_with_bulma_sample.pdf"
+  "book_sample": "http://www.bleedingedgepress.com/book_excerpts/01E9D1/creating_interfaces_with_bulma_sample.pdf",
+  "scrimba_url": "https://scrimba.com/g/gbulma"
 }

docs/videos.html

@@ -0,0 +1,105 @@
+---
+fulltitle: Bulma Videos
+layout: default
+route: videos
+breadcrumb:
+- home
+- videos
+videos:
+- id: tesla
+  title: Tesla launch page
+  subtitle: 4 videos – 21 min
+  content: Design a responsive launch page with Bulma's component and CSS Grid.
+  video_url: https://scrimba.com/p/pV5eHk/cvrwyfR
+  article_url: https://medium.freecodecamp.org/how-to-build-a-responsive-tesla-launch-page-with-bulma-css-2bf484057349
+- id: blog
+  title: Blog
+  subtitle: 4 videos – 25 min
+  content: Build a responsive blog with Bulma components.
+  video_url: https://scrimba.com/p/pV5eHk/c4EMaUR
+  article_url: https://medium.freecodecamp.org/how-to-build-a-responsive-blog-design-with-bulma-css-c2257a17c16b
+- id: slide
+  title: Slide
+  subtitle: 4 videos – 16 min
+  content: Create web-based presentation slides with Bulma.
+  video_url: https://scrimba.com/p/pV5eHk/cGym4Ta
+  no_gif: true
+---
+
+{% include global/navbar.html id="Videos" %}
+
+<main class="bd-main">
+  <div class="bd-main-container container">
+    <div class="bd-duo">
+      <div class="bd-lead">
+        {% include components/breadcrumb.html %}
+
+        <header class="bd-header">
+          <div class="bd-header-titles">
+            <h1 class="title">
+              Videos
+            </h1>
+            <p class="subtitle is-4">
+              Learn Bulma with interactive <a href="{{ site.data.meta.scrimba_url }}" target="_blank" rel="nofollow">Scrimba</a> tutorials
+            </p>
+          </div>
+
+          <div class="bd-header-carbon">
+            {% include elements/carbon.html %}
+          </div>
+        </header>
+
+        <div class="bd-content">
+
+          {% for video in page.videos %}
+            <div class="bd-video">
+              <div class="columns">
+                <div class="column is-3">
+                  <h2 class="title">
+                    {{ video.title }}
+                  </h2>
+
+                  <p class="subtitle has-text-grey-light">
+                    {{ video.subtitle }}
+                  </p>
+
+                  <div class="content is-medium">
+                    <p>
+                      {{ video.content }}
+                    </p>
+                  </div>
+
+                  <div class="buttons">
+                    <p>
+                      <a class="button is-link is-medium" href="{{ video.video_url }}" target="_blank" rel="nofollow">
+                        Watch video
+                      </a>
+
+                      {% if video.article_url %}
+                        <a class="button is-light is-medium" href="{{ video.article_url }}" target="_blank" rel="nofollow">
+                          Read article
+                        </a>
+                      {% endif %}
+                    </p>
+                  </div>
+                </div>
+
+                <div class="column is-8 is-offset-1">
+                  <a class="image" href="{{ video.video_url }}" target="_blank" rel="nofollow">
+                    {% if video.no_gif %}
+                      <img src="/images/videos/{{ video.id }}.png" alt="{{ video.title }} screenshot">
+                    {% else %}
+                      <img class="is-hidden-touch" src="/images/videos/{{ video.id }}.gif" alt="{{ video.title }} screenshot">
+                      <img class="is-hidden-desktop" src="/images/videos/{{ video.id }}.png" alt="{{ video.title }} screenshot">
+                      {% endif %}
+                  </a>
+                </div>
+              </div>
+            </div>
+          {% endfor %}
+
+        </div>
+      </div>
+    </div>
+  </div>
+</main>