Vegan und ausverkauft
Gäste sollen auf einen Blick sehen, welche Speisen vegan sind und was heute ausverkauft ist.
Die veganen Speisen sind mit 🌱 gekennzeichnet, aber das kleine Blatt übersieht man leicht. Ihre ganzen Zeilen, die Namen und die Preise, werden grün: #2e7d32. Die Zeilen der veganen Speisen haben noch keine Klasse, du entscheidest also selbst, wie du sie auswählst.
Der Apfelstrudel ist heute ausverkauft. Er bleibt auf der Speisekarte, damit die Gäste wissen, dass das Café ihn hat, aber seine Zeile ist verblasst: nur halb sichtbar, sodass der cremefarbene Hintergrund durchscheint. Der Name und der Preis verblassen gemeinsam.
Nach dieser Übung sieht die Speisekarte so aus (verkleinert):
Ein Tipp: In der Lektion über Selektoren hast du in index.html einem Element eine Klasse gegeben. Beliebig viele Elemente können sich eine Klasse teilen.
So schreibst du es:
Anweisungen
- 1
Die Zeilen der veganen Speisen sind grün, die Namen und die Preise.
- 2
Die Zeile der ausverkauften Speise ist nur halb sichtbar, der Name und der Preis.