Created
March 26, 2016 20:43
-
-
Save gplanchat/3da29e50e8911f7430e9 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>Title</title> | |
| <link rel="stylesheet" href="bower_components/material-design-lite/material.css" type="text/css" /> | |
| <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700"> | |
| <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> | |
| <style> | |
| * { | |
| font-family: sans-serif, 'Roboto'; | |
| } | |
| body { | |
| margin: 0; | |
| background: #000; | |
| } | |
| .vid-layout-transparent .mdl-layout__header, | |
| .vid-layout-transparent .mdl-layout__drawer-button { | |
| /* This background is dark, so we set text to white. Use 87% black instead if | |
| your background is light. */ | |
| color: white; | |
| } | |
| .vid-jumbotron { | |
| color: white; | |
| width: 50%; | |
| margin: calc(50vh - 64px) auto; | |
| text-align: center; | |
| } | |
| .vid-jumbotron h1 { | |
| font-size: 128px; | |
| margin-bottom: 0; | |
| } | |
| .vid-jumbotron .subtitle { | |
| font-size: 32px; | |
| margin-top: 0; | |
| } | |
| .vid-jumbotron video { | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| min-width: 100%; | |
| min-height: 100%; | |
| width: auto; | |
| height: auto; | |
| z-index: -100; | |
| transform: translateX(-50%) translateY(-50%); | |
| background: url('assets/video/video-background.jpg') no-repeat; | |
| background-size: cover; | |
| transition: 1s opacity; | |
| } | |
| @media screen and (max-device-width: 800px) { | |
| .vid-jumbotron { | |
| background: url('assets/video/video-background.jpg') #000 no-repeat center center fixed; | |
| } | |
| .vid-jumbotron video { | |
| display: none; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="vid-layout-transparent mdl-layout mdl-js-layout"> | |
| <div class="mdl-layout__drawer"> | |
| <span class="mdl-layout-title">Title</span> | |
| <nav class="mdl-navigation"> | |
| <a class="mdl-navigation__link" href="">Link</a> | |
| <a class="mdl-navigation__link" href="">Link</a> | |
| <a class="mdl-navigation__link" href="">Link</a> | |
| <a class="mdl-navigation__link" href="">Link</a> | |
| </nav> | |
| </div> | |
| <main class="mdl-layout__content"> | |
| <section class="vid-jumbotron"> | |
| <video autoplay loop muted preload="auto" poster="assets/video/video-background.jpg"> | |
| <source src="assets/video/video-hd.mp4" type="video/mp4"> | |
| <source src="assets/video/video-sd.mp4" type="video/mp4"> | |
| </video> | |
| <h1>Title</h1> | |
| <p class="subtitle">Subtitle</p> | |
| <button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect"> | |
| <i class="material-icons">keyboard_arrow_down</i> | |
| </button> | |
| </section> | |
| <section class="vid-placeholder"> | |
| <p>Lorem ipsum</p> | |
| <p>Lorem ipsum</p> | |
| <p>Lorem ipsum</p> | |
| <p>Lorem ipsum</p> | |
| <p>Lorem ipsum</p> | |
| <p>Lorem ipsum</p> | |
| <p>Lorem ipsum</p> | |
| <p>Lorem ipsum</p> | |
| </section> | |
| </main> | |
| </div> | |
| <script src="bower_components/material-design-lite/material.js"></script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment