Gestaltung einer Navigationsleiste

Bauen Sie die Menüleiste aus der Abbildung nach. Das dunkelblaue Element ist ein nav-Element, die hellblauen Menüpunkte sind div-Elemente.

Sie können es selber versuchen oder sich an der folgenden Anleitung orientieren:

1. Hinterlegen Sie in Ihrem HTML-File ein Navigationselement mit vier div-Elementen. Jedes div-Element soll zudem einen Link mit dem Text aus der Abbildung enthalten. Der Link selbst kann zur Vereinfachung die eigene Seite referenzieren.
2. Referenzieren Sie im HTML-File das zugehörige CSS-File und hinterlegen Sie dort die folgenden Regeln:
   1. Versehen Sie alle <nav>- und <div>-Elemente mit jeweils einer beliebigen Hintergrundfarbe.
   2. Definieren Sie das <nav>-Element als eine Flexbox. Ihre Inhalte sollten auf kleinen Bildschirmen untereinander und auf breiteren Bildschirmen nebeneinander stehen.
   3. Rücken Sie den Inhalt der Menüpunkte (div-Elemente) von allen Seiten um 10 Pixel ein.
   4. Hinterlegen Sie links und rechts von jedem Menüpunkt einen Rand von jeweils 5 Pixeln.
   5. Runden Sie die Ecken der Boxen aller Menüpunkte mit der Eigenschaft border-radius ab.
   6. Fügen Sie beim Navigationselement <nav> oben und unten eine Einrückung (padding) von je 20 Pixel ein.
   7. Rücken Sie analog alle Inhalte des <nav>-Elementes um je 10 Pixel links und rechts ein.
   8. Wählen Sie für die Breite der <nav>-Box eine geeignete Pixelanzahl.
   9. Wählen Sie für den vertikalen Abstand der Menüpunkte in der Smartphone-Ansicht einen geeigneten Abstand.