How this site was designed and put together.

The concept

Boutique inns tend to fall into one of two traps online: either they oversell with drone shots and exclamation points, or they underbuild with a dated booking-engine template. Marlow House was built as neither — the brief was quiet luxury and editorial restraint, the kind of place that shows up in a travel magazine because someone genuinely loved it, not because it bought the placement.

The name and founding story came first, and everything else followed from them. A fictional 1926 harbormaster's house on a fictional working Maine harbor, restored rather than reinvented — so the copy voice, the photography direction, and even the room names all lean on honesty and restraint over flourish.

Visual direction

The look sits deliberately apart from the brighter, pastel wellness aesthetic and the near-black fine-dining aesthetic used elsewhere in this portfolio. Marlow House is warm and sunlit instead — sand and linen neutrals, a weathered driftwood gray-brown for secondary text and borders, and a single deep ocean-navy accent used sparingly for buttons, links, and small details so it still reads as a signal rather than decoration.

Two typefaces carry the whole system. Newsreader, a literary serif with real character in its italics, handles every headline and gives the site an editorial, slightly old-fashioned voice without tipping into novelty. Manrope, a quiet geometric sans, carries body copy, labels, and navigation — clean enough to stay out of the way of the photography and the serif headlines.

Structure — four real pages

This is a genuine multi-page site, not a one-pager pretending to be one. Each section lives at its own address:

• index.html — the home page: hero, an introduction to the house, a room-types teaser, a section on the town and coastline, guest-experience highlights, and a closing call to book.
• rooms/index.html — a deeper look at the three room categories, each with its own rate, description, and amenities.
• about/index.html — the founding story, the three innkeepers, and the house's operating philosophy.
• contact/index.html — a booking inquiry form, directions, and a short FAQ.

Every page shares the same header and footer, and internal links are relative to each page's folder depth — pages one level down, like rooms/, reach the homepage with ../index.html and reach each other as siblings.

The imagery

Every photograph on the site — the house exterior, the coastline, the room interiors, the harbor town, the breakfast still life, and the three innkeeper portraits — was art-directed rather than sourced from stock, since Marlow House itself isn't a real property. The direction stayed consistent across the whole set: warm natural window light instead of studio lighting, real architectural and travel-photography composition instead of glossy staging, and a single warm, sunlit key across the three portraits so the innkeepers read as one consistent cast rather than three unrelated headshots.

The signature motion

The hero runs a slow, cinematic Ken Burns crossfade between two full-bleed images of the house and coastline — each one holding for nine seconds with a barely-there zoom, then dissolving into the next over a couple of unhurried seconds, on a loop. It's a deliberately slow, quiet technique rather than a flashy one, chosen because it matches the brand: nothing here is trying to grab attention quickly.

Everything else — section reveals, staggered card entrances, room-card image zooms on hover, the sticky header's shadow on scroll — runs through GSAP's ScrollTrigger, loaded from a CDN with no build step required. prefers-reduced-motion is respected throughout: visitors who've asked for less motion get the finished layout and the first hero image instantly, with the zoom and crossfade switched off rather than just slowed down.

Responsiveness and craft details

The layout was checked from a 375px phone width up through large desktop screens. The nav collapses to a slide-in panel below 860px, the multi-column grids step down to two and then one column as space tightens, and overflow-x: clip is set on both html and body so nothing — including the full-bleed hero and footer — can force horizontal scroll on a narrow screen. The room-detail sections on the rooms page alternate image-left and image-right on desktop, then stack cleanly with the image always on top on smaller screens.

The contact page's booking form is intentionally a visual demo: it validates and shows a confirmation state on submit, but doesn't send anything anywhere. That's disclosed directly on the page rather than left ambiguous, and the FAQ below it uses a simple accordion built with plain JavaScript rather than a library.

Deploying a site like this

Because there's no build step — plain HTML, CSS, and a small JavaScript file, with fonts and the animation library loaded from CDNs — deployment is just a matter of hosting static files. The most common path is Netlify: drag the project folder onto Netlify's deploy target, or connect a Git repository and let it deploy on every push, and the site is live on a Netlify subdomain within a minute or two, with a custom domain attachable afterward under Site Settings. Because every internal link in this project is relative rather than absolute, the whole folder can also be dropped into any other static host — GitHub Pages, an S3 bucket with static hosting enabled, or a traditional shared host — without changing a single link.