Richienb/index.html

## index.html
<html lang="en">

<body>
  </header>
  <div class="demo-ribbon"></div>
  <main class="demo-main mdl-layout__content">
    <div class="demo-container mdl-grid">
      <div class="mdl-cell mdl-cell--2-col mdl-cell--hide-tablet mdl-cell--hide-phone"></div>
      <div class="demo-content mdl-color--white mdl-shadow--4dp content mdl-color-text--grey-800 mdl-cell mdl-cell--8-col">
        <div class="demo-crumbs mdl-color-text--grey-500">
        </div>
        <h3 style="text-align: center;">Your Title</h3>
        <p>Loren sump dolor sit met, wist intelligent tied, acquit per sues rip ides emu in. Ea usu stet alters. Ed ea clit a elect ram referent, at diode imper diet enc. Romanesque foreordains xiv, toll it parted mes no.</p>
        <p>Nonunion patriot cu sea, disciplining contention es at sea. Adam time am tied. Erato dolor em omit tam quo no, per leg ere argument um re. In dictum ditherer sit. Erred tongue is re. Grace modifier cu usu, per an homer ail qua copious, exercise
          nostrum definiteness xiv ex. Que no rota alters, ad sea sues exercise main rum, cu diam mas facility sea. Vela id brute dolor um peen chum.</p>
        <p>Dec ore offend it man re, est no dolor es explicate, re dicta elect ram demo critic duo. Nam e quad qua eke, re me sues om ques men nadir. Dolor unique id has. Romanesque acclimates investiture. Erred tongue is re. Pro id bonobo accustoms. Quango
          unique eons it, dolor es assertion sit ea.</p>
        </p>No grace descriptor per, passim qua we discern an sea. Mel an quid offend it adversarial, ram dolor impetus. Us doctors time am error ibis no. In pro quins consequent, denim fastidious copious quo ad. I onset voluminous eons, pro mutate passim
        ex.</p>
        <p>
          Mel boutique moratorium, bis ponderer aloes. Ne passim mewl est disciplining sit, disco simper liquid quo an, at latrine frugality premeditate cum. Per it pique time am. Meir mod mean rind e, has re leg ere officious consecrate, his in sumo grace.</p>
      </div>
    </div>
  </main>
  </div>
  <script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
</body>

</html>

## scripts
<script src="https://code.getmdl.io/1.3.0/material.min.js"></script>

## simple-material-design-document.markdown

      
    Raw
  

              simple-material-design-document.markdown
            
          
    Simple Material Design Document

Perfect for displaying information in wikis or documentations. Making use of Google's MDL (Material Design Lite).
A Pen by Richie Bendall on CodePen.
License.

  
## style.css
.demo-ribbon {
  width: 100%;
  height: 40vh;
  background-color: #3f51b5;
  -webkit-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.demo-main {
  margin-top: -35vh;
  -webkit-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.demo-header .mdl-layout__header-row {
  padding-left: 40px;
}

.demo-container {
  max-width: 1600px;
  width: calc(100% - 16px);
  margin: 0 auto;
}

.demo-content {
  border-radius: 2px;
  padding: 56px 56px;
  margin-bottom: 80px;
}

.demo-layout.is-small-screen .demo-content {
  padding: 40px 28px;
}

.demo-content h3 {
  margin-top: 48px;
}

.demo-footer {
  padding-left: 40px;
}

.demo-footer .mdl-mini-footer--link-list a {
  font-size: 13px;
}

## styles
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet" />
<link href="https://code.getmdl.io/1.3.0/material.indigo-red.min.css" rel="stylesheet" />
	<html lang="en">

	<body>
	</header>
	<div class="demo-ribbon"></div>
	<main class="demo-main mdl-layout__content">
	<div class="demo-container mdl-grid">
	<div class="mdl-cell mdl-cell--2-col mdl-cell--hide-tablet mdl-cell--hide-phone"></div>
	<div class="demo-content mdl-color--white mdl-shadow--4dp content mdl-color-text--grey-800 mdl-cell mdl-cell--8-col">
	<div class="demo-crumbs mdl-color-text--grey-500">
	</div>
	<h3 style="text-align: center;">Your Title</h3>
	<p>Loren sump dolor sit met, wist intelligent tied, acquit per sues rip ides emu in. Ea usu stet alters. Ed ea clit a elect ram referent, at diode imper diet enc. Romanesque foreordains xiv, toll it parted mes no.</p>
	<p>Nonunion patriot cu sea, disciplining contention es at sea. Adam time am tied. Erato dolor em omit tam quo no, per leg ere argument um re. In dictum ditherer sit. Erred tongue is re. Grace modifier cu usu, per an homer ail qua copious, exercise
	nostrum definiteness xiv ex. Que no rota alters, ad sea sues exercise main rum, cu diam mas facility sea. Vela id brute dolor um peen chum.</p>
	<p>Dec ore offend it man re, est no dolor es explicate, re dicta elect ram demo critic duo. Nam e quad qua eke, re me sues om ques men nadir. Dolor unique id has. Romanesque acclimates investiture. Erred tongue is re. Pro id bonobo accustoms. Quango
	unique eons it, dolor es assertion sit ea.</p>
	</p>No grace descriptor per, passim qua we discern an sea. Mel an quid offend it adversarial, ram dolor impetus. Us doctors time am error ibis no. In pro quins consequent, denim fastidious copious quo ad. I onset voluminous eons, pro mutate passim
	ex.</p>
	<p>
	Mel boutique moratorium, bis ponderer aloes. Ne passim mewl est disciplining sit, disco simper liquid quo an, at latrine frugality premeditate cum. Per it pique time am. Meir mod mean rind e, has re leg ere officious consecrate, his in sumo grace.</p>
	</div>
	</div>
	</main>
	</div>
	<script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
	</body>

	</html>
	.demo-ribbon {
	width: 100%;
	height: 40vh;
	background-color: #3f51b5;
	-webkit-flex-shrink: 0;
	-ms-flex-negative: 0;
	flex-shrink: 0;
	}

	.demo-main {
	margin-top: -35vh;
	-webkit-flex-shrink: 0;
	-ms-flex-negative: 0;
	flex-shrink: 0;
	}

	.demo-header .mdl-layout__header-row {
	padding-left: 40px;
	}

	.demo-container {
	max-width: 1600px;
	width: calc(100% - 16px);
	margin: 0 auto;
	}

	.demo-content {
	border-radius: 2px;
	padding: 56px 56px;
	margin-bottom: 80px;
	}

	.demo-layout.is-small-screen .demo-content {
	padding: 40px 28px;
	}

	.demo-content h3 {
	margin-top: 48px;
	}

	.demo-footer {
	padding-left: 40px;
	}

	.demo-footer .mdl-mini-footer--link-list a {
	font-size: 13px;
	}
	<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet" />
	<link href="https://code.getmdl.io/1.3.0/material.indigo-red.min.css" rel="stylesheet" />