## Information - Hello Welcome

### Schiebe-Regler machen Spaß

Bei den Abschnitten 'About', 'Leistungen' und 'Team' sehen Sie einen responsive Jquery Schieberegler, welcher eine unterschiedliche, beliebige Anzahl von Objekten verschiebt. Dieser Schieberegler läßt als zu verschiebenden Inhalt sowohl Bilder als auch Text oder andere Objekte zu. Auch kann man leicht unter dem Bild einen Text schreiben, wie Sie es bei 'Team' sehen.

### CSS Box-Fenster

Fenster öffnen auf der selben Seite (inklusive Anleitung):
Nachfolgender Button-Link öffnet ein Fenster per CSS-div-Box, ganz ohne Javascript. Desgleichen beim Button im Abschnitt 'About Us' und 'Leistungen'. Sie können aber auch die Button-Links ohne Box-Fenster öffnen und stattdessen einen normalen Linkverweis nutzen, sehen Sie dazu das Beispiel beim Abschnitt 'Last But Not Least'.
Mehr Erfahren

## About Us

### Hinweis:

Nachstehender Button-Link öffnet per CSS ein Box-Fenster. 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. Nihil nonumes inimicus ne sea, cum oblique eloquentiam definitiones eu, in perpetua persecuti est. No has dicat blandit, sed no facilisi suavitate.
Mehr Lesen

## Unsere Leistungen

### Am Puls der Zeit:

Wir sind stolz Ihnen folgende Leistungen anbieten zu können. Nachstehender Button-Link öffnet per CSS ein Box-Fenster. Qui animal expetenda no, natum forensibus pri in. Ne mei justo lorem nonumy.

- Best Manus manum lavat
- Finest Medias in res
- Quality in vino veritas
- Service Amor vincit omnia
- Bene docet, qui bene distinguit

Mehr Lesen

## Our Team

### Luisa Vogt

Unsere Chefin führt uns liebevoll mit harter geschäftlicher Hand und weichem kollegialen Herzen. Wir wissen die große Verantwortung, die sie für uns gerne trägt, sehr zu schätzen. Danke, Luisa.

### Sven Bo Eriksen

Sven ist unser akribischer, erfahrener und überaus netter Buchhalter und stärkt uns im Hintergrund den Rücken, so daß wir uns voll auf die tägliche Arbeit konzentrieren können.

### Ella Weber

Unsere Auszubildende Ella ist jetzt schon ein großer Mehrwert für unsere Firma. Sie ist so motiviert, dass Sie sich auch zu Hause am Computer weiterbildet, also keine Frage das wir Sie als Gesellin einstellen werden.

### Samira, The Cat

Samira, unsere junge gefleckte Katze ist unser aller Seelentröster. Wir haben Samira im lokalen Tierheim entdeckt und sofort lieb gewonnen. Sie hat sich sehr schnell bei uns eingewönht .Miau! Du kleine starke Tigerin.

### Lisa Ida Landruth

Lisa Ida ist unsere Raumpflegerin und eine wesentliche Stütze unseres Erfolgs. All das Chaos das wir anrichten wird durch sie wie mit Zauberhand wieder gerade gerückt. Wow, Lisa Ida, wie machst du das?

### Mia Lena Baumann

Unsere langjährige Mitarbeiterin Mia Lena ist aus unserem Laden nicht mehr wegzudenken. Ihre empathische und humorvolle Art machen Sie zum wichtigen Bindeglied zwischen Kunden und Kollegen.

## Last But Not Least

### Button-Link ohne Boxfenster:

Sie könnnen es sich aussuchen, ob Sie Links per Box-Fenster oder als normalen Link öffen. Hier nachstehend das Beispiel ohne Boxfenster. Der nachstehende Button-Link verweist auf eine Seite innerhalb dieser Homepage. In diesem Beispiel wird die Seite 'Sextus' (index6.html) geöffnet. Dort gibt es übrigens noch einige Hinweise zu den Bildern und Icons.
Mehr Erfahren

## Box-Fenster Information

### Fenster öffnen auf der selben Seite

Per CSS-div-Box öffnen sich Fenster direkt innerhalb der selben Seite bei Klick auf einigen 'Weiter-Buttons'. Gerne legen Sie bei Bedarf nach diesem Prinzip weitere neue Fenster an bzw. löschen Sie 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 Links 'Information' und 'About Us' und 'Leistungen' aus.

    HTML
    <label for="open-information"><a>Mehr Erfahren</a></label>
    <label for="open-about"><a>Mehr Lesen</a></label>
    <label for="open-leistungen"><a>Mehr Lesen</a></label>
    <label for="open-ihr-fenster"><a>Ihr Fenster</a></label>

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

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

Dieser Text-Link funktioniert schon prima, 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>

Die dazugehörige Einschalt-Funktion dieser Fenster sehen Sie in der CSS-Datei ('boxfenster.css):

    CSS
    /* schaltfunktion AN / AUS */
    input#open-information:checked ~ .boxfenster,
    input#open-about:checked ~ .boxfenster,
    input#open-leistungen: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 'Information-Links':

    HTML
    <div class="schalter">
    <input type="checkbox" id="open-information">
    <div class="boxfenster">
    <div class="boxinhalt">
    <label class="button-close" for="open-information"><i class="far fa-window-close"></i></label>
    . . . Hier steht der 'Informations 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 About

Nun in pertinax patrioque vel, eum everti detracto no, partem delectus eum in. Mea primis fuisset instructior an, mel quaestio abhorreant cu, ea esse velit ius. Dictas persius cu vix, error nominati platonem ea has, te ius appareat vivendum pertinacia. Cu malis definitionem per, unum definitiones ad sit.
Ad eos justo aperiri, ad graece assentior quo, ad pri clita voluptua definitionem. Senserit philosophia mel et, rebum eripuit definiebas eu cum. No aeque fabulas epicuri mei. Euismod dolores per ex, malis etiam delicatissimi mei ex, an novum cum vulputate eloquentiam.
Veniam officiis assueverit per id, facilisis disputando id eam, vim justo iuvaret atomorum te. Ne qui probo iriure argumentum, elaboraret scribentur et eos, est munere aperiam repudiare an. Est eu aliquip consequuntur, antiopam patrioque mel et, cum ex impetus nominavi.

## Some Pics

## Box-Fenster Leistungen

Was haben wir zu bieten? Nun in pertinax patrioque vel, eum everti detracto no, partem delectus eum in. Mea primis fuisset instructior an, mel quaestio abhorreant cu, ea esse velit ius. Dictas persius cu vix, error nominati platonem ea has, te ius appareat vivendum pertinacia. Cu malis definitionem per, unum definitiones ad sit.

### Weitere Leistungen

- Gloria Deus Requiem
- Scientia potentia estas
- Profundis Documenta Equlibrium
- Radius Solventa Est
- Unsiversum Terra Sol

Ad eos justo aperiri, ad graece assentior quo, ad pri clita voluptua definitionem. Senserit philosophia mel et, rebum eripuit definiebas eu cum. No aeque fabulas epicuri mei. Euismod dolores per ex, malis etiam delicatissimi mei ex, an novum cum vulputate eloquentiam.

### Top Leistungen, verlinkt

- Per aspera ad astra
- Plenus venter non studet libenter
- Ridendo corrigo mores
- Quidquid agis prudenter agas et respice finem

Veniam officiis assueverit per id, facilisis disputando id eam, vim justo iuvaret atomorum te. Ne qui probo iriure argumentum, elaboraret scribentur et eos, est munere aperiam repudiare an. Est eu aliquip consequuntur, antiopam patrioque mel et, cum ex impetus nominavi.