Marian

Author: Colorlib

Updated: October 2026 · v3.0.0

Credits: Images from Unsplash

Marian is a website template for hotels, resorts and guest houses, built on Bootstrap 5. The layout is responsive and mobile-ready. There are fifteen pages: home, about, services, rooms, journal, eight article pages, contact and elements.

The home page has a hero with a booking bar, the hotel’s story, six rooms with their own prices, the restaurant and pool, a guest review slider, the latest journal posts and a photo strip. The booking bar sends the chosen dates and guests to the rooms page, which shows the stay and carries it into a room enquiry on the contact page; it is a demo flow, and nothing is reserved. The inner pages add the hotel’s story, the restaurant and pool, a journal of eight posts with categories, tags, search and pagination, article pages with an author, comments and a comment form, a contact page with a contact form, contact details and a map that loads on click, and an elements page with typography, buttons, lists, a table, form elements and an image gallery with a lightbox. Marian gives you a ready-made site for a small hotel.

What’s new in 3.0

• Bootstrap 5.3.8 (the earlier release used Bootstrap 4.1.3 and jQuery), compiled from Sass with the Bootstrap 4 proportions the design was drawn with, and plain JavaScript with no jQuery. Swiper 14 replaces Slick and Owl Carousel on the review slider and the photo strip, PhotoSwipe replaces Magnific Popup in the Elements gallery, a keyboard-friendly mobile menu replaces SlickNav, the date fields and selects are native, and unused plugins such as WOW and a sticky-header plugin are gone. npm run build (Dart Sass and esbuild) compiles one minified stylesheet and one script.
• Lighter pages: the home page went from 8.8 MB and 66 requests to 1.1 MB and 35 requests, the rooms page from 3.4 MB to 727 KB, and the contact page from 2.4 MB and 72 requests to 382 KB and 13 requests. Every photo has an AVIF version with the JPEG or PNG as the fallback, real dimensions and lazy loading below the first screen; the hero photo is preloaded and went from 1.9 MB to 354 KB at its full width, the hero is one slide (its three slides showed the same photo), and the loading screen that hid every page until it had loaded is gone. The download went from 27.6 MB to 8.3 MB.
• No third-party requests: Lato and Noto Serif are self-hosted, the Font Awesome and Themify icon fonts are replaced by Lucide SVG icons and a small social-logo subset (the Twitter bird is now the X logo), and the unused ElegantIcons font is gone. The contact page map is an OpenStreetMap map (no API key needed) 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 fonts from Google Fonts and the contact page loaded Google Maps.
• Working forms: the contact form, the newsletter forms in the footer and the journal sidebar, and the article comment forms send through php/send-email.php (PHP on your host), with validation, a spam trap and the result shown on the page. The booking bar sends the chosen dates and guests to the rooms page, which shows the stay and carries it into an enquiry for the room you pick. It is a demo flow and nothing is reserved; to take real bookings, point it at your booking engine.
• Accessibility: a skip link, a main landmark and one h1 per page, labels on every field, names on icon-only links and buttons, keyboard access to the submenus, a labelled mobile menu button, visible focus rings and WCAG AA text contrast. The gold buttons and badges have dark text (7.3:1), gold text uses a darker gold (6.2:1), the body and meta greys are darker, and the review arrows, footer social icons and menu button reach 3:1.
• Fixed: every page scrolled sideways at tablet width (it was 800 px wide on a 768 px screen, because the footer email could not wrap and a slider arrow stuck out); every journal title opened the same article, and each now opens its own; an unclosed tag made parts of the pages bold by accident; and links that pointed nowhere now go to the rooms, the booking bar, the restaurant and pool, journal posts and categories.
• Demo content: hotel copy instead of placeholder text, six distinct rooms with their own prices (the room cards were six copies of one room), two different guest reviews, a journal of eight posts that match their photos, each on its own page, and a fictional address, phone and email. A few photos with brand logos or a printed portrait were blurred or replaced.