Extra Farben

von unserer Web & Co

01)

Bei diesem Template handelt es sich um ein responsives HTML5/CSS3-Template. Das bedeutet, das Layout passt sich automatisch an verschiedene Bildschirmgrößen an. Sie sehen die verschiedenen Darstellungen im Vorschaubild, aber Sie können es ebenfalls testen, indem Sie einfach die Breite der Vorlage kleiner ziehen. Sie werden sehen, dass z.B. die Texte aber einer gewissen Größe kleiner werden und das kleine Bild in der Handygröße in die Mitte springt, während die Texte sich darunter anordnen.

Die einzige Grafik, die in diesem Template genutzt wird ist die Beispielgrafik rechts oben, die Sie gerne durch Ihre eigene Grafik ersetzen können. Die Größe dieser Grafik passt sich der Größe des Bildschirmes an. Alle Farben und die komplette Formatierung wurden mittels CSS definiert und sind somit frei anpassbar. So auch die abgerundeten Ecken und Farbverläufe der horizontalen Topnavigation und die Überschriften in der linken Spalte!

Die linke und rechte Box wurde jeweils dynamisch mit 20% der Gesamtbreite angegeben, die Gesamtbreite ist 90% der verfügbaren Bildschirmbreite. Diese Werte können angepasst werden.

H2-Überschrift

CSS3, mit dessen Hilfe diese Gestaltungen realisiert wurden, wird von beinahe allen modernen Browsern unterstützt, bei älteren Browsern besteht hier lediglich der Unterschied, dass die Ecken nicht abgerundet und die entsprechenden Farben nicht als Farbverlauf, sondern einheitlich als grün bzw. grau dargestellt werden. Auch dort wird also im Zweifelsfalle ein durchaus ansehliches Layout angezeigt.

H3-Überschrift

Dieses Set besteht aus 2 HTML-Seiten (index.html und seite2.html) und einer Stylesheet-Datei. Seite 2 können Sie sich anschauen, indem Sie auf "Seite 2" klicken. Das Template erstreckt sich über eine Gesamtbreite von 95% der Bildschirmgröße, passt sich also variabel an. Wenn Sie das Layout der Vorlage bearbeiten wollen, nehmen Sie bitte die gewünschten Änderungen in der Datei style.css vor. Sollten Sie noch nicht viel Erfahrung in der Bearbeitung von CSS-Dateien haben, hilft Ihnen vielleicht die Anleitung in diesem kleinen Tutorial weiter.

H4-Überschrift

Linktexte sehen wie folgt aus: Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

H5-Überschrift

Weiterer Fülltext: Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Diese Vorlage ist Linkware

Das bedeutet, dass Sie diese Vorlage unter bestimmten Voraussetzungen kostenlos nutzen dürfen. Genau Informationen dazu finden Sie in den Nutzungsbedingungen. Mit Download dieser Vorlage akzeptieren Sie diese.