1

## Primus Start Website

Dies ist ein responsive One-Pager. Im Prinzip bedeutet es, das die Webseite nur aus einem einzigen Webdokument, also nur einer HTML-Seite besteht. Alles läuft also auf einer Seite ab. Klicken Sie die Links Home, Primus, Secundus, Tertius, Quartus, Quintus, Sextus, Septus und sehen Sie wie innerhalb dieser Seite die verschiedenen Abschnitte sanft animiert angesprungen werden.

Das sogenannte 'Smooth Scrolling' dient der besseren Orientierung, denn das Sprungziel wird optisch gut sichtbar angesteuert und funktionert auch ausserhalb der Hauptnavigation, entdecken Sie hierzu die allgemeinen Text-Links im Inhaltsbereich.
Links oder Buttons mit der Aufschrift 'Mehr Lesen' bwz. 'Weiter' o.ä. öffnen ein Fenster mit weiteren Inhalt als div-Box per CSS innerhalb der selben Seite. Dies ist eine Javascript-freie Lösung. Auch die Links im Fussbereich (Impressum, Datenschutz, Disclaimer) haben wir für Sie schon als Boxfenster-Links angelegt, gerne lassen sich natürlich auch weitere Boxfenster anlegen, wie wir es nachfolgend als Tutorial (Klick auf Button) beschreiben.
Mehr Erfahren
2

## Secundus About Us

Ad mel laudem offendit, ei vis dignissim forensibus, mea et iuvaret labores scripserit. Iudico doctus sadipscing te vis, an natum atomorum honestos.

Cras ultricies mi eu turpis hendrerit fringilla. Smooth-Scroll to BOTTOM. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia. Nam pretium turpis et arcu. Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Sed aliquam ultrices mauris. Smooth-Scroll to QUINTUS.
Mehr Lesen
3

## Tertius Foto-Gallerie

Bilder sagen oft mehr als Worte. Lightbox Foto-Gallerie. Klicken Sie den nachstehenden Button und Sie gelangen zu unserer kleinen Foto-Gallerie, welche sich in einer Box innerhalb dieser Seite öffnet.

So funktioniert diese Foto-Schau: Nach Klick auf einem Foto öffnet sich ein neues Fenster mit dem Foto sowie einer Bildunterschrift. Tolles Feature: Fahren Sie mit der Maus über die rechte oder linke Fotohälfte. Es erscheint dann ein Pfeil, welcher Sie durch Klick auf diesen immer weiter zum nächsten bzw. vorangehendem Foto führt. In diesem Fenster lässt sich also eine ganze Bildkollektion durchsehen. Zum Schließen des Fenster klickt man auf das 'X' oder irgendwo ausserhalb des Fensters.
Zur Foto-Galerie
4

## Quartus Technik

Ad mel laudem offendit, ei vis dignissim forensibus, mea et iuvaret labores scripserit. Iudico doctus sadipscing te vis, an natum atomorum honestatis.

Responsive Webdesign ermöglicht eine Anpassung bzw. Optimierung der unterschiedlichen Bildschirmgrößen von Smartphone, Tablet, Notebook, Laptop und Desktop-PC innerhalb einer einzigen Webseite. Dazu werden per CSS-Media Queries die verschiedenen Bildschirmgrössen abgefragt. Somit kann man auch auf das Hoch- oder Querformat eines mobilen Gerätes reagieren.
Strukturierte Abschnitte: Sie sehen auf dieser Webseite verschiedene Abschnitte, die farbig getrennt sind. Wir erklären Ihnen, wie wir das angelegt haben, klicken Sie hierzu den nachstehenden Button.
Mehr Lesen
5

## Quintus Unsere Leistungen

### Power On - Boom Bang!

### Television Full HD

### Calculate Power

### Almost Full Charge

### Plug In / Electricity On

### Hard Disk Drive

Mehr Lesen
6

## Sextus Kontakt

