Larkfield Day School — Editorial Education Student Life Page for Divi 5

The page opens with a cinematic full-bleed hero section: a Pexels photograph sits beneath a uniform dark overlay (rgba(28,22,16,0.72)) that holds the same density from edge to edge, keeping text legible regardless of the photograph's tonal range. The warm parchment background (#faf7f2) that carries the rest of the page shows briefly at the section edges before the gradient takes over. Section padding is 120px top and bottom on desktop, stepping methodically to 88px on tablet and 64px on mobile. A breadcrumb rendered in uppercase Source Sans 3 at 13px with 2px letter spacing establishes site hierarchy first, then the H1 sits in Playfair Display at 56px with -1px tracking and a 1.12 line-height, tapering to 42px on tablet and 32px on phone. The lead line is constrained to a 600px max-width and left-aligned, giving the headline room to dominate without competition from the supporting copy.

The clubs section uses deliberate asymmetric column proportions to break from a mechanical two-column grid. The section header row splits at 16/24 and 8/24 with flex-end vertical alignment, so the H4 uppercase label and the H2 heading in the wide column land at the same visual baseline as the body copy in the narrow column, a device borrowed from magazine layout. Club cards are divi/group modules with explicit background colors that signal each activity's character: white with a 1px warm border (#e3dccf) for the Sport card, which also carries a 16:9 Pexels photograph inside it; terracotta (#9a3b1f) with a Font Awesome music note icon in white for Music; near-black (#1c1a17) with cream text for Art Studio; and white for both Garden Club (with a leaf icon) and Robotics (with an inline underlined text link). Swapping the column proportions across two rows, wide-left then narrow-left, creates visual rhythm without repetition.

The photo gallery uses three equal columns with two stacked images each, alternating aspect ratios of 4:5 and 4:3 across columns so adjacent columns sit at visually different heights without any CSS grid tricks. All six images use objectFit:cover enforced directly in Divi 5's native image sizing settings, so replacing photography never breaks the proportional system. The community section shifts to white and centers a 2x2 Blurb grid: all four blurbs carry matching terracotta icon containers at 32px with 16px padding and 4px corner radius, Playfair Display titles, and Source Sans 3 body copy at 18px in warm mid-brown (#6b645a). The pullquote section is the emotional centrepiece: a decorative opening quotation mark in Playfair Display at 120px (scaling to 80px on mobile), the quote itself at 42px with text-wrap:balance, a 64px-wide 2px solid divider rule, and a two-line attribution with the pupil name in 700-weight Source Sans 3. The page closes on a solid terracotta band with a horizontal flex layout, headline left with flex-grow, and a white button plus a brief tour availability note stacked on the right, collapsing to a left-aligned single column on mobile.