Rewrite

Aixiis · Dec 25, 2023 · 3e7c2bb · 3e7c2bb
1 parent f4a189c
commit 3e7c2bb
Show file tree

Hide file tree

Showing 5 changed files with 289 additions and 10 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/index.html b/index.html
@@ -1,14 +1,95 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
-<html>
+<!DOCTYPE html>
+<html lang="en-UK">
+
 <head>
-  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-  <meta http-equiv="Content-Style-Type" content="text/css">
-  <title></title>
-  <meta name="Generator" content="Cocoa HTML Writer">
-  <meta name="CocoaVersion" content="2487.3">
-  <style type="text/css">
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width">
+  <title>Testing Range</title>
+  <link href="style.css" rel="stylesheet" type="text/css" ; />
+  <style>
+    body {
+      background-color: darkslategrey;
+    }
+
+    h2 {
+      color: blue;
+    }
+
+    q {
+      color: yellow;
+      font-family: verdana;
+      border: 2px solid goldenrod;
+      padding: 5;
+      margin: 50px;
+    }
   </style>
 </head>
-<body>
+
+<body style="background-color:slategrey;">
+  <h1>Welcome to the testing range !</h1>
+  <script src="script.js"></script>
+  <!script src="https://replit.com/public/js/replit-badge-v2.js" theme="dark" position="bottom-right">
+    <h1>Heading h1</h1>
+    <h2>Hello</h2>
+    <a href="page.html#P1">Straight to Page 3</a>
+    <a href="#L2">More to Page 3</a>
+    <h1 style="font-size:60px;">Heading 1 but bigger</h1>
+
+
+
+
+
+    <p>Paragraph p</p>
+  <p style="color:green;background-color:lime;border:4px solid green;font-family:inherit;font-size:150%;text-align:center;"
+    title="Tooltip for the green :)">Is this green ?</p>
+    <!-- Waypoint to the green ligne -->
+    <a href="google.com">google again</a>
+    <br>
+    <b style="color:#232b2b">Bold</b>
+    <strong>Strong</strong>
+    <i>Italic</i>
+    <em>emphasized</em>
+    <mark style="background-color:greenyellow;">Marked</mark>
+    <small>Small</small>
+    <del>Deleted</del>
+    <ins>Inserted</ins>
+    <sub>Subscript</sub>
+    <sup>Superscript</sup>
+    <br>
+    <blockquote>I never ever said that shit…<sub>Einstein</sub></blockquote>
+    <q>Everything is relative</q><sub>Einstein</sub>
+    <br><abbr title="Energy is equal to Mass times the speed of light squared">E=Mc<sup>2</sup></abbr>
+    <address>Living here<br>At this time<br>For this long</address>
+    <cite>The Theory of relativity</cite>
+    <bdo dir="rtl">Backward</bdo>
+    <bdo dir="auto">Forward</bdo>
+    <hr>
+
+
+
+
+
+
+
+
+
+
+    <a href="/page.html"><img src="MacFileSVG.svg" alt="2nd Page" style="width:42px;height:42px;"></a><br>
+  <a href="/morepage.html"id="L2">Visit this site (local)!</a>
+    <a href="/morepage.html" target="_blank">Visit this site !</a>
+    <br>
+    <a href="google.com">Lil' google link<br></a>
+    <pre>
+Well
+  One more line
+    To go…</pre>
+    <hr>
+    <img src="MacFolderFilled.png" alt="Folder Image" width="100" height="100"><br>
+    <img src="MacFolderFilled.png" width="200" height="200">
+  <script type="module" src="https://unpkg.com/@splinetool/[email protected]/build/spline-viewer.js"></script>
+  <spline-viewer url="https://prod.spline.design/5YQsKGFeqIvYpaam/scene.splinecode"></spline-viewer>
+
+
 </body>
