Marco

Author: Colorlib

Updated: October 2026 · v3.0.1

Credits: Images from Unsplash

Marco is a website template for restaurants, cafés and bistros, built on Bootstrap 5. The layout is responsive and mobile-ready, and on phones and tablets the menu opens as a slide-in panel. There are eight pages: home, about, menu, gallery, blog, blog post, contact and an elements page.

The home page has a full-screen hero, an about section, a food menu you can filter by meal, a table reservation form, a masonry photo gallery with filters, a guest reviews slider and the latest blog posts. The inner pages add an about page with the restaurant’s story, its services and guest reviews, a menu page with the food menu and the reservation form, a gallery page, a blog with a sidebar (search, newsletter, popular posts, categories and tags), a blog post with comments and a comment form, a contact page with the address, a working contact form and a map that loads on click, and an elements page with typography, buttons, tables, form controls and an image gallery. Marco gives you a ready-made site to present a restaurant, its menu and its kitchen, and to take table bookings.

What’s new in 3.0

• Bootstrap 5.3.8 (the earlier release used a Bootstrap 4.0 beta and jQuery 2.2.4), compiled from Sass together with the theme and the Bootstrap 4 proportions the design was drawn with, and plain JavaScript with no jQuery. Swiper 14 replaces Owl Carousel on the guest reviews slider, PhotoSwipe replaces Magnific Popup on the elements gallery, a small filter module and a CSS grid masonry replace Isotope on the menu and gallery, the browser’s own select and date and time fields replace the Nice Select and jQuery UI date picker plugins, CSS submenus replace Superfish, and the unused easing, hoverIntent and animate.css files are gone. Lucide SVG icons and a 1.3 KB social-logo subset replace Linearicons and Font Awesome 4.7 (the Twitter bird is now the X logo). npm run build (Dart Sass and esbuild) compiles one minified stylesheet and one script.
• Lighter pages: the home page went from 3.1 MB and 51 requests to 987 KB and 29 requests, and the contact page from 2.4 MB and 46 requests to 355 KB and 11 requests. Every photo has an AVIF version with the JPEG or PNG as the fallback, real dimensions and lazy loading below the first screen, two oversized background photos are re-encoded, and Swiper and PhotoSwipe load only on the pages that use them. The download is now 4.9 MB (it was 5.7 MB).
• No third-party requests: Poppins is self-hosted, the contact page map is an OpenStreetMap map that loads only when a visitor clicks “Show map”, and a Google Analytics 4 snippet stays commented out until you add your own ID. Before, every page loaded its web fonts from Google Fonts and the Google Maps script, and the contact page map showed only an error panel.
• Working forms: the table reservation form on the home and menu pages sends through php/reservation.php, the contact form, the blog comment form and the elements page form through php/send-email.php, and the footer and blog sidebar newsletter forms through php/subscribe.php, all with validation, a spam trap and an in-page message. Before, the reservation forms posted nowhere and their event list had no name, the comment form had no action, the sidebar newsletter and the elements form could not be sent, and the contact form’s mail script put visitor input in a mail header. The reservation form now uses the browser’s date and time field and offers lunch, dinner, birthday and business meal bookings.
• Accessibility: a skip link and a main landmark on every page, one h1 per page, a labelled menu button, a mobile menu that keeps keyboard focus inside and closes with Esc, submenus that also open on keyboard focus, names on icon-only links and buttons, labelled form fields, selects, switches and progress bars, a visible focus ring and WCAG AA text contrast: a slightly deeper brand red (white text on the old red was 3.97:1), darker body text, a darker shade behind the breadcrumbs on the inner page banners and readable colours for the elements page buttons.
• Fixed: the images in the elements page gallery open in a lightbox (they opened the bare image file); the menu and gallery filters on the home page work independently (both filters were wired to one grid); every page has its own title and description (every page had the same title), with Open Graph tags, a share image and restaurant structured data; and the favicon shows (the file was missing on every page).
• Demo content: restaurant copy replaces off-niche placeholder text in the hero, services, guest reviews, blog cards and elements page, the blog categories are about food, and fictional names, addresses and an example email replace the real ones.