Scrimba init

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>