bulma/docs/videos.html

---
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>