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


Information

Willkommen

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



Terra


Aqua


Ignis


Aerea

Bereits verlinkt

Das Hauptmenü (Primus bis Sextus) haben wir bereits beispielhaft verlinkt. Bitte klicken Sie die Links. Die rechtlichen Links namens Impressum, Datenschutz und Disclaimer haben wir ebenfalls bereits verlinkt.





Die Navigation

Das Hauptmenü. Die Buttons sind als transparente "Glossy Buttons" gestaltet und bestehen nur aus CSS, es wurden keine Grafiken hierfür verwendet. Auch Ihr Foto würde somit durch die Buttons durscheinen. Bei kleineren, sprich mobilen Auflösungen, wechselt das Menü von der horizontalen in eine vertikale Darstellung. Außerdem wird das vertikale Menü dann als "Toggle-Menü" angezeigt, es ist dann per Menü-Button (drei Linien) einschaltbar sowie ausschaltbar (X).


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.




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.




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

Follow Social Media


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.

Sweet Romantic Dreams




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.
meine-webseite-url.de