Willkommen auf unsererer Seite. Sie möchten mit uns in Kontakt treten? Gerne doch. Nachfolgend finden Sie unsere Öffnungszeiten und Kontaktdaten sowie beim entsprechenden Button die Adresse / Anfahrts-Beschreibung.

### Öffnungszeiten

- MO - FR:10.00 - 18.00 Uhr
- DO:09.00 - 13.00 Uhr
- SA:09.00 - 16.00 Uhr

### Phone / Mail

- Phone: (0000) 0000000-50
- Mobile: (+49) 0000-1234567
- Fax: (0000) 7654321-4141
- info@muster-mustermann.de

Adresse / Anfahrt
7

## Septus Last but not least

Septus ist der siebte Abschnitt. Praesent vestibulum dapibus nibh. Etiam iaculis nunc ac metus. Ut id nisl quis enim dignissim sagittis. Etiam sollicitudin, ipsum eu pulvinar rutrum, tellus ipsum quis venenatis ante odio sit amet eros.

Suspendisse feugiat. Suspendisse enim turpis, dictum sed, iaculis a, condimentum nec, nisi. Praesent nec nisl a purus blandit viverra. Praesent ac massa Smooth-Scroll to TOP at ligula laoreet iaculis . Nulla neque dolor, sagittis eget, iaculis quis, molestie non, velit. Mauris turpis nunc, blandit et, volutpat molestie, porta ut, ligula. Fusce pharetra convallis urna. Quisque ut nisi.
Vestibulum facilisis, purus nec pulvinar iaculis, ligula mi congue nunc, vitae euismod ligula urna in dolor. Mauris sollicitudin fermentum libero. Smooth-Scroll to SECUNDUS. Praesent nonummy mi in odio. Nunc interdum lacus sit amet orci. Vestibulum rutrum, mi nec elementum vehicula, eros quam gravida nisl, id fringilla neque ante vel mi. Morbi mollis tellus ac sapien.

## Box-Fenster Primus

### Big Icons

Hier sehen sie im Inhaltsbereich extra große Icons, welche wir zudem animiert haben. Und zwar mit CSS Keyframes-Animation. Diese Icons sind keine Grafiken, sondern sog. Font-Icons, welche als Icon-Schrift, die ja bereits anbei ist, eingebunden werden. Diese Icon-Schrift stammt von 'Fontawesome' und Sie können natürlich die Beispiel-Icons im Template durch andere Icons ersetzen.

### One-Pager

Bein einem One-Pager, auch genannt Single-Page, spielt sich alles auf einer Seite ab. Die ganze Webseite besteht also nur aus einer einzigen HTML-Seite. Viele Ihrer Besucher werden diese Einfachheit und Direktheit sicherlich zu schätzen wissen.

### Fenster öffnen auf der selben Seite

Per div-Box (deshalb Boxfenster genannt) öffnen sich Fenster direkt innerhalb der selben Seite bei Klick auf den Buttons bei den jeweiligen Abschnitten im Inhaltsbereich sowie bei den Links im Fussbereich unter 'Rechtliches'. Gerne legen Sie nach diesem Prinzip nur bei Bedarf weitere neue Fenster an bzw. löschen auch nicht benötigte.

### Neue Fenster anlegen

Hinweis: Der fettgedruckte Teil bei den nachfolgenden Code-Beispielen soll Ihnen bereits zeigen, wie Sie ein neues Fenster anlegen bzw. zum vorhandenen Code hinzufügen!
So sieht die Verlinkung bei den Buttons/Links 'Primus', 'Secundus' und 'Tertius' in der HTML-Datei aus.

    HTML
    <label for="open-primus"><a>Mehr Erfahren</a></label>
    <label for="open-secundus"><a>Mehr Lesen</a></label>
    <label for="open-tertius"><a>Zur Foto-Galerie</a></label>
    <label for="open-ihr-fenster"><a>Ihr Fenster</a></label>

So sieht also ein einzelner Text-Link zum Fenser öffnen aus:

    HTML
    <label for="open-ihr-fenster"><a>Ihr Fenster</a></label>

