jolzem/jolzem.com
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

moved to unix line breaks, changed colors and text

Browse Source
This commit is contained in:
Johannes Olzem 2023-05-10 16:53:22 +02:00
parent b4a52bec16
commit b2fb36c8f7
Signed by: jolzem
GPG Key ID: DB5485828E95A447
18 changed files with 1162 additions and 1163 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

113
about/index.html
View File

@ -1,53 +1,60 @@
<!doctype html>
<html lang="en">
<head>
<title>About - Johannes Olzem</title>
<meta name="description" content="Johannes Olzem's Webspace.">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/css/style.css">
<link rel="icon" href="/favico.ico">
</head>
<body>
<div id="root">
<header>
<h1>Johannes Olzem's Webspace</h1>
</header>
<nav>
<a href="/">Home</a>
<a href="/blog/">Blog</a>
<a href="#">About Me</a>
<a href="/contact/">Contact</a>
<a href="/donate/">Donate</a>
</nav>
<main>
<!-- <img src="/img/me.png" style="float:right;margin:1rem;border-radius:1rem;max-height: 245px;"> -->
<h2>About Me</h2>
<p style="margin-bottom: 2rem;">
Hi! <br>
I'm Johannes, a computer nerd born and living in germany. <br>
I am currently a student, majoring in IT and english.<br>
I like free and open source software, Linux, servers, privacy and playing video games in my free time.<br>
There is not much I like outside of computers, but some things include videography and cars.
</p>
<h2>My Skills</h2>
<p>HTML &amp; CSS</p>
<p>Basic JavaScript</p>
<p>Basic Python</p>
<p><em>Currently learning</em> Java</p>
<p style="margin-bottom: 2rem;">Docker</p>
<h2>About this website</h2>
<p>
This website is <a href="/LICENSE.txt">free and open source under the GNU General Public License v3</a>.<br>
<a href="https://github.com/jolzem/jolzem.github.io/" class="inline">View Source Code</a><br>
It also has no ads or trackers and does not use cookies.<br>
<a href="https://github.com/sainnhe/everforest" class="inline">View Everforest Theme</a>
</p>
</main>
<footer>
<h6><a href=""><script>document.write(window.location.href);</script></a></h6>
</footer>
</div>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<title>About - Johannes Olzem</title>
<meta name="description" content="Johannes Olzem's Webspace.">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/css/style.css">
<link rel="icon" href="/favico.ico">
</head>
<body>
<div id="root">
<header>
<a href="/">Johannes Olzem's Webspace</a>
</header>
<nav>
<a href="/blog/">Blog</a>
<a href="#">About Me</a>
<a href="/contact/">Contact</a>
<a href="/donate/">Donate</a>
</nav>
<main>
<!-- <img src="/img/me.png" style="float:right;margin:1rem;border-radius:1rem;max-height: 245px;"> -->
<h2>About Me</h2>
<p style="margin-bottom: 2rem;">
Hey there!<br />
My name is Johannes, and I'm a computer enthusiast born and raised in Germany.
Currently, I'm majoring in IT and English, and I'm passionate about most things related to technology.
I love using free and open-source software, exploring different aspects about Linux, setting up and tinkering with servers,
and learning about privacy and security. When I'm not busy with the command line, I enjoy playing video games and dabbling in 3D Printing.
Apart from computers, I also have an interest in cars, ranging from classic to modern sports cars.
</p>
<h2>My Skills</h2>
<h3>Languages</h3>
<ul>
<li>HTML &amp; CSS</li>
<li>Basic Python</li>
<li>Java</li>
</ul>
<h3>Other Technologies</h3>
<ul>
<li>Linux</li>
<li>Git</li>
<li>LaTeX</li>
<li>Docker</li>
</ul>
<h2>About this website</h2>
<p>
This website has no ads or trackers and does not use cookies.<br>
It is also <a href="/LICENSE.txt">free and open source under the GNU General Public License v3</a>.<br>
<a href="https://github.com/jolzem/jolzem.github.io/" class="inline">View Source Code</a><br>
</p>
</main>
<footer>
<h6><a href=""><script>document.write(window.location.href);</script></a></h6>
</footer>
</div>
</body>
</html>

67
blog/index.html
View File

@ -1,34 +1,33 @@
<!doctype html>
<html lang="en">
<head>
<title>Johannes Olzem</title>
<meta name="description" content="Johannes Olzem's Webspace.">
<meta charset="utf-8">
<link rel="stylesheet" href="/css/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="/favico.ico">
</head>
<body>
<div id="root">
<header>
<h1>Johannes Olzem's Webspace</h1>
</header>
<nav>
<a href="/">Home</a>
<a href="#">Blog</a>
<a href="/about/">About Me</a>
<a href="/contact/">Contact</a>
<a href="/donate/">Donate</a>
</nav>
<main>
<h2>Blog</h2>
<div class="blog-entries">
<a href="quick-fixes/">Quick Fixes</a>
</div>
</main>
<footer>
<h6><a href=""><script>document.write(window.location.href);</script></a></h6>
</footer>
</div>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<title>Blog - Johannes Olzem</title>
<meta name="description" content="Johannes Olzem's Webspace.">
<meta charset="utf-8">
<link rel="stylesheet" href="/css/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="/favico.ico">
</head>
<body>
<div id="root">
<header>
<a href="/">Johannes Olzem's Webspace</a>
</header>
<nav>
<a href="#">Blog</a>
<a href="/about/">About Me</a>
<a href="/contact/">Contact</a>
<a href="/donate/">Donate</a>
</nav>
<main>
<h2>Blog</h2>
<div class="blog-entries">
<a href="quick-fixes/">Quick Fixes</a>
</div>
</main>
<footer>
<h6><a href=""><script>document.write(window.location.href);</script></a></h6>
</footer>
</div>
</body>
</html>

149
blog/quick-fixes/index.html
View File

