Psychology Of Love
Pro Amore Vitae Meae
| Home |

Introducing

Template

Dieses Template heißt ' Psychology Of Love ' und enthält eine sogenannte Sidebar (Seitenleiste). Die Seiten 'Home' (diese Seite) bis Sextus, sind bereits als Beispiel verlinkt. Bitte klicken Sie diese, um weitere Infos zu erfahren und zu sehen wie die Unterseiten angelegt sind. Übrigens, auf der Seite Quintus gibt es noch eine kleine Heartbeat-Animation. Diese ist mit CSS Keyframes angelegt.



 

Eloquentiam

Lorem ipsum dolor sit amet. Assum invidunt perfecto vim et, nam errem nominavi tincidunt ei. Sit munere bonorum at, magna lorem no his. Aeque detracto consequat sit at, eu mel ornatus eloquentiam, eu eos diam putent salutandiuno.

Weiter
 

Salutandi

Lorem ipsum dolor sit amet. Assum invidunt perfecto vim et, nam errem nominavi tincidunt ei. Sit munere bonorum at, magna lorem no his. Aeque detracto consequat sit at, eu mel ornatus eloquentiam, eu eos diam putent salutandi dos.

Weiter
 

Perfecto

Lorem ipsum dolor sit amet. Assum invidunt perfecto vim et, nam errem nominavi tincidunt ei. Sit munere bonorum at, magna lorem no his. Aeque detracto consequat sit at, eu mel ornatus eloquentiam, eu eos diam putent salutandi tres.

Weiter


Paper-Like-Cards

Vorstehend sehen Sie sogenannte Paper-Like-Cards. Hier jeweils ein Foto mit dazugehörigem Text. Wir haben es jedoch sehr spannend angelegt, das heißt, jedes Textfeld wurde farblich an das Foto angepaßt. Das ist also entsprechend die Hintergrund-und Textfarbe, die Überschrift, die Linkfarbe sowie die Icon-Farbe.

 

Informationen

Foto-Slide-Show

Hier auf der Startseite (index.html) finden Sie in der Seitenleiste eine Slide-Show per Jquery-Script sowie auch auf der Seite Primus (index1.html) - jeweils mit unterschiedlichen Fotos. Die Bildershow läuft automatisch ab, kann aber auch alternativ manuell durch Klick auf die Pfeile getätigt werden.

Paginierung

Die Seiten-Numerierung im unteren Bereich bietet nicht nur praktischerweise die direkten Links zu den Unterseiten an, sondern schafft auch Strukur, denn es wird auch der jeweils aktuell angewählte Link (also die momentane Seite) angezeigt.

Das Menü

Das Menü schaltet bei kleinen, also mobilen Auflösungen zu einem platzsparendem Toggle-Menü um. Die meisten kennen das bereits: Ein Klick auf den Menü-Button öffnet und schließt das Menü.

Icon-Font mit neuer Version 5

Ja, wir alle lieben die kleinen Icons. Font Aweseome hat im Dezember 2017 die neue Version 5 herausgebracht. Es ist ein sehr wesentliches Update, da die Icons komplett neu überarbeitet und strukturiert wurden, deshalb gibt es auch einige Änderungen. Lesen Sie bitte hier unsere Infos dazu auf Quartus (index4.html).

 



 Two Pictures: Kurzer Fototext.

 

Die Technik

Lightbox

Wir haben in diesem Template die bekannte und beliebte 'Lightbox' Foto-Gallerie eingebaut. Und zwar finden Sie die Gallery auf gleich auf der Seite Secundus (index2.html). Klicken Sie bitte dazu auf die Fotos. Auf den anderen Seiten haben wir auch jeweils eine unterschiedliche Anzahl von Fotos im Inhaltsbereich eingebaut, aber hier als Variation ohne die Lightbox-Gallery. Gerne können Sie natürlich die Lightbox-Gallery auch auf die Fotos der anderen Seiten legen, wenn Sie möchten.

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.

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)

 

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 Primus (index1.html) 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.
© 2029 Psychology Of Love