Dieser Text-Link funktioniert schon prima und würde auch reichen, aber um gfls. je nach Situation daraus einen Button zu machen, haben wir für die diesbezügliche Formatierung noch unsere CSS-Klassen 'button' und 'mehr_lesen' darum herum gelegt:

    HTML
    <div class="button"><span class="mehr_lesen">
    <label for="open-ihr-fenster"><a>Ihr Fenster</a></label>
    </span></div>

Und hier ist die dazugehörige Einschalt-Funktion dieser Fenster in der CSS-Datei ('boxfenster.css):

    CSS
    /* schaltfunktion AN / AUS */
    input#open-primus:checked ~ .boxfenster,
    input#open-secundus:checked ~ .boxfenster,
    input#open-tertius:checked ~ .boxfenster ,
    input#open-ihr-fenster:checked ~ .boxfenster {
    margin:0;
    background:rgba(0,0,0,.7);
    opacity:1;
    }

Das eigentliche Fenster ist in der HTML-Datei dann wie folgt unter Einbindung eines Fenster-Schließen-Buttons gestaltet, hier am Beispiel des 'Primus-Links':

    HTML
    <div class="schalter">
    <input type="checkbox" id="open-primus">
    <div class="boxfenster">
    <div class="boxinhalt">
    <label class="button-close" for="open-primus"><i class="far fa-window-close"></i></label>
    . . . Hier steht der Primus Text . . .
    </div></div></div>

Und so würde es entsprechend für ihr neu anzulegendes Fenster aussehen:

    HTML
    <div class="schalter">
    <input type="checkbox" id="open-ihr-fenster">
    <div class="boxfenster">
    <div class="boxinhalt">
    <label class="button-close" for="open-ihr-fenster"><i class="far fa-window-close"></i></label>
    . . . Hier steht der Text fuer ihr neues Fenster . . .
    </div></div></div>

## Box-Fenster Secundus

### Werther

Eine wunderbare Heiterkeit hat meine ganze Seele eingenommen, gleich den süßen Frühlingsmorgen, die ich mit ganzem Herzen genieße. Ich bin allein und freue mich meines Lebens in dieser Gegend, die für solche Seelen geschaffen ist wie die meine.
Ich bin so glücklich, mein Bester, so ganz in dem Gefühle von ruhigem Dasein versunken, daß meine Kunst darunter leidet. Ich könnte jetzt nicht zeichnen, nicht einen Strich, und bin nie ein größerer Maler gewesen als in diesen Augenblicken.
Wenn das liebe Tal um mich dampft, und die hohe Sonne an der Oberfläche der undurchdringlichen Finsternis meines Waldes ruht, und nur einzelne Strahlen sich in das innere Heiligtum stehlen, ich dann im hohen Grase am fallenden Bache liege, und näher an der Erde tausend mannigfaltige Gräschen mir merkwürdig werden; wenn ich das Wimmeln der kleinen Welt zwischen Halmen, die unzähligen, unergründlichen Gestalten der Würmchen, der Mückchen näher an meinem Herzen fühle, und fühle die Gegenwart des Allmächtigen, der uns nach seinem Bilde schuf, das Wehen des Alliebenden, der uns in ewiger Wonne schwebend trägt und erhält; mein Freund!
Wenn's dann um meine Augen dämmert, und die Welt um mich her und der Himmel ganz in meiner Seele ruhn wie die Gestalt einer Geliebten - dann sehne ich mich oft und denke : ach könntest du das wieder ausdrücken, könntest du dem Papiere das einhauchen, was so voll, so warm in dir lebt, daß es würde der Spiegel deiner Seele, wie deine Seele ist der Spiegel des unendlichen Gottes!

## Box-Fenster Tertius

### Picture Gallery - Das Lightbox-Jquery-Script

