The Lantern House — Elegant Boutique_hotel Home Page for Divi 5

The hero section grounds everything in atmosphere before a word is read. A Pexels photograph sits behind a near-opaque dark-green gradient overlay (#0f1a15 at 68% opacity across the full width), and the headline arrives in Cormorant Garamond at 72px, weight 300, warm ivory on forest green. A 14px Jost eyebrow in uppercase with 3px letter-spacing names the location before the hotel's voice kicks in, and a 20px Jost body paragraph follows at 1.6em line height. Two buttons share a flex row below: an amber fill (#c9a45c) for the primary reservation action and a ghost outline in ivory for the secondary. A solid 2px ivory divider separates the CTAs from a footer strip of three metadata text modules (address, reception hours, breakfast hours) in 14px uppercase Jost, so guests get the essential facts without a separate contact section. The group sets a minimum height of 80vh on desktop, 70vh on tablet, and 560px on mobile.

The three middle sections share a slightly lighter #16241d background, creating a deliberate two-tone rhythm against the deeper #0f1a15 used in the hero, testimonial, and final CTA sections. The press wall opens with a full-width heading row before breaking into three equal columns, each separated by 40px. The only decoration on each column is a 2px top rule in #f2ede1, which stacks a publication name in uppercase bold Cormorant Garamond, an italic pullquote at 22px, and a muted sage attribution line. The owner story section pairs a pill-top portrait image (4:5 aspect ratio, capped at 360px wide, with border-radius 999px top and 32px bottom) with a right-hand column of 22px Cormorant body text split across three separate text modules and finished with an italic signature. A 72px column gap and vertical center-alignment give this section a magazine-spread quality that is hard to achieve with a standard text-image row.

The amenities section uses Divi's native group-carousel module to present six feature cards: three across on desktop, two on tablet, one on mobile. Each card leads with a Font Awesome icon set in an amber badge (matching the CTA button color exactly), followed by a Cormorant H3 at 22px and a short Jost descriptor in sage. Arrows are on, dot navigation is off. The testimonial section treats a pull-quote as a pure typographic object: a 160px decorative opening quotation mark in muted sage (weight 700, 0.8em line height to keep it tight), a 44px centered quote set to balance text-wrap at max-width 960px, and a 56px circular avatar with name and month attribution below. The page closes with a full-bleed photograph section where a #16241d card with a subtle 1px #2b3d33 border floats left over the background image, holding the book-direct argument, a thin divider, and the final amber CTA.

On mobile, every multi-column row collapses to a single vertical stack via flex-direction column. Section vertical padding scales down proportionally: the deeper sections drop from 200px to 88px, the lighter ones from 160px to 72px. The carousel moves to one-up slides. The hero group drops from 80px to 56px internal padding while holding a 560px minimum height, which keeps the full CTA group visible without scrolling on any modern phone screen.