Header und Footer

Der Header steht auf beiden Seiten: das Logo und die Navigation. Im ersten Kinoprojekt hast du ihn mit Flexbox angeordnet, das Logo links und die Links rechts. Auf einem Smartphone ist dafür kein Platz. Zuerst das Smartphone: Der Header ist eine Spalte, die Navigation steht unter dem Logo, beide in der Mitte, und ab 768 px ist er eine Zeile, wie vorher:

<header class="flex flex-col items-center gap-2 bg-nacht px-4 py-4 md:flex-row md:justify-between md:px-8">

Das ist das Paar flex-col md:flex-row aus der Übung Zeile oder Spalte. items-center funktioniert in beiden Richtungen: In der Spalte setzt es Logo und Navigation in die Mitte der Breite, in der Zeile in die Mitte der Höhe. md:justify-between schiebt sie an die Ränder, aber nur in der Zeile.

Das Logo bekommt die Schrift des Kinos und die Farbe Gold. Die Links sind weiß und werden unter dem Mauszeiger golden. Die alte Klasse logo kann weg: Keine Regel gestaltet sie noch.

Header und Footer sind auf beiden Seiten gleich. Wenn du sie auf einer Seite fertig hast, kopiere sie auf die andere. Die Prüfungen sehen sich beide an.