Home



Information

Willkommen

Bei Klick auf den Menü-Button ganz oben, erkennbar an den bekannten drei Strichen, öffnet sich das Menü. Aber zunächst mal herzlich willkommen bei uns. Nachstehend einige Informationen für Sie.

Menü-Animation

Das Menü gleitet gleitet im 45-Grad Winkel hinein, wobei es dabei von transparent zu einer vollen Farbe wechselt. Weiterhin erscheint direkt unter dem Menü-Button ein Schließ-Button (X), welcher den Menü-Button nach oben schiebt, bis dieser letztendlich ausgeblendet wird.

Bereits verlinkt

Das Hauptmenü (Primus bis Sextus) haben wir bereits beispielhaft verlinkt. Dort erwarten Sie mehr Informationen bzw. andere Ansichten. Bitte klicken Sie diese Links. Ach ja, auch die rechtlichen Links namens Impressum, Datenschutz und Disclaimer sind im Fussbereich angelegt bzw. verlinkt.


Responsive

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.

Die Technik

Diese Responsive-Vorlage verwendet keinerlei Javascript. Weder für die Navigation noch für das Ansprechen der CSS-Media Queries bei älteren Browsern, noch für die Animationen. 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 eine der beliebtesten Icon-Schriften 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

Ohne weitere Bearbeitung sind die Font-Icons genauso groß und in gleicher Farbe wie die aktuell verwendete Schrift für den Text. (Als Beispiel:    )


Follow Social Media



Facebook
 
 
 
 


YouTube
 
 
 
 


Twitter
 
 
 
 


Google +
 
 
 
 

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.


Fotos

Einbau der Fotos

Wie Sie die Fotos im Inhaltsbereich einbauen können, erklären wir Ihnen auf der Seite index4.html (Quartus). Anhand von Beispielen zeigen wir dort den entsprechenden HTML + CSS Code an.


Sticky Note

Infobox. Office assueverit per id, facilisis disputando id eam, vim justo iuvaret atomorum te. Ne qui probo iriure argumentum, elaboraret scribentur et eos, est munere aperiam repudiare an.

Est eu aliquip consequuntur, antiopam patrioque mel et, cum ex impetus nominavi. Eam ne augue sonet oportere. Et option necessitatibus vim, ius at facilis sensibus.
Calendar. Bella viva patrioque vel, eum everti detracto no, partem delectus eum in. Mea primis fuisset instructior an, mel quaestio abhorreant cu, ea esse velit ius.
Note. Today cu vix, halleluja nominati platonem ea has, te ius appareat vivendum pertinacia. Cu malis definitionem per, unum definitiones ad sit.

Social Media



Find Us

Ron Robertson
Roxanne Street 12
GB - London

Mail

infokontaktmail@ab.de