Marathonläufer CSS-Vorlage

Blaugrünes Textfeld und Läuferin-Foto prägen das visuelle System des Abschnitts

Das seitenbreite Lauffoto bildet den dominanten visuellen Hintergrund des Blocks, während das blaugrüne Textfeld einen klar definierten Raum für die Botschaft schafft. Seine Platzierung auf der linken Seite verleiht der Komposition ein bewusst asymmetrisches Gleichgewicht: Die Läuferin und die Außenlandschaft bleiben über den Großteil des Abschnitts hinweg sichtbar, während der Text in einer gut lesbaren Überlagerung gebündelt ist. Die abgerundeten Ecken mildern die Kante des Felds gegenüber dem rechteckigen Bild ab und lassen den Handlungsaufforderungsbereich wie ein eigenständiges visuelles Element wirken.

Die Überschrift nutzt große, fette weiße Schrift über kleinerem weißem Begleittext, sodass der interne Kontrast eine klare Leserichtung vorgibt, bevor der Besucher die Schaltfläche „Mehr erfahren“ erreicht. Der blaugrüne Hintergrund trennt den Text zudem vom hellen Himmel und den warmen Farbtönen der Landschaft, was den Kontrast sichert, ohne das Foto vollständig zu verdecken. Als CSS-Template-Entwurf liegt der wesentliche Fokus auf dem Zusammenspiel aus Bildwirkung, Feldfarbe, Eckenradius, Innenabständen, Typografieskalierung und Schaltflächenplatzierung innerhalb dieses einzelnen Abschnitts. Diese gestalterischen Entscheidungen lassen sich für eine andere optische Ausrichtung anpassen, während die Marathon-Trainingsbotschaft und der Aufbau mit einem einzigen Textfeld erhalten bleiben. Durch die statische Interaktion tragen Erscheinungsbild, Abstände und Kontrast den Schwerpunkt des Abschnitts – ganz ohne Bewegung oder wechselnde Inhalte.