Tideloft — Hotel & Resort Booking HTML Template

Tideloft is a premium HTML template for hotels, resorts, boutique stays and hotel-booking sites. It ships five genuinely different homepage layouts and a complete booking front end — search, filterable listings, a full hotel page, rooms and a four-step checkout — in hand-written HTML, CSS and one JavaScript file.

Five homepage layouts

• Search — a sky window with the resort dissolving into it and a tabbed Hotels / Flights / Car / Tour search panel straddling its edge, then top-rated stays with glass captions.
• Atlas — results beside a designed price map. Hover a stay and its pin lifts; filter by type and the map follows. On phones the map sits behind a Map / List toggle.
• Arrival — one resort told in five full-screen chapters, with a chapter index and a reservation bar that prices the stay as you scroll.
• Postcards — a dusk-coloured deck of destination postcards you deal through with a click, a drag or the arrow keys, plus a month picker for where to go when.
• Rate Ledger — no hero image: a fortnight of nightly rates for every room, set like a departures board. Pick two nights to price a stay.

Twelve inner pages

• Hotels — filters for type, price, rating and amenities, sort, grid and list views
• Hotel — gallery with lightbox, room selection, reviews and a live booking card
• Rooms & suites with a comparison table, and a four-step Checkout with promo codes
• Destinations, Offers, About, Journal, Article, Help & FAQ with live search, Contact and 404

What makes it worth paying for

• A booking flow that actually flows. Dates are validated, guests counted and prices calculated; the choice travels from search to hotel to checkout in the URL, ready to hand to a booking engine or hosted payment page.
• A working contact form. One PHP file with server-side validation, a honeypot, a time trap, a per-IP rate limit and mail-header-injection guards. Change one line to set the recipient.
• No card fields, by design. The checkout hands payment to a hosted payment page, keeping your site out of PCI scope. The documentation shows how.
• One token file. Every colour, size, space and duration lives in tokens.css — including the sky gradient that gives the template its identity.
• Accessible by construction. Skip link, one h1 per page, landmarks, visible focus, keyboard-operable tabs, menus, lightbox and postcard deck, and prefers-reduced-motion honoured throughout.
• No layout shift. Every image carries explicit dimensions and a responsive srcset.
• Full buyer documentation as a styled HTML site, not a README.

Built plainly

Seventeen HTML files, ten stylesheets and one dependency-free JavaScript file. No framework, no build step, no jQuery, no date-picker or slider library and no icon font. Open index.html by double-clicking it.

Design

The late-afternoon sky over water, used as the ground of rounded window panels — clear blue at the top fading to a warm haze at the horizon — on white, with graphite ink and pill buttons. Colour is otherwise used only as signal: stars, savings and availability. Type is Urbanist, Libre Franklin and Inconsolata.

Demo photographs are from Pexels and are not included in the licence. Every one is traced to its source in assets/img/CREDITS.md.