Nachstehend unsere Bilder-Gallerie. So funktioniert diese Foto-Schau: Nach Klick auf einem Foto öffnet sich ein neues Fenster mit dem Foto sowie einer Bildunterschrift und einer Anzeige (Bild X von Anzahl X), gleichzeitig dunkelt sich die komplette Webseite im Hintergrund ab. Es ist ein Jquery-Script.
Tolles Feature: Nachdem Sie ein Bild geklickt haben, fahren Sie mit der Maus über die rechte oder linke Fotohälfte des Bildes. Es erscheint dann ein Pfeil, welcher Sie durch Klick auf dieses immer weiter zum nächsten bzw. vorangehendem Foto führt. In diesem Fenster lässt sich also eine ganze Bildkollektion durchsehen. Zum Schließen des Fenster klickt man auf das 'Schließen-Symbol' oder irgendwo ausserhalb des Fensters.

### Lightbox auf allen Fotos

Sie sehen nicht nur auf dieser Seite (index4.html) die Lightbox-Gallery, sondern wir haben auch eine auf der Startseite (index.html) angelegt. Übrigens: Sie könnten das Lightbox-Script auch auf alle anderen Fotos, welche mit dem 'img-Tag' (und nicht als 'Hintergrund-Image') eingebaut sind, anwenden. Die entsprechenden Änderungen dazu sind nur in der HTML-Datei zu tätigen, denn das Script ist ja bereits eingebaut. Hier ist der Basis-Code als Beispiel:
Bild ohne Lightbox:

    HTML
    <img src="images/beispiel.jpg" width="800" height="530">

Bild mit Lightbox:

    HTML
    <a href="images/beispiel.jpg"
    data-lightbox="gruppe1"
    data-title="Ihre Bildunterschrift">
    <img src="images/beispiel.jpg" width="800" height="530"></a>

Noch ein Hinweis: 'data-title' für eine Bildunterschrift ist optional und sollten Sie eine zweite Gallerie innerhalb der selben HTML-Datei aufmachen, so schreiben Sie bei der zweiten Gallerie dann bei 'data-lightbox' gruppe2 statt gruppe1.

## Foto-Galerie Lightbox

## Die Original-Lightbox

Hier einmal der Link zur originalen Lightbox-Gallery. Dort finden Sie bei Bedarf auch unter 'Options' noch verschiedene Möglichkeiten der Einstellung. Anhand der guten, weil einfachen Beispiele (Examples), erkennen Sie sehr schnell das Prinzip der Gallerie. Außerdem können Sie somit auch besser nachvollziehen, wie wir die Fotos bei unserer Gallerie responsive angelegt haben, denn diese responsive Anordnung ist ja nicht automatisch im genannten Script der Lightbox enthalten.

## Box-Fenster Quartus - Die Abschnitte im Inhalt

### Mit Pseudo-Element 'nth-child(n)'

Auf der Seite (index.html) sehen Sie im Inhaltsbereich mehrere Abschnitte, die farbig getrennt sind. Wie wir diese angelegt haben und wie Sie auch mehr oder weniger Abschnitte anlegen können, erklären wir Ihnen nachstehend.
Der Pseudo-Selektor :nth-child(n) ist sehr hilfreich, wenn man gleiche Elemente innerhalb eines Elternelement verschieden aussehen lassen möchte. Insbesondere bei Wiederholungen ist dies effektiv.

### Alle Möglichkeiten:

SELFHTML-Wiki beschreibt es, aber noch viel übersichtlicher und mit sehr vielen Beispielen erklärt es die Webseite h5c3 .

### Die wichtigsten Möglichkeiten:

