OLD | NEW |
(Empty) | |
| 1 <!DOCTYPE html> |
| 2 <!-- |
| 3 This file is part of universal-design-language |
| 4 Copyright (C) 2016 Eyeo GmbH |
| 5 |
| 6 universal-design-language is free software: you can redistribute it and/or |
| 7 modify it under the terms of the GNU General Public License as published by |
| 8 the Free Software Foundation, either version 3 of the License, or |
| 9 (at your option) any later version. |
| 10 |
| 11 universal-design-language is distributed in the hope that it will be useful, |
| 12 but WITHOUT ANY WARRANTY; without even the implied warranty of |
| 13 MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the |
| 14 GNU General Public License for more details. |
| 15 |
| 16 You should have received a copy of the GNU General Public License |
| 17 along with web.starter-kit. If not, see <http://www.gnu.org/licenses/>. |
| 18 --> |
| 19 <html dir="ltr"> |
| 20 <head> |
| 21 <meta charset="utf-8"> |
| 22 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-
fit=no"> |
| 23 <meta http-equiv="x-ua-compatible" content="ie=edge"> |
| 24 <title>HTML Content</title> |
| 25 <link rel="stylesheet" href="/css/main.css"> |
| 26 <style> |
| 27 body |
| 28 { |
| 29 margin-bottom: 4em; |
| 30 } |
| 31 header |
| 32 { |
| 33 border-bottom: 1px solid lightgray; |
| 34 margin: 4em 0 1em 0; |
| 35 } |
| 36 </style> |
| 37 </head> |
| 38 <body> |
| 39 <main class="container"> |
| 40 |
| 41 <header> |
| 42 <h1>HTML Content</h1> |
| 43 </header> |
| 44 <ol> |
| 45 <li><a href="#headings">Headings</a></li> |
| 46 <li><a href="#inline">Inline</a></li> |
| 47 <li><a href="#blockquotes">Blockquotes</a></li> |
| 48 <li><a href="#code-blocks">Code Blocks</a></li> |
| 49 <li><a href="#ordered-lists">Ordered Lists</a></li> |
| 50 <li><a href="#unordered-lists">Unordered Lists</a></li> |
| 51 <li><a href="#unstyled-lists">Unstyled Lists</a></li> |
| 52 <li><a href="#definition-lists">Definition Lists</a></li> |
| 53 <li><a href="#tables">Tables</a></li> |
| 54 <li><a href="#image-alignment">Image Alignment</a></li> |
| 55 <li><a href="#embeds">Embeds</a></li> |
| 56 </ol> |
| 57 |
| 58 <section> |
| 59 <header> |
| 60 <h2 id="headings">Headings</h2> |
| 61 </header> |
| 62 <h1>Heading 1</h1> |
| 63 <h2>Heading 2</h2> |
| 64 <h3>Heading 3</h3> |
| 65 <h4>Heading 4</h4> |
| 66 <h5>Heading 5</h5> |
| 67 <h6>Heading 6</h6> |
| 68 </section> |
| 69 |
| 70 <section> |
| 71 <header> |
| 72 <h2 id="inline">Inline</h2> |
| 73 </header> |
| 74 <p>This is a normal.</p> |
| 75 <p>This is <em>emphasized</em>.</p> |
| 76 <p>This is <strong>strong</strong>.</p> |
| 77 <p>This is inline <code>code</code>.</p> |
| 78 <p>This is an <abbr title="Abbreviation">abbr</abbr>.</p> |
| 79 <p>This is a <a href="#">link</a>.</p> |
| 80 </section> |
| 81 |
| 82 <section> |
| 83 <header> |
| 84 <h2 id="blockquotes">Blockquotes</h2> |
| 85 </header> |
| 86 <blockquote> |
| 87 <p>This is a blockquote</p> |
| 88 </blockquote> |
| 89 </section> |
| 90 |
| 91 <section> |
| 92 <header> |
| 93 <h2 id="code-blocks">Code blocks</h2> |
| 94 </header> |
| 95 <pre><code> |
| 96 #include<stdio.h> |
| 97 |
| 98 int main(void) { |
| 99 printf("Hello World\n"); |
| 100 return 0; |
| 101 } |
| 102 </code></pre> |
| 103 </section> |
| 104 |
| 105 <section> |
| 106 <header> |
| 107 <h2 id="ordered-lists">Ordered Lists</h2> |
| 108 </header> |
| 109 <ol> |
| 110 <li>This is a list item</li> |
| 111 <li>This is a list item</li> |
| 112 <li>This is a list item |
| 113 <ol> |
| 114 <li>This is a list item</li> |
| 115 <li>This is a list item</li> |
| 116 <li>This is a list item</li> |
| 117 <li>This is a list item</li> |
| 118 </ol> |
| 119 </li> |
| 120 <li>This is a list item</li> |
| 121 </ol> |
| 122 </section> |
| 123 |
| 124 <section> |
| 125 <header> |
| 126 <h2 id="unordered-lists">Unoredered Lists</h2> |
| 127 </header> |
| 128 <ul> |
| 129 <li>This is a list item</li> |
| 130 <li>This is a list item</li> |
| 131 <li>This is a list item |
| 132 <ul> |
| 133 <li>This is a list item</li> |
| 134 <li>This is a list item</li> |
| 135 <li>This is a list item</li> |
| 136 <li>This is a list item</li> |
| 137 </ul> |
| 138 </li> |
| 139 <li>This is a list item</li> |
| 140 </ul> |
| 141 </section> |
| 142 |
| 143 <section> |
| 144 <header> |
| 145 <h2 id="unstyled-lists">Unstyled Lists</h2> |
| 146 </header> |
| 147 <ul class="unstyled-list"> |
| 148 <li>This is a list item</li> |
| 149 <li>This is a list item</li> |
| 150 <li>This is a list item |
| 151 <ul> |
| 152 <li>This is a list item</li> |
| 153 <li>This is a list item</li> |
| 154 <li>This is a list item</li> |
| 155 <li>This is a list item</li> |
| 156 </ul> |
| 157 </li> |
| 158 <li>This is a list item</li> |
| 159 </ul> |
| 160 </section> |
| 161 |
| 162 <section> |
| 163 <header> |
| 164 <h2 id="definition-lists">Definition Lists</h2> |
| 165 </header> |
| 166 <dl> |
| 167 <dt>This is a question?</dt> |
| 168 <dd>This is an answer.</dd> |
| 169 <dt>This is a <dfn>term</dfn>.</dt> |
| 170 <dd>This is that term's definition.</dd> |
| 171 </dl> |
| 172 </section> |
| 173 |
| 174 <section> |
| 175 <header> |
| 176 <h2 id="tables">Tables</h2> |
| 177 </header> |
| 178 <table> |
| 179 <thead> |
| 180 <th>Heading 1</th> |
| 181 <th>Heading 2</th> |
| 182 <th>Heading 3</th> |
| 183 <th>Heading 4</th> |
| 184 </thead> |
| 185 <tbody> |
| 186 <tr> |
| 187 <td>Item 1:1</td> |
| 188 <td>Item 1:2</td> |
| 189 <td>Item 1:3</td> |
| 190 <td>Item 1:4</td> |
| 191 </tr> |
| 192 <tr> |
| 193 <td>Item 2:1</td> |
| 194 <td>Item 2:2</td> |
| 195 <td>Item 2:3</td> |
| 196 <td>Item 2:4</td> |
| 197 </tr> |
| 198 <tr> |
| 199 <td>Item 3:1</td> |
| 200 <td>Item 3:2</td> |
| 201 <td>Item 3:3</td> |
| 202 <td>Item 3:4</td> |
| 203 </tr> |
| 204 <tr> |
| 205 <td>Item 4:1</td> |
| 206 <td>Item 4:2</td> |
| 207 <td>Item 4:3</td> |
| 208 <td>Item 4:4</td> |
| 209 </tr> |
| 210 </tbody> |
| 211 </table> |
| 212 </section> |
| 213 |
| 214 <section> |
| 215 <header> |
| 216 <h2 id="image-alignment">Image alignment</h2> |
| 217 </header> |
| 218 <p class="block"> |
| 219 This <img src="//placehold.it/100x100?text=Image"> appears inline |
| 220 </p> |
| 221 <p class="block"> |
| 222 This image appears |
| 223 <img class="block" src="//placehold.it/480x100?text=Full+width"> |
| 224 </p> |
| 225 <p class="block"> |
| 226 This image appears |
| 227 <img class="sol" src="//placehold.it/100x100?text=Left"> |
| 228 </p> |
| 229 <p class="block"> |
| 230 This image appears |
| 231 <img class="eol" src="//placehold.it/100x100?text=Right"> |
| 232 </p> |
| 233 </section> |
| 234 |
| 235 <section> |
| 236 <header> |
| 237 <h2 id="embeds">Embeds</h2> |
| 238 </header> |
| 239 <div class="embed"> |
| 240 <iframe src="//www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen>
</iframe> |
| 241 </div> |
| 242 </section> |
| 243 |
| 244 </main> |
| 245 |
| 246 <script src="/node_modules/anchor-js/anchor.js"></script> |
| 247 <script>anchors.add("header h2");</script> |
| 248 </body> |
| 249 </html> |
OLD | NEW |