summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authormm <mm@mm-server.fritz.box>2023-08-29 14:44:14 +0200
committermm <mm@mm-server.fritz.box>2023-08-29 14:44:14 +0200
commita3ace459ad663f9fd01624320e7c0ec7a132cdce (patch)
treeb989c1a6a01fd12f03c675b31f3584c1bd1a435a
First commit
-rwxr-xr-x404.html17
-rw-r--r--abtm/main.html42
-rw-r--r--beauty.css162
-rw-r--r--beauty.css.map1
-rwxr-xr-xbeauty.scss58
-rwxr-xr-xfonts.scss12
-rwxr-xr-xicon.pngbin0 -> 75796 bytes
-rw-r--r--licenses/main.html82
-rwxr-xr-xmain.html96
-rwxr-xr-xpage.scss154
-rw-r--r--robots.txt12
-rw-r--r--sitemap.xml15
-rw-r--r--test.html49
13 files changed, 700 insertions, 0 deletions
diff --git a/404.html b/404.html
new file mode 100755
index 0000000..34c9247
--- /dev/null
+++ b/404.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang = "en">
+ <head>
+ <meta charset="UTF-8">
+ <meta name="description" content="Mistyped the URL?">
+
+ <title>
+ Twoexem
+ </title>
+ </head>
+ <body>
+ <h1>Oops, looks like you got lost!</h1>
+ <br><hr><br>
+ Don't worry though, we can bring you back to the <a title = "Here's the way back home" href = "https://twoexem.com/">homepage</a>
+ </body>
+
+</html>
diff --git a/abtm/main.html b/abtm/main.html
new file mode 100644
index 0000000..e903477
--- /dev/null
+++ b/abtm/main.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8">
+ <meta name="description" content="About me">
+ <link rel="stylesheet" href="/beauty.css">
+ <link rel="icon" href="/icon.png" type="image/png">
+
+ <title>
+ Twoexem
+ </title>
+ </head>
+
+ <body>
+ <header>
+ <a href=/ style="display:block;width:48px;margin-left:auto;margin-right:auto">
+ <img src=/resources/icons/go-home.svg>
+ </a>
+ <h1>Something about me</h1>
+ </header>
+ <hr>
+ <main>
+ <h2>Hi.</h2>
+ <div class=center_img>
+ <img src="/resources/photography/Random stuff 2022/imm035_36A.jpg">
+ </div>
+ <br>
+ <div class=text>
+ <h3>I'm twoexem.</h3>
+ <br>
+ <!--<div class=text>-->
+ If you landed on this website, you probably already know me. If not, well, there's not really much to say about me. I'm a German student interested mostly in technical things such as computers and vintage and modern audio and video equipment like analog photo cameras, camcorders, CRT televisions, microphones, mixing consoles. I have some practical experience with the latter since I work as a stage technician and video streaming engineer, meaning I'm just the guy who gets to set up and control cameras, computers used for streaming and microphones during concerts. At home, I have a rather large <a href=/collection>collection</a> of both vintage and retro technical equipment. To improve my knowledge with electronic circuits, I recently set up a <a href=/tinkering>tinkering workbench</a> where I can play around with all sorts of things. Apart from doing exactly that in my free time, I like to <a href=/photography>take photos on my analog film cameras</a> or <a href=/videography>shoot videos with my camcorders</a>. I also experiment a lot with computers and like to disassemble them to learn more about their inner workings. If you're interested in technical details about the hard- and software running on this server, <a href=/swhw>check this page out</a>.
+ <br><br>
+ Also, just so you know, I won't collect any personal info from visitors and don't use any kind of external resources, cookies or analytics engine on this server.
+ <br><br>
+ See ya!
+ </div>
+
+ </main>
+ </body>
+</html>
+
diff --git a/beauty.css b/beauty.css
new file mode 100644
index 0000000..3d97503
--- /dev/null
+++ b/beauty.css
@@ -0,0 +1,162 @@
+.list {
+ /*border: 3px solid transparent;
+ border-radius: 5px;
+ backdrop-filter: blur(1px) brightness(80%);
+ padding: 5px;
+ //width: max-content;*/
+ display: flex;
+ justify-content: center;
+}
+.list div {
+ border: 3px solid transparent;
+ border-radius: 5px;
+ backdrop-filter: blur(1px) brightness(90%);
+ -webkit-backdrop-filter: blur(1px) brightness(80%);
+ padding: 5px;
+}
+.list div .TOOD {
+ text-align: center;
+ backdrop-filter: none;
+ -webkit-backdrop-filter: none;
+}
+
+.grid {
+ letter-spacing: 0px;
+ display: flex;
+ justify-content: center;
+ display: grid;
+ grid-template-columns: 300px 300px 300px;
+ gap: 20px;
+}
+.grid .title {
+ border: transparent solid 10px;
+ border-radius: 5px;
+ text-align: center;
+ padding: 3px;
+ max-width: auto;
+ height: auto;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ transition: 0.2s ease-in-out;
+}
+.grid .title:hover {
+ backdrop-filter: blur(5px) brightness(80%);
+ -webkit-backdrop-filter: blur(5px) brightness(80%);
+ transition: 0.2s ease-in-out;
+}
+.grid .image {
+ border-radius: 5px;
+ overflow: hidden;
+ height: 150px;
+ width: auto;
+}
+.grid img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ display: flex;
+ justify-content: center;
+}
+
+.center_img {
+ overflow: hidden;
+ width: 400px;
+ padding: 5px;
+ display: block;
+ margin-left: auto;
+ margin-right: auto;
+}
+.center_img img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ border-radius: 5px;
+}
+
+.license {
+ display: flex;
+ justify-content: center;
+ width: auto;
+}
+.license div {
+ border: 3px solid transparent;
+ border-radius: 5px;
+ padding: 5px;
+ max-width: max-content;
+ text-align: center;
+ backdrop-filter: blur(1px) brightness(80%);
+ -webkit-backdrop-filter: blur(1px) brightness(80%);
+ transition: 0.2s ease-in-out;
+}
+.license div:hover {
+ backdrop-filter: blur(5px) brightness(60%);
+ -webkit-backdrop-filter: blur(5px) brightness(60%);
+ transition: 0.2s ease-in-out;
+}
+.license div a {
+ color: white;
+}
+
+.text {
+ border: transparent solid 10px;
+ border-radius: 5px;
+ padding: 3px;
+ backdrop-filter: blur(5px) brightness(80%);
+ -webkit-backdrop-filter: blur(5px) brightness(80%);
+ color: white;
+}
+
+.title {
+ font-size: 18px;
+}
+
+@font-face {
+ font-family: "Prompt";
+ src: url("/resources/Fonts/Prompt/Prompt-Regular.ttf") format("truetype");
+ font-weight: normal;
+ font-style: normal;
+}
+html {
+ height: 100vh;
+}
+
+body {
+ text-align: center;
+ justify-content: center;
+ width: 90%;
+ max-width: auto;
+ margin: 2em auto;
+ font: 18px "Prompt";
+ letter-spacing: -1px;
+ background-image: url("resources/bg.jpg");
+ background-repeat: no-repeat;
+ background-position: top center;
+ background-size: cover;
+ background-attachment: fixed;
+}
+body a:link {
+ color: silver;
+}
+body a:visited {
+ color: aqua;
+}
+body a:hover {
+ color: white;
+}
+
+/*main {
+ border: transparent solid 10px;
+ border-radius: 5px;
+ padding: 3px;
+ backdrop-filter: blur(5px) brightness(80%);
+}*/
+header {
+ text-align: center;
+}
+header .subheader {
+ font-style: italic;
+ font-size: 25px;
+}
+
+/*# sourceMappingURL=beauty.css.map */
diff --git a/beauty.css.map b/beauty.css.map
new file mode 100644
index 0000000..fee7271
--- /dev/null
+++ b/beauty.css.map
@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["page.scss","fonts.scss","beauty.scss"],"names":[],"mappings":"AAKA;AACC;AAAA;AAAA;AAAA;AAAA;EAMA;EACA;;AAEA;EACC;EACO;EACP;EAEA;EACO;;AAEP;EACC;EACA;EAEA;;;AAKH;EAGC;EACO;EACP;EAEO;EACA;EACA;;AAGP;EACC;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EAGA;;AACA;EACC;EAEA;EACA;;AAKK;EAEQ;EACd;EACA;EACA;;AAGM;EAEQ;EACA;EACA;EACd;EACA;;;AAIF;EAEC;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA;;;AAIF;EAIQ;EACP;EACO;;AAEA;EAKQ;EACA;EACA;EACA;EACA;EACd;EAEA;EACA;;AAEA;EACsB;EAErB;EACqB;;AAGR;EAGQ;;;AAKxB;EACC;EACA;EACA;EACA;EAEA;EACA;;;AAID;EACC;;;AClJD;EACI;EACA;EACA;EACA;;ACCJ;EACC;;;AAGD;EAEC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACC;;AAED;EACC;;AAED;EACC;;;AAIF;AAAA;AAAA;AAAA;AAAA;AAAA;AAQA;EACC;;AAEA;EACC;EACA","file":"beauty.css"} \ No newline at end of file
diff --git a/beauty.scss b/beauty.scss
new file mode 100755
index 0000000..c226454
--- /dev/null
+++ b/beauty.scss
@@ -0,0 +1,58 @@
+/// Rather than writing an asslong stylesheet for every page, the parent style is defined here and then just reads a pagestle SCSS sheet
+@use 'page';
+
+// And here's the stylesheet for all used fonts:
+@use 'fonts';
+
+// The SCSS stylesheet for my good old website twoexem.com
+// The license is included in the file LICENSE.txt
+// If you did not receive a copy of the license with this file, you may download it under https://mit-license.org/
+// Copyright © 2023 Milan Mišić (eMail: fridolin.411@web.de)
+
+html {
+ height: 100vh;
+}
+
+body {
+ // Body styling section, gives everything a good look
+ text-align: center;
+ justify-content: center;
+ width: 90%;
+ max-width: auto;
+ margin: 2em auto;
+ font: 18px 'Prompt';
+ letter-spacing: -1px;
+ background-image: url("resources/bg.jpg");
+ background-repeat: no-repeat;
+ background-position: top center;
+ background-size: cover;
+ background-attachment: fixed;
+
+ // Link styling section
+ a:link {
+ color: silver;
+ }
+ a:visited {
+ color: aqua;
+ }
+ a:hover {
+ color: white;
+ }
+}
+
+/*main {
+ border: transparent solid 10px;
+ border-radius: 5px;
+ padding: 3px;
+ backdrop-filter: blur(5px) brightness(80%);
+}*/
+
+// Aligns the heading text in the center
+header {
+ text-align: center;
+
+ .subheader {
+ font-style: italic;
+ font-size: 25px;
+ }
+}
diff --git a/fonts.scss b/fonts.scss
new file mode 100755
index 0000000..9a99067
--- /dev/null
+++ b/fonts.scss
@@ -0,0 +1,12 @@
+// Copyright © 2023 Milan Mišić (eMail: fridolin.411@web.de)
+
+// Font family: Prompt
+// The license is included in the file OFL.txt
+// If you did not receive a copy of the license with this file, you may download it under https://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=OFL
+
+@font-face {
+ font-family: 'Prompt';
+ src: url('/resources/Fonts/Prompt/Prompt-Regular.ttf') format('truetype');
+ font-weight: normal;
+ font-style: normal;
+}
diff --git a/icon.png b/icon.png
new file mode 100755
index 0000000..e73de8d
--- /dev/null
+++ b/icon.png
Binary files differ
diff --git a/licenses/main.html b/licenses/main.html
new file mode 100644
index 0000000..c07f435
--- /dev/null
+++ b/licenses/main.html
@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8">
+ <meta name="description" content="Licenses">
+ <link rel="stylesheet" href="/beauty.css">
+ <link rel="icon" href="/icon.png" type="image/png">
+
+ <title>
+ Twoexem
+ </title>
+ </head>
+
+ <body>
+ <header>
+ <a href=/ style="display:block;width:48px;margin-left:auto;margin-right:auto">
+ <img src=/resources/icons/go-home.svg>
+ </a>
+ <h1>Licenses and legal information</h1>
+ </header>
+ <hr>
+ <main>
+ <div class=text>
+ I exclusively use the font "Prompt" by Cadson Demak on this website.
+ <br>
+ <a href=https://github.com/cadsondemak/prompt target=_blank>GitHub repository</a>
+ <br>
+ <a href=https://openfontlicense.org/ target=_blank>SIL Open Font License</a>
+ </div>
+ <br>
+ <div class=text>
+ The media hosted on this website, notably images and videos, are licensed under the CC BY-SA 4.0 license, unless stated otherwise.
+ <br>
+ <!-- Uncomment this once you set up the mailserver
+ <i>Note: Feel free to send an eMail to usage@twoexem.com if you use an image from this website.</i>
+ <br>
+ -->
+ <a href=https://creativecommons.org/licenses/by-sa/4.0/legalcode target=_blank>CC BY SA 4.0</a>
+ <!-- GDPR probs doesn't allow this
+ <br>
+ <a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/"><img alt="Creative Commons Lizenzvertrag" style="border-width:0" src="https://licensebuttons.net/l/by-sa/4.0/88x31.png" /></a><br />-->
+ </div>
+ <br>
+ <div class=text>
+ The HTML and CSS files used on this website are licensed under the MIT license.
+ <br>
+ <a href=git.twoexem.com/mm/twoexem.com/ target=_blank>Website source code</a>
+ <br>
+ <a href=https://mit-license.org/>MIT License</a>
+ <br>
+ <i>Note: Only the pure HTML and CSS files are made public. Media is not included in the repository.</i>
+ </div>
+ <br>
+ <div class=text>
+ This website uses material taken from the ”Breeze” icon set made by KDE.
+ <br>
+ <a href=https://www.gnu.org/licenses/lgpl-3.0.en.html target=_blank>GNU LGPL 3.0</a>
+ <br>
+ <a href=https://develop.kde.org/frameworks/breeze-icons/ target=_blank>Breeze Icons</a>
+ <!-- GDPR probs doesn't allow this
+ <br>
+ <a href=https://www.gnu.org/licenses/lgpl-3.0.en.html>
+ <img src=https://www.gnu.org/graphics/lgplv3-147x51.png>
+ </a>-->
+ </div>
+ <br>
+ <div class=text>
+ This website doesn't collect and process any kind of user data. It also does not utilize cookies and external third-party resources.
+ </div>
+ <br>
+ <div class=text>
+ Diese Website ist rein privat betrieben und besitzt keinerlei kommerziellen Hintergrund und verbreitet keine journalistischen Inhalte. Sie ist deswegen <b>nicht Impressungspflichtig</b>. Zudem erhebt und verarbeitet der Server dieser Website keinerlei persönliche Daten wie IP-Adressen o.ä. Sie ist deswegen auch <b>nicht Datenschutzerklärungspflichtig.</b>
+ </div>
+ <br>
+ <!--
+ <div class=text>
+ Support: <a href=mailto://legal@twoexem.com>legal@twoexem.com</a>
+ </div>
+ -->
+ </main>
+ </body>
+</html>
diff --git a/main.html b/main.html
new file mode 100755
index 0000000..a843214
--- /dev/null
+++ b/main.html
@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<html lang = "en">
+ <head>
+ <meta charset="UTF-8">
+ <meta name="description" content="Under construction!">
+ <link rel="stylesheet" href=/beauty.css>
+ <link rel="icon" href="icon.png" type="image/png">
+
+ <title>
+ Twoexem
+ </title>
+ </head>
+
+ <body>
+ <header>
+ <h1>Welcome to Twoexems internet website!</h1>
+ <!--<div class=subheader>Please don't DDoS it</div>-->
+ </header>
+ <hr>
+ <main>
+ <!--Here is some stuff to look at:-->
+ <div class=list>
+ <div>
+ <div class=TOOD>
+ This site is still under development and not complete.
+ <!--<div class=TOOD>-->
+ Some of the links aren't fully done yet and may lead to incomplete or missing pages.
+ </div>
+ </div>
+ </div>
+ <br>
+ <div class="grid">
+ <div class=title>
+ <i>About Me</i>
+ <div class=image>
+ <a href=/abtm>
+ <img src=/resources/twxm.jpg alt="A stylized image of twoexem.">
+ </a>
+ </div>
+ </div>
+
+ <div class=title>
+ <i>My Collection</i>
+ <div class=image>
+ <a href=/collection>
+ <img src=/resources/Retro/DSC02098.JPG alt="A photograph of a shelf full of old audio and video equipment.">
+ </a>
+ </div>
+ </div>
+
+ <div class=title>
+ <i>Software & Hardware</i>
+ <div class=image>
+ <a href=/swhw>
+ <img src=/resources/hardware.JPG alt="A photograph of the inside of the server hosting this website, a Dell Precision T7500.">
+ </a>
+ </div>
+ </div>
+ <div class=title>
+ <i>Photography</i>
+ <div class=image>
+ <a href=/photography>
+ <img src="/resources/photography/Landschaft 2023/imm005_7.jpg" alt="A beautiful analog photograph of a summer landscape.">
+ </a>
+ </div>
+ </div>
+ <div class=title>
+ <i>Videography</i>
+ <div class=image>
+ <a href=/videography>
+ <img src="/resources/photography/Random stuff 2023/coolpix/IMGA0384.JPG" alt="A self-photograph of the Panasonic NV-GS400 camcorder.">
+ </a>
+ </div>
+ </div>
+ <div class=title>
+ <i>Tinkering</i>
+ <div class=image>
+ <a href=/tinkering>
+ <img src=/resources/workbench.jpg alt="A photograph of a clean workbench with laboraty items such as a CRT monitor, solder fume ventilation system, a function generator and an oscilloscope along other things.">
+ </a>
+ </div>
+ </div>
+
+ </div>
+ <br><br>
+
+ <div class="license">
+ <div>
+ <!--<a rel="license" href="licenses" target=_blank>Images and videos on this website are licensed under the CC BY-SA 4.0 License. The full website source code (HTML and CSS files) is licensed under the MIT license. Fonts have their own licenses. Click this button to see all used licenses and the source code.-->
+ <a rel="license" href="licenses">Licenses & Legal</a>
+ </div>
+ </div>
+ </main>
+ </body>
+
+</html>
diff --git a/page.scss b/page.scss
new file mode 100755
index 0000000..b278fc4
--- /dev/null
+++ b/page.scss
@@ -0,0 +1,154 @@
+// Page stylesheet for my main start page
+// The license is included in the file LICENSE.txt
+// If you did not receive a copy of the license with this file, you may download it under https://mit-license.org/
+// Copyright © 2022 Milan Mišić (eMail: fridolin.411@web.de)
+
+.list {
+ /*border: 3px solid transparent;
+ border-radius: 5px;
+ backdrop-filter: blur(1px) brightness(80%);
+ padding: 5px;
+ //width: max-content;*/
+
+ display: flex;
+ justify-content: center;
+
+ div {
+ border: 3px solid transparent;
+ border-radius: 5px;
+ backdrop-filter: blur(1px) brightness(90%);
+ // Apple WebShit compatibility
+ -webkit-backdrop-filter: blur(1px) brightness(80%);
+ padding: 5px;
+
+ .TOOD {
+ text-align: center;
+ backdrop-filter: none;
+ // Apple WebShit compatibility
+ -webkit-backdrop-filter: none;
+ }
+ }
+}
+
+.grid {
+ // Displays the selection grid
+
+ letter-spacing: 0px;
+ display: flex;
+ justify-content: center;
+
+ display: grid;
+ grid-template-columns: 300px 300px 300px;
+ gap: 20px;
+
+ // Make the titles be good
+ .title {
+ border: transparent solid 10px;
+ border-radius: 5px;
+ text-align: center;
+ //backdrop-filter: blur(1px) brightness(100%);
+ padding: 3px;
+ max-width: auto;
+ height: auto;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+
+ // Add animations woo yeah
+ transition: 0.2s ease-in-out;
+ &:hover {
+ backdrop-filter: blur(5px) brightness(80%);
+ // Apple WebShit compatibility
+ -webkit-backdrop-filter: blur(5px) brightness(80%);
+ transition: 0.2s ease-in-out;
+ }
+
+ }
+
+ .image {
+ // Gives the grid images a nice round edge
+ border-radius: 5px;
+ overflow: hidden;
+ height: 150px;
+ width: auto;
+ }
+
+ img {
+ // Sets the images for the individual boxes properly
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ display: flex;
+ justify-content: center;
+ }
+}
+
+.center_img {
+
+ overflow: hidden;
+ width: 400px;
+ padding: 5px;
+ display: block;
+ margin-left: auto;
+ margin-right: auto;
+
+ img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ border-radius: 5px;
+ }
+}
+
+.license {
+ // Small information text about the licenses used
+
+ //font: 14px 'Varela';
+ display: flex;
+ justify-content: center;
+ width: auto;
+
+ div {
+
+
+ // Secondary div to *really* center this div
+
+ border: 3px solid transparent;
+ border-radius: 5px;
+ padding: 5px;
+ max-width: max-content;
+ text-align: center;
+ backdrop-filter: blur(1px) brightness(80%);
+ // Apple WebShit compatibility
+ -webkit-backdrop-filter: blur(1px) brightness(80%);
+ transition: 0.2s ease-in-out;
+
+ &:hover {
+ backdrop-filter: blur(5px) brightness(60%);
+ // Apple WebShit compabilitity
+ -webkit-backdrop-filter: blur(5px) brightness(60%);
+ transition: 0.2s ease-in-out;
+ }
+
+ a {
+ // Colours the link white for readability
+
+ color: white;
+ }
+ }
+}
+
+.text {
+ border: transparent solid 10px;
+ border-radius: 5px;
+ padding: 3px;
+ backdrop-filter: blur(5px) brightness(80%);
+ // Apple WebShit compatibility
+ -webkit-backdrop-filter: blur(5px) brightness(80%);
+ color: white;
+}
+
+// Font settings
+.title {
+ font-size: 18px;
+}
diff --git a/robots.txt b/robots.txt
new file mode 100644
index 0000000..145667b
--- /dev/null
+++ b/robots.txt
@@ -0,0 +1,12 @@
+User-agent: *
+Disallow: /note.txt
+Disallow: /template.html
+Disallow: /404.html
+Disallow: /resources
+Disallow: /resources/temo/
+Disallow: /testing
+
+User-agent: nsa
+Disallow: *
+
+Sitemap: https://twoexem.com/sitemap.xml
diff --git a/sitemap.xml b/sitemap.xml
new file mode 100644
index 0000000..04746bb
--- /dev/null
+++ b/sitemap.xml
@@ -0,0 +1,15 @@
+<?xml version=“1.0″ encoding=“UTF-8″?>
+<urlset xmlns=“http://www.sitemaps.org/schemas/sitemap/0.9″
+ xmlns:xsi="https://www.w3.org/2001/XMLSchema-instance"
+ xsi:schemaLocation="https://www.sitemaps.org/schemas/sitemap/0.9 https://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd">
+ <url>
+ <loc>https://twoexem.com/</loc>
+ <changefreq>weekly</changefreq>
+ <priority>1.0</priority>
+ </url>
+ <url>
+ <loc>https://git.twoexem.com/</loc>
+ <changefreq>daily</changefreq>
+ <priority>1.0</priority>
+ </url>
+</urlset>
diff --git a/test.html b/test.html
new file mode 100644
index 0000000..c4a00bb
--- /dev/null
+++ b/test.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang = "en">
+ <head>
+ <meta charset="UTF-8">
+ <meta name="description" content="Under Construction!">
+ <link rel="stylesheet" href="/beauty.css">
+ <link rel="icon" href="icon.png" type="image/png">
+
+ <title>
+ Twoexem
+ </title>
+ </head>
+
+ <body>
+ <header>
+ <h1>This is a test page.</h1>
+ </header>
+ <hr>
+ <main>
+ This is a bit of text.
+ <br>
+ I can write some funny stuff here.
+ <br>
+ Time for an image grid!
+ <br>
+ <div class="grid">
+ <div class="image">
+ <a href=/resources/testing/tempimages/imm000_2.jpg>
+ <img src=/resources/testing/tempimages/imm000_2.jpg>
+ </a>
+ </div>
+ <div class="image">
+ <a href=/resources/testing/tempimages/imm001_3.jpg>
+ <img src=/resources/testing/tempimages/imm001_3.jpg>
+ </a>
+ </div>
+ <div class="image">
+ <a href=/resources/testing/tempimages/imm002_4.jpg>
+ <img src=/resources/testing/tempimages/imm002_4.jpg>
+ </a>
+ </div>
+ <div class="image">
+ <a href=/resources/testing/tempimages/imm003_5.jpg>
+ <img src=/resources/testing/tempimages/imm003_5.jpg>
+ </a>
+ </div>
+ </div>
+ <br>
+ This works really well woooowowoyeah