add css demos for 223015c chapter 2: selectors, specificity, box-model, colors, pseudo, responsive

2026-04-20 10:53:11 +02:00
parent a2934f1327
commit fb361a2854
35 changed files with 747 additions and 0 deletions
--- a/slides/223015c/assets/demos/css-responsive-container.html
+++ b/slides/223015c/assets/demos/css-responsive-container.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <title>Responsive Container</title>
+  <style>
+    body { padding: 0; margin: 0; font-family: system-ui, sans-serif; background: #fff; }
+    .container {
+      padding: 1rem;
+      background: white;
+      color: #111;
+      text-align: left;
+      font-weight: 600;
+      border: 1px solid #d1d5db;
+    }
+    .container::before { content: "< 768px — weiß, padding 1rem"; }
+    @media (min-width: 768px) {
+      .container { padding: 2rem; background: red; color: white; border: none; }
+      .container::before { content: "≥ 768px — rot, padding 2rem"; }
+    }
+    @media (min-width: 1024px) {
+      .container { background: green; }
+      .container::before { content: "≥ 1024px — grün"; }
+    }
+  </style>
+</head>
+<body>
+  <div class="container"></div>
+</body>
+</html>