Skip to the case study
ELALFY.
All work

Italic RestaurantRestaurant website conceptLive demo

Bella Tavola

An editorial Italian dining site built without a framework.

A polished Italian dining concept built with semantic HTML, responsive CSS and carefully considered JavaScript interactions.

My part
Front-end development and interface design
Status
Live demo
Built with
  • HTML
  • CSS
  • JavaScript
  • Accessibility
Open live demo (opens in a new tab)

Fresh screenshots of the actual public concept website.

Actual interactive menu from creator-provided screenshots.
Fresh 390 px mobile browser capture.
Bella Tavola — 1 of 3
Bella Tavola public restaurant concept homepage

Fresh desktop capture of the fictional restaurant concept.

Why it exists

Translate a refined restaurant identity into an accessible, responsive website, with a browsable menu, deliberate typography and clear editorial navigation.

My part: front-end development and interface design.

How it is built

Semantic HTML5, CSS custom properties, Grid and Flexbox, and vanilla JavaScript. DOM events, accessible overlays and Intersection Observer provide the interactive behaviour without a framework dependency.

What is implemented

  • Responsive editorial restaurant presentation
  • Interactive menu and dish overlays
  • Keyboard-operable gallery and lightbox
  • Focus-managed dialogs
  • Validated demonstration forms
  • Reduced-motion-aware scroll reveals

Hard parts and decisions

Rich interactions without a framework

Use focused DOM components with keyboard handling, focus trapping and semantic controls.

Clear concept boundaries

Identify the restaurant and forms as demonstrative rather than implying real customers or operational bookings.

Where it stands today

Live demo

Public fictional restaurant concept. Reservation and newsletter forms simulate processing; they do not book tables or send email. Business claims and testimonials are illustrative.