Intro Section

Intro Sections markieren den Beginn einer Seite. Meist mit der Haupt-Überschrift h1 der Start- oder Unterseite in Kombination mit Text und/oder Bild.

Allgemeiner Hinweis:

Die Breite der Zeilen ist hier auf 1000px beschränkt, damit der Text aus Gründen der Lesbarkeit nicht so weit läuft. Verschiedene Varianten der Heading sind je nach Look möglich (Sub-Heading unten, mit Separator etc.) und werden hier nicht je Variation einzeln dargestellt.

Variante 1

Zentrierte Intro Section mit einer Heading + Sub-Heading top.

Ich bin die Sub-Heading oder auch Beschreibung

Ich bin eine h1 mit Sub-Heading darüber

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.

Variante 2

Zweispaltige Intro Section mit einer Heading inkl. Sub-Heading + Separator bottom und Freisteller einer Person. Person ragt über Hintergrund der Zeile hinaus. Das Bild ist hier zur besseren Skalierung als Hintergrund der rechten Spalte gesetzt.

Ich bin eine h1 mit Sub-Heading & Separator darunter

Ich bin die Sub-Heading oder auch Beschreibung

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.

Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Variante 3

Zweispaltige Intro Section mit einer Heading inkl. Sub-Heading + Separator bottom und Freisteller einer Person. Das Bild ist hier zur besseren Skalierung als Hintergrund der rechten Spalte gesetzt.

Ich bin eine h1 mit Sub-Heading & Separator darunter

Ich bin die Sub-Heading oder auch Beschreibung

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.

Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Variante 4

Zweispaltige Intro Section mit einer Heading inkl. Sub-Heading centered on Top. Darunter ein Textabschnitt links und ein Bild einer Person inkl. Name und ggf. Signatur. Das Bild ist hier ein normales Inline-Bild.

Ich bin eine h1 mit Sub-Heading

Ich bin die Sub-Heading oder auch Beschreibung

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.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.

Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

pexels-pixabay-220453

Ich begrüße Sie auf meiner Seite. Schauen Sie sich in Ruhe um und finden Sie das passende Angebot.

Ich bin John Dorian

Jonathan Dorian

Variante 5

Zweispaltige Intro Section mit einer Heading inkl. Sub-Heading centered + Signet on Top. Darunter zweispaltiger Text.

Ich bin eine h2 mit Sub-Heading & Signet on Top

Ich bin die Sub-Heading oder auch Beschreibung

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.

Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 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.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.

Variante 6

Intro Section mit einer Heading inkl. Sub-Heading centered + Signet rechts. Darunter eine Trennlinie + Fancy Text im Newspaper Style. (First Letter und Columns per Modul CSS)

Ich bin eine h2 mit Sub-Heading & Signet rechts

Ich bin die Sub-Heading oder auch Beschreibung

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.Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Hinweise für Entwickler:

.arc-intro-section-{n} | {n} wird hier jeweils durch die Nummer der Variante ersetzt.

!!! Einige Custom Styles müssen aus dem Modul/Spalten/Zeilen CSS extrahiert werden !!!

Nach oben scrollen