Home

Informationen

Layout

Dieses Template heißt 'Germany Colour Style'.

Black, Red, Gold. Unsere Farben. Schwarz, Rot, Gold, erfreuen sich immer größerer Beliebtheit. Nicht nur beim Fußball. Deutschland ist tolerant, weltoffen, kulturell und bunt und gilt als eines der beliebtesten Reiseländer der Welt. Stellvertretend dafür gibt es hier zum Beispiel ein
rundes Menü und Social Media Buttons in verschiedenen Farben, welche sich auch per CSS-Animation in versch. Richtungen drehen. Auch das Haupt-Menü ist technisch nicht ganz uninteressant, denn die Links passen sich ja dem Kreis an, d.h. jeder Link muss anders eingerückt werden und vor jedem Link gibt es noch ein Font-Icon (Pfeil). Das Besondere ist: Alles wird zentral über eine CSS-Datei gesteuert, eine Änderung hier wirkt sich somit auf alle HTML-Seiten aus. Als Lösung wählten wir hier die CSS-Pseudo-Elemente :nth-of-type() sowie :before aus. Damit ist an also an zentraler Stelle gleichzeitig ein Welchsel des Font-Icons möglich sowie auch eine Regulierung sämtlicher Abstände innerhalb des Menüs. (Hinweis: Darüber hinaus sind natürlich die normalen allgemeinen Änderungen wie Farben, Hintergrundfarben, Schriftfarbe, Zeilenabstände usw. wie immer auch garantiert).

Bereits verlinkt

Klicken Sie auf die Links im Menü (Primus bis Sextus) und Sie sehen wie die Seiten verlinkt sind und erfahren noch einige Informationen.

Flaggen

Flaggen wie folgt nur per CSS erstellt. Man benötigt also keine Grafiken und kann deshalb die Größe schnell anpassen. Den Code dazu zeigen wir auf Seite index4.html (Quartus). Deutschland, Spanien, Frankreich, Polen, Österreich, Italien, Schweiz und Dänemark.



 
 
 
 

 
 
 
 




Nach diesem Prinzip lassen sich weitere Flaggen erstellen, z.B. Niederlande, Belgien, Luxemburg, Ungarn, Finnland, Rumänien, Lettland, Bulgarien, Russland, Littauen, Rumänien, Monaco, Ukraine, Irland, Estland, Armenien, Bolivien, Costa Rica, Elfenbeinküste, Gabun, Gambia, Guinea, Indonesien, Jemen, Kolumbien, Mali, Mauritius, Nigeria, Peru, Sierra Leone, Thailand, Tschad.



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

Diese Responsive-Vorlage verwendet keinerlei Javascript.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.

 

Die Bilder

Die Fotos im oberen Bereich

Auch die Fotos beim Hauptmenü oben können Sie bei Bedarf leicht tauschen, so das auf jeder Seite dort andere Fotos stehen können. Sehen Sie hierzu als Beispiel index6.html (Sextus)

Die Fotos im Inhaltsbereich

Hierfür haben wir drei Beispiele angelegt. Einmal ist das Bild links platziert und der Text fließt rechts herum, ein anderes Mal ist das Bild rechts platziert und der Text fließt links herum. Als drittes ist das Bild zentriert ohne Textfluß arrangiert.

 

Germany
© 2025 | Germany Color Style