Gallery Ipsum 01

Das Layout

Font-Icons

Im Kopfbereich sehen Sie verschieden formatierte Font-Icons, wie zum Beispiel die Social-Media Icons oder das nur per CSS animierte Kompass-Icon vor dem Homepagenamen, welches per automatisch startender Animation abwechselnd links und rechts herum dreht, klar können Sie hier auch die Drehgeschwindigkeit ändern oder auch ein anderes Icon wählen. Auch die Icons beim Menü (Location-Arrows) sind bei Mausberührung animiert, indem diese sich in eine horizontale Position drehen.

Smooth-Scroll

Im Fussbereich führt Sie ein Pfeil per Smooth-Scroll animiert wieder an den Seitenanfang. Dieses sanfte Scrollen ist auch bei allgemeinen Links möglich, hier nachfolgend als Beispiel eine Verlinkung innerhalb dieser Seite nach unten zum Technik-Abschnitt.

Da das Jquery-Script für das Scrolling ja bereits integriert ist, muss innerhalb der Verlinkung nur auf eine CSS-ID verwiesen werden. Sie können dabei eine vorhandene CSS-ID nutzen oder auch selbst eine neue CSS-ID mit beliebigem Namen auf jeden HTML-Tag anlegen.

So schaut der Beispiel-Code für den Linkverweis '<a href="#technik">Technik-Abschnitt</a>' aus und nachstehend für den anzugleitenden Bereich schaut es in diesem Falle so aus: '<h2 id="technik">Die Technik</h2>' .

Das Haupt-Menü

Es ist ein Transparenz-Menü, angelegt mit 'CSS rgba', d.h. Sie können sowohl die Farbe als auch Die Deckkraft ändern. Die Pfeile im Menü sind übringes Font-Icons, welche hier mit dem CSS 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. Das Hauptmenü (Home bis Sextus) haben wir bereits beispielhaft verlinkt.

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