diff options
| -rw-r--r-- | public/assets/javascripts/app.js | 8 | ||||
| -rwxr-xr-x | public/assets/stylesheets/app.css | 34 | ||||
| -rwxr-xr-x | views/home.ejs | 5 |
3 files changed, 47 insertions, 0 deletions
diff --git a/public/assets/javascripts/app.js b/public/assets/javascripts/app.js index 9b46a3e..f26a782 100644 --- a/public/assets/javascripts/app.js +++ b/public/assets/javascripts/app.js @@ -17,6 +17,14 @@ else { new WOW().init(); +$('.hero .circle').click( function(){ + $('.videoModal').addClass('active'); +}); + +$('.videoModal .ion-ios7-close-empty').click( function(){ + $('.videoModal').removeClass('active'); +}); + var scene, cam, map; diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index 20498c0..4544fa3 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -92,6 +92,40 @@ a{ text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff; } +.videoModal { + position: fixed; + width: 0; + height: 0; + background: rgba(255,255,255,0); + display: table; + opacity:0; + z-index: -1; + -webkit-transition:0.4s background + -moz-transition:0.4s background; + transition:0.4s background; +} + +.videoModal.active { + opacity:1; + z-index: 6; + width: 100%; + height: 100%; + background: rgba(255,255,255,0.9); +} + +.videoModal .ion-ios7-close-empty { + position: absolute; + right: 50px; + top: 60px; + font-size: 80px; + cursor:pointer; + color:#444; +} + +.videoModal .ion-ios7-close-empty:hover { + color:black; +} + #help-button { display: none; border-right:0px!important; diff --git a/views/home.ejs b/views/home.ejs index 85d6f23..7fe0c71 100755 --- a/views/home.ejs +++ b/views/home.ejs @@ -71,6 +71,11 @@ [[ include partials/footer ]] </div> +<div class="videoModal"> +<span class="ion-ios7-close-empty"></span> +<div class="holder"> +<div class="video" style="width: 960px; margin: 0 auto; height: 540px; overflow: hidden; position: relative;"><iframe frameborder="0" scrolling="no" seamless="seamless" webkitallowfullscreen="webkitAllowFullScreen" mozallowfullscreen="mozallowfullscreen" allowfullscreen="allowfullscreen" id="okplayer" src="http://player.vimeo.com/video/109947131?api=1&js_api=1&title=0&byline=0&portrait=0&playbar=0&player_id=okplayer&loop=1&autoplay=0" width="960" height="540" style="width: 960px; height: 540px;"></iframe></div> +</div> </body> [[ include partials/scripts ]] </html> |