Elia & Prozymi Bakery

Overview

Elia & Prozymi ("Olive & Sourdough") is a concept site for a neighbourhood bakery, built to show what a small food business gets from a simple, well-made website. Most bakeries and cafés need the same four things online: what they sell, when they are open, where they are and how to order. The goal was one page that answers all four in under a minute, in Greek and English.

The challenge

• Cover the menu, hours, location and ordering on a single page without it feeling crowded.
• Serve local customers in Greek and visitors in English without maintaining two sites.
• Take event orders with no server, database or monthly fees.
• Keep it easy to reuse: one file that can be re-skinned for the next client.

Design

The look is warm and simple: a flour-cream background, a terracotta accent and dark brown text. Headlines are set in Literata, a serif with full Greek support, paired with Inter for body text. Instead of stock photography, the hero uses a drawn loaf in an arched frame, ready to be replaced with a photo of the real shop. Prices follow the Greek format (4,50 €) and times use the 24-hour clock.

Features

• Greek/English toggle: every line of copy, the page title and the order form switch language, and the choice is remembered on the next visit.
• Event order form: name, phone, pickup date (past dates are blocked) and order details, sent as a pre-filled email, followed by a confirmation message.
• Tap to call: the header button dials on phones; on desktop it reveals the number and copies it.
• Menu, reviews and visit sections: six items with prices, customer quotes, opening hours and a map link.

Built for every screen

Below 820px the layout becomes a single column, the menu stacks into one card per row, and the header keeps only the language switch and the call button, the two actions that matter most on a phone.

Performance and SEO

The whole site is one HTML file with inline CSS and a few lines of vanilla JavaScript: no framework, no build step and no libraries to download. It sets a meta description, the correct page language for Greek and English, and an SVG favicon. The only external request is Google Fonts.

Tech stack

HTML, CSS, vanilla JavaScript, Google Fonts (Literata, Inter).