Kafelo is a cafe website template: a warm, crafted HTML5 template for specialty coffee shops, cafés and small roasteries. Crema and espresso on sand and kraft paper, caps headings with an italic voice, torn-paper edges, drawn cups and line-art brewing icons give it the feel of a real coffee bar. Underneath, it runs real café logic: which café is open now and until when, and a menu with dietary filters and sizes. It also has a drink builder that prices, weighs and doses every cup, plus real pickup and table slots.

In addition, there are a brew calculator with a step timer, a bean subscription and events with seats left. Finally, it has a loyalty card and a shop with a bag, coupons, shipping and tax. It ships with light and dark mode, right-to-left support and WebGL layers – slow curls of steam over the night bands and the cup’s steam written in light in the footer.

Three Home Pages

• Home 01 – Café & Kitchen: a hero slider with the crest, a live open-now line and a hero that zooms out as you scroll away. Then comes a torn-paper booking band with a table bar that shows the tables free. Next come three numbered cards and a film band. Then come four brew methods with their recipes, the single origin on the bar this week, the menu with drawn cups, beans and brew gear. Finally, the page ends with a photo mosaic and the journal.
• Home 02 – Roastery & Bar: a night-led split hero with a ghost word, the roastery film, a live opening-hours box and a people strip. Then comes Bean To Cup – nine stages from the cherry to the cup glide sideways with the scroll. Finally, the page ends with eight drawn cups with their recipes, guest voices and the journal.
• Home 03 – Beans & To Go: a packshot hero with a ghost word, two promotions with the next Friday’s date and the merchandise grid with filters. Then comes a Friday band with a live countdown. In Know Your Cup, espresso, milk and foam pour into a glass with the scroll. Each layer shows its real share of the chosen drink. Finally, the page ends with items on sale, the three cafés with their live status and the partners.

Café Pages

• Our Menu: five categories and dietary filters (vegan, dairy free, gluten free, nut free) that know which milk makes a drink fit. It also has search, cup sizes that reprice every drink and breakfast hours.
• Order Ahead: build a drink – size, milk, extra shots and syrups – with its price, energy and caffeine. Then add bakes, pick a café and a real pickup time, and get an order number. Continue never blocks; only Place Order checks.
• Book A Table: party, day (closed days crossed out), real slots with the tables free, the area that can seat you (the terrace in summer), details and a reference.
• Brew Guide: dose, water, ratio, grind and temperature for six methods and any number of cups, and a timer that talks you through each pour.
• Bean Subscription: coffee, grind, bag and frequency priced per delivery and per month. It also has the saving, cups a day and the next three delivery dates.
• Our Cafés: three locations with live opening hours, their week and a map. Events with a month calendar and seat booking.
• The Kafelo Shop: filters, sort and search, product page, bag and coupons (one only on Fridays). Then come a free-shipping meter, tax, checkout with an order number, a wishlist and an account with the loyalty card.

Inner Pages

Kafelo includes Our Menu, Order Ahead, Book A Table, Events and Event Details. It also has Our Cafés, Our Process, Brew Guide, Bean Subscription and What We Offer. Then come Shop, Product, Cart, Checkout, Wishlist, My Account, About Us and Our Baristas. There are also Barista Profile, Gallery, FAQ with search, Blog and Blog Details. It also has Contact (working PHP form and map), Login, Register and Forgot Password. Finally, there are Coming Soon and 404 – thirty-two pages in total.

Cafe Website Template Features

• 32 HTML pages, 3 unique home page designs
• Light and dark mode on one switch, remembered between visits, with no flash on load
• Right-to-left stylesheets for every page and a flag language picker that turns any page around (Bootstrap RTL included)
• WebGL layers tinted by the theme colours: rising steam and the footer cup’s steam written in light
• Real café logic from one data block: open now, menu filters, drink builder, pickup and table slots, brew calculator, subscription, events, shop totals, loyalty stamps
• A steam preloader, reveals that clear out of a veil of steam, and three scroll moments that never pin the page
• Drawn cups and line-art icons in two inks, kraft-paper panels and torn-paper edges
• Swiper sliders, Fancybox video and photo popups, counters
• prefers-reduced-motion support for accessibility
• CSS-variable design tokens for both themes
• Working PHP form handler with optional invisible reCAPTCHA v3
• Font Awesome Free loaded locally
• Fully responsive with a desktop-first breakpoint system and wide-screen layouts
• W3C valid, zero console errors
• Well-commented code with a numbered CSS table of contents and JS index
• Documentation included

This cafe website template ships with documentation, free lifetime updates and an instant download. Every page also works on phones, tablets and desktops. Kafelo also comes as React, Vue, Angular and WordPress, or in the developer bundle at 20% off. Browse more Restaurant & Cafe HTML5 templates.

Credits

Bootstrap 5.3, jQuery 3.7.1, Swiper 11, GSAP 3 with ScrollTrigger, Fancybox 3.5, Font Awesome Free, RTLCSS, Google Fonts (Oswald, Merriweather).