Lernen Sie unsere Trainer kennen CSS-Vorlage

Dunkle Fotografie und gelbe Panels definieren das Designsystem

Das dunkle Fitnessfoto verleiht dem Einstiegsbereich das stärkste visuelle Gewicht, während der zentrierte Text und der Button „Heute Tour buchen“ als kontrastreicher Fokuspunkt vor dem Bild stehen. Der Übergang zu den hellweißen Inhaltsbereichen sorgt für einen klaren Wechsel des Hintergrunds, sodass die acht Trainerkarten als einheitliche Sammlung und nicht als isolierte visuelle Elemente wahrgenommen werden. Markante serifenlose Überschriften wahren die Hierarchie sowohl im Hero-Bereich als auch im Teamabschnitt.

Die wiederkehrenden Profilkarten bilden das konsistenteste Gestaltungsmuster der Seite. Runde Bildausschnitte heben die Trainerporträts von den umgebenden rechteckigen Inhalten ab, während kompakte Kartenlayouts dafür sorgen, dass die acht Einträge optisch aufgeräumt wirken. Rollenbezeichnungen wie „Cheftrainer“, „Geschäftsführer“, „Trainer“ und „Crossfit-Guru“ bringen textliche Abwechslung, ohne das einheitliche Kartendesign zu durchbrechen. „Biografie“-Buttons wiederholen einen Interaktionsakzent im gesamten Verzeichnis und verbinden die einzelnen Karten nach demselben Gestaltungsprinzip.

Gelb konzentriert sich auf den Kontaktabschnitt, in dem ein gelber Hintergrund in voller Breite ein zentriertes weißes Panel umschließt. Dieser Kontrast trennt den Anfragebereich von den weißen Teaminhalten und verleiht dem Formular eine klare visuelle Abgrenzung. Der dunkle Footer und die Navigation verstärken den Schwarz-Weiß-Rahmen an den Seitenrändern. Zusammen bilden diese Farben, Bildgestaltungen, Abstandsverhältnisse und wiederholten Kartenregeln ein Styling-Fundament, das angepasst werden kann, während die bestehende Abschnittsfolge erhalten bleibt.