Difference between revisions of "Template:Peking/NavBar"
| Line 54: | Line 54: | ||
</div> | </div> | ||
</header> | </header> | ||
| − | + | ||
| − | + | ||
| − | + | ||
<main class="mdl-layout__content"> | <main class="mdl-layout__content"> | ||
<section class="mdl-layout__tab-panel is-active" id="fixed-tab-1"> | <section class="mdl-layout__tab-panel is-active" id="fixed-tab-1"> | ||
| Line 72: | Line 70: | ||
<!-- Wide card with share menu button --> | <!-- Wide card with share menu button --> | ||
<style> | <style> | ||
| − | .demo-card-wide.mdl-card { | + | .demo-card-wide.mdl-card { |
| − | + | width: 512px; | |
| − | } | + | } |
| − | .demo-card-wide > .mdl-card__title { | + | .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 { | + | .demo-card-wide > .mdl-card__menu { |
| − | + | color: #fff; | |
| − | } | + | } |
</style> | </style> | ||
<div class="demo-card-wide mdl-card mdl-shadow--2dp"> | <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> | </div> | ||
Revision as of 15:25, 16 October 2017
Title
Welcome
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Mauris sagittis pellentesque lacus eleifend lacinia...
