SHARE
TWEET

Shitty Example MDL Page

a guest Nov 2nd, 2015 187 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.         <link rel="stylesheet" href="./material.min.css">
  5.         <script src="./material.min.js"></script>
  6.         <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  7. </head>
  8. <body>
  9.         <!-- Header -->
  10.         <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
  11.           <header class="mdl-layout__header">
  12.                 <div class="mdl-layout__header-center" style="text-align:center;" >
  13.                   <span class="mdl-layout-title"><h1>Title</h1></span>
  14.            </header>
  15.          
  16.          
  17.          <!-- Grid (source of the problem) -->
  18.          <main class="mdl-layout__content">
  19.                 <div class="mdl-grid">
  20.                   <div class="mdl-cell mdl-cell--4-col" style="text-align:center; background-color:gray;">size 4</div>
  21.                   <div class="mdl-cell mdl-cell--4-col" style="text-align:center; background-color:gray;">size 4</div>
  22.                   <div class="mdl-cell mdl-cell--4-col" style="text-align:center; background-color:gray;">size 4</div>
  23.                 </div>
  24.         </main>
  25.  
  26.          
  27.          <!-- Footer -->
  28.           <footer class="mdl-mini-footer">
  29.           <div class="mdl-mini-footer__left-section">
  30.                 <ul class="mdl-mini-footer__link-list">
  31.                   <li>
  32.                           <form action="#">
  33.                                 <div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable">
  34.                                         <label class="mdl-button mdl-js-button mdl-button--icon" for="sample6">
  35.                                                 <i class="material-icons">search</i>
  36.                                         </label>
  37.                                         <div class="mdl-textfield__expandable-holder">
  38.                                         <input class="mdl-textfield__input" type="text" id="sample6" />
  39.                                         <label class="mdl-textfield__label" for="sample-expandable">Expandable Input</label>
  40.                                         </div>
  41.                                 </div>
  42.                         </form>
  43.                 </li>
  44.                 </ul>
  45.           </div>
  46.         </footer>
  47. </body>
RAW Paste Data
Top