Die Kopfzeile und der Hero

Willkommen beim Abschlussprojekt des Tailwind-Kurses! Du kennst jetzt genug Tailwind, um eine ganze Website allein zu gestalten, und genau das machst du in dieser Lektion: die Startseite des Katzenheims Samtpfote, von der Kopfzeile bis zur Fußzeile.

Im Editor findest du die Seite als reines HTML ohne eine einzige Klasse. Sie hat eine Kopfzeile mit der Navigation, den Hero (das section mit id="hero"), die Karten der Katzen, die Schritte der Adoption, das Kontaktformular und die Fußzeile. Am Ende von body steht das kleine Skript des Dark-Mode-Buttons aus der Lektion über den Dark Mode. Du gestaltest die Seite in vier Übungen, Teil für Teil. Füge nur Klassen hinzu und lass die Elemente, wie sie sind: Die Prüfungen suchen nach ihnen.

In style.css haben wir vorbereitet, was die Seite außer @import "tailwindcss"; braucht: die Zeile, die den Dark Mode mit der Klasse dark umschaltet, ein @theme mit der eigenen Farbe des Tierheims, marke (fast dasselbe Orange wie orange-500, in den Tönen 50, 100, 200 und 400 bis 700), und eine Schrift für Überschriften, font-titel (Baloo 2 von Google Fonts, in der ersten Zeile importiert). Du kannst also bg-marke-500 oder font-titel schreiben, genau wie in der Lektion über das Anpassen von Tailwind. Möchtest du eine andere Farbe oder Schrift? Ändere sie in style.css, und die ganze Seite ändert sich mit.

Plane zuerst das Aussehen. Designer entscheiden ein paar Dinge, bevor sie anfangen, damit die ganze Seite einheitlich aussieht:

• Farben. Eine Hauptfarbe für Buttons und Hervorhebungen (marke), ein Grau für Texte, Linien und Hintergründe (das warme stone passt gut zu Orange) und Weiß. Verwende überall dieselben wenigen Töne, zum Beispiel marke-500 für Buttons und marke-600, wenn die Maus darüber ist.
• Größen. Eine große Größe für die Schlagzeile, eine kleinere für die Überschriften der Abschnitte (zum Beispiel text-3xl) und die normale Größe für den Rest. Dasselbe gilt für die Abstände: ein paar Werte aus der Skala, etwa 4, 6 und 12, immer wieder verwendet.
• Breiten. Viele Besucher kommen mit dem Smartphone. Gestalte zuerst für einen schmalen Bildschirm und füge dann hinzu, was sich auf breiteren ändert. Stelle zwischendurch mit der Leiste über der Vorschau auf 375 px (ein Smartphone) und 1280 px (ein Computer) um.

Die Prüfungen in dieser Lektion sind offen: Sie prüfen, ob du getan hast, was eine Anweisung verlangt (zum Beispiel dass die Kopfzeile oben haftet und einen Hintergrund hat), nicht, welche Klassen, Farben oder Größen du gewählt hast. Die Klassen in den Anweisungen sind nur Vorschläge.

Tipp: Dein Code wird nicht gespeichert, wenn du eine Übung verlässt, und die nächste Übung beginnt mit unserer Version der Seite. Wenn du an deinem eigenen Design weiterarbeiten möchtest, kopiere deinen Code (beide Dateien), bevor du weitergehst, und füge ihn in der nächsten Übung über unseren ein.