Es soll ein einfaches Template per HTML5, CSS3 & JavaScript anhand der im Anhang befindlichen PNG-Vorlage realisiert werden.

Es handelt sich hierbei um eine Artikel-Übersichtsseite in Kacheloptik. Jeder Artikel beinhaltet folgende Komponenten: Intro-Bild, Kategorie-Tag, Headline, Fließtext, Link. Die Artikel werden folgenden drei Kategorien zugeordnet: Fleisch, Gemüse, Obst.

Standardmäßig sind alle Artikel sichtbar. Über einen Kategorie-Filter lassen sich einzelne Kategorien ein- und ausblenden.

Oberhalb des Content-Bereiches existiert ein Header mit Logo und einigen Menüpunkten in horizontaler Anordnung. Der Schriftzug „Brandname“ darf auch gerne durch ein dekorativeres Logo in Form einer PNG- oder SVG-Grafik ersetzt werden.

Das Template soll responsive realisiert werden. Hierbei dehnen sich Header- und Content-Bereich maximal auf 1260 Pixel aus und werden mittig im Browserfenster zentriert. Dies entspricht exakt der Darstellung in der PNG-Vorlage.

Bei kleineren Screens sollen sich die Elemente entsprechend des verfügbaren Platzangebotes neu verteilen / verkleinern. Hier können Sie nach eigenem Ermessen entscheiden, wie genau dies funktionieren soll.