Hossein AkbariProjekt anfragen

Alle Projekte

Gastronomie

Imbiss mit Lieferservice

Imbiss-Webseite mit kompletter Speisekarte, Lieferservice und einer druckfertigen Karte im Stil eines Flyers.

Branche
Gastronomie
Jahr
2026
Art
Demo-Projekt
Technik
Astro, TypeScript, CSS, Pages CMS

Demo-Fassung: Name, Logo, Adresse und Kontaktdaten sind Platzhalter. Design, Aufbau und Technik entsprechen dem Original.

Startseite von Imbiss mit Lieferservice am Computer

Überblick

Mint, Beige und Bordeaux, Sternenmuster und Doppelrahmen im Stil eines klassischen Imbiss-Schilds. Die Speisekarte im Web, die Druckfassung und die Gerichte auf der Startseite lesen alle aus einer gemeinsamen Datenquelle.

Ausgangslage & Ziel

Eine Karte mit über 70 Gerichten sollte auf dem Smartphone übersichtlich bleiben und gleichzeitig als Flyer gedruckt werden können – ohne sie doppelt zu pflegen.

Mein Beitrag

  • Konzept und Design
  • Umsetzung
  • Druck-Layout mit automatischem Seitenumbruch
  • Pflege-Oberfläche mit Pages CMS

Technische Umsetzung

Astro mit TypeScript. Die Druckfassung ist eine eigene Seite im Format A4 quer: Ein kleines Skript misst jede Spalte und verschiebt überlaufende Gerichte auf Folgeseiten im gleichen Stil. Fotos ohne Freigabe werden beim Build automatisch ausgeblendet.

  • Astro
  • TypeScript
  • CSS
  • Pages CMS

Funktionen

  • 12 Rubriken mit eigener Seite
  • Aufklappbare Gerichte mit Zusatzstoffen und Allergenen
  • Druckfassung im Flyer-Layout
  • Lieferzonen und Stellenanzeigen pflegbar

Auf jedem Gerät

Unveränderte Screenshots aus dem fertigen Build – am Smartphone (390 px) und am Computer (1440 px).

Lange Ansicht der Startseite von Imbiss mit Lieferservice
Startseite · Computer · zum Durchblättern scrollen
Startseite von Imbiss mit Lieferservice am Smartphone
Startseite · Smartphone
Rubrik „Kartoffel“ von Imbiss mit Lieferservice am Smartphone
Rubrik „Kartoffel“ · Smartphone
Rubrik „Kartoffel“ von Imbiss mit Lieferservice am Computer
Rubrik „Kartoffel“ · Computer

Ähnliches Projekt?

Ihre Webseite als nächstes Projekt

Erzählen Sie mir, was Sie vorhaben – ich melde mich mit Rückfragen oder einem Vorschlag.

Nächstes ProjektHerrenfriseur