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

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

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

69
contact/index.html
View File

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

46
css/style.css
View File

@ -1,14 +1,8 @@
@font-face {
font-family: "Consolas";
src: url("Consolas.woff2") format("woff2");
}
:root { :root {
--txt: #d3c6aa; --txt: #c4c7c4;
--accent: #a7c080; --body-bg: #272c31;
--body-bg: #2d353b; --dark: #000;
--dark: #232a2e; --accent: #42a5f5;
--border: 4pt;
--font-body: "Consolas", monaco, "Liberation Mono", "Lucida Console", monospace; --font-body: "Consolas", monaco, "Liberation Mono", "Lucida Console", monospace;
} }
@ -21,19 +15,23 @@ body {
} }
#root { #root {
max-width: 900px; max-width: 1000px;
min-height: 100vh; min-height: 100vh;
margin: 0 auto; margin: 0 auto;
border-radius: var(--border);
} }
header { header {
padding: 1rem 0; padding: 1.5rem 0;
border-radius: inherit;
} }
header h1 { header a {
color: var(--accent); color: var(--accent);
font-size: 2rem;
font-weight: bold;
}
header a:hover {
text-decoration: none !important;
} }
nav { nav {
@ -54,6 +52,13 @@ main p {
margin: 0 auto; margin: 0 auto;
} }
main ul {
margin: 0 auto;
margin-bottom: 2rem;
max-width: fit-content;
text-align: left;
}
.blog-entries a { .blog-entries a {
padding-top: 1rem; padding-top: 1rem;
display: block; display: block;
@ -75,6 +80,7 @@ h6 {
p { p {
margin: 1rem; margin: 1rem;
font-size: 1.1em; font-size: 1.1em;
line-height: 1.5rem;
} }
a { a {
@ -98,13 +104,3 @@ a:active {
text-decoration: underline !important; text-decoration: underline !important;
color: var(--accent); 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> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<title>Donate - Johannes Olzem</title> <title>Donate - Johannes Olzem</title>
<meta name="description" content="Johannes Olzem's Webspace."> <meta name="description" content="Johannes Olzem's Webspace.">
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/css/style.css"> <link rel="stylesheet" href="/css/style.css">
<link rel="icon" href="/favico.ico"> <link rel="icon" href="/favico.ico">
</head> </head>
<body> <body>
<div id="root"> <div id="root">
<header> <header>
<h1>Johannes Olzem's Webspace</h1> <a href="/">Johannes Olzem's Webspace</a>
</header> </header>
<nav> <nav>
<a href="/">Home</a> <a href="/blog/">Blog</a>
<a href="/blog/">Blog</a> <a href="/about/">About Me</a>
<a href="/about/">About Me</a> <a href="/contact/">Contact</a>
<a href="/contact/">Contact</a> <a href="#">Donate</a>
<a href="#">Donate</a> </nav>
</nav> <main>
<main> <h2>Donate</h2>
<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>
<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>
<br> <p style="overflow-wrap: anywhere;">4BK7poh4kom8tti2HReRjQFbooWNiCiYj6sYfq4jdqBBhfN1FWn3an4ZRb1fytH5363vzyvTxBKzd5UphnexhJ7t1kjzTzP</p>
<p style="overflow-wrap: anywhere;">4BK7poh4kom8tti2HReRjQFbooWNiCiYj6sYfq4jdqBBhfN1FWn3an4ZRb1fytH5363vzyvTxBKzd5UphnexhJ7t1kjzTzP</p> <br>
<br> <img style="max-width: 200px;" src="/img/monero.png">
<img style="max-width: 200px;" src="/img/monero.png"> </main>
</main> <footer>
<footer> <h6><a href=""><script>document.write(window.location.href);</script></a></h6>
<h6><a href=""><script>document.write(window.location.href);</script></a></h6> </footer>
</footer> </div>
</div> </body>
</body> </html>
</html>

98
index.html
View File

@ -1,49 +1,49 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<title>Johannes Olzem</title> <title>Johannes Olzem</title>
<meta name="description" content="Johannes Olzem's Webspace."> <meta name="description" content="Johannes Olzem's Webspace.">
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="stylesheet" href="/css/style.css"> <link rel="stylesheet" href="/css/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="/favico.ico"> <link rel="icon" href="/favico.ico">
</head> </head>
<body> <body>
<div id="root"> <div id="root">
<header> <header>
<h1>Johannes Olzem's Webspace</h1> <a href="/">Johannes Olzem's Webspace</a>
</header> </header>
<nav> <nav>
<a href="#">Home</a> <a href="/blog/">Blog</a>
<a href="/blog/">Blog</a> <a href="/about/">About Me</a>
<a href="/about/">About Me</a> <a href="/contact/">Contact</a>
<a href="/contact/">Contact</a> <a href="/donate/">Donate</a>
<a href="/donate/">Donate</a> </nav>
</nav> <main>
<main> <h2>Welcome to my Webspace!</h2>
<h2>Welcome to my Webspace!</h2> <p>
<p> Here I maintain my <a href="/blog/" class="inline">blog</a>
Here I maintain my <a href="/blog/" class="inline">blog</a> about various topics and with various guides.<br />
about various topics and with various guides.<br /> You can learn more about me <a href="/about/" class="inline">here</a>.<br />
You can learn more about me <a href="/about/" class="inline">here</a>. I strive to expand and restore the minimal web
</p> </p>
<h2>Why run this website?</h2> <h2>Why run this website?</h2>
<p> <p>
As you (should) know, most websites collect data about you.<br /> 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 /> 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 /> 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 /> 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. And now you are here! I don't know how you got here, but feel free to explore every crevasse of this site.
</p> </p>
<br> <br>
<br> <br>
<a href="https://landchad.net" target="_blank"><img src="/img/landchad.gif"></a> <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"></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"></a> <a href="https://kernel.org" target="_blank"><img src="/img/tux.gif" alt="tux"></a>
</main> </main>
<footer> <footer>
<h6><a href=""><script>document.write(window.location.href);</script></a></h6> <h6><a href=""><script>document.write(window.location.href);</script></a></h6>
</footer> </footer>
</div> </div>
</body> </body>
</html> </html>

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

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

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

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

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

@ -1,120 +1,120 @@
<!--This is used for more detailed information--> <!--This is used for more detailed information-->
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Details</title> <title>Details</title>
<link rel=stylesheet href=css/style.css> <link rel=stylesheet href=css/style.css>
</head> </head>
<body> <body>
<div id="wrap"> <div id="wrap">
<div id="header"> <div id="header">
<a href="index.html"> <a href="index.html">
<img src=images/header.png alt="header"> <img src=images/header.png alt="header">
</a> </a>
</div> </div>
<div id="navigation"> <div id="navigation">
<ul> <ul>
<li> <li>
<a href="details.html"> <a href="details.html">
<p class="nav"> <p class="nav">
details details
</p> </p>
</a> </a>
</li> </li>
<li> <li>
<a href="shop.html"> <a href="shop.html">
<p class="nav"> <p class="nav">
shop shop
</p> </p>
</a> </a>
</li> </li>
<li> <li>
<a href="downloads.html"> <a href="downloads.html">
<p class="nav"> <p class="nav">
downloads downloads
</p> </p>
</a> </a>
</li> </li>
</ul> </ul>
</div> </div>
<div id="content"> <div id="content">
<h1>Details</h1> <h1>Details</h1>
<h2>Sizes</h2> <h2>Sizes</h2>
<p>There are several sizes of keyboard, defined by the number of keys.</p> <p>There are several sizes of keyboard, defined by the number of keys.</p>
<table> <table>
<tr> <tr>
<td> <td>
<h3>40&#37;</h3> <h3>40&#37;</h3>
<p>A 40&#37; Keyboard only has Keys for lettering, such as letters and a shift and backspace <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> as well as a backspace and a Tab.</p>
<img src="images/fourty.jpg" alt="a fourty percent keyboard" <img src="images/fourty.jpg" alt="a fourty percent keyboard"
style="width:139px;height:45px;" align="center"> style="width:139px;height:45px;" align="center">
<br> <br>
</td> </td>
</tr> </tr>
<tr> <tr>
<td> <td>
<h3>60&#37;</h3> <h3>60&#37;</h3>
<p>Probably the most common size in the custom keyboard Industry. <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> 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" <img src="images/sixty.jpg" alt="a sixty percent keyboard"
style="width:132px;height:51px;"> style="width:132px;height:51px;">
</td> </td>
</tr> </tr>
<tr> <tr>
<td> <td>
<h3>65&#37;</h3> <h3>65&#37;</h3>
<p>My favourite size, because of the extra arrow keys. It also has three additional keys. <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> These are most commonly Delete, Page Up and Page Down.</p>
<img src="images/keyboard.jpg" alt="a sixty percent keyboard" <img src="images/keyboard.jpg" alt="a sixty percent keyboard"
style="width:131px;height:44px;"> style="width:131px;height:44px;">
</td> </td>
</tr> </tr>
<tr> <tr>
<td> <td>
<h3>75&#37;&#47;TKL</h3> <h3>75&#37;&#47;TKL</h3>
<p>A "normal" keyboard, just without the numpad. TKL stands for TenKeyLess.</p> <p>A "normal" keyboard, just without the numpad. TKL stands for TenKeyLess.</p>
<img src="images/seventyfive.jpg" alt="a seventyfive percent keyboard" <img src="images/seventyfive.jpg" alt="a seventyfive percent keyboard"
style="width:150px;height:58px;"> style="width:150px;height:58px;">
</td> </td>
</tr> </tr>
<tr> <tr>
<td> <td>
<h3>95&#37;&#47;100&#37;&#47;full size</h3> <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> <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;"> <img src="images/hundred.jpg" alt="a full size keyboard" style="width:128px;height:44px;">
</td> </td>
</tr> </tr>
</table> </table>
<br> <br>
<br> <br>
<h2>Lube</h2> <h2>Lube</h2>
<p>Lube is used to significantly silent switches. I&#39;ve included some typing sounds under here.</p> <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> <h4>Unlubed Cherry MX Red switches</h4>
<!--Here is the audio tag as seen in index.html--> <!--Here is the audio tag as seen in index.html-->
<audio controls> <audio controls>
<source src="sounds/redunlubed.mp3" type="audio/mpeg"> <source src="sounds/redunlubed.mp3" type="audio/mpeg">
</audio> </audio>
<h4>Lubed Cherry MX Red switches</h4> <h4>Lubed Cherry MX Red switches</h4>
<audio controls> <audio controls>
<source src="sounds/redlubed.mp3" type="audio/mpeg"> <source src="sounds/redlubed.mp3" type="audio/mpeg">
</audio> </audio>
<h4>Overlubed Gateron Black Ink Switches</h4> <h4>Overlubed Gateron Black Ink Switches</h4>
<audio controls> <audio controls>
<source src="sounds/overlubed.mp3" type="audio/mpeg"> <source src="sounds/overlubed.mp3" type="audio/mpeg">
</audio> </audio>
</div> </div>
<div id="sidebar"> <div id="sidebar">
</div> </div>
<div id="footer"> <div id="footer">
<a href="contact.html" title="Contact">Contact</a> <a href="contact.html" title="Contact">Contact</a>
<a href="legal_notice.html" title="Legal Notice">Legal Notice</a> <a href="legal_notice.html" title="Legal Notice">Legal Notice</a>
<a href="privacy_policy.html" title="Privacy Policy">Privacy Policy</a> <a href="privacy_policy.html" title="Privacy Policy">Privacy Policy</a>
</div> </div>
</div> </div>
</body> </body>
</html> </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--> <!--This is a download page with different software, which is downlaodable-->
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Downloads</title> <title>Downloads</title>
<link rel=stylesheet href=css/style.css> <link rel=stylesheet href=css/style.css>
</head> </head>
<body> <body>
<div id="wrap"> <div id="wrap">
<div id="header"> <div id="header">
<a href="index.html"> <a href="index.html">
<img src=images/header.png alt="header"> <img src=images/header.png alt="header">
</a> </a>
</div> </div>
<div id="navigation"> <div id="navigation">
<ul> <ul>
<li> <li>
<a href="details.html"> <a href="details.html">
<p class="nav"> <p class="nav">
details details
</p> </p>
</a> </a>
</li> </li>
<li> <li>
<a href="shop.html"> <a href="shop.html">
<p class="nav"> <p class="nav">
shop shop
</p> </p>
</a> </a>
</li> </li>
<li> <li>
<a href="downloads.html"> <a href="downloads.html">
<p class="nav"> <p class="nav">
downloads downloads
</p> </p>
</a> </a>
</li> </li>
</ul> </ul>
</div> </div>
<div id="content"> <div id="content">
<h1>Downloads</h1> <h1>Downloads</h1>
<!--I used the download tag to indicate, that the file that is being linked to, is supposed to be downloaded--> <!--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> <a href="https://github.com/the-via/releases/releases/download/v1.3.1/via-1.3.1-win.exe" download>
<h3>VIA</h3> <h3>VIA</h3>
</a> </a>
<p> VIA is a software, you can use to program a Keyboard. <p> VIA is a software, you can use to program a Keyboard.
<br> <br>
Before you build, you normally test the PCB, which you can do with this Software too. Before you build, you normally test the PCB, which you can do with this Software too.
<br> <br>
It is also used to change the RGB lightning on the switches or the PCB. It is also used to change the RGB lightning on the switches or the PCB.
</p> </p>
<br> <br>
<br> <br>
<a href="https://www.autohotkey.com/download/ahk-install.exe" download> <a href="https://www.autohotkey.com/download/ahk-install.exe" download>
<h3>AutoHotkey</h3> <h3>AutoHotkey</h3>
</a> </a>
<p>AutoHotkey is a software, which is used to program macros to either to special macro keys, <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 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>. <a href="https://kbdfans.com/collections/20/products/kbdfans-kbdpad-pcb-v2" target="_blank">here</a>.
</p> </p>
</div> </div>
<div id="sidebar"> <div id="sidebar">
</div> </div>
<div id="footer"> <div id="footer">
<a href="contact.html" title="Contact">Contact</a> <a href="contact.html" title="Contact">Contact</a>
<a href="legal_notice.html" title="Legal Notice">Legal Notice</a> <a href="legal_notice.html" title="Legal Notice">Legal Notice</a>
<a href="privacy_policy.html" title="Privacy Policy">Privacy Policy</a> <a href="privacy_policy.html" title="Privacy Policy">Privacy Policy</a>
</div> </div>
</div> </div>
</body> </body>
</html> </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 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. 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. 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 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.)--> in the code are in english(background, title etc.)-->
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Custom Keyboards</title> <title>Custom Keyboards</title>
<link rel=stylesheet href=css/style.css> <link rel=stylesheet href=css/style.css>
<style> <style>
body { body {
background: #000000 url(images/background.jpg) no-repeat fixed center center; background: #000000 url(images/background.jpg) no-repeat fixed center center;
} }
<!--The Background image--> <!--The Background image-->
</style> </style>
</head> </head>
<body> <body>
<div id="wrap"> <div id="wrap">
<div id="header"> <div id="header">
<a href="index.html"> <a href="index.html">
<img src=images/header.png> <img src=images/header.png>
</a> </a>
</div> </div>
<div id="navigation"> <div id="navigation">
<ul> <ul>
<li> <li>
<a href="details.html"> <a href="details.html">
<p class="nav"> <p class="nav">
details details
</p> </p>
</a> </a>
</li> </li>
<li> <li>
<a href="shop.html"> <a href="shop.html">
<p class="nav"> <p class="nav">
shop shop
</p> </p>
</a> </a>
</li> </li>
<li> <li>
<a href="downloads.html"> <a href="downloads.html">
<p class="nav"> <p class="nav">
downloads downloads
</p> </p>
</a> </a>
</li> </li>
</ul> </ul>
</div> </div>
<div id="content"> <div id="content">
<h1>Custom Keyboards</h1> <h1>Custom Keyboards</h1>
<p>The hobby of building a custom keyboard is massively gaining popularity at the moment. <p>The hobby of building a custom keyboard is massively gaining popularity at the moment.
<br> <br>
To Build a Custom Keyboard you need 5 parts. To Build a Custom Keyboard you need 5 parts.
</p> </p>
<ol> <ol>
<li> <li>
<h3>Case</h3> <h3>Case</h3>
<p>The Case is basically just the Housing of the Keyboard. <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> All the Parts get screwed into it, so that they get held in place.</p>
</li> </li>
<li> <li>
<h3>PCB</h3> <h3>PCB</h3>
<p>The PCB is basically just the Motherboard of the Keyboard. <p>The PCB is basically just the Motherboard of the Keyboard.
You can either solder or just place the switches in, You can either solder or just place the switches in,
depending of which type of PCB you have.</p> depending of which type of PCB you have.</p>
</li> </li>
<li> <li>
<h3>Switches</h3> <h3>Switches</h3>
<p>The switches are the actuators of the typing. They send a signal through <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> the PCB, which sends it over the Cable to the PC.</p>
</li> </li>
<li> <li>
<h3>Plate</h3> <h3>Plate</h3>
<p>The Plate is inbetween the Switches and the PCB. The Stabilisers, <p>The Plate is inbetween the Switches and the PCB. The Stabilisers,
which stabilize the longer keycaps are also mounted on the Plate.</p> which stabilize the longer keycaps are also mounted on the Plate.</p>
</li> </li>
<li> <li>
<h3>Keycaps</h3> <h3>Keycaps</h3>
<p>The Keycaps are placed on the switches, so you can actually type. <p>The Keycaps are placed on the switches, so you can actually type.
They come in different colors and sizes. They come in different colors and sizes.
There are also Printed Keycaps and blank ones.</p> There are also Printed Keycaps and blank ones.</p>
</li> </li>
</ol> </ol>
<img class="dotted" src="images/keyboard.jpg"> <img class="dotted" src="images/keyboard.jpg">
<h3>Here you can see a Keyboard Timelapse Build</h3> <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.--> <!--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" <iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/8yvk7KDMx8A"
frameborder="0" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe> allowfullscreen></iframe>
<br> <br>
<br> <br>
<br> <br>
<!--This is my favorite song. I used the autoplay tag to play it when you open the page--> <!--This is my favorite song. I used the autoplay tag to play it when you open the page-->
<audio controls autoplay> <audio controls autoplay>
<source src="sounds/welcome.mp3" type="audio/mpeg"> <source src="sounds/welcome.mp3" type="audio/mpeg">
</audio> </audio>
<h5>Background image</h5> <h5>Background image</h5>
<p>A Rose Gold Kyuu built for Lilypichu by the Youtuber and Streamer Taeha Types.</p> <p>A Rose Gold Kyuu built for Lilypichu by the Youtuber and Streamer Taeha Types.</p>
</div> </div>
<div id="sidebar"> <div id="sidebar">
</div> </div>
<div id="footer"> <div id="footer">
<a href="contact.html" title="Contact">Contact</a> <a href="contact.html" title="Contact">Contact</a>
<a href="legal_notice.html" title="Legal Notice">Legal Notice</a> <a href="legal_notice.html" title="Legal Notice">Legal Notice</a>
<a href="privacy_policy.html" title="Privacy Policy">Privacy Policy</a> <a href="privacy_policy.html" title="Privacy Policy">Privacy Policy</a>
</div> </div>
</div> </div>
</body> </body>
</html> </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--> <!--This is the Store page for tghe Product shown in shop.html-->
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>EPBT Samurai 75&#37; Keycap set</title> <title>EPBT Samurai 75&#37; Keycap set</title>
<link rel=stylesheet href=css/style.css> <link rel=stylesheet href=css/style.css>
</head> </head>
<body> <body>
<div id="wrap"> <div id="wrap">
<div id="header"> <div id="header">
<a href="index.html"> <a href="index.html">
<img src=images/header.png alt="header"> <img src=images/header.png alt="header">
</a> </a>
</div> </div>
<div id="navigation"> <div id="navigation">
<ul> <ul>
<li> <li>
<a href="details.html"> <a href="details.html">
<p class="nav"> <p class="nav">
details details
</p> </p>
</a> </a>
</li> </li>
<li> <li>
<a href="shop.html"> <a href="shop.html">
<p class="nav"> <p class="nav">
shop shop
</p> </p>
</a> </a>
</li> </li>
<li> <li>
<a href="downloads.html"> <a href="downloads.html">
<p class="nav"> <p class="nav">
downloads downloads
</p> </p>
</a> </a>
</li> </li>
</ul> </ul>
</div> </div>
<div id="content"> <div id="content">
<!--The text would'nt align next to the picture, so i put it in the paragraph tag--> <!--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> <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> <h2>EPBT Samurai 75&#37; Keycap set</h2>
<p class="price">99,80&euro;</p> <p class="price">99,80&euro;</p>
<p>This is one of my favourite Keycap sets</p> <p>This is one of my favourite Keycap sets</p>
<button> <button>
Buy here Buy here
<a href="https://kbdfans.com/collections/keycaps/products/samurai?variant=34191898771595" target="_blank"> <a href="https://kbdfans.com/collections/keycaps/products/samurai?variant=34191898771595" target="_blank">
</button> </button>
</a> </a>
<br> <br>
<br> <br>
<br> <br>
<br> <br>
<br> <br>
<br> <br>
<br> <br>
<h3>Specs</h3> <h3>Specs</h3>
<!--A Table(Tabelle)--> <!--A Table(Tabelle)-->
<table style="width:65%"> <table style="width:65%">
<tr> <tr>
<td>Reverse Dyesub</td> <td>Reverse Dyesub</td>
</tr> </tr>
<tr> <tr>
<td>PBT Material</td> <td>PBT Material</td>
</tr> </tr>
<tr> <tr>
<td>Made in china</td> <td>Made in china</td>
</tr> </tr>
<tr> <tr>
<td>with chinese letters</td> <td>with chinese letters</td>
</tr> </tr>
<tr> <tr>
<td>includes iso Enter</td> <td>includes iso Enter</td>
</tr> </tr>
</table> </table>
<br> <br>
<br> <br>
<!--this is a gallery of images--> <!--this is a gallery of images-->
<h3>Product Images</h3> <h3>Product Images</h3>
<img src="images/epbt/main2.jpg" style="width:200px;height:200px;" align="left"> <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/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/close.jpg" style="width:200px;height:200px;" align="left">
<img src="images/epbt/front.jpg" style="width:200px;height:200px;" align="left"> <img src="images/epbt/front.jpg" style="width:200px;height:200px;" align="left">
</div> </div>
<div id="sidebar"> <div id="sidebar">
</div> </div>
<div id="footer"> <div id="footer">
<a href="contact.html" title="Contact">Contact</a> <a href="contact.html" title="Contact">Contact</a>
<a href="legal_notice.html" title="Legal Notice">Legal Notice</a> <a href="legal_notice.html" title="Legal Notice">Legal Notice</a>
<a href="privacy_policy.html" title="Privacy Policy">Privacy Policy</a> <a href="privacy_policy.html" title="Privacy Policy">Privacy Policy</a>
</div> </div>
</div> </div>
</body> </body>
</html> </html>

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

@ -1,64 +1,64 @@
<!--A notice about copyright. Also used for the footer.--> <!--A notice about copyright. Also used for the footer.-->
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Legal Notice</title> <title>Legal Notice</title>
<link rel=stylesheet href=css/style.css> <link rel=stylesheet href=css/style.css>
</head> </head>
<body> <body>
<div id="wrap"> <div id="wrap">
<div id="header"> <div id="header">
<a href="index.html"> <a href="index.html">
<img src=images/header.png alt="header"> <img src=images/header.png alt="header">
</a> </a>
</div> </div>
<div id="navigation"> <div id="navigation">
<ul> <ul>
<li> <li>
<a href="details.html"> <a href="details.html">
<p class="nav"> <p class="nav">
details details
</p> </p>
</a> </a>
</li> </li>
<li> <li>
<a href="shop.html"> <a href="shop.html">
<p class="nav"> <p class="nav">
shop shop
</p> </p>
</a> </a>
</li> </li>
<li> <li>
<a href="downloads.html"> <a href="downloads.html">
<p class="nav"> <p class="nav">
downloads downloads
</p> </p>
</a> </a>
</li> </li>
</ul> </ul>
</div> </div>
<div id="content"> <div id="content">
<h2>Legal Notice</h2> <h2>Legal Notice</h2>
<p>Some of the Content on this site is Copyrighted. <p>Some of the Content on this site is Copyrighted.
If you have a complaint about Copyright infringement, 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>. 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--> <!--the mailto: indicates, that the mail client should open and fill out the receiver field with the given data-->
<br> <br>
Also Contact this e-mail, if you are a content owner and Also Contact this e-mail, if you are a content owner and
you would like to contribute your content to this Website. you would like to contribute your content to this Website.
</p> </p>
</div> </div>
<div id="sidebar"> <div id="sidebar">
</div> </div>
<div id="footer"> <div id="footer">
<a href="contact.html" title="Contact">Contact</a> <a href="contact.html" title="Contact">Contact</a>
<a href="legal_notice.html" title="Legal Notice">Legal Notice</a> <a href="legal_notice.html" title="Legal Notice">Legal Notice</a>
<a href="privacy_policy.html" title="Privacy Policy">Privacy Policy</a> <a href="privacy_policy.html" title="Privacy Policy">Privacy Policy</a>
</div> </div>
</div> </div>
</body> </body>
</html> </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.--> <!--The Privacy Policy of this Website. Inspired by the Privacy Policy of Crunchyroll.-->
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Privacy Policy</title> <title>Privacy Policy</title>
<link rel=stylesheet href=css/style.css> <link rel=stylesheet href=css/style.css>
</head> </head>
<body> <body>
<div id="wrap"> <div id="wrap">
<div id="header"> <div id="header">
<a href="index.html"> <a href="index.html">
<img src=images/header.png alt="header"> <img src=images/header.png alt="header">
</a> </a>
</div> </div>
<div id="navigation"> <div id="navigation">
<ul> <ul>
<li> <li>
<a href="details.html"> <a href="details.html">
<p class="nav"> <p class="nav">
details details
</p> </p>
</a> </a>
</li> </li>
<li> <li>
<a href="shop.html"> <a href="shop.html">
<p class="nav"> <p class="nav">
shop shop
</p> </p>
</a> </a>
</li> </li>
<li> <li>
<a href="downloads.html"> <a href="downloads.html">
<p class="nav"> <p class="nav">
downloads downloads
</p> </p>
</a> </a>
</li> </li>
</ul> </ul>
</div> </div>
<div id="content"> <div id="content">
<h2> Privacy Policy</h2> <h2> Privacy Policy</h2>
<h3>Data Collection</h3> <h3>Data Collection</h3>
<ul> <ul>
<li> <li>
<p>I will neither collect, nor sell your data.</p> <p>I will neither collect, nor sell your data.</p>
</li> </li>
</ul> </ul>
<h3>Deletion of personal Data</h3> <h3>Deletion of personal Data</h3>
<ul> <ul>
<li> <li>
<p>If you would like to request the deletion of your personal <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> 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--> <!--the mailto: indicates, that the mail client should open and fill out the receiver field with the given data-->
</li> </li>
</ul> </ul>
<h3> Cookies</h3> <h3> Cookies</h3>
<ul> <ul>
<li> <li>
<p>Cookies are not used on this Website, because I am too lazy <p>Cookies are not used on this Website, because I am too lazy
to put a popup on this.</p> to put a popup on this.</p>
</li> </li>
</ul> </ul>
<h3>Links to other Sites</h3> <h3>Links to other Sites</h3>
<ul> <ul>
<li> <li>
<p>If you click on a banner or a Hyperlink, which leads to an external site, <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 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> know about the Privacy Policy of the external site, please read it there.</p>
</li> </li>
<ul> <ul>
</div> </div>
<div id="sidebar"> <div id="sidebar">
</div> </div>
<div id="footer"> <div id="footer">
<a href="contact.html" title="Contact">Contact</a> <a href="contact.html" title="Contact">Contact</a>
<a href="legal_notice.html" title="Legal Notice">Legal Notice</a> <a href="legal_notice.html" title="Legal Notice">Legal Notice</a>
<a href="privacy_policy.html" title="Privacy Policy">Privacy Policy</a> <a href="privacy_policy.html" title="Privacy Policy">Privacy Policy</a>
</div> </div>
</div> </div>
</body> </body>
</html> </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)--> <!--This is a shop. I made this because I wanted to implement a store page(keycaps.html)-->
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Shop</title> <title>Shop</title>
<link rel=stylesheet href=css/style.css> <link rel=stylesheet href=css/style.css>
</head> </head>
<body> <body>
<div id="wrap"> <div id="wrap">
<div id="header"> <div id="header">
<a href="index.html"> <a href="index.html">
<img src=images/header.png alt="header"> <img src=images/header.png alt="header">
</a> </a>
</div> </div>
<div id="navigation"> <div id="navigation">
<ul> <ul>
<li> <li>
<a href="details.html"> <a href="details.html">
<p class="nav"> <p class="nav">
details details
</p> </p>
</a> </a>
</li> </li>
<li> <li>
<a href="shop.html"> <a href="shop.html">
<p class="nav"> <p class="nav">
shop shop
</p> </p>
</a> </a>
</li> </li>
<li> <li>
<a href="downloads.html"> <a href="downloads.html">
<p class="nav"> <p class="nav">
downloads downloads
</p> </p>
</a> </a>
</li> </li>
</ul> </ul>
</div> </div>
<div id="content"> <div id="content">
<h1>Shop</h1> <h1>Shop</h1>
<a href="keycaps.html"> <a href="keycaps.html">
<img src=images/epbt/main.jpg style="width:90px;height:90px;"> <img src=images/epbt/main.jpg style="width:90px;height:90px;">
<h4>EPBT Samurai 65&#37; Keycap set <h4>EPBT Samurai 65&#37; Keycap set
<br> <br>
99,90&euro;</h4> 99,90&euro;</h4>
</a> </a>
</div> </div>
<div id="sidebar"> <div id="sidebar">
</div> </div>
<div id="footer"> <div id="footer">
<a href="contact.html" title="Contact">Contact</a> <a href="contact.html" title="Contact">Contact</a>
<a href="legal_notice.html" title="Legal Notice">Legal Notice</a> <a href="legal_notice.html" title="Legal Notice">Legal Notice</a>
<a href="privacy_policy.html" title="Privacy Policy">Privacy Policy</a> <a href="privacy_policy.html" title="Privacy Policy">Privacy Policy</a>
</div> </div>
</div> </div>
</body> </body>
</html> </html>

58
schule/info/index.html
View File

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

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

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