Wie an den vorstehend genannten Links zu sehen, gibt es mehrere 'nth-child-Selektoren'. Nachfolgend möchten wir aber Ihnen die wichtigsten beschreiben:
1.) Einfache 'nth-child-Selektoren':
1.a) Spricht jeden Abschnitt individuell an:
'nth-child(1)' spricht den ersten Abschnitt an.
'nth-child(2)' spricht den zweiten Abschnitt an.
'nth-child(3)' spricht den dritten Abschnitt an.
'nth-child(4)' spricht den vierten Abschnitt an usw.
1b) Spricht jeden zweiten Abschnitt an:
'nth-child(odd)' spricht jeden ungeraden Abschnitt an (also 1, 3 ,5, 7 usw).
'nth-child(even)' spricht jeden geraden Abschnitt an (also 2, 4, 6, 8 usw).
|| Fazit: Gestalt man jetzt noch den Kopf-und den Fussbereich in anderen Farben, so hat man hiermit schon ein sehr professionelles Ergebnis erzielt.
1c) Eine Mischung von 1a) und 1b) ist noch effektiver, zum Beispiel wie folgt:
'nth-child(odd)' spricht jeden ungeraden Abschnitt an (also 1, 3 ,5, 7 usw).
'nth-child(even)' spricht jeden geraden Abschnitt an (also 2, 4, 6, 8 usw).
'nth-child(4)' spricht nur den vierten Abschnitt an und überschreibt damit nur den 'even-Abschnitt-4'.
'nth-child(5)' spricht nur den fünften Abschnitt an und überschreibt damit nur den 'odd-Abschnitt-5'.
|| Fazit: Somit wechselt sich jeder zweite Abschnitt farblich ab, egal wie viele Abschnitte - und um das Muster zu durchbrechen wird hier im Beipspiel der vierte und fünfte Abschnitt als Variation genutzt.
2.) Erweiterte 'nth-child-Selektoren':
Jetzt wird es noch variabler. Hier im Beispiel die Anweisungen für jeden dritten anzusprechenden Abschnitt.
'nth-child(3n+1)' spricht den ersten Abschnitt an und ab diesen jeden dritten Abschnitt.
D.h. Abschnitt 1, Abschnitt 4, Abschnitt 7 usw. sind identisch.
'nth-child(3n+2)' ist für den zweiten Abschnitt zuständig und ab diesen wird jeder dritte Abschnitt angesprochen.
D.h. Abschnitt 2, Abschnitt 5, Abschnitt 8 usw. sind identisch.
'nth-child(3n+3)' spricht den dritten Abschnitt an und ab diesen jeden dritten Abschnitt.
D.h. Abschnitt 3, Abschnitt 6, Abschnitt 9 usw. sind identisch.
'nth-child(3n+4)' spricht den vierten Abschnitt an und ab diesen jeden dritten Abschnitt.
D.h. Abschnitt 4, Abschnitt 7, Abschnitt 10 usw. sind identisch.

### Wie funktioniert es in diesem Template ?

Wir haben den 'nth-child-Selektor' für die Abschnitte in der Datei format.css angelegt. Und zwar haben wir den 'nth-child-Selektor' auf unsere CSS-Klasse namens 'section-inhalt' gesetzt und hierbei 'nth-child(odd/even)' verwendet.

    CSS
    <!-- Allgemeines Beispiel-->
    .section-inhalt:nth-child(odd) {
    background:white;
    color:#000;
    }
    .section-inhalt:nth-child(even) {
    background:black;
    color:#fff;
    }

So sieht ein Abschnitt in der HTML-Datei aus:

    HTML
    <!-- ABSCHNITT -->
    <div class="section-inhalt">
    <div class="inhalt-a">
    ... Inhalt ...
    </div>
    </div>
    <!-- E N D E ABSCHNITT -->

So sehen zwei Abschnitte in der HTML-Datei aus:

    HTML
    <!-- ABSCHNITT -->
    <div class="section-inhalt">
    <div class="inhalt-a">
    ... Inhalt Abschnitt 1 ...
    </div>
    </div>
    <!-- E N D E ABSCHNITT -->

    <!-- ABSCHNITT -->
    <div class="section-inhalt">
    <div class="inhalt-a">
    ... Inhalt Abschnitt 2 ...
    </div>
    </div>
    <!-- E N D E ABSCHNITT -->

Sehr praktisch und übersichtlich: Der Code für die Abschnitte ist also in der HTML-Datei immer der gleiche, egal wieviele Abschnitte, denn die Änderungen erfolgen ja einzig und allein in der CSS-Datei 'format.css' über den CSS-Befehl 'nth-child(n)'.

