(0000) 0000000-50
(+49) 0000-1234567
City Lights
Flat & Responsive

Informationen

Template

Dieses Template heißt ' City Lights '. Die sieben Seiten 'Home' (diese Seite) bis Septimus, sind bereits als Beispiel verlinkt. Bitte klicken Sie diese, um zusätzliche Infos zu erfahren und zu sehen wie die Unterseiten angelegt sind.

Eine Liste, verlinkt

Mit animiertem Font-Icon. Fahren Sie mit der Maus über den Link, dann ändert sich die Linkfarbe und insbeondere dreht sich der vorangestellte Pfeil, wobei dieser auch die Farbe wechselt.

Das Menü

Das Menü ist abgerundet sowie mit transparentem Farbverlauf und ist bei allen Auflösungen vertikal angeordnet. Es schaltet bei kleinen Auflösungen NICHT zu einem Toggle-Menü um.

 

 

Die Technik

Fotos

Auf den Unterseiten haben wir auch mehr als ein Foto im Inhaltsbereich eingebaut. Zum Beispiel hier die Seiten Secundus (index2.html) oder Quintus (index5.html).

Einbau der Bilder

Bei den Fotos im Inhaltsbereich haben wir uns für die CSS-Technik mit 'display:inline-block' entschieden. Wir beschreiben es Ihnen hier in einem Tutorial auf der Seite Quartus (index4.html)

Animation beim Menü

Bei Mausberührung des Hauptmenüs ergeben sich verschiedenen Animationen wie folgt:

 

About Us

About Us. Ein paar Worte über uns.

Hier Beispieltext per Lorem Ipsum. Ex eos tale dolor, volumus theophrastus ea ius. Qui animal expetenda no, natum forensibus pri in. Ne mei justo lorem Sextus (index6.html) nonumy, eripuit oportere adversarium et pri, putent disputando ne vim virtute appetere in eam, pro dicit timeam impetus ut.


Wir geben 100 % und sind 24 Stunden am Tag für Sie da! Sieben Tage die Woche. Zwölf Monate im Jahr.


Id vel voluptua invidunt, euismod deseruisse ei eam, eam ex salutandi efficiendi. Alia cibo nihil eum no. Illum nobis integre eos ne, ex mei augue quaestio, et salutandi referrentur eos. Oratio invenire ei cum, no suas dicam deleniti duo. Sit omnium periculis splendide ex, vix ei assum adversarium, easum sedamus.

 

Responsive Webdesign

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. Somit kann man auch auf das Hoch- oder Querformat eines mobilen Gerätes reagieren. Außerdem wird beim Layout verstärkt mit Angaben in Prozent gearbeitet.

So testen Sie

Hier auf der Seite Primus (index1.html) 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.
© 2025 City Lights