Alternative page

2025-04-24 00:22:18 +02:00 · 2025-04-24 00:22:18 +02:00 · 07a76c9abc
commit 07a76c9abc
parent fbdeb72cdf
2 changed files with 99 additions and 0 deletions
--- a/alt-styles.css
+++ b/alt-styles.css
@ -0,0 +1,76 @@
+/* Alternate minimalist, modern style for ReflectOnAI */
+
+body {
+    margin: 0;
+    font-family: 'Montserrat', 'Segoe UI', Arial, sans-serif;
+    background: #232946;
+    color: #fff;
+    min-height: 100vh;
+    box-sizing: border-box;
+}
+
+.alt-container {
+    width: 92%;
+    max-width: 600px;
+    margin: 0 auto;
+    padding: 0 1.2rem;
+}
+
+.alt-hero {
+    background: #121629;
+    color: #fffffe;
+    padding: 70px 0 36px 0;
+    text-align: left;
+    display: flex;
+    align-items: center;
+    min-height: 45vh;
+    border-bottom: 2px solid #eebbc3;
+    box-shadow: 0 2px 18px rgba(35, 41, 70, 0.09);
+}
+
+.alt-headline {
+    font-size: 2.3rem;
+    font-weight: 800;
+    margin-bottom: 0.5rem;
+    letter-spacing: 0.5px;
+    color: #eebbc3;
+}
+
+.alt-subtitle {
+    font-size: 1.1rem;
+    color: #b8c1ec;
+    margin-bottom: 0.7rem;
+    line-height: 1.7;
+}
+
+.alt-footer {
+    background: #232946;
+    color: #b8c1ec;
+    padding: 30px 0 14px 0;
+    text-align: right;
+    font-size: 1rem;
+    margin-top: 40px;
+    border-top: 1px solid #eebbc3;
+}
+
+@media (max-width: 700px) {
+    .alt-container {
+        max-width: 97vw;
+        padding: 0 4vw;
+    }
+    .alt-hero {
+        text-align: center;
+        padding: 44px 0 20px 0;
+        min-height: 28vh;
+    }
+    .alt-footer {
+        text-align: center;
+        font-size: 0.98rem;
+    }
+    .alt-headline {
+        font-size: 1.3rem;
+    }
+    .alt-subtitle {
+        font-size: 0.97rem;
+    }
+}
--- a/alt.html
+++ b/alt.html
@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>ReflectOnAI</title>
+    <link rel="stylesheet" href="alt-styles.css">
+    <link rel="icon" type="image/svg+xml" href="favicon.svg">
+</head>
+<body>
+    <header class="alt-hero">
+        <div class="alt-container">
+            <h1 class="alt-headline">ReflectOnAI</h1>
+            <p class="alt-subtitle">A space to reflect on the use of AI: the good, the bad, and the ugly.</p>
+        </div>
+    </header>
+    <footer class="alt-footer">
+        <div class="alt-container">
+            <p>&copy; 2025 ReflectOnAI. All rights reserved.</p>
+        </div>
+    </footer>
+</body>
+</html>