Gesamtübersicht aller Musterdesigns
Nutze diese Übersicht als Kopiervorlage für deine Inhalte. Jedes Element ist mit einer Musternummer versehen.
Musterdesign 1: Hero-Header Modul
Musterdesign 2: Standard Kurs-Karten (.tanz-card)
Musterdesign 3: Angebots- & Preis-Boxen (.angebot)
Empfehlung
Monats-Abo
49 €
- Alle Tanzkurse inklusive
- Community Events
- Klasse .ok für Häkchen
VIP Flatrate
Nutzt die Klasse .salsa-highlight-box für den farbigen Akzent oben.
- Privatstunden inklusive
- Alle Workshops frei
Musterdesign 4: Team-Vorstellung (.team-member-card)
Fahre über das Bild: Der orange Ring erscheint durch die CSS-Logik automatisch.
„Hier passt das Zitat perfekt neben das Team-Mitglied.“
Musterschüler
Musterdesign 5: Zeitstrahl / Timeline Muster
Einlass & Begrüßung 01
Start der Tanzparty 02
Musterdesign 6: Video-Liste & Pulsierende Elemente
Interaktiver pulsierender Button:
Google Rezension abgebenMusterdesign 7: Kontakt-Modul & Partner-Grid
Muster-Kontaktformular
Enzyklopädie der versteckten CSS-Schätze (Teil 2)
Musterdesign 21: Klassische Bild-Umfließungen
Spezialisierte Klassen für Bilder, die den Text perfekt umfließen (Responsive Floats).
Klasse .pic3left (32% Breite): Dieser Text umfließt das Bild auf der linken Seite. Auf mobilen Geräten springt dieses Bild automatisch auf 100% Breite um. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet.
Klasse .pic4right (24% Breite): Die schmale Variante auf der rechten Seite. Ideal für Porträtfotos innerhalb eines langen Textes.
Musterdesign 22: Icon-Skalierung & Effekte
icon-large
icon-2x
icon-3x
icon-4x
icon-spin
Kombiniere Icons mit Rahmen: (Klasse: icon-border)
Musterdesign 27: Das Font-Awesome Icon-Lexikon
Web-Applikation Icons
icon-cog
icon-trash
icon-home
icon-search
icon-user
icon-envelope
icon-flag
icon-camera
icon-calendar
icon-comment
icon-cart
icon-bullhorn
Navigation & Pfeile
chevron-right
chevron-left
arrow-right
double-right
icon-reorder
external-link
icon-signin
icon-signout
Social Media Brands
google-plus
github
rss
Musterdesign 28: Akzentuierte Adressbox
Musterstraße 12
96047 Bamberg
0951 / 1234567
info(at)webarte(dot)de
Nutze die Klasse .sp auf einem DIV, um einen vertikalen Akzentbalken für Textblöcke zu erzeugen.
Musterdesign 23: Listen mit Bild-Bullets
Play-Icon Liste (.play)
- Video-Lektion Salsa
- Bachata Grundschritt
- Rueda de Casino
OK-Icon Liste (.ok)
- Inklusive Getränke
- Inklusive Parkplatz
- Zertifizierte Lehrer
Musterdesign 24: Responsive Steuerung
Musterdesign 25: Kurs-Level Karten
Level 1
- Grundschritt Vor/Zurück
- Rechtsdrehung Dame
Level 2
- Cross Body Lead
- Enchufla
Masterclass
Intensives Training für Showgruppen.
Musterdesign 26: Full-Width Background Section
Musterdesign 29: Experten-Layouts & Utility-Klassen
Zentrierung durch Offsets (Klasse: .fg-off-X)
Ich bin perfekt zentriert
Dieses Element nutzt fg-col-6 und fg-off-3. Das bedeutet: 3 Einheiten Platz links, 6 Einheiten Breite. Das ist sauberer als jedes manuelle Margin-Gefummel.
Spezielle Text-Klassen
Upper-Case & Spacing
Diese Box nutzt den Blocksatz deiner CSS in Kombination mit Small-Caps (Kapitälchen).
"Durch die line-height: 1.5 in deiner Body-CSS bleiben auch lange Texte bei kleinen Schriftgrößen extrem gut lesbar."
Listen mit Icons (Feste Breite)
In deiner CSS haben Icons in Listen eine feste Breite (width: 1.25em), damit die Texte darunter exakt fluchten:
- Punkt Eins mit exakter Ausrichtung
- Zweiter Punkt unter dem ersten
- Dritter Punkt perfekt bündig
Das Zusammenspiel von .pic2left und .pic2right
Wenn du zwei Bilder direkt nebeneinander haben willst, ohne das Grid zu nutzen (z.B. innerhalb eines Text-Abschnitts):
Diese Klassen (pic2left/pic2right) haben ein max-width: 49% eingebaut und sorgen für den perfekten Spalt dazwischen.
Der versteckte "Back to Top" Button
Deine CSS enthält einen fertig gestylten Button für den Rücksprung zum Seitenanfang:
#backtotop (Farbe: #4CA6D5)
Musterdesign 30: Die letzten Details & Spezial-Klassen
Diese Elemente runden die Enzyklopädie ab. Sie nutzen spezialisierte Formatierungen für Listen und Icons.
Icons mit Hintergrund-Formen
In deiner CSS kannst du Icons kombinieren, um sie in Rahmen zu setzen (Klasse: icon-border):
Umrahmt
Muted (Grau)
Runder Rahmen
Hierarchische Listen (Einzüge)
Ungeordnete Liste (ul)
- Hauptpunkt Salsa
- Unterpunkt: Rhythmus
- Unterpunkt: Footwork
- Hauptpunkt Bachata
Geordnete Liste (ol)
- Schritt Eins (Vorwärts)
- Schritt Zwei (Seitwärts)
- Variante A
- Variante B
Zustände für Formular-Elemente
Footer-Link Styling (.footer-links)
Die Klasse .footer-links nutzt die Farbe #FFF8B3 für den Text und orangefarbene Links beim Hover.
Trennlinien & Abstände
Standard HR:
Dezente HR (Inline Style):
Breite HR (deine Klasse hr):
Musterdesign 31: Status-Indikatoren & Badges
In deiner CSS sind Klassen für kleine "Labels" hinterlegt, mit denen du den Status von Kursen (z.B. "Fast voll" oder "Neu") markieren kannst.
Diese Labels lassen sich perfekt in die .tanz-card oder .level-card integrieren.
Musterdesign 32: Listen mit exakter Icon-Flucht
Die Klasse li [class^="icon-"] sorgt dafür, dass Icons in Listen immer die gleiche Breite einnehmen (1.25em). Das verhindert "zackige" Texteinzüge:
- Perfekte Ausrichtung: Alle Texte beginnen an der gleichen vertikalen Linie.
- Struktur: Egal wie breit das Icon ist (Uhr oder Haken), der Text bleibt bündig.
- Profi-Look: So sehen deine Kurs-Vorteile sauber aus.
Musterdesign 33: Der Akzent-Balken für Fließtext
Die Klasse .sp kann nicht nur für Überschriften genutzt werden. Wenn du sie auf ein div anwendest, das Text enthält, erzeugst du einen eleganten "Editorial-Look" mit dem blauen Seitenbalken.
Musterdesign 34: Responsive Sichtbarkeit (Die "Geister"-Klassen)
.hideOnMobiles).
.hideOnDesktops).
Musterdesign 35: Der Clearfix (.clear:both)
Wenn du mit umfließenden Bildern (wie in Design 21) arbeitest, ist dieses Element dein wichtigstes Werkzeug, um das Layout "zurückzusetzen":
Es sorgt dafür, dass nachfolgende Inhalte (wie dieser Satz) nicht mehr das Bild umfließen, sondern sauber darunter neu beginnen.
Musterdesign 36: Fortgeschrittene Komponenten & Feinschliff
Diese letzte Sektion zeigt die komplexesten Verschachtelungen deiner CSS-Struktur.
Musterdesign 36: Kundenstimmen-Grid
„Klasse .testimonial-box kombiniert mit dem Grid-System. Hier sieht man, wie sich die Sprechblase automatisch an die Spaltenbreite anpasst.“
Tanzschüler A
„Dank der Flex-Eigenschaften in deinem CSS bleiben die Avatare immer sauber unter der Sprechblase ausgerichtet.“
Tanzschülerin B
Musterdesign 37: Feature-Icons (Zentriert)
Leidenschaft
Kombination aus icon-4x und align-center.
Community
Ideal für die 'Warum wir'-Sektion.
Erfolg
Die Icons erben deine Akzentfarbe.
Qualität
Nutzt das 12er Grid (fg-col-3).
Musterdesign 38: Schatten-Variationen
Dieser sehr dezente Schatten (rgba 0.03) ist in deiner Timeline-CSS definiert und wirkt extrem edel auf weißem Grund.
Dieser starke Schatten (rgba 0.08) hebt Elemente deutlich hervor und lässt sie über der Seite "schweben".
Musterdesign 39: Zusammenfassung der Utility-Helfer
Checkliste deiner CSS-Power:
- Responsivität: Vollautomatisch durch
fitrgrid. - Interaktion: Hover-Effekte auf allen Buttons und Team-Karten.
- Icons: Über 360 Symbole durch
font-awesome. - Typografie: Feste Regeln für
h1bish6. - Spezialeffekte: Parallax, Pulsieren, Sprechblasen und Timelines.
ENDE DER ENZYKLOPÄDIE
Du hast nun jede verfügbare Klasse deines Systems erfolgreich dokumentiert.
Design-Enzyklopädie: Alle Komponenten
Musterdesign 2: Standard Kurs-Karten (.tanz-card)
Musterdesign 3: Preis-Boxen & Highlighting
VIP Flatrate
Klasse .salsa-highlight-box mit farbigem Akzent.
- Privatstunden inklusive
- Alle Workshops frei
Musterdesign 4: Team & Kundenstimmen
Hover-Effekt: Der orange Ring erscheint automatisch.
„Klasse .testimonial-box erzeugt diesen Sprechblasen-Look.“
Musterschüler
Musterdesign 5: Zeitstrahl / Timeline
Einlass & Begrüßung 01
Start der Tanzparty 02
Musterdesign 6: Interaktive Video-Liste
Pulsierender Button:
Google RezensionMusterdesign 27: Icon-Lexikon & Skalierung
cog
home
user
cam
play
fb
spin
Musterdesign 21: Bild-Umfließungen (Floats)
.pic3left (32%): Dieser Text umfließt das Bild links. Ideal für redaktionelle Inhalte in WBCE. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo.
Musterdesign 25: Level-Karten & Status-Footer
Level 1
- Grundschritte
- Drehungen
Level 2
- Figuren
- Technik
Musterdesign 12: Tabellen
| Kurs | Tag |
| Salsa | Mo |
| Bachata | Di |
Musterdesign 7: Kontakt-Modul
Musterdesign 38/39: Zitate & Footer-Image
Tanzen ist Träumen mit den Füßen. Das Ende der Enzyklopädie.
Fred Astaire