## Box-Fenster Qintus Leistungen

### What We Offer

Praesent porttitor, nulla vitae posuere iaculis, arcu nisl dignissim dolor, a pretium mi sem ut ipsum. Curabitur suscipit suscipit tellus. Praesent vestibulum dapibus nibh. Etiam iaculis nunc ac metus. Ut id nisl quis enim dignissim sagittis. Etiam sollicitudin, ipsum eu pulvinar rutrum, tellus ipsum laoreet sapien, quis venenatis ante odio sit amet eros. Proin magna.
Duis vel nibh at velit scelerisque suscipit. Curabitur turpis. Vestibulum suscipit nulla quis orci. Fusce ac felis sit amet ligula pharetra condimentum. Maecenas egestas arcu quis ligula mattis placerat. Duis lobortis massa imperdiet quam. Suspendisse potenti. Pellentesque commodo eros a enim. Vestibulum turpis sem, aliquet eget, lobortis pellentesque, rutrum eu, nisl. Sed libero.
Aliquam erat volutpat. Etiam vitae tortor. Morbi vestibulum volutpat enim. Aliquam eu nunc. Nunc sed turpis. Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nulla porta dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Pellentesque dapibus hendrerit tortor.

### Weitere Leistungen

### Vivamus Egatas Much Profit

### Logisticus Profundus Erectus

### Statistica Documenta

### Lorem Ipsum

### Technika Innoventa Radius

### Headphones Best Quality

## Box-Fenster Sextus

### Adresse

Luigi Pietro De Olivero Al Canta
Bellaroma Street No. 10
12345 New Heavenport
United States Of America

### Anfahrt 1

So errreichen Sie uns: Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt.

### Anfahrt 2

So errreichen Sie uns: Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

## Box-Fenster Sextus

### Bilder

Die Fotos in dieser Vorlage sind von https://picjumbo.com/ . Wir haben diese responsive angelegt. Gerne können Sie natürlich auch Ihre eigenen Fotos verwenden.

### Icons

Viele weitere Icons sind möglich, denn die Icon-Schrift "FontAwesome" ist ja bereits in dieser Vorlage installiert. So fügen Sie ggfls. weitere Icons hinzu oder ersetzen die vorhandenen.
Die Dateien der Icon-Schrift sind also bereits diesem Template beigefügt mit dem großen Vorteil, das die Icons somit auch geladen und angezeigt werden, wenn keine Internet-Verbindung besteht.
Die Icon-Schrift kann aber statt dessen auch noch einfacher durch einen entsprechenden Link im Kopfbereich der Seite aufgerufen werden, die Schrift wird dann serverseitig geladen, sehen Sie hierzu die Erklärungen auf der Seite des Anbieters. Dies mag für manche der leichtere Weg sein, falls man ein Versions-Update aktualisieren möchte. Aber wie gesagt: Besteht keine Internet-Verbindung, so wird in diesem Fall auch kein Icon angezeigt.

### Alpha Sextus

Sed augue ipsum, egestas nec, vestibulum et, malesuada adipiscing, dui. Vestibulum facilisis, purus nec pulvinar iaculis, ligula mi congue nunc, vitae euismod ligula urna in dolor. Mauris sollicitudin fermentum libero. Praesent nonummy mi in odio. Nunc interdum lacus sit amet orci. Vestibulum rutrum, mi nec elementum vehicula, eros quam gravida nisl, id fringilla neque ante vel mi. Morbi mollis tellus ac sapien. Phasellus volutpat, metus eget egestas mollis, lacus lacus blandit dui, id egestas quam mauris ut lacus.

### Beta Sextus

Fusce vel dui.Ut tincidunt tincidunt erat. Etiam feugiat lorem non metus. Vestibulum dapibus nunc ac augue. Curabitur vestibulum aliquam leo. Praesent egestas neque eu enim. In hac habitasse platea dictumst. Fusce a quam. Etiam ut purus mattis mauris sodales aliquam. Curabitur nisi. Quisque malesuada placerat nisl. Nam ipsum risus, rutrum vitae, vestibulum eu, molestie vel, lacus.

