Difference between revisions of "Template:Peking/test"

Line 17: Line 17:
  
 
     </style>
 
     </style>
 +
 +
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
 +
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
 +
<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>
 +
 
</html>
 
</html>

Revision as of 08:03, 7 October 2017

Title
Title