About Us

About. Übrigens: Wer mag, kann auf jeder Seite auch ein anderes Bild im oberen Bereich einfügen. Wir haben es als Beispiel mal für die Seite 'Sextus' (index6.html) angelegt.

Hier Beispieltext per Lorem Ipsum, dies ist ja ein Pseudo-Latein um Beispieltext darzustellen. Id vel voluptua invidunt, euismod deseruisse ei eam, eam ex salutandi efficiendi. Alia cibo nihil eum no. Illum nobis integre eos ne, ex mei augue quaestio, et salutandi referrentur eos. Oratio invenire ei cum, no suas dicam deleniti duo. Sit omnium periculis splendide ex, vix ei assum adversarium. Ea sed.

Causae aliquam evertitur mel ei, eros prompta argumentum ad mei, maiorum corrumpit efficiantur ne cum. No vel purto mutat mazim, voluptua eloquentiam duo ex. At solet perfecto dissentiunt cum. Populo suscipit intellegat no nec. Assum eligendi quo at.

Unsere Philosophie

Box 'Philosophie'. Vertikale Halbkreise nur mit CSS getätigt, die zusammengelegt einen Kreis ergeben - es gibt also einen linken sowie einen rechten Halbkreis - und darin enthaltend einen Text (hier die Ziffern) sowie Font-Icons, welche horizontal und vertikal mittig zentriert sind. Viel Spaß damit.

Gallery

Die Technik

Einbau der Bilder

Bei den Fotos im Inhaltsbereich haben wir uns für die CSS-Technik mit 'display:inline-block' entschieden. Wir beschreiben es Ihnen hier in einem Tutorial auf der Seite 'Quartus' (index4.html)

Strukturierte Abschnitte

Hier auf der Startseite sehen Sie im Inhaltsbereich mehrere Abschnitte, die farbig getrennt sind. Wie wir die Abschnitte angelegt haben und wie Sie auch mehr oder weniger Abschnitte anlegen können, z.B. den ganzen Inhalt in nur einen einzigen Abschnitt packen können, erklären wir Ihnen hier auf der Seite 'Quartus' (index4.html)

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 Home (index.html) und zwar beim Abschnitt 'Gallery'.

Was macht die Lightbox?

Nach Klick auf ein Foto öffnet sich ein neues Fenster mit dem Foto sowie einer Bildunterschrift und einer Anzeige (Bild 1 von X), gleichzeitig dunkelt sich die komplette Webseite im Hintergrund ab. Wenn mehrere Fotos in einer Gruppe zusammengefaßt sind, ergibt sich folgendes tolle Feature: Fahren Sie mit der Maus über die rechte oder linke Fotohälfte. Es erscheint dann ein Pfeil, welcher Sie durch Klick auf diesen immer weiter zum nächsten Foto führt. In diesem Fenster lässt sich also eine ganze Bildkollektion durchsehen.

Die Original-Lightbox

Hier einmal der Link zur originalen Lightbox-Gallery . Dort finden Sie bei Bedarf auch unter 'Options' noch verschiedene Möglichkeiten der Einstellung. Anhand der guten, weil einfachen Beispiele (Examples), erkennen Sie sehr schnell das Prinzip der Gallerie. Außerdem können Sie somit auch besser nachvollziehen, wie wir die Fotos bei unserer Gallerie responsive angelegt haben, denn diese responsive Anordnung ist ja nicht automatisch im genannten Script der Lightbox enthalten.

Informationen

Template

Dieses Template heißt ' Dicere Digitus '. Die sechs Seiten 'Home' (diese Seite) bis Sextus, sind bereits als Beispiel verlinkt. Bitte klicken Sie diese, um zusätzliche Infos zu erfahren und zu sehen wie die Unterseiten angelegt sind.

Das Menü

Unser Menü ist responsive und nur per CSS erstellt. Es funktioniert ganz ohne Javascript und ist außerdem 'touch-friendly', d.h. es läuft auch auf mobilen Geräten.

Bei mobilen Auflösungen erscheint nur der sog. Hamburger Menü-Button (3 Striche, quer als Menü-Symbol). Um das Menü dort zu öffen, klicken Sie bitte auf den Hamburger Menü-Button. Die 6 Links werden bei mobilen Auflösungen sanft eingeblendet und sind sowohl horizontal als auch vertikal zentriert im Logo-Bereich angeordnet.

Transparenz

Damit im Kopfbereich der Homepagename noch gut zu lesen ist, liegt über dem jeweiligen Foto noch ein Transparenz-Filter. Per CSS-rgba. Das heißt, es können auch Farbe der Transparenz sowie auch der Deckungsgrad verändert werden.

We Promise

Box 'Promise'. Hier sehen sie horizontale Halbkreise nur mit CSS getätigt, die zusammengelegt einen Kreis ergeben - es gibt also einen oberen sowie einen unteren Halbkreis - und darin enthaltend einen Text sowie Font-Icons.







Außerdem sehen Sie einen kompletten CSS-Kreis (mit dem Icon 'Hände schütteln'). Der Hintergrund dieses Kreises erfolgt nur mit dem CSS-Befehl 'background:linear-gradient'. Normalerweise ist 'background:linear-gradient' ja für einen Farbverlauf zuständig, wenn man aber sog. Farbstopps bei diesem Befehl setzt, so ergeben sich eben diese genau getrennten Kanten.

Responsive Webdesign

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. Somit kann man auch auf das Hoch- oder Querformat eines mobilen Gerätes reagieren. Außerdem wird beim Layout verstärkt mit Angaben in Prozent gearbeitet.

So testen Sie

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.