Lecker, Frisch & Gesund Cook For Life With Fun

- Home Zero
- Primus One
- Secundus Two Second
- Tertius Three Third
- Quartus Four Fourth
- Quintus Five
- Sextus Six

## Das Layout

### Zweite Version schon anbei

Dies ist ein Flat-Design. Wir haben jedoch eine zweites Layout als Non-Flat-Version (in Blau-Tönen) für Sie anbei. Dabei kommen dann Farbverläufe, Box-und Textschatten zum Einsatz. Wie Sie diese zweite Version innerhalb weniger Sekunden aktivieren können (einfaches Ändern eines Linkverweises auf die CSS-Format-Datei) beschreiben wir Ihnen hier auf der Seite Quartus (index4.html). Es ist somit eine sehr einfache Möglichkeit das Design ohne großen Aufwand kurzfristig je nach Wohlfühlgefühl, Jahreszeit oder Mode zu wechseln. Klar können Sie auch andere Farben wählen als unsere Vorschläge.

### Das Haupt-Menü

Die Pfeile im Menü sind übringes Font-Icons, welche hier mit dem Pseudoelement ":before" angelegt wurden. Vorteil: Mit nur einer Änderung in der CSS-Datei wechseln Sie bei Bedarf die Menü-Icons in allen HTML-Seiten auf einmal. Übrigens: Bei Mausberührung erfolgt ein Icon-Tausch. Das Hauptmenü (Home bis Sextus) haben wir bereits beispielhaft verlinkt.

## Gallery Ipsum 01

GALLERY.
Die Lightbox Bilder-Gallerie.
Please click the pics.
Fotostrecke. 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 Info

### Lightbox Picture Gallery

Auf den Seiten und Home (also direkt hier auf der Startseite) und Quartus haben wir für Sie eine Bilder-Gallerie eingebaut. Einmal mit Bildtext (Fotostrecke-Text) und eimal ohne. Die Anzahl der Bilder in der Gallery ist übrigens beliebig. Fahren Sie mit der Maus über die Links und klicken Sie ein Foto.

### Lightbox auf allen Fotos

Sie könnten das Lightbox-Script auch auf alle Fotos anwenden, wenn Sie möchten. Die entsprechenden Änderungen dazu sind nur in der HTML-Datei zu tätigen, denn das Script ist ja bereits eingebaut. Mehr Infos dazu auch hier bei Quartus.

## Die Technik

### Responsive Webdesign

Responsive Webdesign (RWD) 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. Außerdem wird beim Layout verstärkt mit Prozent-Angaben gearbeitet.

### Responsive testen.

Hier auf der Seite index1.html (Primus) nennen wir Ihnen gute Möglichkeiten ein Responsive-Layout in verschiedenen Auflösungen zu testen, denn nicht jeder hat ja diverse Smartphones und Tablets zu Hause.
Prof. Sir Michael Francis Stevenbridge
Monument Tower Street No. 12
Great Britain - Nottingham
Telephone: +49 089 12345 67
Fax: +49 089 12345 68
Mobile: (+49) 0000-1234567
info-mail@mustermail.de
info-service@mustemail.de
info-buchhaltung@mustermail.de

- Impressum
- Datenschutz
- Disclaimer

- Home Zero Startseite
- Primus One
- Secundus Two Second
- Tertius Three Third
- Quartus Four Fourth
- Quintus Five
- Sextus Six