First iteration.

2023-09-09 13:15:23 +02:00
commit 585105b31b
16 changed files with 1234 additions and 0 deletions
@@ -0,0 +1,94 @@
+TAGS: Learnings
+=== QUESTION ===
+Please create an beatiful html page with links to different learning plans, linke VS Code, GPU, and so on. I will manage the list of links. The page should be in solarized dark colors.
+==== ANSWER ====
+Sure, here's a simple responsive HTML page layout with a dark solarized color scheme and a list of links to learning plans:
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link href="https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap" rel="stylesheet">
+    <style>
+        /* Solarized Dark Theme Colors */
+        :root {
+            --solarized-base03: #002b36;
+            --solarized-base02: #073642;
+            --solarized-base01: #586e75;
+            --solarized-base00: #657b83;
+            --solarized-base0: #839496;
+            --solarized-base1: #93a1a1;
+            --solarized-yellow: #b58900;
+            --solarized-orange: #cb4b16;
+        }
+
+        body {
+            font-family: 'Space Mono', monospace;
+            background-color: var(--solarized-base03);
+            color: var(--solarized-base1);
+            margin: 0;
+            padding: 2em;
+            line-height: 1.6;
+        }
+
+        h1 {
+            color: var(--solarized-yellow);
+            margin-top: 1.5em;
+        }
+
+        a {
+            color: var(--solarized-orange);
+            text-decoration: none;
+            transition: 0.3s;
+        }
+
+        a:hover {
+            text-decoration: underline;
+        }
+
+        ul {
+            list-style-type: square;
+            margin: 1em;
+            padding: 0;
+        }
+
+        ul li {
+            margin-top: 1em;
+        }
+
+        /* Adjusting layout and text size for different devices */
+        @media (max-width: 600px) {
+            body {
+                font-size: 16px;
+                padding: 1em;
+            }
+        }
+
+        @media (min-width: 601px) and (max-width: 1024px) {
+            body {
+                font-size: 18px;
+                padding: 2em;
+            }
+        }
+
+        @media (min-width: 1025px) {
+            body {
+                font-size: 20px;
+                padding: 3em;
+            }
+        }
+    </style>
+</head>
+<body>
+    <h1>Learning Plans</h1>
+    <ul>
+        <!-- LINKS_LINE -->
+    </ul>
+</body>
+</html>
+```
+
+Remember to replace the colors and style as per the Solarized Dark color scheme.