Tierfarm CSS-Vorlage

Flächen in gedecktem Rot und Anthrazit prägen die Bildgestaltung

Die Gestaltung des Blocks basiert auf dem Kontrast zwischen einem Außenfoto in voller Breite und zwei darüber platzierten einfarbigen Flächen. Das Bild einer Frau mit Ziegen liefert die natürliche visuelle Grundlage, während die überlappenden Flächen in gedecktem Rot und dunklem Anthrazit klar abgegrenzte Bereiche für die Textinhalte schaffen. Da die Flächen über dem oberen Teil des Fotos liegen, beeinflussen ihre Farben und Abmessungen sowohl die Lesbarkeit als auch die wahrgenommene Tiefe der Komposition.

Die linke Fläche nutzt die Beschriftung „Biografie“ und die Profilüberschrift zu Kate Humble, während die rechte Fläche „Kates Bauernhof“ Informationen über den aktiven Bauernhof präsentiert. Weiße Typografie sorgt dafür, dass beide Textgruppen auf den dunkleren Flächen gut lesbar bleiben, und die unterstrichenen „Mehr“-Links greifen ein einheitliches Textlink-Design auf. Die beiden Flächenfarben lassen sich somit als separate Akzente anpassen, während die Unterscheidung zwischen persönlichem Hintergrund und dem Bauernhof-Kontext gewahrt bleibt.

Für das CSS-Styling sind der Kontrast zwischen Flächen und Bild, die Abstände um die beiden Textgruppen sowie die Ausrichtung der zugehörigen Links die wichtigsten Beziehungen. Änderungen an Farbe, Typografie, Innenabständen, Rahmen oder Flächenmaßen sollten die bestehende Überlappung unterstützen, anstatt sie zu einer gewöhnlichen Textzeile abzuflachen. Das Ergebnis bleibt ein einzelner Einleitungsabschnitt, dessen visueller Charakter durch geschichtete Flächen, eine zurückhaltende Farbpalette und ein großformatiges ländliches Foto entsteht.