Überschrift 1

Überschrift 2

Überschrift 3

Überschrift 4

Überschrift 5

Überschrift 6

---

Absatz

Sind Sie aus einem bestimmten Grund hierhergekommen oder nur zum allgemeinen Riker-Bashing? Und mit maximaler Warp-Geschwindigkeit erschienen Sie für einen Augenblick an zwei Orten gleichzeitig. Wir haben einen Saboteur an Bord. Wir wissen, dass Sie mit gestohlenem Erz handeln. Aber ich möchte über das Attentat auf Lieutenant Worf sprechen. Könnte jemand 75 Jahre in einem Transporterpuffer überleben? Schicksal. Es schützt Narren, kleine Kinder und Schiffe.

Sind Sie aus einem bestimmten Grund hierhergekommen oder nur zum allgemeinen Riker-Bashing? Und mit maximaler Warp-Geschwindigkeit erschienen Sie für einen Augenblick an zwei Orten gleichzeitig. Wir haben einen Saboteur an Bord. Wir wissen, dass Sie mit gestohlenem Erz handeln. Aber ich möchte über das Attentat auf Lieutenant Worf sprechen. Könnte jemand 75 Jahre in einem Transporterpuffer überleben? Schicksal. Es schützt Narren, kleine Kinder und Schiffe.

---

Hervorhebung

1. Sind Sie aus einem bestimmten Grund hierhergekommen oder nur allgemein

2. Sind Sie aus einem bestimmten Grund hierhergekommen

3. Sind Sie hierhergekommen

4. Sind Sie aus irgendeinem Grund hierhergekommen

5. Sind Sie aus einem bestimmten Grund hierhergekommen

6. Sind Sie aus einem bestimmten Grund hierhergekommen

7. URLs und URLs in spitzen Klammern werden automatisch in Links umgewandelt. http://www.example.com oder

8. http://www.example.com und manchmal example.com (aber nicht auf Github zum Beispiel).

---

Link

Ich bin ein Inline-Style-Link

Ich bin ein Inline-Style-Link mit Titel

Ich bin ein Referenz-Style-Link

Ich bin ein relativer Verweis auf eine Repository-Datei

Sie können Zahlen für Referenz-Style-Link-Definitionen verwenden

Oder lassen Sie es leer und verwenden Sie den [Linktext selbst].

example.com (aber nicht auf Github zum Beispiel).

Einiger Text, um zu zeigen, dass die Referenzlinks später folgen können.

---

Geordnete Liste

1. Listenelement
2. Listenelement
3. Listenelement
4. Listenelement
5. Listenelement

---

Ungeordnete Liste

• Listenelement
• Listenelement
• Listenelement
• Listenelement
• Listenelement

---

Code und Syntax-Hervorhebung

HTML

<ul>
  <li class="nav-item">
    <a class="nav-link" href="/">Startseite</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="about/">Über uns</a>
  </li>
</ul>

---

CSS

img {
  vertical-align: middle;
  border: 0;
  max-width: 100%;
  height: auto;
}

---

JavaScript

window.addEventListener("load", (e) => {
  document.querySelector(".preloader").style.display = "none";
});

---

Button

Button Umriss

---

Zitat

Sind Sie aus einem bestimmten Grund hierhergekommen oder nur zum allgemeinen Riker-Bashing? Und mit maximaler Warp-Geschwindigkeit erschienen Sie für einen Augenblick an zwei Orten gleichzeitig.

---

Hinweis

---

Tab

• Tab 1
• Tab 2
• Tab 3

Sind Sie aus einem bestimmten Grund hierhergekommen?

Sind Sie aus einem bestimmten Grund hierhergekommen oder nur zum allgemeinen Riker-Bashing? Und mit maximaler Warp-Geschwindigkeit erschienen Sie für einen Augenblick an zwei Orten gleichzeitig. Wir haben einen Saboteur an Bord. Wir wissen, dass Sie mit gestohlenem Erz handeln. Aber ich möchte über das Attentat auf Lieutenant Worf sprechen.

Ich möchte über das Attentat sprechen

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Wir wissen, dass Sie mit gestohlenem Erz handeln

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo

---

Tabelle

#	Erste	Zweite	Handle
1	Zeile:1 Z:1	Zeile:1 Z:2	Zeile:1 Z:3
2	Zeile:2 Z:1	Zeile:2 Z:2	Zeile:2 Z:3
3	Zeile:3 Z:1	Zeile:3 Z:2	Zeile:3 Z:3

---

Akkordeon

Warum sollten Sie das tun?

• Moderne Web-Layouts erfordern präzise Positionierung, um visuell ansprechende Designs zu erstellen
• Responsive Design erfordert flexible Ansätze, die auf verschiedenen Bildschirmgrößen funktionieren
• CSS Grid und Flexbox bieten leistungsstarke Werkzeuge, aber das Verständnis ihres Verhaltens ist entscheidend
• Browser-Kompatibilitätsprobleme erfordern oft alternative Ansätze oder Fallbacks
• Leistungsoptimierung kann durch effiziente Layout-Techniken erreicht werden

Wie kann ich horizontale Zentrierung einstellen?

• Verwenden Sie margin: 0 auto bei Blockelementen mit definierter Breite
• Wenden Sie text-align: center auf übergeordnete Container für Inline- oder Inline-Block-Elemente an
• Nutzen Sie Flexbox mit justify-content: center auf dem übergeordneten Container
• Implementieren Sie CSS Grid mit place-items: center oder justify-items: center
• Für absolute Positionierung verwenden Sie left: 50% und transform: translateX(-50%)

Sollten Sie negative Margins verwenden?

• Negative Margins können nützlich sein, um Elemente zu überlappen oder bestimmte visuelle Effekte zu erzeugen
• Sie können helfen, Elemente näher zusammenzubringen, wenn der Standardabstand nicht ausreicht
• Seien Sie vorsichtig, da negative Margins dazu führen können, dass Elemente Inhalt überlappen oder ihre Container verlassen
• Sie können unerwartetes Verhalten erzeugen

---

Bild

---

Youtube-Video

---

Benutzerdefiniertes Video