Copperline Plumbing & Heating — Corporate Plumbing About Page for Divi 5

The layout opens with a clean white section that splits immediately into a weighted two-column row. The left column takes roughly two-thirds of the available flex grid (16 of 24 units) and leads with an uppercase eyebrow heading at 14px in slate #4f5d73, followed by an h1 at 64px in deep navy #13233f that steps down to 46px on tablet and 36px on phone. Below it, the intro body text runs at 19px with a 1.6 line-height inside a hard 560px max-width constraint, preventing the paragraph from stretching uncomfortably on wide monitors. The CTA pair is a flex row: a solid navy button (#1c4a94, 6px border-radius, 14px vertical padding) sits beside a plain underlined text link, giving visitors two action paths without either competing for the eye. The right column is deliberately narrower (8 of 24 units) and holds a single 4:5 portrait image rendered with object-fit cover, so it fills its container edge-to-edge. On mobile the two columns stack, image moving below the text block.

The second section flips the palette entirely. A full-bleed background photo sits behind a uniform dark gradient overlay (rgba(10,26,56,0.72) at both stops, so the photo is evenly dimmed rather than directionally faded), and all text switches to near-white #f6f8fc. The four-milestone timeline beneath the eyebrow and h2 is structured as a CSS grid: four columns on desktop, two on tablet, one on phone, with 32px column gaps and 40px row gaps. Each milestone uses a 2px top border as its separator instead of a card or box component, keeping the layout visually light. Year numerals run at 48px with weight 700 and -1px letter-spacing, reading as display figures rather than body text. The team section that follows returns to white and introduces a split header row where the h2 and a short description are baseline-aligned across two proportional columns (14:10 flex ratio), a deliberate detail that prevents the heading and its supporting copy from sitting at the same height. Below it, four team members each get a 1:1 square portrait with object-fit cover and a name block anchored by the same 2px top-border treatment used in the timeline, linking the two sections visually.

The fourth section uses the solid navy #13233f background with no photo and no overlay, arranging four operating principles as numbered rows divided by full-width 2px white horizontal dividers. Each row is a flex container: a fixed 64px-wide number column (01-04, 15px, bold, 2px letter-spacing) sits beside a flex-grow heading column (h3 at 34px) and a max-360px body column, so the three elements read left-to-right at a glance on desktop and stack top-to-bottom on phone. The fifth and final section places a background photo behind a floating contact card constrained to 520px, left-aligned. The card carries its own #f2f5fa background, a 1px #d3dbe8 border, 6px radius, and 48px internal padding on all sides, making it feel lifted off the page rather than flat against it. A thin divider between the descriptive text and the booking button gives the card a clean internal rhythm. IBM Plex Sans runs through every module at every breakpoint, giving the layout a single-font consistency that suits a trade service brand competing on trust.