Last active
January 11, 2016 19:38
-
-
Save josephbales/0d2560e8487a5b882fd2 to your computer and use it in GitHub Desktop.
Material design test
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> | |
| <head> | |
| <title>Test File</title> | |
| <link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.green-blue.min.css"> | |
| <script src="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js"></script> | |
| <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> | |
| <!-- Uses a transparent header that draws on top of the layout's background --> | |
| <style> | |
| .demo-layout-transparent { | |
| background: url('demo.jpg') center / cover; | |
| } | |
| .mdl-layout__header, .mdl-layout__header .mdl-layout__drawer-button, | |
| .mdl-layout__header .mdl-navigation__link { | |
| /* This background is dark, so we set text to white. Use 87% black instead if | |
| your background is light. */ | |
| color: white; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header"> | |
| <header class="mdl-layout__header"> | |
| <div class="mdl-layout__header-row"> | |
| <!-- Title --> | |
| <span class="mdl-layout-title">Title</span> | |
| <!-- Add spacer, to align navigation to the right --> | |
| <div class="mdl-layout-spacer"></div> | |
| <!-- Navigation. We hide it in small screens. --> | |
| <nav class="mdl-navigation mdl-layout--large-screen-only"> | |
| <a class="mdl-navigation__link" href="">Blog</a> | |
| <a class="mdl-navigation__link" href="">Writings</a> | |
| <a class="mdl-navigation__link" href="">Projects</a> | |
| <a class="mdl-navigation__link" href="">Links</a> | |
| <a class="mdl-navigation__link" href="">Contact</a> | |
| <a class="mdl-navigation__link" href="">About</a> | |
| </nav> | |
| </div> | |
| </header> | |
| <div class="mdl-layout__drawer"> | |
| <span class="mdl-layout-title">Title</span> | |
| <nav class="mdl-navigation"> | |
| <a class="mdl-navigation__link" href="">Blog</a> | |
| <a class="mdl-navigation__link" href="">Writings</a> | |
| <a class="mdl-navigation__link" href="">Projects</a> | |
| <a class="mdl-navigation__link" href="">Links</a> | |
| <a class="mdl-navigation__link" href="">Contact</a> | |
| <a class="mdl-navigation__link" href="">About</a> | |
| </nav> | |
| </div> | |
| <main class="mdl-layout__content"> | |
| <div class="page-content"><p>Some Content Here</p></div> | |
| <footer class="mdl-mini-footer"> | |
| <div class="mdl-mini-footer__left-section"> | |
| <div class="mdl-logo">Title</div> | |
| <ul class="mdl-mini-footer__link-list"> | |
| <li><a href="#">Help</a></li> | |
| <li><a href="#">Privacy & Terms</a></li> | |
| </ul> | |
| </div> | |
| </footer> | |
| </main> | |
| </div> | |
| </body> | |
| </html> | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment