## Home About Us

Dies ist ein responsive One-Pager. Auch bezeichnet als Single-Page-Website. Im Prinzip bedeutet es, das die Webseite nur aus einem einzigen Webdokument, sprich nur einer HTML-Seite besteht. Alles läuft also innerhalb einer Seite ab. Klicken Sie die Links im Haupt-Menü (Home bis Sextus) und Sie sehen, wie die einzelnen Abschnitte per sog. "Smooth-Scrolling" sanft innerhalb der Seite angefahren werden.
Boxfenster: Einige Links oder Buttons mit der Aufschrift 'Mehr Lesen' bwz. 'More' o.ä. öffnen eine Box mit weiteren Inhalt. Dies ist eine Javascript-freie Lösung, welche Fenster als div-Box per CSS innerhalb der selben Seite öffnet. 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 nach diesem Prinzip umsetzen.
Mehr Lesen

## Primus Arbeiten

Laminat
Tische / Holzbretter
Mauerwerk
Bleistifte
Laptop-Tische
Stein / Bildhauerei
Holzveredelung
Spieltische
Zahnstocher
Deko
Beliebig Fotos hinzufügen
Dachgeschoss
Beliebig Fotos löschen
Beste Rohstoffe
Individuelle Anfertigungen
Mehr Arbeiten

## Secundus Leistungen

#### Meister-Handwerk

#### Qualifikationen

#### All-In-One-Paket

#### Maß-Anfertigungen

#### Service vor Ort

#### 3-Jahre-Garantie

#### Klima-Neutral

#### Öko-Bio-Siegel

More Leistungen

## Tertius Information

1

#### Quantum Media

Lorem ipsum dolor sit amet, meliore consectetuer definitiones in per. Eu suas vituperata ius, errem legendos. Vis dicant principes ...
Mehr Info-1
2

#### Lorem Ipsum

Lorem ipsum dolor sit amet, meliore consectetuer definitiones in per. Eu suas vituperata ius, errem legendos. Vis dicant principes ...
Mehr Info-2
3

#### Sinfonia Sanctus

Ad mel laudem offendit, ei vis dignissim forensibus, mea et iuvaret labores scripserit. Iudico doctus sadipscing, atomorum honestatis...
Mehr Info-3
Info

## Quartus Gallery

More Gallery

## Quintus Testimonials

Beste Rohstoffe
Beste Werkzeuge
Dekorationen
Italienisches Leder

## Sextus Kontakt

#### Öffnungszeiten.

MO - DI: 08.00 - 17.00 Uhr
MI - FR: 09.00 - 18.00 Uhr
DO: 09.00 - 16.00 Uhr
SA: 10.00 - 15.00 Uhr

#### Social Media.

Follow Us. Wir sind in vielen sozialen Medien vertreten und präsentieren Ihnen dort zusätzliche Informationen und viele aktuelle Eindrücke. Viel Spaß dabei!

#### Wir sind für Sie da.

Telefon 1: (0000) 0000000-50
Telefon 2: (0000) 0000000-70
Mobile: (+49) 0000-1234567
Fax: (0000) 7654321-4141

#### Email.

info@holzlederstein.de
service@holzlederstein.de
team@holzlederstein.de
More Kontakt

## Box-Fenster Angebot

### Angebot / News

Hier finden Sie unsere Neuigkeiten. Oder die neusten Angebote. Oder das Angebot des Monats. Oder spezielle Rabatt-Aktionen. Oder was immer Sie hier schreiben wollen oder für Ihren Zweck relevant ist, denn dies ist natürlich ein Platzhalter-Text.
Klar ist aber, das hier schon ein für die Webseite relativ wichtiger Inhalt stehen sollte, denn der Button, welches dieses Fenster geöffnet hat, steht ja an sehr exponierter Stelle, nämlich direkt im Kopfbereich unterhalb des Homepagenamens.

- Angebot / News 1
  Von ganzem Herzen. Im Zweifel für den Angeklagten. Du bist im selben Boot. Der Zorn ist eine kurze Raserei. Liebe überwindet/besiegt alles. Behandeln möge der Doktor, heilen möge die Natur. Verträge müssen eingehalten werden. Wie immer du handelst, handele klug und bedenke das Ende. Man höre auch die andere Seite.
- Angebot / News 2
  Von ganzem Herzen. Im Zweifel für den Angeklagten. Du bist im selben Boot. Der Zorn ist eine kurze Raserei. Liebe überwindet/besiegt alles. Behandeln möge der Doktor, heilen möge die Natur. Verträge müssen eingehalten werden. Wie immer du handelst, handele klug und bedenke das Ende. Man höre auch die andere Seite.
- Noch mehr Angebote / News
  In dubio pro reo. Principiis obsta.

## Box-Fenster About

### CSS-Animation

Beim Abschnitt 'Information' sehen Sie unsere CSS-Keyframes-Animation, welche automatisch startet. Hier werden bei den Blöcken 1, 2 und 3 Hintergrundbilder animiert und zwar bewegt sich das entsprechende Bild vertikal von links nach rechts, horizontal von unten nach oben und diagonal von oben links nach rechts unten. Und jeweils wieder zurück und von vorn beginnend.
Noch eine CSS-Animation haben wir beim Abschnitt 'Kontakt' gestaltet. Dort sehen Sie einen CSS-Hintergrund mit verschieden breiten und colorierten Streifen. Diesen haben wir in der Art animiert, das sich nicht nur die Breite der Streifen ändert sondern auch deren Farben von 'Burlywood' nach 'Peru'. Wie immer können Sie natürlich auch ihre Lieblingsfarben verwenden, hier haben wir uns thematisch an holzähnliche Farben gehalten. Bei einer möglichen Änderung der Streifenbreite mag sich nochmals ein anderes, individuelleres Bild ergeben, probieren Sie es bei Bedarf aus. Animationen dieser Art sieht man öfter im Fernsehen, insbesondere bei Nachrichten-Sendungen, der Grund schein vielleicht eine edle Wirkung verbunden mit dynamischer Optik zu sein.
Eine weitere CSS-Animation ist im Kopbereich angelegt und zwar mit folgenden Werten:

    CSS
    animation: bg-radial-ani  20s 2s 2;

Das bedeutet: Die Animation heißt 'bg-radial-ani', läuft 20 Sekunden, startet mit 2 Sekunden Verzögerung und der Durchlauf beträgt 2 mal.
Nachstehend ein mögliches anderes Beispiel: Hier läuft die Animation 40 Sekunden, startet ohne Verzögerung und der Durchlauf ist unendlich (infinite):

    CSS
    animation: bg-radial-ani  40s infinite;

### 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 'Mehr-Lesen' bzw. 'More' o.ä. Dieses Öffnen der Fenster funktioniert ganz ohne Javascript, wir haben es per CSS angelegt. Aber da dies ja ein One-Pager ist, haben wir auch gleich die Links 'Impressum', 'Datenschutz' und 'Disclaimer' unten im Fussbereich so angelegt, das diese sich auch als Boxfenster innerhalb der Seite öffen.

### Fenster Abdunklung

Ab einer gewissen Breite des Displays bzw. Bildschirms sind die Boxfenster nicht mehr füllend in der Breite und Höhe, sondern wir haben diese horizontal und vertikal mittig zentriert. Als kleinen Hingucker haben wir mit einem Abstand zum Rand den Hintergrund der Seite abgedunkelt, damit die Fenster sich noch mehr abheben.
Die vorstehend genannte Abdunklung erfolgt per CSS-rgba und ist deshalb in Transparenz-Stärke (Deckung) und Transparenz-Farbe beliebig einstellbar.

## Jquery Animation

### Einer, der sich mal wirklich lohnt

Zu sehen auf der Startseite bei 'Arbeiten' und 'Testimonials'.
Der oben genannte Slider, welcher nicht nur Bilder sondern auch Text oder andere Elemente responsive aufnimmt, ist gerade deshalb einer der Besten, insbesondere auch weil die Einstellungsmöglichkeiten vielfältig sind und er andere Jquery-Slider, welche viel einseitiger sind, überflüssig macht.
Wir haben in diesem Template den Slider natürlich schon responsive angepaßt und Sie können einfach neue Bilder/Objekte hinzufügen bzw. auch löschen. Aber vielleicht möchten Sie noch weiter experimentieren oder andere Optionen nutzen. So finden Sie hier dazu die Demos bzw. Einstellungen des Anbieters:
Demo 1 und Demo 2

## Bilder & Icons

### Bilder

Die Fotos in dieser Vorlage sind vom Foto-Anbieter Picjumbo. Wir haben diese innerhalb unseres Grid-Systems responsive angelegt. Gerne können Sie natürlich auch Ihre eigenen Fotos verwenden.

### Wir verwenden Icon-Fonts

Font-Icons sind sozusagen grafisch wirkende Schriftzeichen, die aber wie normaler Text behandelt werden (denn es sind ja Textzeichen) und damit eine schnellere und leichtere Formatierung gegenüber grafischen Icons per Bildformat (z.b. gif, jpg oder png) ermöglichen. Wir haben eine der beliebtesten Icon-Schriften in dieser Vorlage bereits anbei. Sie heißt "Fontawesome".

### Font Awesome

Viele weitere Icons sind möglich, denn die sehr verbreitete Icon-Schrift vom Anbieter "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.
Wir haben die Icons schon für Sie angepasst. Denn ohne weitere Bearbeitung sind die Font-Icons immer genauso groß und erscheinen in gleicher Farbe wie die aktuell verwendete Schrift für den Text.
Als Beispiel:

