Zukunftsrestaurant

Schwierigkeitsgrad:

In dieser Aufgabe sollen Sie eine Webseite für ein zukünftiges Restaurant erstellen. Sie können auch ein fiktives Restaurant basierend auf einem Science-Fiction-Film oder einer Serie erstellen, wenn Sie das bevorzugen.

Es soll mindestens drei verschiedene HTML-Seiten mit einem konsistenten (consistent) Design geben.

Dinge, die du mitbringen solltest:

• ✅ Eine Startseite namens index.html
• 🗒️ Eine “Menü”-Seite namens menu.html
  • Füge hier total verrückte Gerichte ein, wie zum Beispiel Pizza mit Ananas🍍 (Total verrückt, ich weiß).
  • Füge gerne Bilder der Gerichte auf der Seite ein.
• 📔 Eine “Über uns”-Seite namens about.html, die etwas über das Restaurant erzählt
• 🎨 Denke etwas über das Design der Website nach, passen die Farben zusammen?
  • Du kannst den Farbpaletten-Generator von Figma verwenden, um Farb-Codes zu finden: Figma Color Palette Generator.

Du solltest auch ein “externes” CSS-Stylesheet verwenden, nenne es style.css. Lies dazu hier: External CSS.

Denke auch an die sinnvolle Verwendung von class und id für die verschiedenen HTML-Elemente: Musst du denselben CSS-Code immer und immer wieder schreiben?

Struktur

• 📔 Eine Navigationsmenüleiste oben auf der Seite, die zu den verschiedenen Seiten führt.
  • Verwenden Sie gerne etwas CSS-Styling hier, um die Navigationsmenüleiste vom Rest zu trennen.
  • Fügen Sie gerne ein „Logo“ oben auf der Seite hinzu.
• ✅ Ein Hauptteil für den Inhalt der Seite.
• 🍕 Das Menü ist eine Liste mit Gerichten. Es können auch Spalten vorhanden sein, Sie entscheiden!

Zusätzliche Herausforderungen:

• 👣 Füge einen “Footer” auf der Seite hinzu, der fiktive “Copyright”-Informationen über das Restaurant enthält.
  • Dieser soll ganz unten auf der Seite platziert werden. Wenn die Seite zu kurz ist, soll ein Leerzeichen zwischen dem Footer und dem Hauptteil der Seite vorhanden sein.
• 🤯 Füge Code hinzu, um den Hauptteil der Webseite zu zentrieren.

Zusätzliche Herausforderungen:

• Fügen Sie passende Animationen hinzu, wenn Sie die Maus über verschiedene Elemente auf der Seite bewegen. Lesen Sie hier mehr über Animationen: CSS Animations.

Ekstra ekstra ekstra (ekstra ekstra):

• Verwenden Sie JavaScript, um eine Art “Paginierung” auf der Menüseite zu erstellen, sodass nur 5 (oder 6) Menüelemente gleichzeitig auf der Seite angezeigt werden.