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> |