The Girl In The Red Jacket A Responsive Template
Home

This is Home.

Das Layout

Das Design

Dieses Template heißt 'THE GIRL IN THE RED JACKET'. Highlights sind hier die Fotos im Inhaltsbereich, die sowohl ohne Bildtext als auch mit Bildtext angelegt sind sowie die Möglichkeit beides miteinander zu kombinieren.

Nachfolgend ein Beispiel-Link, welcher die Funktion des Smooth-Scrolling zeigt und nach Klick die Seite nach unten gleiten läßt. Mehr Info weiter unten im Info-Bereich. Please click the mentioned link above for smooth scrolling downwards.

Das Haupt-Menü

Die Pfeile im Menü sind übringes Font-Icons, welche hier mit dem Pseudoelement ":after" angelegt wurden. Vorteil: Mit nur einer Änderung in der CSS-Datei wechseln Sie bei Bedarf die Menü-Icons in allen HTML-Seiten auf einmal. Übrigens: Bei Mausberührung erfolgt ein Icon-Tausch. Das Hauptmenü (Home bis Sextus) haben wir bereits beispielhaft verlinkt.


Lorem ipsum dolor sit amet, dicunt iuvaret usu ad, vix urbanitas sententiae no. Ad has odio feugiat, quo id nibh.
Magnifico. Bella. Dolor sit amet, facilis nominati philosophia sit ei, eos nonumy lobortis expetendis te.


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.

Responsive testen.

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.




Die Info

Die Sidebar

Für diejenigen, die mehr Links benötigen, haben wir in der "Sidebar" rechts ein zweites Menü eingebaut, welches beliebig erweiterbar ist. Auf den einzelnen Seiten haben wir den Inhalt der Sidebar mal verschieden angelegt, so gibt es dort mal 2 Boxen, 4 Boxen, 6 Boxen oder 8 Boxen. So haben Sie die Möglichkeit sich für ein Beispiel zu entscheiden oder eben auch alle zu nutzen.

Smooth-Scroll

Oberhalb des Fussbereichs gibt es einen 'Nach-Oben-Pfeil', welcher die Scroll-Aktion sanft gleitend, also per Smooth-Scroll ausführt. Dieses wurde mit einem Jquery-Script getätigt. Ebenso verhält es sich mit dem Beispiel-Link 'Mehr Info' zu sehen relativ oben im Inhaltsbereich. Auch dieser nutzt das Smooth-Scrolling-Script, mit welchem sie somit auch jeden anderen beliebigen Abschnitt, der eine CSS-ID enthält, unkompliziert angleiten lassen können. Halt wie ein normaler HTML-Anker, nur hier eben mit Jquery-Unterstützung für das animierte Gleiten.

Lorem Ipsum

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

Picture of the month

A Nice View Near The Sky.

Vero Eos

At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Agua liquid dolor sit amet. Magna dias es bella terra mi sol.

Social Media



Kontakt

Tel: +49 089 12345 67
Fax: +49 089 12345 68
infokontaktmail@muster.de

More

Legal Conditions


Find Us

Professor Dr. Archibald Robertson
Roxanne Street No. 12
Great Britain - London