added: fonts and positioning slides for swp web

Author: widnig89

script/docs/assets/html/positioning-css.html

@@ -50,7 +50,7 @@
     /* 4. Fixed */
     .fixed {
       position: fixed;
-      top: 0;
+      bottom: 0;
       right: 0;
       background: darkgreen;
       z-index: 1000;
@@ -75,7 +75,7 @@
     <div class="box absolute">Absolute (in Container)</div>
   </div>
 
-  <div class="box fixed">Fixed (immer oben rechts)</div>
+  <div class="box fixed">Fixed (immer unten rechts)</div>
 
   <div class="box sticky">Sticky (klebt oben beim Scrollen)</div>
 

slides/content/slides/SWP/WEB/03_div-and-box-modell.md

@@ -65,14 +65,8 @@ layoutClass: gap-8
 
 Ziel: Einen logisch zusammengehörenden Abschnitt aus Überschrift und Text gruppieren.
 
-```html
-<div class="card">
-  <h3>HTML lernen</h3>
-  <p>HTML ist die Sprache, mit der Webseiten aufgebaut werden.</p>
-  <a href="#" class="btn">Mehr erfahren</a>
-</div>
-```
-
+- Erstelle eine vollständige HTML5 konforme `index.html` und `styles.css` Datei
+- Verlinke die `styles.css` in der `index.html`
 - Ändere die `.card` CSS Klasse
   - Ändere die Hintergrundfarbe zu `#006fca`
   - Ändere die Textfarbe zu `white`
@@ -83,6 +77,14 @@ Ziel: Einen logisch zusammengehörenden Abschnitt aus Überschrift und Text grup
 
 ::right::
 
+```html [index.html]
+<div class="card">
+  <h3>HTML lernen</h3>
+  <p>HTML ist die Sprache, mit der Webseiten aufgebaut werden.</p>
+  <a href="#" class="btn">Mehr erfahren</a>
+</div>
+```
+
 ```css [styles.css]
 .card {
   padding: 15px;