| Index: html/content.html | 
| =================================================================== | 
| new file mode 100644 | 
| --- /dev/null | 
| +++ b/html/content.html | 
| @@ -0,0 +1,119 @@ | 
| +<!DOCTYPE html> | 
| +<!-- | 
| +  This file is part of universal-design-language | 
| +  Copyright (C) 2016 Eyeo GmbH | 
| + | 
| +  universal-design-language is free software: you can redistribute it and/or | 
| +  modify it under the terms of the GNU General Public License as published by | 
| +  the Free Software Foundation, either version 3 of the License, or | 
| +  (at your option) any later version. | 
| + | 
| +  universal-design-language is distributed in the hope that it will be useful, | 
| +  but WITHOUT ANY WARRANTY; without even the implied warranty of | 
| +  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the | 
| +  GNU General Public License for more details. | 
| + | 
| +  You should have received a copy of the GNU General Public License | 
| +  along with web.starter-kit.  If not, see <http://www.gnu.org/licenses/>. | 
| +--> | 
| +<html dir="ltr"> | 
| +<head> | 
| +  <meta charset="utf-8"> | 
| +  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> | 
| +  <meta http-equiv="x-ua-compatible" content="ie=edge"> | 
| +  <title>Content</title> | 
| +  <link rel="stylesheet" href="/css/main.css"> | 
| +</head> | 
| +<body style="margin-bottom: 3em;"> | 
| +  <div class="container"> | 
| + | 
| +    <h1>Content</h1> | 
| +    <p>This document outlines a subset of HTML5 that we recommend supporting accross all websites.</p> | 
| + | 
| +    <h2>Headings</h2> | 
| + | 
| +    <h1>Heading 1</h1> | 
| +    <h2>Heading 2</h2> | 
| +    <h3>Heading 3</h3> | 
| +    <h4>Heading 4</h4> | 
| +    <h5>Heading 5</h5> | 
| +    <h6>Heading 6</h6> | 
| + | 
| +    <h2>Body content</h2> | 
| + | 
| +    <p>This is a normal.</p> | 
| +    <p>This is <em>emphasized</em>.</p> | 
| +    <p>This is <strong>strong</strong>.</p> | 
| +    <p>This is an <abbr title="Abbreviation">abbr</abbr>.</p> | 
| +    <p>This is a <a href="#">link</a>.</p> | 
| +    <p>This has a footnote. <sup><a href="#" class="footnote-ref">1</a></sup></p> | 
| +    <blockquote>This is a blockquote.</blockquote> | 
| +    <p>This is followed by a thematic break.</p> | 
| +    <hr> | 
| +    <p>Like a change of scene in a story, or a shift of topic within a section.</p> | 
| + | 
| +    <h3>Ordered lists</h3> | 
| + | 
| +    <ol> | 
| +      <li>This is a list item</li> | 
| +      <li>This is a list item</li> | 
| +      <li>This is a list item | 
| +        <ol> | 
| +          <li>This is a list item</li> | 
| +          <li>This is a list item</li> | 
| +          <li>This is a list item</li> | 
| +          <li>This is a list item</li> | 
| +        </ol> | 
| +      </li> | 
| +      <li>This is a list item</li> | 
| +    </ol> | 
| + | 
| +    <h3>Unordered lists</h3> | 
| + | 
| +    <ul> | 
| +      <li>This is a list item</li> | 
| +      <li>This is a list item</li> | 
| +      <li>This is a list item | 
| +        <ul> | 
| +          <li>This is a list item</li> | 
| +          <li>This is a list item</li> | 
| +          <li>This is a list item</li> | 
| +          <li>This is a list item</li> | 
| +        </ul> | 
| +      </li> | 
| +      <li>This is a list item</li> | 
| +    </ul> | 
| + | 
| +    <h3>Unstyled lists</h3> | 
| + | 
| +    <ul class="unstyled-list"> | 
| +      <li>This is a list item</li> | 
| +      <li>This is a list item</li> | 
| +      <li>This is a list item | 
| +        <ul class="unstyled-list"> | 
| +          <li>This is a list item</li> | 
| +          <li>This is a list item</li> | 
| +          <li>This is a list item</li> | 
| +          <li>This is a list item</li> | 
| +        </ul> | 
| +      </li> | 
| +      <li>This is a list item</li> | 
| +    </ul> | 
| + | 
| +    <h3>Definition lists</h3> | 
| + | 
| +    <dl> | 
| +      <dt>This is a definition title</dt> | 
| +      <dd>This is a definition detail</dd> | 
| +      <dt>This is a definition title</dt> | 
| +      <dd>This is a definition detail</dd> | 
| +    </dl> | 
| + | 
| +    <h2>Images</h2> | 
| + | 
| +    <img src="//placehold.it/480x240?text=Fixed Width" /> | 
| +    <img class="full-width" src="//placehold.it/960x240?text=Full Width" /> | 
| + | 
| +  </div> | 
| +</body> | 
| +</html> | 
|  |