Ferea is a café, coffee-shop and bakery HTML template with a working online menu: every drink and pastry has its own page, an add-to-cart button, and a basket that carries through checkout to an order confirmation. A café's website has one job before anything else — to make a visitor want to come in, or order now — and Ferea is built around that appetite, with big warm headlines, cut-out cups and coffee beans that drift as the page scrolls, and a menu that reads like a menu board.

It is written by hand in plain HTML, CSS and vanilla JavaScript. There is no framework, no build step, no jQuery and no animation library: every reveal, scroll scene, slider, tab, accordion, hover and the whole cart is a few lines in one commented stylesheet and one commented script. Fira Sans Extra Condensed and Akshar are self-hosted, every image is local, and the whole folder works from a file:// open or any static host.

It suits an independent café, a specialty coffee roaster, a bakery or patisserie, a tea or juice bar, a coffee chain's local branch, or any food and drink brand that wants a characterful site with a browsable, orderable menu and a blog ready to fill.

Designed for cafés, coffee shops and bakeries

The look is warm and hand-made: a cream page, burnt-sienna headlines in a tall condensed face, copper bands and tilted labels like stickers on a cup sleeve, and photography of drinks and pastries cut out against the page. Hand-drawn stickers sway gently, a "discover more" badge turns, and a word strip runs the café's values across the screen.

The motion is part of the story rather than decoration: the hero cup swings in as the page opens, the "more than coffee" section reads its paragraph in letter by letter as you scroll, the feature cards trade places, the testimonial deck throws its cards aside, and on the about page the story timeline draws itself as you read it. Every page shares the same rhythm, so the menu, the product pages, the blog and the checkout feel like one café.

Key Features

42 hand-coded pages in plain HTML, CSS and vanilla JavaScript
No framework, no build step, no jQuery, no GSAP, no third-party scripts
Working front-end cart: add to cart, quantities, two cart drawers, checkout and order confirmation
14 menu item pages with price, details and a full-size picture viewer
5 menu category pages and a menu page with a tab per category
9 blog posts, each with its own article and related posts
Opening sequence on every page and scroll-linked scenes on the home and about pages
Scroll reveals, staggered groups, a running word strip and swaying stickers in CSS
Home menu slider with arrows, swipe and autoplay that pauses on hover
Mega menu, mobile menu, FAQ accordion and tabs as real buttons with ARIA
Fira Sans Extra Condensed and Akshar self-hosted, with no runtime font requests
Demo newsletter, contact and password forms ready to wire to any service
Respects prefers-reduced-motion throughout
Style guide, instructions, licences and changelog pages included

Included Pages

Home
About
Menu
Menu Item Details
Menu Category
Blog
Blog Post
Contact
Checkout
PayPal Checkout
Order Confirmation
Style Guide
Instructions
Licenses
Changelog
Password Protected
404

Ideal For

Independent cafés and coffee shops
Specialty coffee roasters and coffee bars
Bakeries, patisseries and brunch spots
Tea, matcha and juice bars
Coffee chains and local branches
Food and drink brands with an online menu

Performance & User Experience

With no framework and no library, a page is one stylesheet, one script and its images. Fonts are local woff2 files, photographs ship as AVIF with responsive srcset sizes, and the scroll scenes are paused CSS animations the browser renders frame by frame from the scroll position, so the pages stay smooth on a phone as well as a desktop.

Every control is a real button or link with a name and a keyboard path: the menus, the cart drawers, the tabs, the slider arrows and the FAQ rows all work from the keyboard and announce themselves to screen readers. The basket is kept in the visitor's own browser, so it survives a reload and needs no server. Visitors who ask for reduced motion see every section in place with nothing moving.

Why Choose Ferea?

Ferea gives a café a site with as much character as the place itself, and a menu people can actually order from, in code a developer can read, edit and hand on. The design values are exact, the motion is faithful to the original, the content is real on every page, and nothing in the folder depends on anything outside it.