Folio & Fable — Elegant Bookshop Home Page for Divi 5

The layout opens with a split hero built on a 16/8 asymmetric column ratio: the wider left column holds the editorial text hierarchy while a 4:5 portrait photograph fills the narrower right column flush to its edge. The parchment background (#f4efe3) and forest-green headline (#17301f) establish a palette rooted in aged paper and ink, immediately communicating the character of a physical shop rather than an online store. The H4 eyebrow is set in Karla at 14 px with 2 px letter-spacing in uppercase sage (#5a6a5c), anchoring location and identity above a 64 px Libre Baskerville H1 that tightens to 46 px on tablet and 36 px on phone. Vertical section padding scales explicitly at three breakpoints (120 px desktop, 80 px tablet, 56 px phone), so the hero breathes on large screens without crushing on smaller ones. The two CTA elements sit in a flex row: a solid amber (#9a5f00) button with zero border-radius and a ghost text link styled with an underline, giving a primary and secondary action without visual noise.

The second section switches to warm off-white (#fffdf7) and introduces four Blurb modules in a 2x2 grid. Each blurb carries a square amber icon container (zero border-radius, 16 px padding) with a Font Awesome icon selected for each offering: a book for new stock, a document page for second-hand, a coffee cup for the cafe, and a calendar for events. Section headings are in Libre Baskerville, body copy in Karla at 18 px sage, and the centered section title is constrained to 810 px max-width so it never over-extends on widescreen monitors.

The staff-picks section returns to parchment and uses a CSS Grid Group module: one featured card spans both columns at a 2:1 landscape ratio, while four further cards sit below in the grid at 4:3 portrait. Each card pairs a cover image with an H3 book title and a small bordered badge showing genre and the name of the recommending bookseller, set in 12 px uppercase Karla inside a 2 px forest-green border. A justified flex header above the grid balances the section heading on the left against a ghost underline-button link on the right, a layout pattern that recurs throughout.

A full-bleed pull-quote section follows: a background photograph sits behind a 72% dark overlay (rgba(16,36,26,0.72)), and a decorative 120 px Libre Baskerville quotation mark opens the quote text, which runs at 42 px on desktop and scales to 26 px on phone. The layout closes on a newsletter section pairing a three-item benefit list (FontAwesome checkmarks in forest green beside short Karla copy lines) with a contact-form card. The card has a parchment background, bottom-border-only inputs consistent with every button in the layout, and contains Name and Email fields only, keeping the commitment light and the visual language coherent from first section to last.