Escape Plus Zero
Ein Responsive One-Pager

## Home Start Website

### Ein One-Pager.

Dies ist ein responsive One-Pager. Auch bezeichnet als Single-Page-Website. 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 und Sextus und sehen Sie wie innerhalb dieser Seite die verschiedenen Sektionen angesprungen werden. Diese Sprungziele werden sanft und sichtbar angesteuert. Das sogenannte 'Smooth Scrolling', dient der Übersichtlichkeit und besseren Orientierung, denn man registriert also auch optisch, wohin man gelangt, im Gegensatz zum normalen HTML-Anker.
Bezüglich der eher textlastigen und nicht zum eigentlichen Inhalt gehörenden Links wie Impressum, Datenschutz und Disclaimer -ganz unten platziert- haben wir uns entschieden, diese doch als einzelne, also weitere HTML-Seiten zu öffnen. Bitte klicken Sie diese, denn sie dienen auch als Beispiel für den Einbau versch. großer Bildgruppen.
Übrigens, wie man auch Inhalt auf der selben Seite öffnen kann, zeigen wir bei den 'Weiter-Buttons' im PRIMUS- und im TERTIUS-Abschnitt. Bei Klick öffnet sich dort jeweils ein Box-Fenster (div-Box) innerhalb dieser Seite. Es ist eine 'JavaScript-Freie' Lösung, die mit CSS realisiert wurde und auch auf mobilen Geräten funktioniert.

## Primus About Us

### Lorem

Lorem ipsum dolor sit amet, meliore consectetuer definitiones in per. Eu suas vituperata ius, errem legendos cu pro. Vis dicant principes ei... Weiter

### Ipsum

Ich bin ein längerer Text. Kein Problem. Die Boxen schließen trotzdem automatisch alle, wenn sie nebeneinander stehen, auf der gleichen Höhe ab. Scripta legimus cum ad, viris laboramus voluptaria eu nam. Has nostro diceret appareat ut, invidunt prodesset dissentiet sed ei, nostro eligendi sit... Weiter

### World

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

## Secundus Technik

### Responsive Webdesign

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.

### Lightbox Picture Gallery

Wir haben in diesem Template die bekannte, beliebte und bewährte 'Lightbox' Foto-Gallerie eingebaut. Klicken Sie bitte dazu auf die Fotos. Sie finden die Gallery auf gleich auf dieser Seite beim Abschnitt 'Quartus'.

### Erweiterung der Lightbox mit Box-Slider-Animation

Wir haben die Lightbox weiter optimiert, indem wir eine CSS-Animation hinzugefügt haben. Bei der Gallery (Quartus) sehen Sie bei Mausberührung der Fotos einen Box-Slider-Effekt. Es wird ein farbiges, transparentes Feld, welches eine veränderbare Text-Aufschrift enthält, aus verschiedenen Richtungen herein gefahren.

## Tertius Our Team

### Christine

Sit amet, facilis nominati philosophia sit ei, eos nonumy lobortis expetendis te.

### Sabine

Sit amet, facilis nominati philosophia sit ei, eos nonumy lobortis expetendis te.

### Claudia

Sit amet, facilis nominati philosophia sit ei, eos nonumy lobortis expetendis te.

Weiter TEAM

## Quartus Gallery

Click Me
Click Me
Click Me
Click Me
Click Me
Click Me

## Quintus Kontakt

Box 'Kontakt'. Ne mea partem voluptatibus, eam an iudico maiorum democritum. Ei cum alii percipit, an ludus dignissim eam.

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

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

Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Sed aliquam ultrices mauris. Integer ante arcu, accumsan a, consectetuer eget, posuere ut, mauris. Praesent adipiscing. Phasellus ullamcorper ipsum rutrum nunc. Nunc nonummy metus.

## Sextus Featuring

### Featuring-A

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. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna.

### Featuring-B

Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet.

- Impressum
- Datenschutz
- Disclaimer

## Box-Fenster Primus-1

### 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 Primus-2

### Hinter den Wortbergen

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.

### Es kam der Tag

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.

## Box-Fenster Primus-3

### Kleine Info

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

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

### Die Font-icons

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. Viele weitere Icons sind möglich, denn die sehr verbreitete kostenlose Icon-Schrift vom Anbieter "Fontawesome" wird ja durch einen entsprechenden Link im Kopfbereich des Templates aufgerufen. So fügen Sie ggfls. weitere Icons hinzu oder ersetzen die vorhandenen.
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.

### Neue Box-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 der Weiter-Buttons aus. Anmerkung: Die Button stehen hier nur im nachfolgenden Beispiel-Code untereinander, real stehen diese dann jeweils einzeln an ensprechender Stelle.

    HTML
    <label class="btn" for="open-primus-1"><span class="weiter">Weiter</span></label>
    <label class="btn" for="open-tertius"><span class="weiter">Weiter</span></label>
    <label class="btn" for="open-ihr-fenster"><span class="weiter">Weiter</span></label>

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

    CSS
    /* schaltfunktion AN / AUS */
    input#open-primus-1: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 des Buttons bei 'Tertius' (Team):

    HTML
    <div class="schalter">
    <input type="checkbox" id="open-tertius">
    <div class="boxfenster">
    <div class="boxinhalt">
    <label class="button-close" for="open-tertius"><i class="far fa-window-close"></i></label>
    . . . Hier steht der Text fuer das Tertius Fenster . . .
    </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 Tertius More

### More Team

Name Jonathan Swift

Name Jane Doe

Name Jeanine Yasmin

Name Jason Argonaut

### Extra More Team

Name Jeanne Darc
Name Julia Dawson
Name Josephine Dark
Name Janet Danger
Name Jana Dubrovnik
Name Jay Jo Danzer

### Our Team Works For You

Wir möchten unser Team kurz vorstellen. Es ist wie ist: Unsere Mitarbeiter lieben Ihre Arbeit. Vielmehr ist es keine Arbeit, sondern eine Profession, also eine Berufung. Daher bedienen wir unsere Kunden mit Freude und möchten sie glücklich machen. Nur das zählt. Und am Ende des Tages haben wir dann auch ein Lächeln auf den Lippen.