commit 84c45ba6bbfa4d0d0780f03b331ea7ea12b63a9f
Author: xbl <xbl@6bit.ch>
Date: Thu Mar 13 19:21:37 2025 +0100
initial commit
diff --git a/html/index.html b/html/index.html
new file mode 100644
index 0000000..80c741f
--- /dev/null
+++ b/html/index.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <title>6bit.ch</title>
+ <link rel="shortcut icon" type="image/png" href="img/favicon.png"/>
+ <link rel="stylesheet" href="style.css">
+ <link rel="author" type="text/plain" href="humans.txt">
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+ <script type="text/javascript" src="js/sparks.js"></script>
+ <script type="text/javascript" src="js/hearts.js"></script>
+</head>
+<body style="background-color:#101010;">
+ <div class="main">
+ <div id="starshine">
+ <div class="template shine"></div>
+ </div>
+ <section class=headerimg>
+ <a href="https://6bit.ch"><img src="img/6bitnobg.png"></a>
+ </section>
+ <div class="col left">
+ <section class="navblock">
+ <h4>๐ก here</h4>
+ <ul><li><a href=https://6bit.ch/snek.html>๐ Snek</a></li></ul>
+ <ul><li><a href=https://6bit.ch/things.html>๐จ Things</a></li></ul>
+ <ul><li><a href=https://6bit.ch/slamp.html>๐ก slamp</a></li></ul>
+ </section>
+ </br>
+ <section class="navblock">
+ <h4>โจ there</h4>
+ <ul><li><a href=https://hardbrugg.ch target=_blank>๐ฝ๏ธ Hardbrugg.ch</a></li></ul>
+ <ul><li><a href=https://ravemitherz.li target=_blank>๐ RAVEmitHerz.li</a></li></ul>
+ <ul><li><a href=https://rumpelkist.li target=_blank>๐ธ Rumpelkist.li</a></li></ul>
+ </section>
+ </br>
+ <section class="navblock">
+ <h4>๐ญ everywhere</h4>
+ <ul><li><a href=https://ausliebemusik.ch target=_blank>Aus Liebe</a></li></ul>
+ <ul><li><a href=https://instagram.com/catcallsofzrh target=_blank>Catcalls of Zurich</a></li></ul>
+ <ul><li><a href=https://marcp.xyz target=_blank>cramp</a></li></ul>
+ <ul><li><a href=https://le-lan.ch target=_blank>LeLAN</a></li></ul>
+ <ul><li><a href=https://jar.band target=_blank>JAR</a></li></ul>
+ </section>
+ </br>
+ </div>
+ <div class="col right">
+ <section class=contentindex>
+ <img src=img/gosu.png>
+ <p>The trajectory of this <a href=https://wikipedia.org/wiki/Earth target=_blank>ship</a> is unchanging.</p>
+ <form method="get" id="ddgSearch" action="https://duckduckgo.com/">
+ <input type="text" name="q" placeholder="DuckDuck">
+ <button type="submit">Go!</button>
+ </form>
+ </br>
+ </section>
+ </div>
+ </div>
+ <div id="" class="footer">
+ <p>Gmacht mit ๐ฎ z'Zรผri. | <a href=humans.txt>humans.txt</a></p>
+ </div>
+</body>
+</html>
diff --git a/html/slamp.html b/html/slamp.html
new file mode 100644
index 0000000..6ebb507
--- /dev/null
+++ b/html/slamp.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<head>
+ <title>6bit.ch | slamp</title>
+ <link rel="shortcut icon" type="image/png" href="img/favicon.png"/>
+ <script>
+ function changeColorBlack() {
+ var color = document.getElementById("body");
+ color.style.backgroundColor = "#000000";
+ }
+ function changeColorWhite() {
+ var color = document.getElementById("body");
+ color.style.backgroundColor = "#FFFFFF";
+ }
+ function changeColorBlue() {
+ var color = document.getElementById("body");
+ color.style.backgroundColor = "blue";
+ }
+ function changeColorGreen() {
+ var color = document.getElementById("body");
+ color.style.backgroundColor = "green";
+ }
+ function changeColorMagenta() {
+ var color = document.getElementById("body");
+ color.style.backgroundColor = "magenta";
+ }
+ function changeColorPink() {
+ var color = document.getElementById("body");
+ color.style.backgroundColor = "pink";
+ }
+ function changeColorRed() {
+ var color = document.getElementById("body");
+ color.style.backgroundColor = "red";
+ }
+ function changeColor420() {
+ var color = document.getElementById("body");
+ color.style.backgroundColor = "#000420";
+ }
+ function changeColor69() {
+ var color = document.getElementById("body");
+ color.style.backgroundColor = "#000069";
+ }
+ function changeColor42069() {
+ var color = document.getElementById("body");
+ color.style.backgroundColor = "#042069";
+ }
+ </script>
+</head>
+<body id='body'>
+ <center>
+ <h1>slamp</h1>
+ <h4>a most inefficient screenlamp</h4>
+ </br>
+ <button onclick="changeColorBlack();">Black</button>
+ <button onclick="changeColorWhite();">White</button>
+ <button onclick="changeColorBlue();">Blue</button>
+ <button onclick="changeColorGreen();">Green</button>
+ <button onclick="changeColorMagenta();">Magenta</button>
+ <button onclick="changeColorPink();">Pink</button>
+ <button onclick="changeColorRed();">Red</button>
+ <button onclick="changeColor420();">420</button>
+ <button onclick="changeColor69();">69</button>
+ <button onclick="changeColor42069();">42069</button>
+ </br>
+ </br>
+ </br>
+ <a HREF=https://6bit.ch>Back</a>
+</body>
+</html>
diff --git a/html/snek.html b/html/snek.html
new file mode 100644
index 0000000..3c02ee6
--- /dev/null
+++ b/html/snek.html
@@ -0,0 +1,198 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <title>6bit.ch | Snek</title>
+ <link rel="shortcut icon" type="image/png" href="img/favicon.png"/>
+ <link rel="stylesheet" href="style.css">
+ <link rel="author" type="text/plain" href="humans.txt">
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <script type="text/javascript" src="js/hearts.js"></script>
+</head>
+<body style="background-color:#101010;">
+ <div class="main">
+ <section class=headerimg>
+ <a href="https://6bit.ch"><img src="img/6bitnobg.png"></a>
+ </section>
+ <div class="col left">
+ <section class="navblock">
+ <h4>๐ก here</h4>
+ <ul><li><a class=active href=https://6bit.ch/snek.html>๐ Snek</a></li></ul>
+ <ul><li><a href=https://6bit.ch/things.html>๐จ Things</a></li></ul>
+ <ul><li><a href=https://6bit.ch/slamp.html>๐ก slamp</a></li></ul>
+ </section>
+ </br>
+ <section class="navblock">
+ <h4>โจ there</h4>
+ <ul><li><a href=https://hardbrugg.ch target=_blank>๐ฝ๏ธ Hardbrugg.ch</a></li></ul>
+ <ul><li><a href=https://ravemitherz.li target=_blank>๐ RAVEmitHerz.li</a></li></ul>
+ <ul><li><a href=https://rumpelkist.li target=_blank>๐ธ Rumpelkist.li</a></li></ul>
+ </section>
+ </br>
+ <section class="navblock">
+ <h4>๐ญ everywhere</h4>
+ <ul><li><a href=https://ausliebemusik.ch target=_blank>Aus Liebe</a></li></ul>
+ <ul><li><a href=https://instagram.com/catcallsofzrh target=_blank>Catcalls of Zurich</a></li></ul>
+ <ul><li><a href=https://marcp.xyz target=_blank>cramp</a></li></ul>
+ <ul><li><a href=https://le-lan.ch target=_blank>LeLAN</a></li></ul>
+ <ul><li><a href=https://jar.band target=_blank>JAR</a></li></ul>
+ </section>
+ </br>
+ </div>
+ <div class="col right">
+<canvas width="640" height="320" id="game" class="snake-box"></canvas>
+<script>
+
+var canvas = document.getElementById('game');
+var context = canvas.getContext('2d');
+
+var grid = 8;
+var count = 8;
+
+var snake = {
+ x: 160,
+ y: 160,
+
+ // snake velocity. moves one grid length every frame in either the x or y direction
+ dx: grid,
+ dy: 0,
+
+ // keep track of all grids the snake body occupies
+ cells: [],
+
+ // length of the snake. grows when eating an apple
+ maxCells: 4
+};
+var apple = {
+ x: 320,
+ y: 160,
+};
+
+// get random whole numbers in a specific range
+// @see https://stackoverflow.com/a/1527820/2124254
+function getRandomInt(min, max) {
+ return Math.floor(Math.random() * (max - min)) + min;
+}
+
+// game loop
+function loop() {
+ requestAnimationFrame(loop);
+
+ // slow game loop to 15 fps instead of 60 (60/15 = 4)
+ if (++count < 11) {
+ return;
+ }
+
+ count = 0;
+ context.clearRect(0,0,canvas.width,canvas.height);
+
+ context.font = '9px sans-serif';
+ context.fillText(snake.maxCells, 500, 75);
+
+ // move snake by it's velocity
+ snake.x += snake.dx;
+ snake.y += snake.dy;
+
+ // wrap snake position horizontally on edge of screen
+ if (snake.x < 0) {
+ snake.x = canvas.width - grid;
+ }
+ else if (snake.x >= canvas.width) {
+ snake.x = 0;
+ }
+
+ // wrap snake position vertically on edge of screen
+ if (snake.y < 0) {
+ snake.y = canvas.height - grid;
+ }
+ else if (snake.y >= canvas.height) {
+ snake.y = 0;
+ }
+
+ // keep track of where snake has been. front of the array is always the head
+ snake.cells.unshift({x: snake.x, y: snake.y});
+
+ // remove cells as we move away from them
+ if (snake.cells.length > snake.maxCells) {
+ snake.cells.pop();
+ }
+
+ // draw apple
+ context.fillStyle = 'cyan';
+ context.fillRect(apple.x, apple.y, grid-1, grid-1);
+
+ // draw snake one cell at a time
+ context.fillStyle = 'magenta';
+ snake.cells.forEach(function(cell, index) {
+
+ // drawing 1 px smaller than the grid creates a grid effect in the snake body so you can see how long it is
+ context.fillRect(cell.x, cell.y, grid-1, grid-1);
+
+ // snake ate apple
+ if (cell.x === apple.x && cell.y === apple.y) {
+ snake.maxCells++;
+
+ // canvas is 400x400 which is 25x25 grids
+ apple.x = getRandomInt(0, 25) * grid;
+ apple.y = getRandomInt(0, 25) * grid;
+ }
+
+ // check collision with all cells after this one (modified bubble sort)
+ for (var i = index + 1; i < snake.cells.length; i++) {
+
+ // snake occupies same space as a body part. reset game
+ if (cell.x === snake.cells[i].x && cell.y === snake.cells[i].y) {
+ snake.x = 160;
+ snake.y = 160;
+ snake.cells = [];
+ snake.maxCells = 4;
+ snake.dx = grid;
+ snake.dy = 0;
+
+ apple.x = getRandomInt(0, 25) * grid;
+ apple.y = getRandomInt(0, 25) * grid;
+ }
+ }
+ });
+}
+
+// listen to keyboard events to move the snake
+document.addEventListener('keydown', function(e) {
+ // prevent snake from backtracking on itself by checking that it's
+ // not already moving on the same axis (pressing left while moving
+ // left won't do anything, and pressing right while moving left
+ // shouldn't let you collide with your own body)
+
+ // left arrow key
+ if (e.which === 37 && snake.dx === 0) {
+ snake.dx = -grid;
+ snake.dy = 0;
+ }
+ // up arrow key
+ else if (e.which === 38 && snake.dy === 0) {
+ snake.dy = -grid;
+ snake.dx = 0;
+ }
+ // right arrow key
+ else if (e.which === 39 && snake.dx === 0) {
+ snake.dx = grid;
+ snake.dy = 0;
+ }
+ // down arrow key
+ else if (e.which === 40 && snake.dy === 0) {
+ snake.dy = grid;
+ snake.dx = 0;
+ }
+});
+
+// start the game
+requestAnimationFrame(loop);
+</script>
+ <p>Arrow keys required.</p>
+ </div>
+ </div>
+ <div id="" class="footer">
+ <p>Gmacht mit ๐ฎ z'Zรผri. | <a href=humans.txt>humans.txt</a></p>
+ </div>
+</body>
+</html>
diff --git a/html/style.css b/html/style.css
new file mode 100644
index 0000000..03e4a52
--- /dev/null
+++ b/html/style.css
@@ -0,0 +1,390 @@
+* {
+ margin: 0;
+ padding: 0;
+ font-family: "FiraSans", sans-serif;
+}
+
+body {
+ padding: 0;
+ margin:0;
+ background-color: #101010
+}
+
+div {box-sizing: border-box;}
+
+#starshine {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ z-index: -5;
+ overflow: hidden;
+}
+
+.shine {
+ display: block;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ background-image: url(https://6bit.ch/spark.png);
+ background-repeat: no-repeat;
+ background-position:center;
+ background-size: 100% 100%;
+ overflow: hidden;
+ z-index: 2;
+ color: transparent;
+ -moz-opacity: 0.0;
+ opacity: 0.0;
+ animation: glitter 6s linear 0s infinite normal;
+ -webkit-animation: glitter 6s linear 0s infinite normal;
+ -moz-animation: glitter 8s linear 0s infinite normal;
+ -ms-animation: glitter 8s linear 0s infinite normal;
+ -o-animation: glitter 8s linear 0s infinite normal;
+}
+
+.shine.small {
+ width: 1px;
+ height: 1px;
+}
+
+.shine.medium {
+ width: 3px;
+ height: 3px;
+}
+
+.shine.large {
+ width: 5px;
+ height: 5px;
+}
+
+/*CSS3 keyframes for glittering effect*/
+@-webkit-keyframes glitter {
+ 0% {
+ -webkit-transform: scale(0.3) rotate(0deg);
+ opacity: 0;
+ }
+ 25% {
+ -webkit-transform: scale(1) rotate(360deg);
+ opacity: 1;
+ }
+ 50% {
+ -webkit-transform: scale(0.3) rotate(720deg);
+ opacity: 0;
+ }
+ 100% {
+ -webkit-transform: scale(0.3) rotate(0deg);
+ opacity: 0;
+ }
+}
+
+.snake-box {
+ width: 99%;
+ position: relative;
+ top: 0px;
+ text-align: center;
+ margin-bottom: 1%;
+ z-index: 500;
+ text-align: center;
+ margin-bottom: 1%;
+ border: 1px cyan dotted;
+}
+
+.footer {
+ width: 100%;
+ color: #101010;
+ position: relative;
+ text-align: center;
+ padding-top: 3%;
+ background-color: #101010;
+}
+
+.footer p {
+ font-size: 13px;
+ color: #FFFFFF;
+ padding: 0px;
+ margin-top: 0px;
+}
+
+.footer a {
+ font-size: 13px;
+ color: #FFFFFF;
+ text-decoration: none;
+ padding: 0px;
+ margin-top: 0px;
+}
+
+.headerimg img {
+ width: auto;
+ margin: 50px;
+ height: auto;
+ max-height: 125px;
+}
+
+.main {
+ width: 100%;
+ height: auto;
+}
+
+.main:after {
+ content:"";
+ display: table;
+ clear: both;
+}
+
+.col {
+ position: relative;
+ color: white;
+}
+
+.navblock {
+ border: 1px;
+ border-style: dotted;
+ border-color: magenta;
+ padding-right: 25px;
+ padding-bottom: 5px;
+}
+
+.active {
+ background: linear-gradient(90deg, rgba(255,0,255,0.2) 0%, rgba(10,10,10,0) 100%);
+
+}
+
+.left {
+ width: 15%;
+ float: left;
+ left: 3%;
+}
+
+.left h4 {
+ text-decoration: none;
+ padding-right: 50px;
+ padding-left: 5px;
+ padding-bottom: 2px;
+ margin-right: 0px;
+ margin-left: 0px;
+ margin-bottom: 3px;
+ color: #101010;
+ background: rgb(0,255,255);
+ background: linear-gradient(90deg, rgba(255,0,255,1) 0%, rgba(10,10,10,0) 100%);
+ font-size: 17px;
+ font-weight: 500;
+}
+
+.left ul {
+ display: flex;
+ width: auto;
+ padding: 5px;
+ color: #FFFFFF;
+ text-decoration: none;
+ padding-left: 15px;
+ font-size: 15px;
+ list-style-type: none;
+}
+
+.left li {
+ width: 100%;
+ text-decoration: none;
+}
+
+.left a {
+ color: #FFFFFF;
+ text-decoration: none;
+ display: block;
+ padding-top: 2px;
+ padding-bottom: 2px;
+ padding-left: 5px;
+}
+
+.left a:hover {
+ background: linear-gradient(90deg, rgba(255,0,255,0.2) 0%, rgba(10,10,10,0) 100%);
+}
+
+.right {
+ position: relative;
+ width: 69%;
+ float: left;
+ left: 7%;
+}
+
+.contentindex {
+ padding: 3%;
+ width: 100%;
+ z-index: 2200;
+ text-align: left;
+ border: 1px;
+ border-style: dotted;
+ border-color: cyan;
+ text-align: center;
+}
+
+.contentindexart {
+ padding: 3%;
+ width: 100%;
+ z-index: 2200;
+ text-align: left;
+ border: 1px;
+ border-style: dotted;
+ border-color: cyan;
+ text-align: center;
+ display: flex;
+ flex-wrap: wrap;
+ gap: 50px;
+}
+
+.contentindex img {
+ width: 250px;
+ height: auto;
+ padding-top: 25px;
+ padding-bottom: 25px;
+ margin: auto;
+ display: block;
+}
+
+.contentindex p {
+ margin-top: 5px;
+ margin-bottom: 5px;
+ padding-bottom: 25px;
+}
+
+.contentindex a {
+ margin-top: 5px;
+ margin-bottom: 5px;
+ color: white;
+ text-decoration: none;
+ border-bottom: 1px dotted magenta;
+}
+
+.contentindex a:hover {
+ color: magenta;
+}
+
+.break {
+ width: 100%;
+ height: 0;
+ margin: 0;
+ padding: 0;
+}
+
+.artdesc {
+ text-align: center;
+ font-size: 13px;
+}
+
+.artitem img {
+ padding: 0;
+ height: 150px;
+ width: auto;
+}
+
+.artitem p {
+ animation: glow 1s ease-in-out infinite alternate;
+}
+
+@-webkit-keyframes glow {
+ from {
+ text-shadow: 0 0 5px magenta;
+ }
+
+ to {
+ text-shadow: 0 0 5px magenta;
+ }
+}
+
+#@-webkit-keyframes glow {
+# from {
+# text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60073, 0 0 40px #e60073, 0 0 50px #e60073, 0 0 60px #e60073, 0 0 70px #e60073;
+# }
+#
+# to {
+# text-shadow: 0 0 20px #fff, 0 0 30px #ff4da6, 0 0 40px #ff4da6, 0 0 50px #ff4da6, 0 0 60px #ff4da6, 0 0 70px #ff4da6, 0 0 80px #ff4da6;
+# }
+#}
+
+@font-face {
+ font-family: FiraSans;
+ src: url("fonts/FiraSans-Medium.otf") format: ("opentype");
+}
+
+@media(max-width: 1350px) {
+ .main {
+ overflow: hidden;
+ padding: 0;
+ margin: 0;
+ }
+ .headerimg {
+ width 248px;
+ margin-left: 5%;
+ margin-right: 5%;
+ }
+ .headerimg img {
+ display: block;
+ position: center;
+ margin: 0;
+ padding-top: 33px;
+ padding-bottom: 33px;
+ width: auto;
+ height: auto;
+ max-height: 69px;
+ margin: auto;
+ }
+ .col {
+ overflow: hidden;
+ width: 100%;
+ left: 0;
+ right: 0;
+ }
+ .left {
+ overflow: hidden;
+ width: 100%;
+ }
+ .navblock h4 {
+ font-size: 14px;
+ }
+ .navblock ul {
+ font-size: 14px;
+ }
+ .right {
+ overflow: hidden;
+ margin-top: 100px;
+ border: 1px cyan dotted;
+ width: 100%;
+ overflow: hidden;
+ }
+ .contentindex {
+ overflow: hidden;
+ border: none;
+ padding: 0;
+ margin: 0;
+ }
+ .contentindexart {
+ overflow: hidden;
+ border: none;
+ margin: 0;
+ padding: 0;
+ display: block;
+ justify-content: center;
+ }
+ .artitem {
+ padding-top: 25px;
+ padding-bottom: 25px;
+ }
+ .artitem img {
+ padding: 0;
+ height: auto;
+ width: 69%;
+ }
+ .right p {
+ margin: auto;
+ font-size: 12px;
+ }
+ .footer {
+ margin-top: 100px;
+ }
+ .footer a {
+ font-size: 11px;
+ }
+ .footer p {
+ font-size: 11px;
+ }
+}
diff --git a/html/things.html b/html/things.html
new file mode 100644
index 0000000..37b5dd7
--- /dev/null
+++ b/html/things.html
@@ -0,0 +1,150 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <title>6bit.ch | Things</title>
+ <link rel="shortcut icon" type="image/png" href="img/favicon.png"/>
+ <link rel="stylesheet" href="style.css">
+ <link rel="author" type="text/plain" href="humans.txt">
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+ <script type="text/javascript" src="js/sparks.js"></script>
+ <script type="text/javascript" src="js/hearts.js"></script>
+</head>
+<body style="background-color:#101010;">
+ <div class="main">
+ <div id="starshine">
+ <div class="template shine"></div>
+ </div>
+ <section class=headerimg>
+ <a href="https://6bit.ch"><img src="img/6bitnobg.png"></a>
+ </section>
+ <div class="col left">
+ <section class="navblock">
+ <h4>๐ก here</h4>
+ <ul><li><a href=https://6bit.ch/snek.html>๐ Snek</a></li></ul>
+ <ul><li><a class=active href=https://6bit.ch/things.html>๐จ Things</a></li></ul>
+ <ul><li><a href=https://6bit.ch/slamp.html>๐ก slamp</a></li></ul>
+ </section>
+ </br>
+ <section class="navblock">
+ <h4>โจ there</h4>
+ <ul><li><a href=https://hardbrugg.ch target=_blank>๐ฝ๏ธ Hardbrugg.ch</a></li></ul>
+ <ul><li><a href=https://ravemitherz.li target=_blank>๐ RAVEmitHerz.li</a></li></ul>
+ <ul><li><a href=https://rumpelkist.li target=_blank>๐ธ Rumpelkist.li</a></li></ul>
+ </section>
+ </br>
+ <section class="navblock">
+ <h4>๐ญ everywhere</h4>
+ <ul><li><a href=https://ausliebemusik.ch target=_blank>Aus Liebe</a></li></ul>
+ <ul><li><a href=https://instagram.com/catcallsofzrh target=_blank>Catcalls of Zurich</a></li></ul>
+ <ul><li><a href=https://marcp.xyz target=_blank>cramp</a></li></ul>
+ <ul><li><a href=https://le-lan.ch target=_blank>LeLAN</a></li></ul>
+ <ul><li><a href=https://jar.band target=_blank>JAR</a></li></ul>
+ </section>
+ </br>
+ </div>
+ <div class="col right">
+ <section class=contentindexart>
+ <div class=artitem>
+ <a href=art/clicktoris.png target=_blank><img src=art/clicktoris.png></a>
+ <p>clicktoris.org</p>
+ <p class=artdesc>image, logo</p>
+ </div>
+ <div class=artitem>
+ <a href=art/hb.png target=_blank><img src=art/hb.png></a>
+ <p>Hardbrugg.ch</p>
+ <p class=artdesc>image, logo</p>
+ </div>
+ <div class=artitem>
+ <a href=art/lelogo.png target=_blank><img src=art/lelogo.png></a>
+ <p>LeLAN</p>
+ <p class=artdesc>image, logo</p>
+ </div>
+ <div class=break></div>
+ <div class=artitem>
+ <a href=art/raverave.png target=_blank><img src=art/raverave.png></a>
+ <p>RAVE Rave</p>
+ <p class=artdesc>image, postcard</p>
+ </div>
+ <div class=artitem>
+ <a href=art/rerave.png target=_blank><img src=art/rerave.png></a>
+ <p>RAVE Re-Rave</p>
+ <p class=artdesc>image, postcard</p>
+ </div>
+ <div class=artitem>
+ <a href=art/fbn.png target=_blank><img src=art/fbn.png></a>
+ <p>RAVE Fernbedienung Nebel</p>
+ <p class=artdesc>image, postcard</p>
+ </div>
+ <div class=artitem>
+ <a href=art/bsin.png target=_blank><img src=art/bsin.png></a>
+ <p>RAVE Blazerstuhl des Lebens</p>
+ <p class=artdesc>image, postcard</p>
+ </div>
+ <div class=artitem>
+ <a href=art/dgk.png target=_blank><img src=art/dgk.png></a>
+ <p>RAVE Durchgangskonzept</p>
+ <p class=artdesc>image, postcard</p>
+ </div>
+ <div class=break></div>
+ <div class=artitem>
+ <a href=art/ccofz.png target=_blank><img src=art/ccofz.png></a>
+ <p>C of Z</p>
+ <p class=artdesc>image, sticker</p>
+ </div>
+ <div class=artitem>
+ <a href=art/1312.png target=_blank><img src=art/1312.png></a>
+ <p>Gleis 1312</p>
+ <p class=artdesc>image, sticker</p>
+ </div>
+ <div class=artitem>
+ <a href=art/grzh.png target=_blank><img src=art/grzh.png></a>
+ <p>GrZH</p>
+ <p class=artdesc>image, sticker</p>
+ </div>
+ <div class=artitem>
+ <a href=art/plan.png target=_blank><img src=art/plan.png></a>
+ <p>planlos</p>
+ <p class=artdesc>image, sticker</p>
+ </div>
+ <div class=artitem>
+ <a href=art/viv.png target=_blank><img src=art/viv.png></a>
+ <p>ViV</p>
+ <p class=artdesc>image, sticker</p>
+ </div>
+ <div class=artitem>
+ <a href=art/zbb.png target=_blank><img src=art/zbb.png></a>
+ <p>ZBB</p>
+ <p class=artdesc>image, sticker</p>
+ </div>
+ <div class=break></div>
+ <div class=artitem>
+ <a href=art/alho100.png target=_blank><img src=art/alho100.png></a>
+ <p>AlHo100</p>
+ <p class=artdesc>image, money</p>
+ </div>
+ <div class=artitem>
+ <a href=art/donot.png target=_blank><img src=art/donot.png></a>
+ <p>don't blender</p>
+ <p class=artdesc>image, 3d</p>
+ </div>
+ <div class=artitem>
+ <a href=https://www.youtube.com/watch?v=lMSjd6HNQdY target=_blank><img src=art/eve.png></a>
+ <p>EVE Online FaLiHSS (2006)</p>
+ <p class=artdesc>video, youtube</p>
+ </div>
+ <div class=artitem>
+ <a href=art/pp.pdf target=_blank><img src=art/pp.png></a>
+ <p>Postparade</p>
+ <p class=artdesc>pdf, text</p>
+ </div>
+ </br>
+ </section>
+ </div>
+ </div>
+ <div id="" class="footer">
+ <p>Gmacht mit ๐ฎ z'Zรผri. | <a href=humans.txt>humans.txt</a></p>
+ </div>
+</body>
+</html>