Hotel and Resort Website Template

A quiet, photo-led hotel site

Hotel guests decide on atmosphere first and price second. This template uses large imagery, generous white space and a restrained palette so your rooms and setting do the persuading. Six pages cover the whole journey: home, rooms, room detail, amenities, gallery and a booking enquiry.

Edit in the right order

1. Brand. Replace "Saltmarsh Bay Resort" in the header, footer, titles and meta descriptions, then update the address, phone number and email.
2. Colours and fonts. The teal and clay palette is in the :root block of assets/style.css. System serif fonts keep the pages fast.
3. Rooms. Edit assets/rooms.js (name, price, size, guests, bed, view and description). Then edit the cards in rooms.html and index.html so the lists match.
4. Images. Replace the illustrated scenes with your own photography. Shoot rooms in daylight, keep verticals straight and show the view.
5. Amenities and gallery. Edit the eight amenity cards and the gallery tiles to match what you really offer.

The availability bar and the enquiry form

The bar under the home hero sends the chosen dates and guests to booking.html, where small inline script pre-fills the form. The room detail page links to booking.html?room=N so the right room is selected. The form posts by mailto out of the box. Replace the action with Formspree or your booking engine endpoint when you go live.

Good practice for hotel sites

State check-in and check-out times, cancellation terms and what breakfast includes near the form. Show real prices ("from") so visitors can compare. Add structured data for a hotel and your Google Business Profile for local search. Make sure photos have meaningful alt text.

Going live

Upload the folder to any static host. For direct bookings at scale (rates, inventory, payments, a guest area), DEV3 can build a booking system around this look.

Accessibility, motion and licence

The template uses semantic landmarks, a skip link, visible focus styles and readable contrast. Motion is limited to gentle fade-ins and hover states, and it switches off for visitors whose device asks for reduced motion. There is no 3D, no WebGL and nothing to load from a CDN. Everything is free for personal and commercial use, and the brand names, people and prices are fictional, so replace them before launch. The README in the zip lists every file and the first edits to make.