|
|
| Line 22: |
Line 22: |
| | <script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script> | | <script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script> |
| | | | |
| − | <style>
| |
| − | .demo-layout-transparent {
| |
| − | background: url('../assets/demos/transparent.jpg') 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;
| |
| − | }
| |
| − | </style>
| |
| − |
| |
| − | <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">Title</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>
| |
| − | <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">
| |
| − | </main>
| |
| − | </div>
| |
| − |
| |
| − | <!-- Wide card with share menu button -->
| |
| − | <style>
| |
| − | .demo-card-wide.mdl-card {
| |
| − | width: 512px;
| |
| − | }
| |
| − | .demo-card-wide > .mdl-card__title {
| |
| − | color: #fff;
| |
| − | height: 176px;
| |
| − | background: url('../assets/demos/welcome_card.jpg') center / cover;
| |
| − | }
| |
| − | .demo-card-wide > .mdl-card__menu {
| |
| − | color: #fff;
| |
| − | }
| |
| − | </style>
| |
| − |
| |
| − | <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">
| |
| − | Lorem ipsum dolor sit amet, consectetur adipiscing elit.
| |
| − | Mauris sagittis pellentesque lacus eleifend lacinia...
| |
| − | </div>
| |
| − | <div class="mdl-card__actions mdl-card--border">
| |
| − | <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>
| |
| | | | |
| | </html> | | </html> |
