Layout und Design   (mit CSS ToTop !)

Design

Dieses Template heisst 'Die Rote Seite'. Highlights sind hier die Fotos die mit oder ohne Bildtext präsentiert werden.
Hier Beispiel-Link, welcher die Seite nach unten scrollt   »mehr...« .
Hier einige Zeichen aus dem utf-8 Zeichensatz:

• 📑brief
• 🍀klee
• 🎯treffer
• ☕ kaffee
• 🍺bier

• 🍰kuchen
• 🚐camper
• 🚙rover
• 📧mail
• 🌷tulpe

Das Haupt-Menü

Die Pins im Menü sind Font-Icons die mit den Pseudoelementen ":before" und ":after" angelegt sind. Vorteil: Bei Mausover wechselt das Icon. Mit nur einer Änderung in der CSS-Datei werden die Menü-Icons ausgetauscht. übrigens: Bei Mausberührung erfolgt ein Icon-Tausch.

Die Technik

Responsive Webdesign

Responsive Webdesign bedeutet flexible Anzeige auf unterschiedlichen Bildschirmgrössen wie Smartphone, Tablet, PC usw. Dabei werden per CSS-Media Queries die verschiedenen Bildschirmgrössen abgefragt.

Responsive testen.

Auf der Seite seite1.php 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

Als Beispiel für mehr Links ist in der "Sidebar" rechts ein zweites Menü eingebaut, welches beliebig erweiterbar ist. Auf den einzelnen Seiten sind Beispiele was in der Sidebar enthalten sein kann, so gibt es dort mal 2 Boxen, 4 Boxen, usw.

Smooth-Scroll

Oberhalb des Fussbereichs gibt es einen 'Nach-Oben-Pfeil', welcher die Seite nach oben scrollt. Nach gleichem Prinzip kann man auch jeden anderen Abschnitt, mit einer eine CSS-ID (Anker) gelangen.