Browse Source

Add Video in a cleaner, better looking popup.

tags/0.5.0^2
Bèr Kessels 3 years ago
parent
commit
cf4379e7f1
5 changed files with 29 additions and 5 deletions
  1. 6
    1
      css/main-color3.css
  2. BIN
      img/video.jpg
  3. BIN
      img/video.png
  4. 7
    4
      index.html
  5. 16
    0
      index.html.erb

+ 6
- 1
css/main-color3.css View File

@@ -1668,6 +1668,8 @@ ul {
display: block;
text-align: center;
position: relative;
height: 380px;
background: url('../img/video.png') center;
}
.video:before {
content: '';
@@ -1686,9 +1688,12 @@ ul {
}
.video__btn {
position: relative;
display: block;
z-index: 2;
color: #fff;
font-size: 54px;
margin-top: 106px;
vertical-align: middle;
}
.video__btn:hover {
color: #00b47b;
@@ -2599,4 +2604,4 @@ ul {
-moz-transform: scale(1);
transform: scale(1);
}
}
}

BIN
img/video.jpg View File


BIN
img/video.png View File


+ 7
- 4
index.html View File

@@ -29,6 +29,7 @@
<link rel="stylesheet" href="css/animate.min.css">
<link rel="stylesheet" href="css/magnific-popup.css">
<link rel="stylesheet" href="css/main-color3.css">
vertical-align: middle;

<!-- Matomo -->
<script type="text/javascript">
@@ -148,11 +149,13 @@
<!-- end about -->

<!-- video -->
<section class="section section--bg video" data-bg="img/video.jpg">
<section class="section section">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2 col-lg-6 col-lg-offset-3">
<a href="https://emb.d.tube/#!/berkes/giz32pec" class="video__btn animate" data-animate="fadeIn" data-duration="1.0s" data-delay="0.2s"><i class="fa fa-play-circle"></i></a>
<div class="col-xs-12 col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2 col-lg-6 col-lg-offset-3 section-bg video" data-bg="img/video.jpg">
<a href="https://emb.d.tube/#!/berkes/giz32pec" class="video__btn animate" data-animate="fadeIn" data-duration="1.0s" data-delay="0.2s">
<i class="fa fa-play-circle"></i>
</a>
<h4 class="video__title animate" data-animate="fadeIn" data-duration="1.0s" data-delay="0.4s">How does it work?</h4>
</div>
</div>
@@ -374,7 +377,7 @@
<!-- end copyright -->
</div>
<div class="col-xs-12">
<p class="text-center">version: v0.4.0. built on 2018-10-09</small></p>
<p class="text-center">version: v0.4.0. built on 2019-01-17</small></p>
</div>
</div>
</div>

+ 16
- 0
index.html.erb View File

@@ -29,6 +29,7 @@
<link rel="stylesheet" href="css/animate.min.css">
<link rel="stylesheet" href="css/magnific-popup.css">
<link rel="stylesheet" href="css/main-color3.css">
vertical-align: middle;

<!-- Matomo -->
<script type="text/javascript">
@@ -147,6 +148,21 @@
</section>
<!-- end about -->

<!-- video -->
<section class="section section">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2 col-lg-6 col-lg-offset-3 section-bg video" data-bg="img/video.jpg">
<a href="https://emb.d.tube/#!/berkes/giz32pec" class="video__btn animate" data-animate="fadeIn" data-duration="1.0s" data-delay="0.2s">
<i class="fa fa-play-circle"></i>
</a>
<h4 class="video__title animate" data-animate="fadeIn" data-duration="1.0s" data-delay="0.4s">How does it work?</h4>
</div>
</div>
</div>
</section>
<!-- end video -->

<!-- products -->
<section class="section section" id="products">
<div class="container">

Loading…
Cancel
Save