## About Us

### Verschiedene Fotos im Kopfbereich

Klicken Sie die Links Primus bis Sextus im Menü und sehen Sie wie wir auf jeder dieser Seiten ein anderes Fotos hinter die halbtransparenten Felder von Menü und Homepagename gelegt haben. Diese Halbtransparenz wurde mit CSS-rgba getätigt und somit können Sie die Stärke der Transparenz bzw. die Deckkraft auch anders einstellen, genauso wie die Farbe der Transparenz. Viel Spaß damit!

### Fenster auf der selben Seite öffnen

Mit den Weiter-Buttons auf dieser Startseite haben Sie die Möglichkeit ausgewählte Unterseiten anzussteuern. Eine Alternative: Per CSS-div-Box öffnen sich Fenster direkt innerhalb der selben Seite bei Klick auf dem Button, als Beispiel bei dem nachfolgenden Button ( plus Erklärung wie es funktioniert ) sowie dem 'Team-Button' weiter unten.
Mehr Erfahren

## Spotlight

At causae verterem elaboraret vix, sea te nostrud definiebas honestatis. Animal quaerendum qui eu, te aliquip graecis praesent vel. Vel dicta nominati sensibus ea, utroque repudiare vituperatoribus vix cu, an sed delicata indoctum. Solum possit antiopam cum no. Id his graeci labore corpora, usu at sonet utamur. No sed sale evertitur, eos ex assum fierent elaboraret, eu vis debet adipiscing.

## Unsere Leistungen

### In vel nostrum voluptaria

Ex eos tale dolor, volumus theophrastus ea ius. Qui animal expetenda no, natum forensibus pri in. Ne mei justo lorem nonumy, eripuit oportere adversarium et pri, putent disputando ne vim. Virtute appetere in eam, pro dicit timeam impetus ut. Vim ea vide tota mundi, fugit nemore iisque ad sed.
Nihil nonumes inimicus ne sea, cum oblique eloquentiam definitiones eu, in perpetua persecuti est. No has dicat blandit, sed no facilisi suavitate vituperata, nisl nonumes facilis ne eam. Te alii periculis expetendis usu. Vim suscipit theophrastus te! Ea salutatus imperdiet eum? Populo veritus qualisque ne sea, vis id brute utamur! Ferri oratio libris eam an.

### Ne vel errem legere

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.

## Our Team

### Wir sind für Sie da!

### Evelin Burdecke

### Steven Ricardo

### Gregory Leonard Pitt

### Bianca Svetlana Swarosvki

Mehr Team

## Presentation

### Lorem Ipsum

Velit prodesset ei mel. Pri no dicit mucius ornatus, mazim malorum eos in. Quo tale fabellas eu. Nec in discere legimus.
Weiter

### Bella Luna

Ad labore possim antiopam ius, id eam etiam eleifend abhorreant. Scripta invenire vis te, vis ea doctus instructior. Scripta laboramus eum eu, id cum omnium iuvaret pertinax.
Weiter

### Universum Deu

No mea facer error, ut pro quas facete, ius reque euripidis temporibus et. Quo dolores hendrerit id.
Weiter

## Information

### Gloria Esta Santo

Velit prodesset ei mel. Pri no dicit mucius ornatus, mazim malorum eos in. Quo tale fabellas eu. Nec in discere legimus.
Weiter

### Magna Terra Sol

Ad labore possim antiopam ius, id eam etiam eleifend abhorreant. Scripta invenire vis te, vis ea doctus instructior.
Weiter

## Box-Fenster About

### 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 'About' und 'Team' aus.

    HTML
    <label for="open-about"><a>More About</a></label>
    <label for="open-team"><a>More Team</a></label>
    <label for="open-ihr-fenster"><a>Ihr Fenster</a></label>

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

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

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

### More Team

### Katharina Schulte

### Heike Mockenhaupt

### Janina van Grat

### Maria Dos Santos

### Peter Pictureman

### Caroline Matuscheck

### Claudia von der Spree

### Bobby, the dog