A Pen by Randall Mason on CodePen.
Created
September 18, 2015 20:12
-
-
Save ClashTheBunny/4531ac5f3681fff56d3c to your computer and use it in GitHub Desktop.
PPNXBG
This file contains 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
| <html> | |
| <body> | |
| <div class="demo-layout-transparent mdl-layout mdl-js-layout"> | |
| <header class="mdl-layout__header mdl-layout__header--transparent"> | |
| <div class="mdl-layout__header-row"> | |
| <!-- Title --> | |
| <span class="mdl-layout-title">Randall Mason - Systems Engineer</span> | |
| <!-- Add spacer, to align navigation to the right --> | |
| <div class="mdl-layout-spacer"></div> | |
| <!-- Navigation --> | |
| <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> | |
| </header> | |
| <main class="mdl-layout__content"> | |
| <div class="demo-card-wide mdl-card mdl-shadow--2dp"> | |
| <div class="mdl-card__title"> | |
| <h2 class="mdl-card__title-text">Welcome</h2> | |
| </div> | |
| <div class="mdl-card__supporting-text"> | |
| </div> | |
| <div class="mdl-card__actions mdl-card--border"> | |
| Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff. | |
| <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect"> | |
| Get Started | |
| </a> | |
| </div> | |
| <div class="mdl-card__menu"> | |
| <button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect"> | |
| <i class="material-icons">share</i> | |
| </button> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| </body> | |
| </html> |
This file contains 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
| <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> | |
| <script src="//storage.googleapis.com/code.getmdl.io/1.0.4/material.min.js"></script> |
This file contains 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
| .demo-layout-transparent { | |
| background: url('http://www.nasa.gov/sites/default/files/thumbnails/image/nh-apluto-wide-9-17-15-final_0.png') center / cover; | |
| } | |
| .demo-layout-transparent .mdl-layout__header, | |
| .demo-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; | |
| } | |
| .demo-card-wide.mdl-card { | |
| width: 512px; | |
| margin: auto; | |
| } | |
| .demo-card-wide > .mdl-card__title { | |
| color: #fff; | |
| height: 176px; | |
| background: url('http://i.imgur.com/jESF2.jpg') center / cover; | |
| } | |
| .demo-card-wide > .mdl-card__menu { | |
| color: #fff; | |
| } |
This file contains 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
| <link href="//storage.googleapis.com/code.getmdl.io/1.0.4/material.indigo-pink.min.css" rel="stylesheet" /> | |
| <link href="//fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment