Schwimmunterricht CSS-Vorlage

Orangefarbene, gelbe und blaue Karten prägen das visuelle System des Abschnitts

Die drei Angebotskarten bestimmen den Stil des Blocks durch Kontrast statt durch ein separates Dekorationselement. Gesättigte orangefarbene, gelbe und blaue Flächen sind in einer horizontalen Reihe angeordnet und enthalten jeweils weißen Text, eine Kategoriebezeichnung, einen beschreibenden Fließtext und einen „Mehr“-Link. Da die Karten bei unterschiedlicher Farbgebung dieselbe Funktion und Anordnung teilen, können Besucher Sommertouren, Gruppentouren und Surfcamps auf einen Blick unterscheiden.

Die Karten überlappen den oberen Rand eines breiten Surffotos, sodass das Bild zu einer visuellen Basis für die Angebotsinformationen wird und nicht wie eine isolierte Illustration wirkt. Großzügige Innenabstände bieten dem Text ausreichend Raum, um vor den kräftigen Farbflächen lesbar zu bleiben, während das große Bild unterhalb der Karten Frische und Dynamik einbringt. Die Erwähnung von Reykjavík und der siebentägigen Reise im Text der Sommertouren verleiht den Karten zusammen mit dem Hinweis auf Highlights und Bewertungen bei den Surfcamps unterschiedliche inhaltliche Schwerpunkte, ohne die visuelle Struktur zu verändern.

Für eine Umsetzung als CSS-Template sind vor allem die Farbverteilung, die weiße Typografie, die Kartenabstände, die Überlappung und der Bezug zum Bild von Bedeutung. Diese Eigenschaften lassen sich gezielt anpassen, während das Inhaltsmodell mit drei Kategorien erhalten bleibt. Das benutzerdefinierte CSS von Nicepage bietet Möglichkeiten für punktuelle Anpassungen, wenn Standardsteuerelemente nicht ausreichen; die visuelle Logik sollte dabei jedoch an diese spezifische Reihe von Angebotskarten gebunden bleiben.