summaryrefslogtreecommitdiff
path: root/html/template.html
blob: a0847dc66ea08329b269fb4c98852470da0ef513 (plain)
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
<!DOCTYPE html>

<!--
	vim: shiftwidth=4 tabstop=4 noexpandtab
-->

<html>

	<head>

		<title>libweb</title>

		<meta charset="utf-8"/>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link rel="stylesheet" href="../css/xengineering.css" type="text/css">

	</head>

	<body>

		<nav>
			<button id="menu-button" onclick=toggleMenu()>MENU</button>
			<a class="menu-anchor" href="https://xengineering.eu">xengineering.eu</a>
		</nav>

		<main>
			<h1>libweb</h1>

			<p>A repository with reusable components for web development. Here is a long paragraph:</p>

			<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>

			<p>This is a link to <a href="https://example.com">example.com</a>.</p>

			<p>This is an ordered list:</p>
			<ol>
				<li>One</li>
				<li>Two</li>
				<li>Long point: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</li>
			</ol>

			<p>This is an unordered list:</p>
			<ul>
				<li>One</li>
				<li>Two</li>
				<li>Long point: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</li>
			</ul>

			<p>Have a look at this beautiful code:</p>
			<pre><code>#!/usr/bin/python3

print("This is just some example code!")
</code></pre>

			<p>Sometimes it is quite nice to put things into cards:</p>
			<div class="card">
				<h3>This is a Card</h3>
				<p>Cards are very good.</p>
			</div>

			<p>It is also possible to put cards into an anchor tag:</p>
			<a href="https://xengineering.eu">
				<div class="card">
					<h3>This is a Card inside an Anchor</h3>
					<p>It is a link!</p>
				</div>
			</a>
		</main>

		<script src="../js/xengineering.js"></script>

	</body>

</html>