Home. Welcome.

Das Layout

Die Idee

Im Head-Bereich oben sehen Sie drei Boxen nebeneinander stehend, jede Box hat ein animiertes Bild. Bei der Animation sprechen wir die "background-position" des Hintergrundbildes an und verändern diese für jede der drei Boxen anders. Der Clou: Hinter den halbtransparentenBoxen befindet sich noch eine weitere Animation, nämlich der Vogel, welcher sich vom Wind hoch und runter tragen läßt.

Das Design

Dieses Template heißt 'Über den Wolken am Meer'. Es ist responsive angelegt und enthält einige Animationen. Diese Animationen sind per CSS angelegt und es wird diesbezüglich keinerlei Javascript verwendet. Hier auf der Seite index4.html (Quartus) erfahren Sie , welche Animationen es gibt und wie Sie allgemein auch die Animationen löschen können.
(0000) 000-0000
(+49) 0000-1234567
(0000) 7654321-4141
K
O
N
T
A
K
T
info@muster-wolkenmeer.de
12345 BigCity
Musterstraße Nr. 23

Info1 Bella


One Picture
Sit amet, facilis nominati philosophia sit ei, eos nonumy lobortis expetendis te. Vivendum invenire consetetur quo at, ex putant viderer nec, offendit inimicus gloriatur eos ei. Purto soleat causae ne sea, possit assentior sententiae no usu.

Two Pictures
Lorem sit amet, dicunt iuvaret usu ad, vix urbanitas sententiae no. Ad has odio feugiat, quo id nibh.

Two Pictures
Bella ipsum amet, putant malorum civibus qui cu, eos te elit velit. Nam apeirian insolens in.

Info2 Isis Arkum


Two Pictures
Lorem sit amet, dicunt iuvaret usu ad, vix urbanitas sententiae no. Ad has odio feugiat, quo id nibh.

Two Pictures
Bella ipsum amet, putant malorum civibus qui cu, eos te elit velit. Nam apeirian insolens in.

One Picture
Sit amet, facilis nominati philosophia sit ei, eos nonumy lobortis expetendis te. Vivendum invenire consetetur quo at, ex putant viderer nec, offendit inimicus gloriatur eos ei. Purto soleat causae ne sea, possit assentior sententiae no usu.

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.

So testen Sie

Diese Responsive-Vorlage verwendet keinerlei Javascript. Weder für die Navigation noch für das Ansprechen der CSS-Media Queries bei älteren Browsern, noch für die Animationen. 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.


Impressionen

Einige Foto Eindrücke

Bei den Fotos auf den Seiten index2.html (Secundus), index3.html (Tertius), index5.html (Quintus) und index6.html (Sextus) zeigen wir Ihnen Beispiele für die Anordnung von 2 Fotos im Block, 4 Fotos im Block, 3 Fotos im Block und 1 Foto mit nebenstehendem Text.

Zoom-In-Animation

Bei Mausberührung bzw. Touch auf den Fotos der vorstehend genannten Links gibt es eine Animation wie folgt: Es erfolgt eine Vergrößerung des Fotos. Da wir aber diese Animation innerhalb einer Box ablaufen lassen, wird daraus ein Zoom-In-Effekt.
© 2020 | Über den Wolken am Meer