-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
147 lines (126 loc) · 8.21 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<link rel="copyright" href="http://creativecommons.org/licenses/by/3.0/" />
<meta name="viewport" content="width=device-width, user-scalable=0"/>
<link rel="stylesheet" type="text/css" href="ucp.css" media="screen" />
<link rel="stylesheet" type="text/css" href="example.local.css" media="screen" />
<title>useful classroom phrases - example</title>
</head>
<body>
<div style="background-color:#8da7cc;padding:35px;color:#fff;font-size: 16px;">
<h1 class="panel"><a href="https://github.com/klml/usefulclassroomphrases" class="fontnone">usefulclassroomphrases</a></h1>
<p class="panel">
a selection for css classes used inside content areas.
</p>
</div>
<div id="navigation" class="panel">
<ul>
<li><a href="/">Home</a></li>
<li><a href="#what">What will you get</a></li>
<li><a href="#how">How will this work</a></li>
<li><a href="#who">Who runs this</a></li>
<li><a href="#when">When will this happen</a></li>
<li><a href="#where">Where to find</a></li>
</ul>
</div>
<div class="main panel">
<h1 id="what" >ucp Heading 1</h1>
<p>useful css class-room phrases is a small selection for css classes used inside content areas. Some simple worded, self-explanatory and self-describable classes writing and understand your source.</p>
</div>
<figure style="max-width:1200px;" class="panel">
<img style="max-width:100%;" src="https://lorempixel.com/1200/400/city/7/" alt="Sydney Opera" />
<figcaption>Element inside panel, but with custom <b>excess width</b>.</figcaption>
</figure>
<div id="panoramabackground" style="background:url(https://lorempixel.com/100/100/city/7/) #8da7cc repeat 0 0;height: 100px;" >
<h2 class="panel" style="color:white;padding-top: 70px;">Heading in panel with panorama background</h2>
</div>
<div class="main panel">
<h2 id="who">Examples Heading 2</h2>
<p class="lead">A <a href="https://en.wikipedia.org/wiki/Lead_paragraph">Lead paragraph</a> in literature refers to the opening paragraph of an article, essay, news story or book chapter. Often called just "the lead," it usually occurs together with the headline or title. It precedes the main body of the article, and it gives the reader the main idea of the story. The word "lead" is pronounced to rhyme with "need". <code>class="lead"</code></p>
<p class="lead">A second Lead paragraph in literature refers to the opening paragraph of an article, essay, news story or book chapter. Often called just "the lead," it usually occurs together with the headline or title. It precedes the main body of the article, and it gives the reader the main idea of the story. The word "lead" is pronounced to rhyme with "need".</p>
<p class="half left"><code>half left</code> text: dolor sit amet, consetetur sadipscing elitr, sed diam nonumyeirmod tempor invidunt ut labore et dolore magna</p>
<p class="half right">the other <code>half</code> but <code>right</code>: sadipscing elitr, sed diam nonumyeirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed </p>
<br class="cb" />
<h3>Heading 3</h3>
<div class="half">half in <p class="half">half in a</p></div>
<h4>Heading 4</h4>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumyeirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed </p>
<h5>Heading 5</h5>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumyeirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed </p>
<h6>Heading 6</h6>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumyeirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed </p>
<hr />
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<p>directly following headings without elements between headings</p>
<p><a class="block" href="https://github.com/klml/usefulclassroomphrases">link blocked</a> (gray only for visual perception)</p>
<h2>list</h2>
<ul>
<li>ul li</li>
<li>ul li</li>
</ul>
<h2 id="imgfloat" >float</h2>
<p>
<img src="https://dummyimage.com/150x200/8DA7CC/fff&text=img_left#left" alt="example img" />
<img src="https://dummyimage.com/150x200/8DA7CC/fff&text=img_right#right" alt="example img" />
Image <i>#left</i>, <i>#right</i> and hr with <i>cb</i>.
<hr class="cb"/>
</p>
</div>
<div id="paneloutbreak" class="main" >
<h2 class="panel">Outbreak</h2>
<div class="panel">Outbreak for big pictures, maps, logs, codesnippets etc</div>
<pre class="paneloutbreak">
[Wed Oct 11 14:32:52 2000] [error] [client 127.0.0.1] client denied by server configuration: /export/home/live/ap/htdocs/test
[Wed Oct 11 14:32:51 2000] [error] [client 127.0.0.1] client denied by server configuration: /export/home/live/ap/htdocs/test
[Wed Oct 11 14:32:52 2000] [error] [client 127.0.0.1] client denied by server configuration: /export/home/live/ap/htdocs/test
[Wed Oct 11 14:32:53 2000] [error] [client 127.0.0.1] client denied by server configuration: /export/home/live/ap/htdocs/test
[Wed Oct 11 14:32:54 2000] [error] [client 127.0.0.1] client denied by server configuration: /export/home/live/ap/htdocs/test
[Wed Oct 11 14:32:55 2000] [error] [client 127.0.0.1] client denied by server configuration: /export/home/live/ap/htdocs/test
[Wed Oct 11 14:32:56 2000] [error] [client 127.0.0.1] client denied by server configuration: /export/home/live/ap/htdocs/test
[Wed Oct 11 14:32:57 2000] [error] [client 127.0.0.1] client denied by server configuration: /export/home/live/ap/htdocs/test
[Wed Oct 11 14:32:58 2000] [error] [client 127.0.0.1] client denied by server configuration: /export/home/live/ap/htdocs/test
[Wed Oct 11 14:32:59 2000] [error] [client 127.0.0.1] client denied by server configuration: /export/home/live/ap/htdocs/test
[Wed Oct 11 14:32:60 2000] [error] [client 127.0.0.1] client denied by server configuration: /export/home/live/ap/htdocs/test
</pre>
</div>
<div class="main panel">
<h2>table</h2>
<table>
<thead>
<tr><th>thead 1</th><th>thead 2</th></tr>
</thead>
<tbody>
<tr><td>tbody A</td><td>tbody B</td></tr>
<tr><td>a</td><td>b</td></tr>
</tbody>
</table>
<h2>form</h2>
<form action="form.htm">
<input type="text" name="example" value="input" /><br />
<select name="select">
<option>option 1</option>
<option>option 2</option>
</select><br />
<textarea>textarea</textarea>
</form>
<h2>row2</h2>
<div class="row2">
<p>The class <code>row2</code> creates a not "html-tabled 2-column" table with a definiton list. This class has to be around the dl, if you use not changable markup like markdown etc</p>
<dl>
<dt>Short term and long definition</dt>
<dd>sed diam nonumyeirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumyeirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumyeirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed</dd>
<dt>sed diam nonumyeirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumyeirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed.</dt>
<dd>Long term and short definition</dd>
<dt>And a short term</dt>
<dd>and short definitipn after a long term</dd>
</dl>
</div>
<br class="cb">
</div>
</body>