--- /dev/null
+<!DOCTYPE html>
+<html lang="en-GB">
+ <head>
+ <meta charset="utf-8">
+ <title>Threshold Systems</title>
+
+ <link rel="stylesheet" href="style.css">
+ <link rel="stylesheet" href="fonts.css">
+ </head>
+ <body>
+ <header>
+ <h1>Threshold Systems</h1>
+ </header>
+ <main>
+ <p class="left">
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vehicula sem id sapien ultrices tempor. Vivamus imperdiet suscipit magna, ac finibus massa ultricies vitae. Cras facilisis aliquet nisl, sed porta nibh aliquam a. Integer non ultrices leo, ac porta augue. Cras ultricies, magna in auctor porta, lorem urna dapibus enim, ac tincidunt urna ipsum eu lacus. Fusce auctor quam in magna tincidunt, sed dictum purus pharetra. Integer ut nisl neque. Duis aliquet eros non fringilla placerat. Nulla facilisi. Phasellus ornare tempus tristique. Nullam at ultricies urna, id dignissim lorem. Sed eget ipsum ullamcorper, cursus urna non, luctus purus. In justo sapien, molestie sed ex non, pellentesque pulvinar purus. Ut egestas enim nec velit porta, cursus pretium libero dictum. Sed et vehicula massa.
+ </p>
+ <h2>A Heading</h2>
+ <p class="right">
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vehicula sem id sapien ultrices tempor. Vivamus imperdiet suscipit magna, ac finibus massa ultricies vitae. Cras facilisis aliquet nisl, sed porta nibh aliquam a. Integer non ultrices leo, ac porta augue. Cras ultricies, magna in auctor porta, lorem urna dapibus enim, ac tincidunt urna ipsum eu lacus. Fusce auctor quam in magna tincidunt, sed dictum purus pharetra. Integer ut nisl neque. Duis aliquet eros non fringilla placerat. Nulla facilisi. Phasellus ornare tempus tristique. Nullam at ultricies urna, id dignissim lorem. Sed eget ipsum ullamcorper, cursus urna non, luctus purus. In justo sapien, molestie sed ex non, pellentesque pulvinar purus. Ut egestas enim nec velit porta, cursus pretium libero dictum. Sed et vehicula massa.
+ </p>
+ <div class="mediaside">
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vehicula sem id sapien ultrices tempor. Vivamus imperdiet suscipit magna, ac finibus massa ultricies vitae. Cras facilisis aliquet nisl, sed porta nibh aliquam a. Integer non ultrices leo, ac porta augue.</p><iframe src="https://www.youtube.com/embed/acxykQsh8cw?si=mz3jVQs_bOdda2i3" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+ </div>
+ </main>
+ <footer>
+ <p>
+ © <a href="https://blog.ozva.co.uk">William Greenwood</a> and <a href="#">Lauren Briggs</a> 2026
+ </p>
+ </footer>
+ </body>
+</html>
--- /dev/null
+/* Platform independant element styling */
+:root { font-family: sans-serif; }
+h1, h2, h3, h4, h5, h6 { text-align: center; }
+main { text-align: justify; }
+footer, footer a { color: gray; }
+
+/* Desktop/tablet device */
+body {
+ width: 55vw;
+ margin: auto;
+}
+main p.left {
+ width: 35em;
+ margin-right: auto;
+}
+main p.right {
+ width: 35em;
+ margin-left: auto;
+}
+
+/* mediaside */
+.mediaside iframe, .mediaside img {
+ width: 55%;
+ aspect-ratio: 16/9;
+ display: inline-block;
+}
+.mediaside iframe:first-child, .mediaside img:first-child { margin-left: -5%; }
+.mediaside iframe:last-child, .mediaside img:last-child { margin-right: -5%; }
+
+.mediaside p {
+ width: calc(50% - 40px);
+ margin: 0;
+ padding: 20px;
+ display: inline-block;
+ vertical-align: top;
+}
+.mediaside p:first-child { text-align: right; }
+
projects / threshold / commitdiff