update under construction

2025-08-25 09:37:45 +00:00
parent d273005d1c
commit 8edfd49eca
2 changed files with 66 additions and 22 deletions
--- a/index.html
+++ b/index.html
@@ -1,24 +1,68 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
+
+<!DOCTYPE html>
 <html lang="en">
-
-	<head>
-		<link href="https://fonts.googleapis.com/css2?family=Iceland&display=swap" rel="stylesheet">
-		<link rel="icon" href="/resources/img/pp.jpg" type="image/jpeg">
-		<meta charset="en">
-		<title>Peter Baker</title>
-	</head>
-
-	<body>
-		<header class="site-header" role="banner">
-			<picture>
-				<source srcset="/resources/img/pb_16_9_under512kb.webp" type="image/webp">	
-				<img src="/resources/img/pb.png" alt="Portrait of Peter" width="1280" height="372" loading="eager" decoding="async">
-			<picture>
-		</header>
-
-		<p>Whether it be IMDB’s top 250 movies or the FBI’s most wanted, lists are everywhere on the web and you are going to need one eventually in your webpages.
-Luckily, with HTML there are a couple of different types of lists at your disposal.</p>
-	</body>
-
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Website Under Construction</title>
+    <style>
+        /* Global styles */
+        * {
+            box-sizing: border-box;
+        }
+        body {
+            margin: 0;
+            padding: 0;
+            font-family: Arial, Helvetica, sans-serif;
+            /* Create a subtle diagonal caution stripe background */
+            background: repeating-linear-gradient(
+                -45deg,
+                #ffeb3b 0,
+                #ffeb3b 20px,
+                #f5c542 20px,
+                #f5c542 40px
+            );
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            min-height: 100vh;
+        }
+        .overlay {
+            background: rgba(255, 255, 255, 0.9);
+            padding: 40px;
+            border-radius: 8px;
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+            max-width: 500px;
+            text-align: center;
+        }
+        h1 {
+            margin-bottom: 20px;
+            font-size: 2.4rem;
+            color: #333;
+        }
+        p {
+            margin-bottom: 20px;
+            font-size: 1.2rem;
+            color: #555;
+        }
+        .contact {
+            font-size: 1rem;
+            color: #555;
+        }
+        a {
+            color: #007bff;
+            text-decoration: none;
+        }
+        a:hover {
+            text-decoration: underline;
+        }
+    </style>
+</head>
+<body>
+    <div class="overlay">
+        <h1>Under Construction</h1>
+        <p>I'm currently working on bringing you an amazing website. Please check back soon!</p>
+        <p class="contact">If you have any questions, feel free to <a href="mailto:connect+pp@petruspistor.com">contact me</a>.</p>
+    </div>
+</body>
 </html>
-
--- a/resources/img/underconstruction.png
+++ b/resources/img/underconstruction.png