mirror of
https://github.com/jgthms/bulma
synced 2026-03-19 20:04:30 -07:00
Bulma v9 website (#3249)
* Add Bulma v9 * Add vendor dependencies * Fix native * Fix sponsors * Add style attribute
This commit is contained in:
Jeremy Thomas
150
docs/videos.html
150
docs/videos.html
@@ -28,101 +28,73 @@ videos:
|
||||
|
||||
{% 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 %}
|
||||
{% capture hero_content %}
|
||||
<a class="button bd-fat-button is-success is-medium"
|
||||
href="{{ site.data.meta.scrimba_url }}"
|
||||
target="_blank">
|
||||
<span class="icon">
|
||||
<i class="fas fa-graduation-cap"></i>
|
||||
</span>
|
||||
<span>
|
||||
Enroll in the free course
|
||||
</span>
|
||||
</a>
|
||||
{% endcapture %}
|
||||
|
||||
<header class="bd-header">
|
||||
<div class="bd-header-titles">
|
||||
<h1 class="title">
|
||||
Videos
|
||||
</h1>
|
||||
<p class="subtitle is-4">
|
||||
Learn Bulma with interactive {% include elements/external-link.html url=site.data.meta.scrimba_url text="Scrimba" %} tutorials
|
||||
</p>
|
||||
</div>
|
||||
{%
|
||||
include components/hero.html
|
||||
color="videos"
|
||||
icon="fas fa-play-circle"
|
||||
title="**Video** tutorials"
|
||||
subtitle="Learn Bulma with free interactive Scrimba tutorials"
|
||||
content=hero_content
|
||||
%}
|
||||
|
||||
<div class="bd-header-carbon">
|
||||
{% include elements/carbon.html %}
|
||||
</div>
|
||||
</header>
|
||||
{% for video in page.videos %}
|
||||
<div class="bd-video">
|
||||
<div class="bd-video-info">
|
||||
<h2 class="title">
|
||||
{{ video.title }}
|
||||
</h2>
|
||||
|
||||
<div class="bd-shoutout message is-success">
|
||||
<p class="title is-4 bd-shoutout-text">
|
||||
Learn Bulma for free!
|
||||
</p>
|
||||
<p class="subtitle has-text-grey-light">
|
||||
{{ video.subtitle }}
|
||||
</p>
|
||||
|
||||
<p class="subtitle bd-shoutout-text">
|
||||
Build 3 beautiful websites in 58 minutes
|
||||
</p>
|
||||
<div class="content is-medium">
|
||||
<p>
|
||||
{{ video.content }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<p class="bd-shoutout-button">
|
||||
{% include elements/external-link.html
|
||||
classes="button is-success"
|
||||
url=site.data.meta.scrimba_url
|
||||
text="Enroll in the course" %}
|
||||
</p>
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<p>
|
||||
<a class="button bd-fat-button is-success is-medium" href="{{ video.video_url }}" target="_blank" rel="nofollow">
|
||||
<span class="icon">
|
||||
<i class="fas fa-play"></i>
|
||||
</span>
|
||||
<span>Watch video</span>
|
||||
</a>
|
||||
|
||||
{% 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_video %}
|
||||
<img src="{{ site.url }}/images/videos/{{ video.id }}.png" alt="{{ video.title }} screenshot">
|
||||
{% else %}
|
||||
<video autoplay loop muted>
|
||||
<source media="(min-width: 640px)" src="{{ site.url }}/images/videos/{{ video.id }}.mp4">
|
||||
</video>
|
||||
{% endif %}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
||||
<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>
|
||||
{% if video.article_url %}
|
||||
<a class="button bd-fat-button is-success is-light is-medium" href="{{ video.article_url }}" target="_blank" rel="nofollow">
|
||||
Read article
|
||||
</a>
|
||||
{% endif %}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<figure class="bd-video-figure">
|
||||
<a class="image" href="{{ video.video_url }}" target="_blank" rel="nofollow">
|
||||
{% if video.no_video %}
|
||||
<img src="{{ site.url }}/images/videos/{{ video.id }}.png" alt="{{ video.title }} screenshot">
|
||||
{% else %}
|
||||
<video autoplay loop muted>
|
||||
<source media="(min-width: 640px)" src="{{ site.url }}/images/videos/{{ video.id }}.mp4">
|
||||
</video>
|
||||
{% endif %}
|
||||
</a>
|
||||
</figure>
|
||||
</div>
|
||||
</main>
|
||||
{% endfor %}
|
||||
|
||||
Reference in New Issue
Block a user