MDL Starter

by Cybolic

HTML

<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<div id="viewport">
  <div class="mdl-layout mdl-js-layout">
    <header class="mdl-layout__header mdl-layout__header--scroll">
    <div class="mdl-layout__drawer-button"><i class="material-icons">arrow_back</i></div>
      <div class="mdl-layout__header-row">
        <!-- Title -->
        <span class="mdl-layout-title">Book Gym</span>
        <!-- Add spacer, to align navigation to the right -->
        <div class="mdl-layout-spacer"></div>
      </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">
      <div class="page-content"><!-- Your content goes here --></div>
    </main>
  </div>
</div>

CSS

@import "https://fonts.googleapis.com/icon?family=Material+Icons";
body {
  background: black;
}
#viewport {
  width: 360px;
  height: 640px;
  position: relative;
  background: grey;
}