### Delta Sextus

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.

## Box-Fenster Impressum

### Hinter den Worten

Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans. Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den nötigen Regelialien.

### Blindtext

Es ist ein paradiesmatisches Land, in dem einem gebratene Satzteile in den Mund fliegen. Nicht einmal von der allmächtigen Interpunktion werden die Blindtexte beherrscht - ein geradezu unorthographisches Leben. Eines Tages aber beschloß eine kleine Zeile Blindtext, ihr Name war Lorem Ipsum, hinaus zu gehen in die weite Grammatik.
Der große Oxmox riet ihr davon ab, da es dort wimmele von bösen Kommata, wilden Fragezeichen und hinterhältigen Semikoli, doch das Blindtextchen ließ sich nicht beirren. Es packte seine sieben Versalien, schob sich sein Initial in den Gürtel und machte sich auf den Weg.
Als es die ersten Hügel des Kursivgebirges erklommen hatte, warf es einen letzten Blick zurück auf die Skyline seiner Heimatstadt Buchstabhausen, die Headline von Alphabetdorf und die Subline seiner eigenen Straße, der Zeilengasse. Wehmütig lief ihm eine rhetorische Frage über die Wange, dann setzte es seinen Weg fort. Unterwegs traf es eine Copy.
Die Copy warnte das Blindtextchen, da, wo sie herkäme wäre sie zigmal umgeschrieben worden und alles, was von ihrem Ursprung noch übrig wäre, sei das Wort "und" und das Blindtextchen solle umkehren und wieder in sein eigenes, sicheres Land zurückkehren.

### Die Werbetexter

Doch alles Gutzureden konnte es nicht überzeugen und so dauerte es nicht lange, bis ihm ein paar heimtückische Werbetexter auflauerten, es mit Longe und Parole betrunken machten und es dann in ihre Agentur schleppten, wo sie es für ihre Projekte wieder und wieder mißbrauchten. Und wenn es nicht umgeschrieben wurde, dann benutzen Sie es immernoch.

## Box-Fenster Datenschutz

### Datenschutz 01

Eine wunderbare Heiterkeit hat meine ganze Seele eingenommen, gleich den süßen Frühlingsmorgen, die ich mit ganzem Herzen genieße. Ich bin allein und freue mich meines Lebens in dieser Gegend, die für solche Seelen geschaffen ist wie die meine.
Ich bin so glücklich, mein Bester, so ganz in dem Gefühle von ruhigem Dasein versunken, daß meine Kunst darunter leidet. Ich könnte jetzt nicht zeichnen, nicht einen Strich, und bin nie ein größerer Maler gewesen als in diesen Augenblicken.

### Datenschutz 02

Wenn das liebe Tal um mich dampft, und die hohe Sonne an der Oberfläche der undurchdringlichen Finsternis meines Waldes ruht, und nur einzelne Strahlen sich in das innere Heiligtum stehlen, ich dann im hohen Grase am fallenden Bache liege, und näher an der Erde tausend mannigfaltige Gräschen mir merkwürdig werden; wenn ich das Wimmeln der kleinen Welt zwischen Halmen, die unzähligen, unergründlichen Gestalten der Würmchen, der Mückchen näher an meinem Herzen fühle, und fühle die Gegenwart des Allmächtigen, der uns nach seinem Bilde schuf, das Wehen des Alliebenden, der uns in ewiger Wonne schwebend trägt und erhält; mein Freund!

### Datenschutz 03

Wenn's dann um meine Augen dämmert, und die Welt um mich her und der Himmel ganz in meiner Seele ruhn wie die Gestalt einer Geliebten - dann sehne ich mich oft und denke : ach könntest du das wieder ausdrücken, könntest du dem Papiere das einhauchen, was so voll, so warm in dir lebt, daß es würde der Spiegel deiner Seele, wie deine Seele ist der Spiegel des unendlichen Gottes!

