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

Copperline opens with a full-width hero that layers a real Pexels photograph of a plumbing installation under a uniform navy gradient overlay (rgba(10,26,56,0.72) at both gradient stops), creating a dark, controlled tone without the colour bleed that happens when a gradient transitions between two different hues. The H1 "Plumbing services" is set in IBM Plex Sans at 56px semi-bold on desktop, stepping to 42px on tablet and 32px on phone, while a breadcrumb text module above it uses 13px uppercase with 1px letter-spacing to orient visitors without competing with the headline. A subtitle text module below the H1 is capped at max-width 600px and left-aligned, keeping the reading line short on wide monitors. Section padding contracts deliberately at each breakpoint (120px top on desktop, 88px on tablet, 64px on phone) so the hero stays proportionate rather than over-tall on small screens.

The services section uses three alternating two-column rows to present water heaters, bathrooms, and drains. Each row pairs a 4:3 locked image module on one side with a numbered label (01, 02, 03 in 13px uppercase), an H3 headline, a one-sentence body paragraph, and an inline underline text link on the other. The text column carries 48px of outer padding on desktop (24px on tablet, zero on phone), giving the content breathing room that disappears gracefully when the grid stacks. The bathroom row places its image second in the DOM and applies order: -1 at the phone breakpoint so the photograph still leads above the text on all three service blocks, maintaining the visual-first reading order without manually rearranging columns. All images use objectFit: cover against the fixed aspect ratio, so replacing a photo never distorts the grid.

Two supporting sections share the pale blue-grey background (#f2f5fa) and an asymmetric column split of 8/24 on the left for the section headline and 16/24 on the right for the content. The checklist section puts eight trust signals into a native Divi Group configured as a two-column CSS grid (columnGap 40px, collapsing to a single column on phone); each item pairs a Font Awesome checkmark icon at 18px navy (#13233f) with a 17px text module inside a flex row. The process section reuses the same asymmetric split for three numbered steps, where the numerals are plain Divi Text modules styled to 80px, weight 700, with -2px letter-spacing to act as large display figures rather than labels. Divi Divider modules in light grey (#d3dbe8) sit between the steps as separators.

The FAQ section uses five native Divi Toggle modules wrapped in a centred group (max-width 1080px outer, max-width 720px for the H2). A 2px navy top border opens the stack and 1px light-grey bottom borders divide each toggle, while the first item is set open by default so visitors see an immediate answer on load. Toggle titles are H3 at 28px on desktop scaling to 20px on phone, with open and closed states both assigned white backgrounds for a clean surface. The closing CTA band fills in mid-blue (#1c4a94) and places the headline and button group in a horizontal flex row with justifyContent space-between on desktop, which collapses to a left-aligned column on phone. The button is pale grey (#f2f5fa) with navy text and a 6px radius, paired with a 14px reassurance line beneath it that reads "Flat-rate quotes. Two-hour arrival windows."