Rietveld Code Review Tool
Help | Bug tracker | Discussion group | Source code

Side by Side Diff: html/content.html

Issue 29361647: Issue 4607 - Default content styles (Closed)
Patch Set: Added container & simplified html/scss Created Nov. 10, 2016, 1:22 p.m.
Left:
Right:
Use n/p to move between diff chunks; N/P to move between comments.
Jump to:
View unified diff | Download patch
OLDNEW
(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>Content</title>
25 <link rel="stylesheet" href="/css/main.css">
26 </head>
27 <body>
28 <main class="container">
29
30 <h1>Content</h1>
31 <p>This document outlines a subset of HTML5 that we recommend supporting acc ross all websites.</p>
32
33 <h3>Headings</h3>
34
35 <h1>Heading 1</h1>
36 <h2>Heading 2</h2>
37 <h3>Heading 3</h3>
38 <h4>Heading 4</h4>
39 <h5>Heading 5</h5>
40 <h6>Heading 6</h6>
41
42 <h3>Inline styles</h3>
43
44 <p>This is a normal.</p>
45 <p>This is <em>emphasized</em>.</p>
46 <p>This is <strong>strong</strong>.</p>
47 <p>This is inline <code>code</code>.</p>
48 <p>This is an <abbr title="Abbreviation">abbr</abbr>.</p>
49 <p>This is a <a href="#">link</a>.</p>
50 <p>This has a footnote. <sup>[<a href="#">1</a>]</sup></p>
51
52 <h3>Blockquotes</h3>
53
54 <blockquote>
55 <p>This is a blockquote.</p>
56 </blockquote>
57
58 <h3>Code blocks</h3>
59
60 <pre style="height: 100px;"><code>
61 Lorem ipsum dolor sit amet, consectetur
62 adipiscing elit, sed do eiusmod tempor
63 incididunt ut labore et dolore magna
64 aliqua. Ut enim ad minim veniam, quis
65 nostrud exercitation ullamco laboris
66 nisi ut aliquip ex ea commodo consequat.
67 Duis aute irure dolor in reprehenderit
68 in voluptate velit esse cillum dolore eu
69 fugiat nulla pariatur. Excepteur sint
70 occaecat cupidatat non proident, sunt in
71 culpa qui officia deserunt mollit anim
72 id est laborum.
73 </code></pre>
74 <pre><code>
75 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i ncididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostru d exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aut e irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat n ulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
76 </code></pre>
77
78 <h3>Ordered lists</h3>
79
80 <ol>
81 <li>This is a list item.</li>
82 <li>This is a list item.</li>
83 <li>This is a list item.
84 <ol>
85 <li>This is a list item.</li>
86 <li>This is a list item.</li>
87 <li>This is a list item.</li>
88 <li>This is a list item.</li>
89 </ol>
90 </li>
91 <li>This is a list item.</li>
92 </ol>
93
94 <h3>Unordered lists</h3>
95
96 <ul>
97 <li>This is a list item.</li>
98 <li>This is a list item.</li>
99 <li>This is a list item.
100 <ul>
101 <li>This is a list item.</li>
102 <li>This is a list item.</li>
103 <li>This is a list item.</li>
104 <li>This is a list item.</li>
105 </ul>
106 </li>
107 <li>This is a list item.</li>
108 </ul>
109
110 <h3>Unstyled list</h3>
111
112 <ul class="unstyled-list">
113 <li>This is a list item.</li>
114 <li>This is a list item.</li>
115 <li>This is a list item.
116 <ul>
117 <li>This is a list item.</li>
118 <li>This is a list item.</li>
119 <li>This is a list item.</li>
120 <li>This is a list item.</li>
121 </ul>
122 </li>
123 <li>This is a list item.</li>
124 </ul>
125
126 <h3>Definition list</h3>
127
128 <dl>
129 <dt>This is a definition title.</dt>
130 <dd>This is a definition detail.</dd>
131 <dt>This is a definition title.</dt>
132 <dd>This is a definition detail.</dd>
133 </dl>
134
135 <h3>Embedded video</h3>
136
137 <div class="youtube-16x9">
138 <iframe src="//www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></ iframe>
139 </div>
140
141 <h3>Image alignment</h3>
142
143 <p>
144 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod te mpor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
145
146 <img class="block" src="//placehold.it/992x140?text=Block">
147
148 Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolo re eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sun t in culpa qui officia deserunt mollit anim id est laborum.
149 </p>
150
151 <img class="float-start" src="//placehold.it/120x120?text=Start">
152 <p>
153 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod te mpor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Du is aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fu giat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in cul pa qui officia deserunt mollit anim id est laborum.
154 </p>
155 <img class="float-end" src="//placehold.it/120x120?text=End">
156 <p>
157 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod te mpor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Dui s aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fug iat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culp a qui officia deserunt mollit anim id est laborum.
158 </p>
159 <p>
160 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod te mpor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Du is aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fu giat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in cul pa qui officia deserunt mollit anim id est laborum.
161 </p>
162
163 </main>
164 </body>
165 </html>
OLDNEW

Powered by Google App Engine
This is Rietveld