Home

Informationen

Layout

Dieses Template heißt 'All The Time Of The World'.

Alle Zeit der Welt. Transparenz-Layout. Als Hintergrund-Motiv wählten wir hier die zeitlosen, weil seit ewigen Zeiten beständigen und wunderschönen Berge, hier perfekt in Szene gesetzt von einem Himmel in Blau und Weiß. Diese Gebirgsgrafik wurde festgesetzt (background-attachment: fixed), so das der Inhalt darüber scrollt.
Inklusive der Bilderrahmen im Inhaltsbereich ist hier alles halbtransparent angelegt, so das man die Urgewalt der Berge auch stets spürt. Das Menü oben haben wir effektvoll schräg gestellt, es kommt jedoch noch ein weiterer Aha-Effekt hinzu, denn bei Mausberührung kippt das Menü in die horizontale Ausrichtung. Das Menü besitzt somit einen Klapp-Mechanismus, welcher per CSS-transition ausgelöst wird. Interessant ist auch die Uhren-Grafik, die sich schräggestellt, hälftig in den Inhaltsbereich hineinschiebt und dort ebenfalls halbtransparent ist. Diese Uhren-Grafik wird bei Mausberührung ebenfalls animiert, auch hier schiebt sich das Foto in eine horizontale Lage, aber hinter das Menü, um dieses nicht zu verdecken.

Follow Us

Die sozialen Medien sind wichtiger Bestandteil des Internets geworden Hier nachstehend Ihre Social Media Icons. Jedes zweite dieser Icon dreht sich anders herum sowie bewegt sich auch in entgegengesetzter Richtung. Das macht es spannend. Stellen Sie sich vor, alle würden in die selbe Richtung drehen, das wäre dann schnell langweilig und wenig interessant.






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

Diese Responsive-Vorlage verwendet keinerlei Javascript.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.

Bereits verlinkt

Klicken Sie auf die Links im Menü (Primus bis Sextus) und Sie sehen wie die Seiten verlinkt sind und erfahren noch einige Informationen.

 

Die Bilder

Das Foto im oberen Bereich

Das Foto beim Hauptmenü ist als CSS Hintergrundgrafik angelegt.

Die Fotos im Inhaltsbereich

Hierfür haben wir drei Beispiele angelegt. Einmal ist das Bild links platziert und der Text fließt rechts herum, ein anderes Mal ist das Bild rechts platziert und der Text fließt links herum. Als drittes ist das Bild zentriert und ohne Textfluß arrangiert (Hier gibt es als Vorschlag die Varianten: Ein Bild alleine stehend sowie zwei Bilder und drei Bilder nebeneinander stehend).
© 2025 | All The Time Of The World