-</html>
+
+</html>
diff --git a/morepage.html b/morepage.html
@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<html lang="en-UK">
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width">
+  <title>Testing Range 2nd Page</title>
+  <style>
+    body {
+      background-color: darkslategrey;
+    }
+
+    h2 {
+      color: darkslategrey;
+    }
+
+    h2:hover {
+      color: slateblue;
+    }
+
+    .centered {
+      display: block;
+      margin-left: auto;
+      margin-right: auto;
+      text-align: center;
+    }
+
+    q {
+      color: yellow;
+      font-family: verdana;
+      border: 2px solid goldenrod;
+      padding: 5;
+      margin: 50px;
+    }
+
+    a:link {
+      color: red;
+      background-color: transparent;
+      text-decoration: none;
+    }
+
+    a:visited {
+      color: green;
+      background-color: transparent;
+      text-decoration: none;
+    }
+
+    a:hover {
+      color: greenyellow;
+      background-color: transparent;
+      text-decoration: underline;
+    }
+
+    a:active {
+      color: yellow;
+      background-color: transparent;
+      text-decoration: underline;
+    }
+  </style>
+</head>
+
+<body style="background-color:slategrey;">
+  <h2 class="centered">Some more links trickery (colors)</h2>
+  <br>
+
+  <a href="/index.html" title='Page 1: /index.html'class='centered'>
+    <p>
+      <img src="MacFolderPhoto.png" alt="Little Pic" style="float:right;width:20px;height:20px;">
+      Hello world, here's a pic
+    </p>
+  </a><br>
+
+    <img src="assets/BNWImage.jpg" style="width:80%;height:auto;" class="centered" alt="Unsplash Image">
+
+  <br><br><br>
+  <hr>
+  <br><br><button onclick="document.location='index.html'">Back to Page 1</button>
+  <br>
+</body>
+
+</html>
diff --git a/page.html b/page.html
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html lang="en-UK">
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width">
+  <title>Testing Range 2nd Page</title>
+  <!-- <link href="style.css" rel="stylesheet" type="text/css" ; /> -->
+  <style>
+    body {
+      background-color: darkslategrey;
+    }
+
+    h2 {
+      color: darkslategrey;
+    }
+
+    h2:hover {
+      color: slateblue;
+    }
+
+    img {
+      display: block;
+      margin-left: auto;
+      margin-right: auto;
+    }
+
+    .centered {
+      display: block;
+      margin-left: auto;
+      margin-right: auto;
+      text-align: center;
+    }
+
+    .render {
+      image-rendering: pixelated;
+      image-rendering: -webkit-optimize-contrast;
+      image-rendering: crisp-edges;
+      cursor: none;
+      touch-action: none;
+      top: var(--screen-underscan);
+      left: var(--screen-underscan);
+    }
+
+    q {
+      color: yellow;
+      font-family: verdana;
+      border: 2px solid goldenrod;
+      padding: 5;
+      margin: 50px;
+
+      a:link, a:visited {
+      }
+
+      a:hover, a:active {
+      }
+    }
+  </style>
+</head>
+
+<body style="background-color:slategrey;">
+  <h2 class="centered">Links by images (SVGs here)</h2>
+  <br>
+  <a href="/index.html"><img src="MacFileSVG.svg" alt="1st Page" style="width:42px;height:42px;"title="Page 1: '/index.html' or '/'"></a><br>
+  <p class="centered">Or,</p>
+
+  <a href="/morepage.html" id="P1">
+    <img src="MacFileSVG.svg" 
+      alt="3rd Page" 
+      style="width:42px;height:42px;"
+      title="Page 3: '/morepage.html'" 
+      class="centered">
+  </a>
+  <br><br><br>
+  <hr>
+  <br><br><button onclick="document.location='index.html'">Back to Page 1</button><br><br>
+  <a href="mailto:[email protected]">Send me an Email !</a>
+  <img src="BackgroundLisa2.png" alt="Test" width="512" height="342" class="render">
+
+  <img src="BackPlane.png" alt="Test" width="512" height="342">
+  <img src="BackPlane2.png" alt="Test" width="512" height="342">
+  <img src="BackPlane3.png" alt="Test" width="512" height="342">
+
+  <br>
+  <br>
+</body>
+
+</html>
diff --git a/style.css b/style.css
@@ -0,0 +1,29 @@
+html {
+  height: 100%;
+  width: 100%;
+}
+
+body {
+  background-color: blue;
+}
+
+h2 {
+  height: 100%;
+  width: 100%;
+  text-align: center;
+}
+
+a:link, a:visited {
+  background-color: #77bb41;
+  color: #38571a;
+  padding: 5px 5px;
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+}
+
+a:hover, a:active {
+  background-color: #d9eb37;
+  text-decoration: underline;
+}
+