add video demo of Uppy to the front page

This commit is contained in:
Artur Paikin 2016-11-25 13:58:25 -06:00
parent 889c1d8267
commit 32ae24fc42
3 changed files with 20 additions and 12 deletions

Binary file not shown.

View file

@ -32,13 +32,17 @@
</section>
<section id="example" class="IndexExample">
<h2 class="IndexSection-title">Quick Example</h2>
<h2 class="IndexSection-title">Demo</h2>
<div class="IndexExample-block"><%- partial('partials/frontpage-code-sample') %></div>
<div class="IndexExample-block">
<video class="IndexExample-video"
src="/images/uppy-demo.mp4"
autoplay loop muted></video>
</div>
<div class="sign">&raquo;</div>
<div class="IndexExample-block"><img src="/images/uppy-dragdrop-screenshot.png"></div>
<div class="IndexExample-block">
<%- partial('partials/frontpage-code-sample') %>
</div>
<a class="GetStartedBtn" href="/guide/index.html">Get Started</a>
</section>

View file

@ -165,7 +165,7 @@
transition: all .3s ease;
background-color: $color-primary;
color: $color-white;
margin-top: 3em;
margin-top: 1.2em;
margin-bottom: 2em;
&:hover { @include zoom; }
@ -210,14 +210,14 @@
.IndexSection-title {
font-size: 25px;
margin-bottom: 1.5em;
margin-bottom: 0.7em;
}
.IndexExample-block {
padding: 7px;
// padding: 7px;
text-align: left;
background-color: $color-codebg;
border-radius: $size-radius;
// background-color: $color-codebg;
// border-radius: $size-radius;
overflow: hidden;
max-width: 500px;
margin: auto;
@ -225,13 +225,17 @@
@media #{$screen-medium} {
max-width: 100%;
width: 43%;
width: 47%;
display: inline-block;
vertical-align: middle;
height: 250px;
// height: 250px;
}
}
.IndexExample-video {
max-width: 100%;
}
.IndexExample-block img {
margin: auto;
}