@ -1,75 +1,74 @@
<!doctype html>
<html lang="en">
<head>
<title>Johannes Olzem</title>
<meta name="description" content="Johannes Olzem's Webspace.">
<meta charset="utf-8">
<link rel="stylesheet" href="/css/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="/favico.ico">
</head>
<body>
<div id="root">
<header>
<h1>Johannes Olzem's Webspace</h1>
</header>
<nav>
<a href="/">Home</a>
<a href="/blog/">Blog</a>
<a href="/about/">About Me</a>
<a href="/contact/">Contact</a>
<a href="/donate/">Donate</a>
</nav>
<main>
<h2>Quick Fixes</h2>
<p>
This is a page with small problems, to which I have found easy solutions,
so as to not litter the blog page.
</p><br>
<ul style="text-align: left;">
<li>
<u>Problem:</u>
Nextcloud File not supported Error (<code>exif_read_data(): File not supported at /var/www/html/lib/private/Metadata/Provider/ExifProvider.php#59</code>).<br>
<u>Solution:</u>
Upload over IP and port rather than over nginx.<br>
<u>Explanation:</u>
<a href="https://www.rfc-editor.org/rfc/rfc2616#section-10.4.14" target="_blank">
Nginx 413 Error - Request entity too large
</a><br>
</li>
<br>
<li>
<u>Problem:</u>
<code>Connected without internet</code> on Android after setting PiHole as DNS Server.<br>
<u>Solution:</u>
Make sure you forward both <b>TCP</b> and <b>UDP</b> of Port 53 from your Docker Container.<br>
</li>
<br>
<li>
<u>Problem:</u>
ThinkPad R61 (or any older ThinkPad model, I believe) repeated beep at startup.<br>
<u>Solution:</u>
Check keyboard connector / swap out keyboard.<br>
<u>Explanation:</u>
No keyboard detected on bootup.<br>
</li>
<br>
<!--<li>
<u>Problem:</u>
(<code></code>).<br>
<u>Solution:</u>
<br>
<u>Explanation:</u>
<a href="" target="_blank">
</a><br>
</li>
<br>-->
</ul>
</main>
<footer>
<h6><a href=""><script>document.write(window.location.href);</script></a></h6>
</footer>
</div>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<title>Quick Fixes - Blog - Johannes Olzem</title>
<meta name="description" content="Johannes Olzem's Webspace.">
<meta charset="utf-8">
<link rel="stylesheet" href="/css/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="/favico.ico">
</head>
<body>
<div id="root">
<header>
<a href="/">Johannes Olzem's Webspace</a>
</header>
<nav>
<a href="/blog/">Blog</a>
<a href="/about/">About Me</a>
<a href="/contact/">Contact</a>
<a href="/donate/">Donate</a>
</nav>
<main>
<h2>Quick Fixes</h2>
<p>
This is a page with small problems, to which I have found easy solutions,
so as to not litter the blog page.
</p><br>
<ul style="text-align: left;">
<li>
<u>Problem:</u>
Nextcloud File not supported Error (<code>exif_read_data(): File not supported at /var/www/html/lib/private/Metadata/Provider/ExifProvider.php#59</code>).<br>
<u>Solution:</u>
Upload over IP and port rather than over nginx.<br>
<u>Explanation:</u>
<a href="https://www.rfc-editor.org/rfc/rfc2616#section-10.4.14" target="_blank">
Nginx 413 Error - Request entity too large
</a><br>
</li>
<br>
<li>
<u>Problem:</u>
<code>Connected without internet</code> on Android after setting PiHole as DNS Server.<br>
<u>Solution:</u>
Make sure you forward both <b>TCP</b> and <b>UDP</b> of Port 53 from your Docker Container.<br>
</li>
<br>
<li>
<u>Problem:</u>
ThinkPad R61 (or any older ThinkPad model, I believe) repeated beep at startup.<br>
<u>Solution:</u>
Check keyboard connector / swap out keyboard.<br>
<u>Explanation:</u>
No keyboard detected on bootup.<br>
</li>
<br>
<!--<li>
<u>Problem:</u>
(<code></code>).<br>
<u>Solution:</u>
<br>
<u>Explanation:</u>
<a href="" target="_blank">
</a><br>
</li>
<br>-->
</ul>
</main>
<footer>
<h6><a href=""><script>document.write(window.location.href);</script></a></h6>
</footer>
</div>
</body>
</html>

69
contact/index.html
View File

@ -1,35 +1,34 @@
<!doctype html>
<html lang="en">
<head>
<title>Contact - Johannes Olzem</title>
<meta name="description" content="Johannes Olzem's Webspace.">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/css/style.css">
<link rel="icon" href="/favico.ico">
</head>
<body>
<div id="root">
<header>
<h1>Johannes Olzem's Webspace</h1>
</header>
<nav>
<a href="/">Home</a>
<a href="/blog/">Blog</a>
<a href="/about/">About Me</a>
<a href="#">Contact</a>
<a href="/donate/">Donate</a>
</nav>
<main>
<h2>Contact</h2>
<p>
Email me:
<a href="mailto:jolzem@pm.me?subject=Hi!" target="_blank">jolzem@pm.me</a>
</p>
</main>
<footer>
<h6><a href=""><script>document.write(window.location.href);</script></a></h6>
</footer>
</div>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<title>Contact - Johannes Olzem</title>
<meta name="description" content="Johannes Olzem's Webspace.">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/css/style.css">
<link rel="icon" href="/favico.ico">
</head>
<body>
<div id="root">
<header>
<a href="/">Johannes Olzem's Webspace</a>
</header>
<nav>
<a href="/blog/">Blog</a>
<a href="/about/">About Me</a>
<a href="#">Contact</a>
<a href="/donate/">Donate</a>
</nav>
<main>
<h2>Contact</h2>
<p>
Email me:
<a href="mailto:jolzem@pm.me?subject=Hi!" target="_blank">jolzem@pm.me</a>
</p>
</main>
<footer>
<h6><a href=""><script>document.write(window.location.href);</script></a></h6>
</footer>
</div>
</body>
</html>

46
css/style.css
View File

@ -1,14 +1,8 @@
@font-face {
font-family: "Consolas";
src: url("Consolas.woff2") format("woff2");
}
:root {
--txt: #d3c6aa;
--accent: #a7c080;
--body-bg: #2d353b;
--dark: #232a2e;
--border: 4pt;
--txt: #c4c7c4;
--body-bg: #272c31;
--dark: #000;
--accent: #42a5f5;
--font-body: "Consolas", monaco, "Liberation Mono", "Lucida Console", monospace;
}
@ -21,19 +15,23 @@ body {
}
#root {
max-width: 900px;
max-width: 1000px;
min-height: 100vh;
margin: 0 auto;
border-radius: var(--border);
}
header {
padding: 1rem 0;
border-radius: inherit;
padding: 1.5rem 0;
}
header h1 {
header a {
color: var(--accent);
font-size: 2rem;
font-weight: bold;
}
header a:hover {
text-decoration: none !important;
}
nav {
@ -54,6 +52,13 @@ main p {
margin: 0 auto;
}
main ul {
margin: 0 auto;
margin-bottom: 2rem;
max-width: fit-content;
text-align: left;
}
.blog-entries a {
padding-top: 1rem;
display: block;
@ -75,6 +80,7 @@ h6 {
p {
margin: 1rem;
font-size: 1.1em;
line-height: 1.5rem;
}
a {
@ -98,13 +104,3 @@ a:active {
text-decoration: underline !important;
color: var(--accent);
}
/* Auto double line break */
br:after {
content: "\a\a";
white-space: pre;
}
br {
content: "";
}

71
donate/index.html
View File

@ -1,36 +1,35 @@
<!doctype html>
<html lang="en">
<head>
<title>Donate - Johannes Olzem</title>
<meta name="description" content="Johannes Olzem's Webspace.">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/css/style.css">
<link rel="icon" href="/favico.ico">
</head>
<body>
<div id="root">
<header>
<h1>Johannes Olzem's Webspace</h1>
</header>
<nav>
<a href="/">Home</a>
<a href="/blog/">Blog</a>
<a href="/about/">About Me</a>
<a href="/contact/">Contact</a>
<a href="#">Donate</a>
</nav>
<main>
<h2>Donate</h2>
<p>There is basically no point in giving me money, but you can still do so by donating <b>Monero</b>, my cryptocurrency of choice</p>
<br>
<p style="overflow-wrap: anywhere;">4BK7poh4kom8tti2HReRjQFbooWNiCiYj6sYfq4jdqBBhfN1FWn3an4ZRb1fytH5363vzyvTxBKzd5UphnexhJ7t1kjzTzP</p>
<br>
<img style="max-width: 200px;" src="/img/monero.png">
</main>
<footer>
<h6><a href=""><script>document.write(window.location.href);</script></a></h6>
</footer>
</div>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<title>Donate - Johannes Olzem</title>
<meta name="description" content="Johannes Olzem's Webspace.">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/css/style.css">
<link rel="icon" href="/favico.ico">
</head>
<body>
<div id="root">
<header>
<a href="/">Johannes Olzem's Webspace</a>
</header>
<nav>
<a href="/blog/">Blog</a>
<a href="/about/">About Me</a>
<a href="/contact/">Contact</a>
<a href="#">Donate</a>
</nav>
<main>
<h2>Donate</h2>
<p>There is basically no point in giving me money, but you can still do so by donating <b>Monero</b>, my cryptocurrency of choice</p>
<br>
<p style="overflow-wrap: anywhere;">4BK7poh4kom8tti2HReRjQFbooWNiCiYj6sYfq4jdqBBhfN1FWn3an4ZRb1fytH5363vzyvTxBKzd5UphnexhJ7t1kjzTzP</p>
<br>
<img style="max-width: 200px;" src="/img/monero.png">
</main>
<footer>
<h6><a href=""><script>document.write(window.location.href);</script></a></h6>
</footer>
</div>
</body>
</html>

98
index.html
View File

@ -1,49 +1,49 @@
<!doctype html>
<html lang="en">
<head>
<title>Johannes Olzem</title>
<meta name="description" content="Johannes Olzem's Webspace.">
<meta charset="utf-8">
<link rel="stylesheet" href="/css/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="/favico.ico">
</head>
<body>
<div id="root">
<header>
<h1>Johannes Olzem's Webspace</h1>
</header>
<nav>
<a href="#">Home</a>
<a href="/blog/">Blog</a>
<a href="/about/">About Me</a>
<a href="/contact/">Contact</a>
<a href="/donate/">Donate</a>
</nav>
<main>
<h2>Welcome to my Webspace!</h2>
<p>
Here I maintain my <a href="/blog/" class="inline">blog</a>
about various topics and with various guides.<br />
You can learn more about me <a href="/about/" class="inline">here</a>.
</p>
<h2>Why run this website?</h2>
<p>
As you (should) know, most websites collect data about you.<br />
This is especially true for social media sites, which this is supposed to be a substitute for.<br />
I still use some social media like Reddit and Twitter, but basically just to look at what other people are doing and to share stuff with some communities. But back to my rant:<br />
So the only logical option in my mind was to make a website with some kind of blog function to share my opinion and help people with problems, that I have had and solved.<br />
And now you are here! I don't know how you got here, but feel free to explore every crevasse of this site.
</p>
<br>
<br>
<a href="https://landchad.net" target="_blank"><img src="/img/landchad.gif"></a>
<a href="https://www.vim.org" target="_blank"><img src="/img/vim.gif"></a>
<a href="https://kernel.org" target="_blank"><img src="/img/tux.gif"></a>
</main>
<footer>
<h6><a href=""><script>document.write(window.location.href);</script></a></h6>
</footer>
</div>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<title>Johannes Olzem</title>
<meta name="description" content="Johannes Olzem's Webspace.">
<meta charset="utf-8">
<link rel="stylesheet" href="/css/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="/favico.ico">
</head>
<body>
<div id="root">
<header>
<a href="/">Johannes Olzem's Webspace</a>
</header>
<nav>
<a href="/blog/">Blog</a>
<a href="/about/">About Me</a>
<a href="/contact/">Contact</a>
<a href="/donate/">Donate</a>
</nav>
<main>
<h2>Welcome to my Webspace!</h2>
<p>
Here I maintain my <a href="/blog/" class="inline">blog</a>
about various topics and with various guides.<br />
You can learn more about me <a href="/about/" class="inline">here</a>.<br />
I strive to expand and restore the minimal web
</p>
<h2>Why run this website?</h2>
<p>
As you (should) know, most websites collect data about you.<br />
This is especially true for social media sites, which this is supposed to be a substitute for.<br />
I still use some social media like Reddit and Twitter, but basically just to look at what other people are doing and to share stuff with some communities. But back to my rant:<br />
So the only logical option in my mind was to make a website with some kind of blog function to share my opinion and help people with problems, that I have had and solved.<br />
And now you are here! I don't know how you got here, but feel free to explore every crevasse of this site.
</p>
<br>
<br>
<a href="https://landchad.net" target="_blank"><img src="/img/landchad.gif" alt="landchad"></a>
<a href="https://www.vim.org" target="_blank"><img src="/img/vim.gif" alt="vim"></a>
<a href="https://kernel.org" target="_blank"><img src="/img/tux.gif" alt="tux"></a>
</main>
<footer>
<h6><a href=""><script>document.write(window.location.href);</script></a></h6>
</footer>
</div>
</body>
</html>

124
schule/info/html/projekt/contact.html
View File

@ -1,63 +1,63 @@
<!--My Contact inforamtion. Used for the footer.-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Contact</title>
<link rel=stylesheet href=css/style.css>
</head>
<body>
<div id="wrap">
<div id="header">
<a href="index.html">
<img src=images/header.png alt="header">
</a>
</div>
<div id="navigation">
<ul>
<li>
<a href="details.html">
<p class="nav">
details
</p>
</a>
</li>
<li>
<a href="shop.html">
<p class="nav">
shop
</p>
</a>
</li>
<li>
<a href="downloads.html">
<p class="nav">
downloads
</p>
</a>
</li>
</ul>
</div>
<div id="content">
<h2> Contact me</h2>
<p> Johannes Olzem
<br>
Heerstr. 1
<br>
53359 Rheinbach </p>
<a href="mailto:olzemjo@sjg-rheinbach.de" title="Mail Adress">olzemjo@sjg-rheinbach.de</a>
<!--the mailto: indicates, that the mail client should open and fill out the receiver field with the given data-->
</div>
<div id="sidebar">
</div>
<div id="footer">
<a href="contact.html" title="Contact">Contact</a>
<a href="legal_notice.html" title="Legal Notice">Legal Notice</a>
<a href="privacy_policy.html" title="Privacy Policy">Privacy Policy</a>
</div>
</div>
</body>
<!--My Contact inforamtion. Used for the footer.-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Contact</title>
<link rel=stylesheet href=css/style.css>
</head>
<body>
<div id="wrap">
<div id="header">
<a href="index.html">
<img src=images/header.png alt="header">
</a>
</div>
<div id="navigation">
<ul>
<li>
<a href="details.html">
<p class="nav">
details
</p>
</a>
</li>
<li>
<a href="shop.html">
<p class="nav">
shop
</p>
</a>
</li>
<li>
<a href="downloads.html">
<p class="nav">
downloads
</p>
</a>
</li>
</ul>
</div>
<div id="content">
<h2> Contact me</h2>
<p> Johannes Olzem
<br>
Heerstr. 1
<br>
53359 Rheinbach </p>
<a href="mailto:olzemjo@sjg-rheinbach.de" title="Mail Adress">olzemjo@sjg-rheinbach.de</a>
<!--the mailto: indicates, that the mail client should open and fill out the receiver field with the given data-->
</div>
<div id="sidebar">
</div>
<div id="footer">
<a href="contact.html" title="Contact">Contact</a>
<a href="legal_notice.html" title="Legal Notice">Legal Notice</a>
<a href="privacy_policy.html" title="Privacy Policy">Privacy Policy</a>
</div>
</div>
</body>
</html>

252
schule/info/html/projekt/css/style.css
View File

@ -1,127 +1,127 @@
body {
font-size: 80%;
font-family: 'Share Tech Mono', Monospace, Courier;
text-align: center;
background-color: #202020;
}
#wrap {
width: 760px;
margin: 0 auto;
text-align: left;
}
#navigation {
float: right;
width: 55px;
height: 803px;
border-bottom: 1px solid #999;
border-top: 1px solid #999;
font-size: 25px;
text-align: right;
font-family: 'Share Tech Mono', Monospace, Courier;
color: white;
}
#navigation ul {
list-style-type: none;
}
#navigation ul li {
display: inline;
}
#header {
float: left;
width: 760px;
height: 90px;
background-image: header.png;
text-align: middle;
border-top: 1px solid #999;
}
#content {
float: left;
height: 400px;
width: 559px;
border-right: 1px solid #999;
}
#content ul {
list-style-type: circle;
}
#content ul li {
display: inline;
}
#content ol {
color: teal;
}
#content ul li {
display: inline;
}
#sidebar {
float: left;
height: 350px;
width: 100px;
top: 0;
font-size: 90%;
}
#footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: light-gray;
color: white;
text-align: center;
}
/*the . before the word means i am defining a class and not an ID. When using an ID a # is used*/
.price {
font-size: 15px;
font-weight: bold;
font-family: Verdana, Geneva, sans-serif;
color: teal;
}
.specs ul {
list-style-type: disc;
}
.dotted {
border: 5px dotted #555;
}
/*This defines the Table*/
table, th, td {
border: 2px solid teal;
border-collapse: collapse;
color: white;
}
h2, h3, h4, h5, h6 {
margin: 20px;
color: white;
}
/*I wanted heading1 to be teal so i seperated it from h2-h6*/
h1 {
color: teal;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
p {
margin: 20px 25px;
color: white;
}
/*This defines the hyperlinks*/
a {
color: teal;
body {
font-size: 80%;
font-family: 'Share Tech Mono', Monospace, Courier;
text-align: center;
background-color: #202020;
}
#wrap {
width: 760px;
margin: 0 auto;
text-align: left;
}
#navigation {
float: right;
width: 55px;
height: 803px;
border-bottom: 1px solid #999;
border-top: 1px solid #999;
font-size: 25px;
text-align: right;
font-family: 'Share Tech Mono', Monospace, Courier;
color: white;
}
#navigation ul {
list-style-type: none;
}
#navigation ul li {
display: inline;
}
#header {
float: left;
width: 760px;
height: 90px;
background-image: header.png;
text-align: middle;
border-top: 1px solid #999;
}
#content {
float: left;
height: 400px;
width: 559px;
border-right: 1px solid #999;
}
#content ul {
list-style-type: circle;
}
#content ul li {
display: inline;
}
#content ol {
color: teal;
}
#content ul li {
display: inline;
}
#sidebar {
float: left;
height: 350px;
width: 100px;
top: 0;
font-size: 90%;
}
#footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: light-gray;
color: white;
text-align: center;
}
/*the . before the word means i am defining a class and not an ID. When using an ID a # is used*/
.price {
font-size: 15px;
font-weight: bold;
font-family: Verdana, Geneva, sans-serif;
color: teal;
}
.specs ul {
list-style-type: disc;
}
.dotted {
border: 5px dotted #555;
}
/*This defines the Table*/
table, th, td {
border: 2px solid teal;
border-collapse: collapse;
color: white;
}
h2, h3, h4, h5, h6 {
margin: 20px;
color: white;
}
/*I wanted heading1 to be teal so i seperated it from h2-h6*/
h1 {
color: teal;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
p {
margin: 20px 25px;
color: white;
}
/*This defines the hyperlinks*/
a {
color: teal;
}

238
schule/info/html/projekt/details.html
View File

@ -1,120 +1,120 @@
<!--This is used for more detailed information-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Details</title>
<link rel=stylesheet href=css/style.css>
</head>
<body>
<div id="wrap">
<div id="header">
<a href="index.html">
<img src=images/header.png alt="header">
</a>
</div>
<div id="navigation">
<ul>
<li>
<a href="details.html">
<p class="nav">
details
</p>
</a>
</li>
<li>
<a href="shop.html">
<p class="nav">
shop
</p>
</a>
</li>
<li>
<a href="downloads.html">
<p class="nav">
downloads
</p>
</a>
</li>
</ul>
</div>
<div id="content">
<h1>Details</h1>
<h2>Sizes</h2>
<p>There are several sizes of keyboard, defined by the number of keys.</p>
<table>
<tr>
<td>
<h3>40&#37;</h3>
<p>A 40&#37; Keyboard only has Keys for lettering, such as letters and a shift and backspace
as well as a backspace and a Tab.</p>
<img src="images/fourty.jpg" alt="a fourty percent keyboard"
style="width:139px;height:45px;" align="center">
<br>
</td>
</tr>
<tr>
<td>
<h3>60&#37;</h3>
<p>Probably the most common size in the custom keyboard Industry.
Has the same keys as a 40&#37; as well as numbers and certain others.</p>
<img src="images/sixty.jpg" alt="a sixty percent keyboard"
style="width:132px;height:51px;">
</td>
</tr>
<tr>
<td>
<h3>65&#37;</h3>
<p>My favourite size, because of the extra arrow keys. It also has three additional keys.
These are most commonly Delete, Page Up and Page Down.</p>
<img src="images/keyboard.jpg" alt="a sixty percent keyboard"
style="width:131px;height:44px;">
</td>
</tr>
<tr>
<td>
<h3>75&#37;&#47;TKL</h3>
<p>A "normal" keyboard, just without the numpad. TKL stands for TenKeyLess.</p>
<img src="images/seventyfive.jpg" alt="a seventyfive percent keyboard"
style="width:150px;height:58px;">
</td>
</tr>
<tr>
<td>
<h3>95&#37;&#47;100&#37;&#47;full size</h3>
<p>Has the keys of the keyboard you are probably using, if you have a mainstream Keyboard.</p>
<img src="images/hundred.jpg" alt="a full size keyboard" style="width:128px;height:44px;">
</td>
</tr>
</table>
<br>
<br>
<h2>Lube</h2>
<p>Lube is used to significantly silent switches. I&#39;ve included some typing sounds under here.</p>
<h4>Unlubed Cherry MX Red switches</h4>
<!--Here is the audio tag as seen in index.html-->
<audio controls>
<source src="sounds/redunlubed.mp3" type="audio/mpeg">
</audio>
<h4>Lubed Cherry MX Red switches</h4>
<audio controls>
<source src="sounds/redlubed.mp3" type="audio/mpeg">
</audio>
<h4>Overlubed Gateron Black Ink Switches</h4>
<audio controls>
<source src="sounds/overlubed.mp3" type="audio/mpeg">
</audio>
</div>
<div id="sidebar">
</div>
<div id="footer">
<a href="contact.html" title="Contact">Contact</a>
<a href="legal_notice.html" title="Legal Notice">Legal Notice</a>
<a href="privacy_policy.html" title="Privacy Policy">Privacy Policy</a>
</div>
</div>
</body>
<!--This is used for more detailed information-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Details</title>
<link rel=stylesheet href=css/style.css>
</head>
<body>
<div id="wrap">
<div id="header">
<a href="index.html">
<img src=images/header.png alt="header">
</a>
</div>
<div id="navigation">
<ul>
<li>
<a href="details.html">
<p class="nav">
details
</p>
</a>
</li>
<li>
<a href="shop.html">
<p class="nav">
shop
</p>
</a>
</li>
<li>
<a href="downloads.html">
<p class="nav">
downloads
</p>
</a>
</li>
</ul>
</div>
<div id="content">
<h1>Details</h1>
<h2>Sizes</h2>
<p>There are several sizes of keyboard, defined by the number of keys.</p>
<table>
<tr>
<td>
<h3>40&#37;</h3>
<p>A 40&#37; Keyboard only has Keys for lettering, such as letters and a shift and backspace
as well as a backspace and a Tab.</p>
<img src="images/fourty.jpg" alt="a fourty percent keyboard"
style="width:139px;height:45px;" align="center">
<br>
</td>
</tr>
<tr>
<td>
<h3>60&#37;</h3>
<p>Probably the most common size in the custom keyboard Industry.
Has the same keys as a 40&#37; as well as numbers and certain others.</p>
<img src="images/sixty.jpg" alt="a sixty percent keyboard"
style="width:132px;height:51px;">
</td>
</tr>
<tr>
<td>
<h3>65&#37;</h3>
<p>My favourite size, because of the extra arrow keys. It also has three additional keys.
These are most commonly Delete, Page Up and Page Down.</p>
<img src="images/keyboard.jpg" alt="a sixty percent keyboard"
style="width:131px;height:44px;">
</td>
</tr>
<tr>
<td>
<h3>75&#37;&#47;TKL</h3>
<p>A "normal" keyboard, just without the numpad. TKL stands for TenKeyLess.</p>
<img src="images/seventyfive.jpg" alt="a seventyfive percent keyboard"
style="width:150px;height:58px;">
</td>
</tr>
<tr>
<td>
<h3>95&#37;&#47;100&#37;&#47;full size</h3>
<p>Has the keys of the keyboard you are probably using, if you have a mainstream Keyboard.</p>
<img src="images/hundred.jpg" alt="a full size keyboard" style="width:128px;height:44px;">
</td>
</tr>
</table>
<br>
<br>
<h2>Lube</h2>
<p>Lube is used to significantly silent switches. I&#39;ve included some typing sounds under here.</p>
<h4>Unlubed Cherry MX Red switches</h4>
<!--Here is the audio tag as seen in index.html-->
<audio controls>
<source src="sounds/redunlubed.mp3" type="audio/mpeg">
</audio>
<h4>Lubed Cherry MX Red switches</h4>
<audio controls>
<source src="sounds/redlubed.mp3" type="audio/mpeg">
</audio>
<h4>Overlubed Gateron Black Ink Switches</h4>
<audio controls>
<source src="sounds/overlubed.mp3" type="audio/mpeg">
</audio>
</div>
<div id="sidebar">
</div>
<div id="footer">
<a href="contact.html" title="Contact">Contact</a>
<a href="legal_notice.html" title="Legal Notice">Legal Notice</a>
<a href="privacy_policy.html" title="Privacy Policy">Privacy Policy</a>
</div>
</div>
</body>
</html>

148
schule/info/html/projekt/downloads.html
View File

@ -1,75 +1,75 @@
<!--This is a download page with different software, which is downlaodable-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Downloads</title>
<link rel=stylesheet href=css/style.css>
</head>
<body>
<div id="wrap">
<div id="header">
<a href="index.html">
<img src=images/header.png alt="header">
</a>
</div>
<div id="navigation">
<ul>
<li>
<a href="details.html">
<p class="nav">
details
</p>
</a>
</li>
<li>
<a href="shop.html">
<p class="nav">
shop
</p>
</a>
</li>
<li>
<a href="downloads.html">
<p class="nav">
downloads
</p>
</a>
</li>
</ul>
</div>
<div id="content">
<h1>Downloads</h1>
<!--I used the download tag to indicate, that the file that is being linked to, is supposed to be downloaded-->
<a href="https://github.com/the-via/releases/releases/download/v1.3.1/via-1.3.1-win.exe" download>
<h3>VIA</h3>
</a>
<p> VIA is a software, you can use to program a Keyboard.
<br>
Before you build, you normally test the PCB, which you can do with this Software too.
<br>
It is also used to change the RGB lightning on the switches or the PCB.
</p>
<br>
<br>
<a href="https://www.autohotkey.com/download/ahk-install.exe" download>
<h3>AutoHotkey</h3>
</a>
<p>AutoHotkey is a software, which is used to program macros to either to special macro keys,
or your normal Keys. It is normally used for Macro keyboards, which you can find
<a href="https://kbdfans.com/collections/20/products/kbdfans-kbdpad-pcb-v2" target="_blank">here</a>.
</p>
</div>
<div id="sidebar">
</div>
<div id="footer">
<a href="contact.html" title="Contact">Contact</a>
<a href="legal_notice.html" title="Legal Notice">Legal Notice</a>
<a href="privacy_policy.html" title="Privacy Policy">Privacy Policy</a>
</div>
</div>
</body>
<!--This is a download page with different software, which is downlaodable-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Downloads</title>
<link rel=stylesheet href=css/style.css>
</head>
<body>
<div id="wrap">
<div id="header">
<a href="index.html">
<img src=images/header.png alt="header">
</a>
</div>
<div id="navigation">
<ul>
<li>
<a href="details.html">
<p class="nav">
details
</p>
</a>
</li>
<li>
<a href="shop.html">
<p class="nav">
shop
</p>
</a>
</li>
<li>
<a href="downloads.html">
<p class="nav">
downloads
</p>
</a>
</li>
</ul>
</div>
<div id="content">
<h1>Downloads</h1>
<!--I used the download tag to indicate, that the file that is being linked to, is supposed to be downloaded-->
<a href="https://github.com/the-via/releases/releases/download/v1.3.1/via-1.3.1-win.exe" download>
<h3>VIA</h3>
</a>
<p> VIA is a software, you can use to program a Keyboard.
<br>
Before you build, you normally test the PCB, which you can do with this Software too.
<br>
It is also used to change the RGB lightning on the switches or the PCB.
</p>
<br>
<br>
<a href="https://www.autohotkey.com/download/ahk-install.exe" download>
<h3>AutoHotkey</h3>
</a>
<p>AutoHotkey is a software, which is used to program macros to either to special macro keys,
or your normal Keys. It is normally used for Macro keyboards, which you can find
<a href="https://kbdfans.com/collections/20/products/kbdfans-kbdpad-pcb-v2" target="_blank">here</a>.
</p>
</div>
<div id="sidebar">
</div>
<div id="footer">
<a href="contact.html" title="Contact">Contact</a>
<a href="legal_notice.html" title="Legal Notice">Legal Notice</a>
<a href="privacy_policy.html" title="Privacy Policy">Privacy Policy</a>
</div>
</div>
</body>
</html>

230
schule/info/html/projekt/index.html
View File

@ -1,116 +1,116 @@
<!--This is my index Page. I listed some interesting information about custom keyboards here.
This is actually my second website made for this course, the first one being about my favorite anime.
I wasn't happy with the results, so i made this one. It is inspired by n-o-d-e.net.
This was written in englsih because when I write code I am in English mode, because the words
in the code are in english(background, title etc.)-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Custom Keyboards</title>
<link rel=stylesheet href=css/style.css>
<style>
body {
background: #000000 url(images/background.jpg) no-repeat fixed center center;
}
<!--The Background image-->
</style>
</head>
<body>
<div id="wrap">
<div id="header">
<a href="index.html">
<img src=images/header.png>
</a>
</div>
<div id="navigation">
<ul>
<li>
<a href="details.html">
<p class="nav">
details
</p>
</a>
</li>
<li>
<a href="shop.html">
<p class="nav">
shop
</p>
</a>
</li>
<li>
<a href="downloads.html">
<p class="nav">
downloads
</p>
</a>
</li>
</ul>
</div>
<div id="content">
<h1>Custom Keyboards</h1>
<p>The hobby of building a custom keyboard is massively gaining popularity at the moment.
<br>
To Build a Custom Keyboard you need 5 parts.
</p>
<ol>
<li>
<h3>Case</h3>
<p>The Case is basically just the Housing of the Keyboard.
All the Parts get screwed into it, so that they get held in place.</p>
</li>
<li>
<h3>PCB</h3>
<p>The PCB is basically just the Motherboard of the Keyboard.
You can either solder or just place the switches in,
depending of which type of PCB you have.</p>
</li>
<li>
<h3>Switches</h3>
<p>The switches are the actuators of the typing. They send a signal through
the PCB, which sends it over the Cable to the PC.</p>
</li>
<li>
<h3>Plate</h3>
<p>The Plate is inbetween the Switches and the PCB. The Stabilisers,
which stabilize the longer keycaps are also mounted on the Plate.</p>
</li>
<li>
<h3>Keycaps</h3>
<p>The Keycaps are placed on the switches, so you can actually type.
They come in different colors and sizes.
There are also Printed Keycaps and blank ones.</p>
</li>
</ol>
<img class="dotted" src="images/keyboard.jpg">
<h3>Here you can see a Keyboard Timelapse Build</h3>
<!--Here I embedded a Youtube Video with the code Youtube gave me. It also has Privacy Mode enabled, because i know IT people care about their privacy.-->
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/8yvk7KDMx8A"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
<br>
<br>
<br>
<!--This is my favorite song. I used the autoplay tag to play it when you open the page-->
<audio controls autoplay>
<source src="sounds/welcome.mp3" type="audio/mpeg">
</audio>
<h5>Background image</h5>
<p>A Rose Gold Kyuu built for Lilypichu by the Youtuber and Streamer Taeha Types.</p>
</div>
<div id="sidebar">
</div>
<div id="footer">
<a href="contact.html" title="Contact">Contact</a>
<a href="legal_notice.html" title="Legal Notice">Legal Notice</a>
<a href="privacy_policy.html" title="Privacy Policy">Privacy Policy</a>
</div>
</div>
</body>
<!--This is my index Page. I listed some interesting information about custom keyboards here.
This is actually my second website made for this course, the first one being about my favorite anime.
I wasn't happy with the results, so i made this one. It is inspired by n-o-d-e.net.
This was written in englsih because when I write code I am in English mode, because the words
in the code are in english(background, title etc.)-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Custom Keyboards</title>
<link rel=stylesheet href=css/style.css>
<style>
body {
background: #000000 url(images/background.jpg) no-repeat fixed center center;
}
<!--The Background image-->
</style>
</head>
<body>
<div id="wrap">
<div id="header">
<a href="index.html">
<img src=images/header.png>
</a>
</div>
<div id="navigation">
<ul>
<li>
<a href="details.html">
<p class="nav">
details
</p>
</a>
</li>
<li>
<a href="shop.html">
<p class="nav">
shop
</p>
</a>
</li>
<li>
<a href="downloads.html">
<p class="nav">
downloads
</p>
</a>
</li>
</ul>
</div>
<div id="content">
<h1>Custom Keyboards</h1>
<p>The hobby of building a custom keyboard is massively gaining popularity at the moment.
<br>
To Build a Custom Keyboard you need 5 parts.
</p>
<ol>
<li>
<h3>Case</h3>
<p>The Case is basically just the Housing of the Keyboard.
All the Parts get screwed into it, so that they get held in place.</p>
</li>
<li>
<h3>PCB</h3>
<p>The PCB is basically just the Motherboard of the Keyboard.
You can either solder or just place the switches in,
depending of which type of PCB you have.</p>
</li>
<li>
<h3>Switches</h3>
<p>The switches are the actuators of the typing. They send a signal through
the PCB, which sends it over the Cable to the PC.</p>
</li>
<li>
<h3>Plate</h3>
<p>The Plate is inbetween the Switches and the PCB. The Stabilisers,
which stabilize the longer keycaps are also mounted on the Plate.</p>
</li>
<li>
<h3>Keycaps</h3>
<p>The Keycaps are placed on the switches, so you can actually type.
They come in different colors and sizes.
There are also Printed Keycaps and blank ones.</p>
</li>
</ol>
<img class="dotted" src="images/keyboard.jpg">
<h3>Here you can see a Keyboard Timelapse Build</h3>
<!--Here I embedded a Youtube Video with the code Youtube gave me. It also has Privacy Mode enabled, because i know IT people care about their privacy.-->
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/8yvk7KDMx8A"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
<br>
<br>
<br>
<!--This is my favorite song. I used the autoplay tag to play it when you open the page-->
<audio controls autoplay>
<source src="sounds/welcome.mp3" type="audio/mpeg">
</audio>
<h5>Background image</h5>
<p>A Rose Gold Kyuu built for Lilypichu by the Youtuber and Streamer Taeha Types.</p>
</div>
<div id="sidebar">
</div>
<div id="footer">
<a href="contact.html" title="Contact">Contact</a>
<a href="legal_notice.html" title="Legal Notice">Legal Notice</a>
<a href="privacy_policy.html" title="Privacy Policy">Privacy Policy</a>
</div>
</div>
</body>
</html>

196
schule/info/html/projekt/keycaps.html
View File

@ -1,99 +1,99 @@
<!--This is the Store page for tghe Product shown in shop.html-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>EPBT Samurai 75&#37; Keycap set</title>
<link rel=stylesheet href=css/style.css>
</head>
<body>
<div id="wrap">
<div id="header">
<a href="index.html">
<img src=images/header.png alt="header">
</a>
</div>
<div id="navigation">
<ul>
<li>
<a href="details.html">
<p class="nav">
details
</p>
</a>
</li>
<li>
<a href="shop.html">
<p class="nav">
shop
</p>
</a>
</li>
<li>
<a href="downloads.html">
<p class="nav">
downloads
</p>
</a>
</li>
</ul>
</div>
<div id="content">
<!--The text would'nt align next to the picture, so i put it in the paragraph tag-->
<p style="float: left;"><img src=images/epbt/main.jpg style="width:275px;height:275px;" border="3px"></p>
<h2>EPBT Samurai 75&#37; Keycap set</h2>
<p class="price">99,80&euro;</p>
<p>This is one of my favourite Keycap sets</p>
<button>
Buy here
<a href="https://kbdfans.com/collections/keycaps/products/samurai?variant=34191898771595" target="_blank">
</button>
</a>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<h3>Specs</h3>
<!--A Table(Tabelle)-->
<table style="width:65%">
<tr>
<td>Reverse Dyesub</td>
</tr>
<tr>
<td>PBT Material</td>
</tr>
<tr>
<td>Made in china</td>
</tr>
<tr>
<td>with chinese letters</td>
</tr>
<tr>
<td>includes iso Enter</td>
</tr>
</table>
<br>
<br>
<!--this is a gallery of images-->
<h3>Product Images</h3>
<img src="images/epbt/main2.jpg" style="width:200px;height:200px;" align="left">
<img src="images/epbt/side.jpg" style="width:200px;height:200px;" align="left">
<img src="images/epbt/close.jpg" style="width:200px;height:200px;" align="left">
<img src="images/epbt/front.jpg" style="width:200px;height:200px;" align="left">
</div>
<div id="sidebar">
</div>
<div id="footer">
<a href="contact.html" title="Contact">Contact</a>
<a href="legal_notice.html" title="Legal Notice">Legal Notice</a>
<a href="privacy_policy.html" title="Privacy Policy">Privacy Policy</a>
</div>
</div>
</body>
<!--This is the Store page for tghe Product shown in shop.html-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>EPBT Samurai 75&#37; Keycap set</title>
<link rel=stylesheet href=css/style.css>
</head>
<body>
<div id="wrap">
<div id="header">
<a href="index.html">
<img src=images/header.png alt="header">
</a>
</div>
<div id="navigation">
<ul>
<li>
<a href="details.html">
<p class="nav">
details
</p>
</a>
</li>
<li>
<a href="shop.html">
<p class="nav">
shop
</p>
</a>
</li>
<li>
<a href="downloads.html">
<p class="nav">
downloads
</p>
</a>
</li>
</ul>
</div>
<div id="content">
<!--The text would'nt align next to the picture, so i put it in the paragraph tag-->
<p style="float: left;"><img src=images/epbt/main.jpg style="width:275px;height:275px;" border="3px"></p>
<h2>EPBT Samurai 75&#37; Keycap set</h2>
<p class="price">99,80&euro;</p>
<p>This is one of my favourite Keycap sets</p>
<button>
Buy here
<a href="https://kbdfans.com/collections/keycaps/products/samurai?variant=34191898771595" target="_blank">
</button>
</a>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<h3>Specs</h3>
<!--A Table(Tabelle)-->
<table style="width:65%">
<tr>
<td>Reverse Dyesub</td>
</tr>
<tr>
<td>PBT Material</td>
</tr>
<tr>
<td>Made in china</td>
</tr>
<tr>
<td>with chinese letters</td>
</tr>
<tr>
<td>includes iso Enter</td>
</tr>
</table>
<br>
<br>
<!--this is a gallery of images-->
<h3>Product Images</h3>
<img src="images/epbt/main2.jpg" style="width:200px;height:200px;" align="left">
<img src="images/epbt/side.jpg" style="width:200px;height:200px;" align="left">
<img src="images/epbt/close.jpg" style="width:200px;height:200px;" align="left">
<img src="images/epbt/front.jpg" style="width:200px;height:200px;" align="left">
</div>
<div id="sidebar">
</div>
<div id="footer">
<a href="contact.html" title="Contact">Contact</a>
<a href="legal_notice.html" title="Legal Notice">Legal Notice</a>
<a href="privacy_policy.html" title="Privacy Policy">Privacy Policy</a>
</div>
</div>
</body>
</html>

126
schule/info/html/projekt/legal_notice.html
View File

@ -1,64 +1,64 @@
<!--A notice about copyright. Also used for the footer.-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Legal Notice</title>
<link rel=stylesheet href=css/style.css>
</head>
<body>
<div id="wrap">
<div id="header">
<a href="index.html">
<img src=images/header.png alt="header">
</a>
</div>
<div id="navigation">
<ul>
<li>
<a href="details.html">
<p class="nav">
details
</p>
</a>
</li>
<li>
<a href="shop.html">
<p class="nav">
shop
</p>
</a>
</li>
<li>
<a href="downloads.html">
<p class="nav">
downloads
</p>
</a>
</li>
</ul>
</div>
<div id="content">
<h2>Legal Notice</h2>
<p>Some of the Content on this site is Copyrighted.
If you have a complaint about Copyright infringement,
please send an email to <a href="mailto:olzemjo@sjg-rheinbach.com">olzemjo@sjg-rheinbach.de</a>.
<!--the mailto: indicates, that the mail client should open and fill out the receiver field with the given data-->
<br>
Also Contact this e-mail, if you are a content owner and
you would like to contribute your content to this Website.
</p>
</div>
<div id="sidebar">
</div>
<div id="footer">
<a href="contact.html" title="Contact">Contact</a>
<a href="legal_notice.html" title="Legal Notice">Legal Notice</a>
<a href="privacy_policy.html" title="Privacy Policy">Privacy Policy</a>
</div>
</div>
</body>
<!--A notice about copyright. Also used for the footer.-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Legal Notice</title>
<link rel=stylesheet href=css/style.css>
</head>
<body>
<div id="wrap">
<div id="header">
<a href="index.html">
<img src=images/header.png alt="header">
</a>
</div>
<div id="navigation">
<ul>
<li>
<a href="details.html">
<p class="nav">
details
</p>
</a>
</li>
<li>
<a href="shop.html">
<p class="nav">
shop
</p>
</a>
</li>
<li>
<a href="downloads.html">
<p class="nav">
downloads
</p>
</a>
</li>
</ul>
</div>
<div id="content">
<h2>Legal Notice</h2>
<p>Some of the Content on this site is Copyrighted.
If you have a complaint about Copyright infringement,
please send an email to <a href="mailto:olzemjo@sjg-rheinbach.com">olzemjo@sjg-rheinbach.de</a>.
<!--the mailto: indicates, that the mail client should open and fill out the receiver field with the given data-->
<br>
Also Contact this e-mail, if you are a content owner and
you would like to contribute your content to this Website.
</p>
</div>
<div id="sidebar">
</div>
<div id="footer">
<a href="contact.html" title="Contact">Contact</a>
<a href="legal_notice.html" title="Legal Notice">Legal Notice</a>
<a href="privacy_policy.html" title="Privacy Policy">Privacy Policy</a>
</div>
</div>
</body>
</html>

168
schule/info/html/projekt/privacy_policy.html
View File

@ -1,85 +1,85 @@
<!--The Privacy Policy of this Website. Inspired by the Privacy Policy of Crunchyroll.-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Privacy Policy</title>
<link rel=stylesheet href=css/style.css>
</head>
<body>
<div id="wrap">
<div id="header">
<a href="index.html">
<img src=images/header.png alt="header">
</a>
</div>
<div id="navigation">
<ul>
<li>
<a href="details.html">
<p class="nav">
details
</p>
</a>
</li>
<li>
<a href="shop.html">
<p class="nav">
shop
</p>
</a>
</li>
<li>
<a href="downloads.html">
<p class="nav">
downloads
</p>
</a>
</li>
</ul>
</div>
<div id="content">
<h2> Privacy Policy</h2>
<h3>Data Collection</h3>
<ul>
<li>
<p>I will neither collect, nor sell your data.</p>
</li>
</ul>
<h3>Deletion of personal Data</h3>
<ul>
<li>
<p>If you would like to request the deletion of your personal
data, send an e-mail to <a href="mailto:olzemjo@sjg-rheinbach.de">olzemjo@sjg-rheinbach.de</a> </p>
<!--the mailto: indicates, that the mail client should open and fill out the receiver field with the given data-->
</li>
</ul>
<h3> Cookies</h3>
<ul>
<li>
<p>Cookies are not used on this Website, because I am too lazy
to put a popup on this.</p>
</li>
</ul>
<h3>Links to other Sites</h3>
<ul>
<li>
<p>If you click on a banner or a Hyperlink, which leads to an external site,
this Privacy Policy is not in force anymore. If you would like to
know about the Privacy Policy of the external site, please read it there.</p>
</li>
<ul>
</div>
<div id="sidebar">
</div>
<div id="footer">
<a href="contact.html" title="Contact">Contact</a>
<a href="legal_notice.html" title="Legal Notice">Legal Notice</a>
<a href="privacy_policy.html" title="Privacy Policy">Privacy Policy</a>
</div>
</div>
</body>
<!--The Privacy Policy of this Website. Inspired by the Privacy Policy of Crunchyroll.-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Privacy Policy</title>
<link rel=stylesheet href=css/style.css>
</head>
<body>
<div id="wrap">
<div id="header">
<a href="index.html">
<img src=images/header.png alt="header">
</a>
</div>
<div id="navigation">
<ul>
<li>
<a href="details.html">
<p class="nav">
details
</p>
</a>
</li>
<li>
<a href="shop.html">
<p class="nav">
shop
</p>
</a>
</li>
<li>
<a href="downloads.html">
<p class="nav">
downloads
</p>
</a>
</li>
</ul>
</div>
<div id="content">
<h2> Privacy Policy</h2>
<h3>Data Collection</h3>
<ul>
<li>
<p>I will neither collect, nor sell your data.</p>
</li>
</ul>
<h3>Deletion of personal Data</h3>
<ul>
<li>
<p>If you would like to request the deletion of your personal
data, send an e-mail to <a href="mailto:olzemjo@sjg-rheinbach.de">olzemjo@sjg-rheinbach.de</a> </p>
<!--the mailto: indicates, that the mail client should open and fill out the receiver field with the given data-->
</li>
</ul>
<h3> Cookies</h3>
<ul>
<li>
<p>Cookies are not used on this Website, because I am too lazy
to put a popup on this.</p>
</li>
</ul>
<h3>Links to other Sites</h3>
<ul>
<li>
<p>If you click on a banner or a Hyperlink, which leads to an external site,
this Privacy Policy is not in force anymore. If you would like to
know about the Privacy Policy of the external site, please read it there.</p>
</li>
<ul>
</div>
<div id="sidebar">
</div>
<div id="footer">
<a href="contact.html" title="Contact">Contact</a>
<a href="legal_notice.html" title="Legal Notice">Legal Notice</a>
<a href="privacy_policy.html" title="Privacy Policy">Privacy Policy</a>
</div>
</div>
</body>
</html>

122
schule/info/html/projekt/shop.html
View File

@ -1,62 +1,62 @@
<!--This is a shop. I made this because I wanted to implement a store page(keycaps.html)-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Shop</title>
<link rel=stylesheet href=css/style.css>
</head>
<body>
<div id="wrap">
<div id="header">
<a href="index.html">
<img src=images/header.png alt="header">
</a>
</div>
<div id="navigation">
<ul>
<li>
<a href="details.html">
<p class="nav">
details
</p>
</a>
</li>
<li>
<a href="shop.html">
<p class="nav">
shop
</p>
</a>
</li>
<li>
<a href="downloads.html">
<p class="nav">
downloads
</p>
</a>
</li>
</ul>
</div>
<div id="content">
<h1>Shop</h1>
<a href="keycaps.html">
<img src=images/epbt/main.jpg style="width:90px;height:90px;">
<h4>EPBT Samurai 65&#37; Keycap set
<br>
99,90&euro;</h4>
</a>
</div>
<div id="sidebar">
</div>
<div id="footer">
<a href="contact.html" title="Contact">Contact</a>
<a href="legal_notice.html" title="Legal Notice">Legal Notice</a>
<a href="privacy_policy.html" title="Privacy Policy">Privacy Policy</a>
</div>
</div>
</body>
<!--This is a shop. I made this because I wanted to implement a store page(keycaps.html)-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Shop</title>
<link rel=stylesheet href=css/style.css>
</head>
<body>
<div id="wrap">
<div id="header">
<a href="index.html">
<img src=images/header.png alt="header">
</a>
</div>
<div id="navigation">
<ul>
<li>
<a href="details.html">
<p class="nav">
details
</p>
</a>
</li>
<li>
<a href="shop.html">
<p class="nav">
shop
</p>
</a>
</li>
<li>
<a href="downloads.html">
<p class="nav">
downloads
</p>
</a>
</li>
</ul>
</div>
<div id="content">
<h1>Shop</h1>
<a href="keycaps.html">
<img src=images/epbt/main.jpg style="width:90px;height:90px;">
<h4>EPBT Samurai 65&#37; Keycap set
<br>
99,90&euro;</h4>
</a>
</div>
<div id="sidebar">
</div>
<div id="footer">
<a href="contact.html" title="Contact">Contact</a>
<a href="legal_notice.html" title="Legal Notice">Legal Notice</a>
<a href="privacy_policy.html" title="Privacy Policy">Privacy Policy</a>
</div>
</div>
</body>
</html>

58
schule/info/index.html
View File

@ -1,29 +1,29 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Index for ~/schule/info | Johannes Olzem</title>
<meta charset="utf-8">
</head>
<body>
<div id="wrap">
<h1>Index for &nbsp;~ / schule / info /</h1>
<ul style="list-style: inside '\1F4C1'";>
<li>
<a href="../../" style="margin-left:5px;">
../../
</a>
</li>
<li>
<a href="html/projekt/" style="margin-left:5px;">
html/projekt/
</a>
</li>
<li>
<a href="python/roulette/" style="margin-left:5px;">
python/roulette/
</a>
</li>
</ul>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Index for ~/schule/info | Johannes Olzem</title>
<meta charset="utf-8">
</head>
<body>
<div id="wrap">
<h1>Index for &nbsp;~ / schule / info /</h1>
<ul style="list-style: inside '\1F4C1'";>
<li>
<a href="../../" style="margin-left:5px;">
../../
</a>
</li>
<li>
<a href="html/projekt/" style="margin-left:5px;">
html/projekt/
</a>
</li>
<li>
<a href="python/roulette/" style="margin-left:5px;">
python/roulette/
</a>
</li>
</ul>
</div>
</body>
</html>

50
schule/info/python/roulette/index.html
View File

@ -1,26 +1,26 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Index for ~/pages/schule/info/python/roulette/ | Johannes Olzem</title>
<meta charset="utf-8">
<link rel="shortcut icon" href="/img/favico.png">
<link rel="apple-touch-icon" href="/img/apple-touch-icon.png">
</head>
<body>
<div id="wrap">
<h1>Index for &nbsp;~ / pages / schule / info / python / roulette /</h1>
<ul style="list-style: inside '\1F4C1'";>
<li>
<a href="../../" style="margin-left:5px;">
../../
</a>
</li>
<li style="list-style: inside '\1F4C4';">
<a href="werte.png" style="margin-left:5px;">
werte.png
</a>
</li>
</ul>
</div>
</body>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Index for ~/pages/schule/info/python/roulette/ | Johannes Olzem</title>
<meta charset="utf-8">
<link rel="shortcut icon" href="/img/favico.png">
<link rel="apple-touch-icon" href="/img/apple-touch-icon.png">
</head>
<body>
<div id="wrap">
<h1>Index for &nbsp;~ / pages / schule / info / python / roulette /</h1>
<ul style="list-style: inside '\1F4C1'";>
<li>
<a href="../../" style="margin-left:5px;">
../../
</a>
</li>
<li style="list-style: inside '\1F4C4';">
<a href="werte.png" style="margin-left:5px;">
werte.png
</a>
</li>
</ul>
</div>
</body>
</html>