## Box-Fenster Disclaimer

### Allein in der Dunkelheit

Er hörte leise Schritte hinter sich. Das bedeutete nichts Gutes. Wer würde ihm schon folgen, spät in der Nacht und dazu noch in dieser engen Gasse mitten im übel beleumundeten Hafenviertel? Gerade jetzt, wo er das Ding seines Lebens gedreht hatte und mit der Beute verschwinden wollte!
Hatte einer seiner zahllosen Kollegen dieselbe Idee gehabt, ihn beobachtet und abgewartet, um ihn nun um die Früchte seiner Arbeit zu erleichtern? Oder gehörten die Schritte hinter ihm zu einem der unzähligen Gesetzeshüter dieser Stadt, und die stählerne Acht um seine Handgelenke würde gleich zuschnappen? Er konnte die Aufforderung stehen zu bleiben schon hören.
Gehetzt sah er sich um. Plötzlich erblickte er den schmalen Durchgang. Blitzartig drehte er sich nach rechts und verschwand zwischen den beiden Gebäuden. Beinahe wäre er dabei über den umgestürzten Mülleimer gefallen, der mitten im Weg lag.
Er versuchte, sich in der Dunkelheit seinen Weg zu ertasten und erstarrte: Anscheinend gab es keinen anderen Ausweg aus diesem kleinen Hof als den Durchgang, durch den er gekommen war. Die Schritte wurden lauter und lauter, er sah eine dunkle Gestalt um die Ecke biegen. Fieberhaft irrten seine Augen durch die nächtliche Dunkelheit und suchten einen Ausweg. War jetzt wirklich alles vorbei?

## Box-Fenster AGB

### -AGB 01-

Scripta persecuti vituperatoribus mea te, assum consequat an eam. Viris labore assentior per te, pri perfecto ocurreret ea, offendit sapientem cum ex. Pro tamquam albucius voluptaria ad, cu his lorem postulant, cu usu ornatus phaedrum adipisci.
Viderer persius dissentiunt pro no, iuvaret consulatu in mel, qui an aeterno torquatos. Eos ad eros ullum tacimates. Falli latine delicata ei sit, has at erat sale consulatu.
Idque dolore inimicus quo cu, ne has iusto labore theophrastus. Primis percipit atomorum ius eu. Odio splendide pro id. Elitr adolescens argumentum id pro, id enim cetero mea.

### -AGB 02-

Ut persius nominati delicata cum, ei nullam utamur pro. Mel expetendis sadipscing cu. Cu nam ludus numquam impedit. Ei melius fuisset intellegebat cum, hinc dicunt facilis an usu. Nam omnis oratio id, ut eripuit pericula sadipscing vix, propriae principes id mea. Sed sonet persius ad, graecis molestiae ad his. Cu novum commodo repudiandae mea, per id audiam sententiae contentiones.
Esse assum labore an eum, odio nulla soluta ne his. Augue ponderum dignissim et usu. Aliquam docendi est cu. Nec tota graeco ex, quo in aeque vituperata scriptorem, choro laboramus disputationi vim at.

### -AGB 03-

Eu eam facilisi temporibus persequeris, eius tamquam definitiones sed ex, pro id modo ipsum epicuri. Mea nonumy postea an, inciderint comprehensam quo ea. Sed ex odio complectitur. Copiosae appetere iracundia usu no, vis te ludus quodsi eloquentiam. Te pri consul fastidii, te pri animal inermis.

### -AGB weitere-

Wenn's dann um meine Augen dämmert, und die Welt um mich her und der Himmel ganz in meiner Seele ruhn wie die Gestalt einer Geliebten - dann sehne ich mich oft und denke : ach könntest du das wieder ausdrücken, könntest du dem Papiere das einhauchen, was so voll, so warm in dir lebt, daß es würde der Spiegel deiner Seele, wie deine Seele ist der Spiegel des unendlichen Gottes!