## 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 informativ anhand eines Schachbrettmusters, aber noch viel übersichtlicher und mit sehr vielen Beispielen ausgestattet, 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).
2.) Erweiterte 'nth-child-Selektoren':
Jetzt wird es noch variabler und effektiver. 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 (CSS) ?

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;
    }

Da dies schon recht praktisch ist, aber noch nicht spannend genug, so haben wir in diesem Template noch eine Variante eingebaut, wie nachstehend (Ohne Quelltext-Beispiel):
'nth-child(2)' spricht nur den zweiten Abschnitt, 'nth-child(5)' spricht nur den fünften Abschnitt und 'nth-child(7) nur den siebten an und überschreiben damit die entsprechenden 'even/odd-Abschnitte'.
Noch ein abschließender allgemeiner Hinweis: In den Abschnitten legen wir mit 'nth-child' nicht alle Strukturen fest, was möglich wäre, sondern nur die wesentlichen. Da je nach Template der Inhalt in den Abschnitten aber womöglich wesentlich konmplexer ist, z.b. die Gestaltung der Boxen, Icons, Buttons usw. haben wir uns bezüglich dieser genannten Elemente dazu entschlossen, weitere CSS-Klassen anzulegen, hier zb. '.information', '.leistungen' und '.kontakt' o.ä.

### Der HTML-Code für die 'nth-child-Bereiche':

Der HTML-Bereich: So sieht ein Abschnitt in der HTML-Datei aus:

    HTML
    <div class="section-inhalt">
    <div class="inhaltbox-a">
    ... Inhalt ...
    </div>
    </div>

So sehen zwei Abschnitte in der HTML-Datei aus:

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

    <!-- ABSCHNITT -->
    <div class="section-inhalt">
    <div class="inhaltbox-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. Um Abschnitte hinzuzufügen, kopiert man also den Quellcode für einen Abschnitt und füllt den Abschnitt dann mit Inhalt.

## Box-Fenster Arbeiten

### More Arbeiten

An dieser Stelle möchten wir Ihnen weitere unserer Arbeitn beschreiben. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nullam accumsan lorem in dui. Cras ultricies mi eu turpis hendrerit fringilla. 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.
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Cras id dui. Aenean ut eros et nisl sagittis vestibulum. Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede. Sed lectus. Donec mollis hendrerit risus. Phasellus nec sem in justo pellentesque facilisis. Etiam imperdiet imperdiet orci. Nunc nec neque. Phasellus leo dolor, tempus non, auctor et, hendrerit quis, nisi. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Maecenas malesuada.
Praesent congue erat at massa. Sed cursus turpis vitae tortor. Donec posuere vulputate arcu. Phasellus accumsan cursus velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed aliquam, nisi quis porttitor congue, elit erat euismod orci, ac placerat dolor lectus quis orci. Phasellus consectetuer vestibulum elit. Aenean tellus metus, bibendum sed, posuere ac, mattis non, nunc.

### Extra Arbeiten

Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum

## Boxfenster Leistungen

### More Leistungen

- Leistung 9
  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. 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.
- Leistung 10
  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.
- Leistung 11
  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. 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.
- Noch mehr Leistungen
  Nomen est Omen. Principiis obsta.

### Font Awesome

Viele weitere Icons sind in diesem Template möglich, denn die sehr verbreitete Icon-Schrift vom Anbieter "Fontawesome" ist ja bereits in dieser Vorlage installiert. So fügen Sie ggfls. weitere Icons hinzu oder ersetzen die vorhandenen.

## Box-Fenster Info-1

### Information 1

Die Minions meinen: Me want bananaaa! Underweaaar jiji tatata bala tu pepete para tú bappleees tatata bala tu underweaaar. Pepete hahaha tatata bala tu bananaaaa hana dul sae gelatooo baboiii bappleees poulet tikka masala bananaaaa po kass. Wiiiii underweaaar tatata bala tu tulaliloo uuuhhh. Bee do bee do bee do bee do bee do bee do uuuhhh aaaaaah gelatooo wiiiii bananaaaa bananaaaa.
La bodaaa poulet tikka masala pepete jeje. La bodaaa la bodaaa uuuhhh jiji pepete gelatooo bappleees hahaha daa bappleees. La bodaaa tulaliloo para tú ti aamoo! Tatata bala tu la bodaaa. Minions Ipsum. Me want bananaaa!
Jeje chasy tank yuuu! Pepete poulet tikka masala baboiii. Daa jeje chasy daa jeje bee do bee do bee do gelatooo uuuhhh tatata bala tu daa. Underweaaar pepete jeje jiji. Tatata bala tu bappleees pepete potatoooo hahaha jiji bee do bee do bee do jiji jiji me want bananaaa! Ti aamoo! Hana dul sae poopayee tatata bala tu para tú bee do bee do bee do jeje. Jeje chasy tank yuuu! Butt me want bananaaa! Gelatooo la bodaaa tatata bala tu ti aamoo! Baboiii butt.

