• Responsive
  • No Javascript
  • Mobile-First
  • Transparent Menü
  • CSS Backgrounds
  • Font-Icons


Home

Information

Willkommen

Liebe Besucher, wir begrüßen Sie bei uns. Schön, das wir Ihr Interesse geweckt haben. Nachstehend einige Informationen für Sie.

Bereits verlinkt

Das Hauptmenü (Primus bis Sextus) haben wir bereits beispielhaft verlinkt. Bitte klicken Sie die Links. Übrigens sehen Sie in der Fusszeile vier Icons. Die beiden Mittleren davon könnten Sie für eine Kontakt-Seite bzw. Find-Us-Seite verwenden. Das ganz linke Icon (Home) springt zur Startseite index.html (also diese Seite hier), das ganz rechte Icon (Pfeil) springt nach oben an den Anfang der jeweiligen Seite. Die rechtlichen Links namens Impressum, Datenschutz und Disclaimer haben wir ebenfalls bereits verlinkt.




Responsive

Responsive Webdesign

Responsive Webdesign (RWD) ermöglicht eine Anpassung/Optimierung der extrem unterschiedlichen Bildschirmgrößen von Smartphone, Tablet, Notebook, Laptop und Desktop-PC innerhalb einer einzigen Webseite. Dazu werden per CSS3-Media Queries die verschiedenen Bildschirmgrössen abgefragt. Außerdem wird beim Layout verstärkt mit Prozent-Angaben gearbeitet.

Technik

Diese Responsive-Vorlage verwendet keinerlei Javascript. Weder für die Navigation noch für das Ansprechen der CSS3-Media Queries bei älteren Browsern. Auch die Animationen sind ohne Javascript gestaltet, nämlich nur per CSS. 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.




Icons

Wir verwenden Font-Icons

Font-Icons sind sozusagen grafisch wirkende Schriftzeichen, die aber wie normaler Text behandelt werden (denn es sind ja Textzeichen) und damit eine schnellere und leichtere Formatierung gegenüber grafischen Icons per Bildformat (z.b. gif, jpg oder png) ermöglichen. Wir haben so eine kostenlose Icon-Schrift in dieser Vorlage bereits anbei. Sie heißt "Fontawesome".

Tipps zu den Font-Icons

Viele weitere Icons sind möglich, denn die Icon-Schrift "FontAwesome" ist ja bereits in dieser Vorlage installiert. So fügen Sie ggfls. weitere Icons hinzu oder ersetzen die vorhandenen. Der nachfolgende Link zum Anbieter zeigt weitere Infos sowie auch eine Übersicht aller Icons: fontawesome


Wir haben hier für Sie die Icons noch weiter optimiert, da der Anbieter auch eigene CSS-Klassen befürwortet. Sie sehen es zum Beispiel vorstehend bei den Social Media Icons in Form der Butttons.


Favourite Links

Ein Beispiel für ein Menü im Text. Hier sollen externe Links angesprungen werden. Also Links zu fremden Webseiten. Somit setzen wir beim Link das Attribut target="blank", damit die hier verlinkten Seiten in einem neuen Browser-Fenster geöffnet werden. Vorteil: Ihre Seite bleibt dadurch im anderen Browserfenster immer leicht erreichbar.



Fotos

Hinweis zu den Fotos

Die Fotos in dieser Vorlage sind von https://picjumbo.com/ Wir haben diese responsive angelegt. Gerne können Sie natürlich auch Ihre eigenen Fotos verwenden.