Die Navigationsleiste

Zeit für das letzte kleine Projekt! Diesmal gestaltest du eine Seite mit dem, was du in den Lektionen Display und Position und Flexbox gelernt hast. Wie bisher sagen die Anweisungen, wie die Seite aussehen soll, und wie du dorthin kommst, bleibt dir überlassen.

Das Projekt. Samtpfoten betreut Katzen in ihrem eigenen Zuhause, während ihre Besitzer verreist sind, und braucht eine Seite mit seinen Preisen. Das HTML und das Aussehen der Teile der Seite (die Farben, die Schrift, die Karten und die Knöpfe) sind in style.css schon fertig, aber alles steht untereinander. In drei Übungen gestaltest du die Navigationsleiste, stellst die Preiskarten nebeneinander und hebst den beliebtesten Tarif hervor. Jede Übung setzt dort an, wo die vorherige aufgehört hat.

Am Ende sieht die Seite so aus (verkleinert):

Die Aufgabe. Die Navigationsleiste oben hat das Logo an ihrem linken Ende und die Links an ihrem rechten Ende, beides in der Mitte der Höhe der Leiste. Zwischen den Links sind 24px Abstand.

Ein Tipp: Die Links stehen in einem eigenen div mit der Klasse verweise. Ein Element kann gleichzeitig ein Flex-Item und ein Flex-Container sein.