Difference between revisions of "Template:Peking/NavBar"

Line 216: Line 216:
 
<body>
 
<body>
  
−
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer
+
<style>
−
            mdl-layout--fixed-header" style=" padding-top: 20px;">
+
.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="mdl-layout__drawer" >
+
<div class="demo-card-wide mdl-card mdl-shadow--2dp">
−
        <span class="mdl-layout-title">Title</span>
+
  <div class="mdl-card__title">
−
        <nav class="mdl-navigation">
+
    <h2 class="mdl-card__title-text">Welcome</h2>
−
            <a class="mdl-navigation__link" href="">Link</a>
+
  </div>
−
            <a class="mdl-navigation__link" href="">Link</a>
+
  <div class="mdl-card__supporting-text">
−
            <a class="mdl-navigation__link" href="">Link</a>
+
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
−
            <a class="mdl-navigation__link" href="">Link</a>
+
    Mauris sagittis pellentesque lacus eleifend lacinia...
−
        </nav>
+
  </div>
−
    </div>
+
  <div class="mdl-card__actions mdl-card--border">
−
     <main class="mdl-layout__content">
+
    <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
−
        <div class="page-content">233333</div>
+
      Get Started
−
     </main>
+
    </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>
−
 
  
 
</body>
 
</body>
 
</html>
 
</html>

Revision as of 12:08, 16 October 2017

Welcome

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sagittis pellentesque lacus eleifend lacinia...
Get Started