## Box-Fenster Info-2

### Information 2

Kevin ist ein großer, länglicher Minion mit zwei Augen und aufsprießenden Haaren. Er trägt meist seine Golfkleidung. Kevin sagt: Uuuuhhh belloo! Wiiiii hana dul sae baboiii me want bananaaa! Chasy butt poopayee tank yuuu! Para tú bappleees tank yuuu! Pepete tank yuuu! Chasy potatoooo. Pepete la bodaaa ti aamoo! Chasy. Jiji bee do bee do bee do po kass tatata bala tu daa bee do bee do bee do uuuhhh bee do bee do bee do jeje hahaha daa. Jiji la bodaaa belloo! Pepete baboiii baboiii potatoooo.
Belloo! Baboiii bappleees poulet tikka masala hana dul sae. Hana dul sae baboiii bee do bee do bee do butt jeje chasy po kass butt tank yuuu! Jiji belloo! Tank yuuu! Poopayee gelatooo daa tulaliloo wiiiii. Potatoooo butt chasy po kass butt.
Daa wiiiii me want bananaaa! Tatata bala tu baboiii underweaaar wiiiii poopayee potatoooo. Po kass belloo! Jiji jeje. Chasy la bodaaa la bodaaa potatoooo gelatooo tulaliloo ti aamoo! Uuuhhh. Hahaha tank yuuu! Me want bananaaa! Uuuhhh underweaaar me want bananaaa!

## Box-Fenster Info-3

### More Information 3

Bob ist ein süßer, kleiner Minion. Er ist etwas dicklich und liebt seinen Teddy sehr. Bob sagt: Poulet tikka masala hana dul sae bappleees bee do bee do bee do para tú ti aamoo! Potatoooo. Bappleees jiji jeje potatoooo bee do bee do bee do bananaaaa. Gelatooo potatoooo poulet tikka masala poopayee bee do bee do bee do tatata bala tu poulet tikka masala. Me want bananaaa! me want bananaaa!
Butt hana dul sae chasy bananaaaa tatata bala tu. Bananaaaa la bodaaa potatoooo chasy potatoooo jeje butt jeje underweaaar tulaliloo. Tulaliloo daa bappleees belloo! Poulet tikka masala bee do bee do bee do aaaaaah me want bananaaa! Me want bananaaa! Tulaliloo gelatooo bananaaaa uuuhhh aaaaaah aaaaaah gelatooo tatata bala tu po kass bananaaaa.

## Box-Fenster Info-Plus

### More Information Plus

- Information 4
  Von ganzem Herzen. Im Zweifel für den Angeklagten. Du bist im selben Boot. Der Zorn ist eine kurze Raserei. Liebe überwindet/besiegt alles. Behandeln möge der Doktor, heilen möge die Natur. Verträge müssen eingehalten werden. Wie immer du handelst, handele klug und bedenke das Ende. Man höre auch die andere Seite.
- Information 5
  Von ganzem Herzen. Im Zweifel für den Angeklagten. Du bist im selben Boot. Der Zorn ist eine kurze Raserei. Liebe überwindet/besiegt alles. Behandeln möge der Doktor, heilen möge die Natur. Verträge müssen eingehalten werden. Wie immer du handelst, handele klug und bedenke das Ende. Man höre auch die andere Seite.
- Information 6
  Von ganzem Herzen. Im Zweifel für den Angeklagten. Du bist im selben Boot. Der Zorn ist eine kurze Raserei. Liebe überwindet/besiegt alles. Behandeln möge der Doktor, heilen möge die Natur. Verträge müssen eingehalten werden. Wie immer du handelst, handele klug und bedenke das Ende. Man höre auch die andere Seite.
- Noch mehr Information
  In dubio pro reo. Principiis obsta.

## Box-Fenster Gallery

### More Gallery

## Lightbox

### Lightbox Picture Gallery

Vorstehend unsere Bilder-Gallerie. So funktioniert diese Foto-Schau: Nach Klick auf ein 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 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="900" height="500">

Bild mit Lightbox:

    HTML
    <a href="images/beispiel.jpg"
    data-lightbox="gruppe1"
    data-title="Ihre Bildunterschrift">
    <img src="images/beispiel.jpg" width="900" height="500"></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.

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

## Boxfenster Kontakt

### Anfahrt 1 - Aus Norden

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 - Aus Süden

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.

## 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?