Über den Dächern der Stadt

Home. Welcome.

Das Layout

Die Idee

Oben im Kopfbereich gibt es einen Bildwechsler 'A'. Darin befindet sich ein weiterer Bildwechsler 'B' (mit den 4 kleinen Kreisen für die Anzahl der Fotos), welcher die gleichen Bilder wechselt, aber zusätzlich noch animiert ist und jeweils einen Bildausschnitt zeigt, der in Bildwechsler 'A' nicht zu sehen ist. Hinweis: Für beide Bildwechsler lassen sich auch unterschiedliche Fotos hinterlegen, so das Sie dann 8 verschiedene Fotos sehen können.

Das Design

Dieses Template heißt 'Über den Dächern der Stadt'. 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 mehr zu den Animationen und wie Sie allgemein auch die Animationen löschen können.

Kontakt

 (0000) 000-0000
 (+49) 0000-1234567
 (0000) 7654321-4141
  info@muster-topofthecity.de

Anschrift

  Firma Mustermann
  12345 BigCity
  Musterstraße Nr. 23

Info1 Bella Ipsum


Two Pictures
Sit amet, facilis nominati philosophia sit ei, eos nonumy lobortis expetendis te.

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

One Picture
Bella ipsum amet, putant malorum civibus qui cu, eos te elit velit. Nam apeirian insolens in. Vivendum invenire consetetur quo at, ex putant viderer nec, offendit inimicus gloriatur eos ei. Purto soleat causae ne sea, possit assentior sententiae no usu.

Info2 Isis Arkum


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.

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.
© 2022 | Über den Dächern der Stadt