bulma/docs/videos.html

128 lines
4.2 KiB
HTML
Raw Normal View History

2018-05-23 22:01:38 +00:00
---
fulltitle: Bulma Videos
layout: default
route: videos
breadcrumb:
- home
- videos
videos:
- id: tesla
title: Tesla launch page
2018-05-24 09:25:33 +00:00
subtitle: 4 videos 20 min
2018-05-23 22:01:38 +00:00
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
2018-05-24 09:25:33 +00:00
subtitle: 4 videos 23 min
2018-05-23 22:01:38 +00:00
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
2018-05-24 09:25:33 +00:00
subtitle: 4 videos 15 min
2018-05-23 22:01:38 +00:00
content: Create web-based presentation slides with Bulma.
video_url: https://scrimba.com/p/pV5eHk/cGym4Ta
2018-05-25 18:48:08 +00:00
no_video: true
2018-05-23 22:01:38 +00:00
---
{% 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">
2018-05-24 09:25:33 +00:00
Learn Bulma with interactive {% include elements/external-link.html url=site.data.meta.scrimba_url text="Scrimba" %} tutorials
2018-05-23 22:01:38 +00:00
</p>
</div>
<div class="bd-header-carbon">
{% include elements/carbon.html %}
</div>
</header>
2018-05-24 09:21:31 +00:00
<div class="bd-shoutout message is-success">
<p class="title is-4 bd-shoutout-text">
Learn Bulma for free!
</p>
2018-05-23 22:01:38 +00:00
2018-05-24 09:21:31 +00:00
<p class="subtitle bd-shoutout-text">
Build 3 beautiful websites in 58 minutes
</p>
2018-05-23 22:01:38 +00:00
2018-05-24 09:21:31 +00:00
<p class="bd-shoutout-button">
2018-05-24 09:25:33 +00:00
{% include elements/external-link.html
2018-05-24 09:21:31 +00:00
classes="button is-success"
url=site.data.meta.scrimba_url
text="Enroll in the course" %}
</p>
</div>
2018-05-23 22:01:38 +00:00
2018-05-24 09:21:31 +00:00
{% for video in page.videos %}
<div class="bd-video">
<div class="columns">
<div class="column is-3">
<h2 class="title">
{{ video.title }}
</h2>
2018-05-23 22:01:38 +00:00
2018-05-24 09:21:31 +00:00
<p class="subtitle has-text-grey-light">
{{ video.subtitle }}
</p>
2018-05-23 22:01:38 +00:00
2018-05-24 09:21:31 +00:00
<div class="content is-medium">
<p>
{{ video.content }}
</p>
2018-05-23 22:01:38 +00:00
</div>
2018-05-24 09:21:31 +00:00
<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>
2018-05-23 22:01:38 +00:00
</div>
</div>
2018-05-24 09:21:31 +00:00
<div class="column is-8 is-offset-1">
<a class="image" href="{{ video.video_url }}" target="_blank" rel="nofollow">
2018-05-25 18:48:08 +00:00
{% if video.no_video %}
2018-05-24 09:21:31 +00:00
<img src="/images/videos/{{ video.id }}.png" alt="{{ video.title }} screenshot">
{% else %}
2018-05-25 18:48:08 +00:00
<video autoplay loop muted>
<source media="(min-width: 640px)" src="/images/videos/{{ video.id }}.mp4">
</video>
2018-05-24 09:21:31 +00:00
{% endif %}
</a>
</div>
</div>
</div>
{% endfor %}
2018-05-24 15:43:12 +00:00
<div class="bd-embrace">
<p class="bd-embrace-text">
Did you make a Bulma video too? <strong>Post it here!</strong> <span style="font-size: 20px; margin-left: 2px; position: relative; top: 1px;">🤗</span>
</p>
<p class="bd-embrace-button">
{% include elements/external-link.html classes="button is-link" url="https://github.com/jgthms/bulma/compare" text="Make a PR" %}
</p>
</div>
2018-05-23 22:01:38 +00:00
</div>
</div>
</div>
</main>