-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
165 lines (162 loc) · 8.29 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
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Printable Theme</title>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
<link href=" https://cdn.jsdelivr.net/npm/[email protected]/themes/prism.min.css " rel="stylesheet">
</head>
<body>
<header>
<div>
<img src="./assets/brand.svg" />
</div>
</header>
<main>
<div id="counter">
</div>
<div>
<h1>Printable Theme</h1>
<p>
This is our printable theme. It is a template for web documents, which can be nicely printed. The advantages:
</p>
<ul>
<li>Use version control like Git for your documents</li>
<li>No need for expensive and huge applications</li>
</ul>
<h2>Tests and Exams</h2>
<p>
For tests and exams there are several components included.
</p>
<h3>Multiple Choice Questions</h3>
<div class="question">
What's Madagascars capitals name?
</div>
<div class="answer">
<label><input type="checkbox" /> Berlin</label>
<label><input type="checkbox" /> Antananarivo</label>
<label><input type="checkbox" /> Zürich</label>
<label><input type="checkbox" /> Shanghai</label>
<label><input type="checkbox" /> Frankreich</label>
</div>
<div class="question">
Who invented the World Wide Web?
</div>
<div class="answer two-column">
<label><input type="checkbox" /> Taylor Swift</label>
<label><input type="checkbox" /> Juck Norris</label>
<label><input type="checkbox" /> Spongebob</label>
<label><input type="checkbox" /> Tim Berners-Lee</label>
<label><input type="checkbox" /> Frank Sinatra</label>
</div>
<div class="question">
Describe what happens if you eat two whole pineapples:
</div>
<div class="answer">
<table>
<tr><td /></tr>
<tr><td /></tr>
<tr><td /></tr>
<tr><td /></tr>
</table>
</div>
<h2>Other features</h2>
<h3>Syntax Highlighting</h3>
<pre><code class="language-css">function pxToCm(px) {
return (px * cpi / (dpi * ppd)).toFixed(precision);
}</code></pre>
<h2>Pagination</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis facere autem odio quis et eius blanditiis.
Ipsam nisi numquam doloremque eos voluptate officia, perspiciatis harum delectus eveniet sapiente vitae
accusantium!</p>
<p>Laboriosam similique non voluptatibus quaerat nostrum dolores commodi accusantium, aut harum minima
dolore
quo magnam, repellat beatae optio corporis. Quos officiis voluptate vero nemo neque repudiandae reiciendis
quae praesentium ullam.</p>
<p>Consectetur est debitis libero nihil necessitatibus quasi dignissimos dolorem vero recusandae ex,
perspiciatis iste esse in vitae repudiandae, quas voluptates consequatur molestias distinctio commodi, ut
iusto! Molestias quos recusandae non.</p>
<p>Labore quam corrupti consequatur nam, libero sequi laborum doloremque veritatis quidem inventore minima
commodi? Cupiditate dolorum corporis eum esse voluptatibus quod? Vitae minima explicabo consequuntur at
harum quam expedita dolore.</p>
<p>Minima provident repellendus aut. A vero cupiditate, id error eius nam commodi ab explicabo ipsam dolorem
perferendis corporis. Quam quod ratione magnam atque ea illo asperiores vitae voluptatum harum officiis?
</p>
<p>In quisquam amet perferendis, mollitia aperiam voluptatum, officiis praesentium distinctio similique
nihil
nostrum itaque inventore laboriosam officia deserunt, beatae porro consequuntur? Neque quos expedita,
nulla
tempore officia quibusdam distinctio ipsam?</p>
<p>Eius, impedit dolores ex quas quos est dolor? Quia dolorem quae quam libero consequatur nihil, amet
repellendus necessitatibus facilis reprehenderit. Mollitia doloribus optio rerum labore eligendi cumque
dicta, delectus est?</p>
<p>Aliquid repudiandae ipsum suscipit recusandae ea error nihil praesentium harum fuga minus reprehenderit
et
earum, voluptatibus qui nemo rerum cum numquam, deleniti libero. Placeat quibusdam beatae sunt eos.
Laborum,
repudiandae.</p>
<p>Doloremque, quia nesciunt. Nam minus dolores facere velit quos eaque temporibus tempore veritatis. Atque
ipsa, cupiditate ea exercitationem quam expedita eum laborum sit. Soluta tempore quibusdam corrupti.
Commodi, facere sit!</p>
<p>Deserunt dolorem est sit, molestias fugiat totam quo maiores accusantium sed quisquam! Porro odio omnis
natus? Facilis quibusdam harum suscipit, laborum amet est, ad rerum quod exercitationem dignissimos a
porro?
</p>
<p>Laborum labore reiciendis pariatur blanditiis suscipit nihil nesciunt aspernatur debitis vel commodi
itaque
corrupti iusto, nemo dolor consectetur qui, non quidem, sint quibusdam eum consequatur explicabo.
Molestias
earum doloribus cum!</p>
<p>Quaerat cum minus totam fugit repellat nihil atque blanditiis omnis praesentium, officiis impedit
doloribus
id laborum aliquam deserunt nesciunt consequatur molestias consequuntur est quis. Dolorum officia ipsum
laborum quaerat voluptatibus?</p>
<p>Suscipit pariatur sed est optio molestiae maxime, ea voluptatum placeat accusantium saepe corporis dicta
debitis, deserunt ullam natus inventore. Labore quaerat et quod adipisci in fuga debitis aliquam explicabo
corporis.</p>
<p>Cumque totam mollitia rerum dolore assumenda aut vel repudiandae aspernatur eius suscipit voluptatem,
minima qui, ipsum impedit. Repellendus mollitia vitae dolore ex sed veniam sequi aliquid, est, distinctio,
modi voluptatem.</p>
<p>Ipsa, quidem. Molestias explicabo sunt sit dolorum nam voluptatibus illo et, sint est sapiente molestiae
iusto ut autem vero debitis tempora, quasi minus atque minima iste. Ducimus, ipsum odio. Eaque.</p>
<p>Animi autem consequuntur illo sit debitis qui delectus! Illo eaque voluptatibus distinctio maxime aliquam
animi, provident magni atque quidem voluptatum iste excepturi similique modi suscipit sapiente numquam?
Delectus, voluptatum magnam?</p>
<p>Accusantium repudiandae qui eligendi voluptate delectus, ab labore molestiae blanditiis cumque beatae
possimus ducimus earum illum commodi accusamus magni dolorum perspiciatis porro a veniam. Itaque quo
eligendi vel alias nesciunt.</p>
<p>Odit facilis fugiat maiores quos! Officia vel sunt rem expedita? Aperiam, maxime eaque. Nam labore
dolorem
suscipit optio dolore accusamus, quibusdam sint aspernatur at eum, voluptatibus, vitae rerum eveniet
culpa.
</p>
<p>Necessitatibus amet eius odio laborum praesentium possimus? Labore quam soluta, aspernatur inventore
illum
molestiae consequuntur, porro, obcaecati excepturi ad laudantium deserunt exercitationem ut quis omnis
explicabo! A vel aliquid consequuntur!</p>
<p>Deserunt dignissimos voluptatum, repudiandae corrupti cumque dolor at? Incidunt commodi molestiae sequi
praesentium nesciunt consequuntur modi, nostrum aspernatur. Dolores corporis facilis impedit odio, enim
officia ab ducimus tempora ipsum! Ullam.</p>
</div>
</main>
<footer>
<div>
<div class="column">
openscript GmbH<br>
Europa-Strasse 30<br>
8152 Glattbrugg
</div>
<div class="column">
Joe Doe at <time></time>
</div>
<div class="column">
<a href="https://openscript.ch">openscript.ch</a><br>
</div>
</div>
</footer>
</body>
</html>