design/styleguide/testpage.html

148 lines
No EOL
6.6 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" type="text/css" href="assets/css/main.css">
<title>Testdocument</title>
</head>
<body>
<h1>Testdocument</h1>
<p>Tests for Fonts and Colorpalettes</p>
<section>
<h2>Section With Links</h2>
<table>
<caption>Overview of link highlighting</caption>
<tr>
<th scope="row">Regular Link:</th>
<td><a class="a-regular" href="https://eh22.easterhegg.eu/">https://eh22.easterhegg.eu/</a></td>
</tr>
<tr>
<th scope="row">Hover/Focus/Active Link:</th>
<td><a class="a-hover" href="https://eh22.easterhegg.eu/">https://eh22.easterhegg.eu/</a></td>
</tr>
<tr>
<th scope="row">Visited Link:</th>
<td><a class="a-visited" href="https://eh22.easterhegg.eu/">https://eh22.easterhegg.eu/</a></td>
</tr>
</table>
</section>
<section>
<h2>Section With Text</h2>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
takimata sanctus est Lorem ipsum dolor sit amet.
</p>
<h3>Subsection Title</h3>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
takimata sanctus est Lorem ipsum dolor sit amet.
</p>
<h4>Subsubsection Title</h4>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
dolore magna aliquyam erat, sed diam voluptua.
</p>
</section>
<section>
<h2>Section With Code</h2>
<pre><code>
#include &lt;stdlib.h&gt;
int *positives(int *numbers, int *size) {
int new_size = 0;
for (int i = 0; i &lt; *size; i++) {
if (numbers[i] &gt;= 0) {
numbers[new_size] = numbers[i];
new_size++;
}
}
*size = new_size;
return realloc(numbers, sizeof(*numbers) * new_size);
}
</code></pre>
</section>
<section>
<h2>Section With Image</h2>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
takimata sanctus est Lorem ipsum dolor sit amet.
</p>
<figure>
<img src="assets/images/cat.png"
alt="Close-up of a young cat's face that is distorted through horizontally moving rows of pixels slightly to the left or right and shifting some pixels' color into pink or blue hues." />
<figcaption>Example image with some visual distortion applied.</figcaption>
</figure>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
takimata sanctus est Lorem ipsum dolor sit amet.
</p>
</section>
<section>
<h2>Section With Lists</h2>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
<ol>
<li>Short item no. 1.</li>
<li>Long item in the middle. This item is longer then one visual line, which is why it wraps over into the next
line and therefore moves the next item further down.</li>
<li>Long item at the end, which is also longer than one visual line. It also wraps over into the next line, but
there is no next item to move.</li>
</ol>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
<h3>Subsection Title</h3>
<ol>
<li>Short item no. 1.</li>
<li>Long item in the middle. This item is longer then one visual line, which is why it wraps over into the next
line and therefore moves the next item further down.</li>
<li>Long item at the end, which is also longer than one visual line. It also wraps over into the next line, but
there is no next item to move.</li>
</ol>
<h3>Subsection Title</h3>
<ul>
<li>Short item no. 1.</li>
<li>Long item in the middle. This item is longer then one visual line, which is why it wraps over into the next
line and therefore moves the next item further down.</li>
<li>Long item at the end, which is also longer than one visual line. It also wraps over into the next line, but
there is no next item to move.</li>
</ul>
</section>
</body>
</html>